hlaueriksson/.deployment

## .deployment
[config]
command = deploy.cmd

## 2017-05-31-building-a-jamstack-site-with-hugo-and-azure-functions.md

      
    Raw
  

              2017-05-31-building-a-jamstack-site-with-hugo-and-azure-functions.md
            
          
    Title: Building a JAMstack site with Hugo and Azure Functions

URL: http://conductofcode.io/post/building-a-jamstack-site-with-hugo-and-azure-functions/


## api.toml
[recipe]
get_ingredients = "https://jamstack.azurewebsites.net/api/Ingredients/"

[submit]
post_recipe = "https://jamstack.azurewebsites.net/api/Recipe"

## app.js
// nav
$(function () {
  $("nav a[href='" + window.location.href + "']").addClass("active");
});

// recipe
$(function () {
  if ($("body#recipe").length) {
    let slug = $("#data").data("slug");
    let url = $("#data").data("api");
    $.getJSON(url + slug, function (data) {
      $.each(data, function (index, ingredient) {
        $("#imperial").append("<li>" + ingredient.Amount + " " + ingredient.Unit + " " + ingredient.Name + "</li>");
      })
      $("#measurements").show();
    });
    $("#system").change(function () {
      $("#metric").toggle();
      $("#imperial").toggle();
    });
  }
})

// submit
$(function () {
  if ($("body#submit").length) {
    let form = $("form#recipe");
    form.submit(function (e) {
      e.preventDefault();
      let data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, {});
      $.ajax({
        type: form.attr("method"),
        url: form.attr("action"),
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (data) {
          form.hide();
          $("#result").append(data).show();
        }
      });
    });
  }
})

## apple-jam.txt
+++
date = "2017-05-23T22:38:56+02:00"
draft = false
title = "Apple Jam"
layout = "recipe"

description = "Jam made of apples tastes awesome."

[image]
text = "Apples"
url = "apples.jpg"

[[ingredients]]
amount = 1
unit = "kg"
name = "apples"

[[ingredients]]
amount = 0.5
unit = "dl"
name = "water"

[[ingredients]]
amount = 5
unit = "dl"
name = "sugar"
+++

## Method

1. Scale and kernel of the apples. Place the peeled apple slices in a bowl of cold water so that they do not darken.
2. Lift the apples to a saucepan and add water. Boil on low heat and stir regularly. Stir the sugar when the apples soften (feel a test piece). Let boil again.
3. Mix the mash to the desired consistency with a rod mixer.
4. In the fridge the mash stays for 1-2 weeks. In freezer it will last up to a year.

## config.toml
baseURL = "https://hlaueriksson.github.io/jamstack/"
languageCode = "en-us"
title = "JAMstack Recipes"

## deploy.cmd
@echo off
echo Deploying Functions ...
xcopy "%DEPLOYMENT_SOURCE%\src\api" %DEPLOYMENT_TARGET% /Y /S

## footer.html
      <footer class="footer">
        <p>{{ .Site.Title }}</p>
      </footer>
    </div> <!-- /container -->

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <script src="app.js"></script>
  </body>
</html>

## function.json
{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "name": "req",
      "type": "httpTrigger",
      "direction": "in",
      "route": "Ingredients/{recipe}",
      "methods": [
        "get"
      ]
    },
    {
      "name": "$return",
      "type": "http",
      "direction": "out"
    }
  ]
}

## header.html
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <title>{{ .Site.Title }}</title>
    <base href="{{ .Site.BaseURL }}">
    <link href="app.css" rel="stylesheet">
    {{ .Hugo.Generator }}
  </head>
  <body id="{{ .Layout | default "page" }}">
    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills float-right">
            <li class="nav-item">
              <a class="nav-link" href="{{ .Site.BaseURL }}">Home</a>
            </li>
            {{ range where .Site.Pages.ByTitle ".Params.navigation" true }}
              <li class="nav-item">
                <a class="nav-link" href="{{ .Permalink }}">{{ .Title }}</a>
              </li>
            {{ end }}
          </ul>
        </nav>
        <h3 class="text-muted">{{ .Site.Title }}</h3>
      </div>

## recipe.html
{{ partial "header" . }}

<div id="data" data-slug="{{ .File.TranslationBaseName }}" data-api="{{ .Site.Data.api.recipe.get_ingredients }}"></div>

<div class="row marketing">
  <div class="col">
      <h1>{{ .Title }}</h1>
      <p>{{ $.Param "description" }}</p>
      <img src="{{ .URL }}{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}" />

      <div id="measurements">
        <span>Display measurements in:</span>
        <select id="system">
          <option value="metric">Metric System</option>
          <option value="imperial">Imperial System</option>
        </select>
      </div>

      <h2>Ingredients</h2>
      <ul id="metric" class="ingredients">
        {{ range $.Param "ingredients" }}
          <li>{{ .amount }} {{ .unit }} {{ .name }}</li>
        {{ end }}
      </ul>
      <ul id="imperial" class="ingredients"></ul>

      {{ .Content | markdownify }}
  </div>
</div>

{{ partial "footer" . }}

## run.csx
using System.Net;

public static async Task<HttpResponseMessage> Run(string recipe, HttpRequestMessage req, TraceWriter log)
{
  log.Info($"Get ingredients for {recipe}");

  var result = GetIngredients(recipe);

  return result != null
    ? req.CreateResponse(HttpStatusCode.OK, result)
    : req.CreateResponse(HttpStatusCode.BadRequest, $"Recipe {recipe} is invalid");
}

public static IEnumerable<Ingredient> GetIngredients(string recipe)
{
  switch (recipe)
  {
    case "apple-jam":
      return new[]
      {
          new Ingredient(2.2, "lbs", "apples"),
          new Ingredient(1.7, "fl.oz.", "water"),
          new Ingredient(17, "fl.oz.", "sugar")
      };
    case "lingonberry-jam":
      return new[]
      {
          new Ingredient(6.8, "fl.oz.", "water"),
          new Ingredient(4.4, "lbs", "sugar"),
          new Ingredient(2.2, "lbs", "lingonberries")
      };
    case "strawberry-jam":
      return new[]
      {
          new Ingredient(17, "fl.oz.", "sugar"),
          new Ingredient(68, "fl.oz.", "strawberries")
      };
    default:
      return null;
  }
}

public class Ingredient
{
  public double Amount { get; }
  public string Unit { get; }
  public string Name { get; }

  public Ingredient(double amount, string unit, string name)
  {
    Amount = amount;
    Unit = unit;
    Name = name;
  }
}
	[recipe]
	get_ingredients = "https://jamstack.azurewebsites.net/api/Ingredients/"

	[submit]
	post_recipe = "https://jamstack.azurewebsites.net/api/Recipe"
	// nav
	$(function () {
	$("nav a[href='" + window.location.href + "']").addClass("active");
	});

	// recipe
	$(function () {
	if ($("body#recipe").length) {
	let slug = $("#data").data("slug");
	let url = $("#data").data("api");
	$.getJSON(url + slug, function (data) {
	$.each(data, function (index, ingredient) {
	$("#imperial").append("<li>" + ingredient.Amount + " " + ingredient.Unit + " " + ingredient.Name + "</li>");
	})
	$("#measurements").show();
	});
	$("#system").change(function () {
	$("#metric").toggle();
	$("#imperial").toggle();
	});
	}
	})

	// submit
	$(function () {
	if ($("body#submit").length) {
	let form = $("form#recipe");
	form.submit(function (e) {
	e.preventDefault();
	let data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, {});
	$.ajax({
	type: form.attr("method"),
	url: form.attr("action"),
	data: JSON.stringify(data),
	contentType: "application/json",
	success: function (data) {
	form.hide();
	$("#result").append(data).show();
	}
	});
	});
	}
	})
	+++
	date = "2017-05-23T22:38:56+02:00"
	draft = false
	title = "Apple Jam"
	layout = "recipe"

	description = "Jam made of apples tastes awesome."

	[image]
	text = "Apples"
	url = "apples.jpg"

	[[ingredients]]
	amount = 1
	unit = "kg"
	name = "apples"

	[[ingredients]]
	amount = 0.5
	unit = "dl"
	name = "water"

	[[ingredients]]
	amount = 5
	unit = "dl"
	name = "sugar"
	+++

	## Method

	1. Scale and kernel of the apples. Place the peeled apple slices in a bowl of cold water so that they do not darken.
	2. Lift the apples to a saucepan and add water. Boil on low heat and stir regularly. Stir the sugar when the apples soften (feel a test piece). Let boil again.
	3. Mix the mash to the desired consistency with a rod mixer.
	4. In the fridge the mash stays for 1-2 weeks. In freezer it will last up to a year.
	baseURL = "https://hlaueriksson.github.io/jamstack/"
	languageCode = "en-us"
	title = "JAMstack Recipes"
	@echo off
	echo Deploying Functions ...
	xcopy "%DEPLOYMENT_SOURCE%\src\api" %DEPLOYMENT_TARGET% /Y /S
	{
	"disabled": false,
	"bindings": [
	{
	"authLevel": "anonymous",
	"name": "req",
	"type": "httpTrigger",
	"direction": "in",
	"route": "Ingredients/{recipe}",
	"methods": [
	"get"
	]
	},
	{
	"name": "$return",
	"type": "http",
	"direction": "out"
	}
	]
	}
	{{ partial "header" . }}

	<div id="data" data-slug="{{ .File.TranslationBaseName }}" data-api="{{ .Site.Data.api.recipe.get_ingredients }}"></div>

	<div class="row marketing">
	<div class="col">
	<h1>{{ .Title }}</h1>
	<p>{{ $.Param "description" }}</p>
	<img src="{{ .URL }}{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}" />

	<div id="measurements">
	<span>Display measurements in:</span>
	<select id="system">
	<option value="metric">Metric System</option>
	<option value="imperial">Imperial System</option>
	</select>
	</div>

	<h2>Ingredients</h2>
	<ul id="metric" class="ingredients">
	{{ range $.Param "ingredients" }}
	<li>{{ .amount }} {{ .unit }} {{ .name }}</li>
	{{ end }}
	</ul>
	<ul id="imperial" class="ingredients"></ul>

	{{ .Content \| markdownify }}
	</div>
	</div>

	{{ partial "footer" . }}
	using System.Net;

	public static async Task<HttpResponseMessage> Run(string recipe, HttpRequestMessage req, TraceWriter log)
	{
	log.Info($"Get ingredients for {recipe}");

	var result = GetIngredients(recipe);

	return result != null
	? req.CreateResponse(HttpStatusCode.OK, result)
	: req.CreateResponse(HttpStatusCode.BadRequest, $"Recipe {recipe} is invalid");
	}

	public static IEnumerable<Ingredient> GetIngredients(string recipe)
	{
	switch (recipe)
	{
	case "apple-jam":
	return new[]
	{
	new Ingredient(2.2, "lbs", "apples"),
	new Ingredient(1.7, "fl.oz.", "water"),
	new Ingredient(17, "fl.oz.", "sugar")
	};
	case "lingonberry-jam":
	return new[]
	{
	new Ingredient(6.8, "fl.oz.", "water"),
	new Ingredient(4.4, "lbs", "sugar"),
	new Ingredient(2.2, "lbs", "lingonberries")
	};
	case "strawberry-jam":
	return new[]
	{
	new Ingredient(17, "fl.oz.", "sugar"),
	new Ingredient(68, "fl.oz.", "strawberries")
	};
	default:
	return null;
	}
	}

	public class Ingredient
	{
	public double Amount { get; }
	public string Unit { get; }
	public string Name { get; }

	public Ingredient(double amount, string unit, string name)
	{
	Amount = amount;
	Unit = unit;
	Name = name;
	}
	}