hlaueriksson/2017-06-30-managing-content-for-a-jamstack-site-with-netlify-cms.md

## 2017-06-30-managing-content-for-a-jamstack-site-with-netlify-cms.md

      
    Raw
  

              2017-06-30-managing-content-for-a-jamstack-site-with-netlify-cms.md
            
          
    Title: Managing content for a JAMstack site with Netlify CMS

URL: http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/


## apple-jam.txt
---
date: 2017-06-24T18:38:50.121Z
title: Apple Jam
layout: recipe
description: Jam made of apples tastes awesome.
image:
  text: Apples
  url: /images/uploads/apples.jpg
ingredients:
  - ingredient:
      amount: '1'
      name: apples
      unit: kg
  - ingredient:
      amount: '0.5'
      name: water
      unit: dl
  - ingredient:
      amount: '5'
      name: sugar
      unit: dl
---
## 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 = "http://jamstack-cms.netlify.com/"
languageCode = "en-us"
title = "JAMstack Recipes"

## config.yml
backend:
  name: github
  repo: hlaueriksson/jamstack-cms # Path to your Github repository
  branch: master # Branch to update

media_folder: "src/site/static/images/uploads" # Media files will be stored here
public_folder: "/images/uploads" # The src attribute for uploaded media

collections:
  - name: "recipe" # Used in routes, e.g. /admin/collections/recipe
    label: "Recipe" # Used in the UI
    folder: "src/site/content/recipe" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template i.e. title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Date", name: "date", widget: "datetime"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Layout", name: "layout", widget: "hidden", default: "recipe"}
      - {label: "Description", name: "description", widget: "text"}
      - label: "Image"
        name: "image"
        widget: "object"
        fields:
          - {label: "Text", name: "text", widget: "string"}
          - {label: "URL", name: "url", widget: "image"}
      - label: "Ingredients"
        name: "ingredients"
        widget: "list"
        fields:
          - label: "Ingredient"
            name: "ingredient"
            widget: "object"
            fields:
              - {label: "Amount", name: "amount", widget: "number"}
              - {label: "Unit", name: "unit", widget: "select", options: ["", "dl", "l", "kg"]}
              - {label: "Name", name: "name", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@~0.4/dist/cms.css" />

</head>
<body>
  <script src="https://unpkg.com/netlify-cms@~0.4/dist/cms.js"></script>
</body>
</html>

## 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="{{ $.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>{{ .ingredient.amount }} {{ .ingredient.unit }} {{ .ingredient.name }}</li>
        {{ end }}
      </ul>
      <ul id="imperial" class="ingredients"></ul>

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

{{ partial "footer" . }}

## summary.html
<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
<p>{{ $.Param "description" }}</p>
<a href="{{ .Permalink }}">
  <img src="{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}">
</a>
	---
	date: 2017-06-24T18:38:50.121Z
	title: Apple Jam
	layout: recipe
	description: Jam made of apples tastes awesome.
	image:
	text: Apples
	url: /images/uploads/apples.jpg
	ingredients:
	- ingredient:
	amount: '1'
	name: apples
	unit: kg
	- ingredient:
	amount: '0.5'
	name: water
	unit: dl
	- ingredient:
	amount: '5'
	name: sugar
	unit: dl
	---
	## 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 = "http://jamstack-cms.netlify.com/"
	languageCode = "en-us"
	title = "JAMstack Recipes"
	backend:
	name: github
	repo: hlaueriksson/jamstack-cms # Path to your Github repository
	branch: master # Branch to update

	media_folder: "src/site/static/images/uploads" # Media files will be stored here
	public_folder: "/images/uploads" # The src attribute for uploaded media

	collections:
	- name: "recipe" # Used in routes, e.g. /admin/collections/recipe
	label: "Recipe" # Used in the UI
	folder: "src/site/content/recipe" # The path to the folder where the documents are stored
	create: true # Allow users to create new documents in this collection
	slug: "{{slug}}" # Filename template i.e. title.md
	fields: # The fields for each document, usually in front matter
	- {label: "Date", name: "date", widget: "datetime"}
	- {label: "Title", name: "title", widget: "string"}
	- {label: "Layout", name: "layout", widget: "hidden", default: "recipe"}
	- {label: "Description", name: "description", widget: "text"}
	- label: "Image"
	name: "image"
	widget: "object"
	fields:
	- {label: "Text", name: "text", widget: "string"}
	- {label: "URL", name: "url", widget: "image"}
	- label: "Ingredients"
	name: "ingredients"
	widget: "list"
	fields:
	- label: "Ingredient"
	name: "ingredient"
	widget: "object"
	fields:
	- {label: "Amount", name: "amount", widget: "number"}
	- {label: "Unit", name: "unit", widget: "select", options: ["", "dl", "l", "kg"]}
	- {label: "Name", name: "name", widget: "string"}
	- {label: "Body", name: "body", widget: "markdown"}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Content Manager</title>

	<link rel="stylesheet" href="https://unpkg.com/netlify-cms@~0.4/dist/cms.css" />

	</head>
	<body>
	<script src="https://unpkg.com/netlify-cms@~0.4/dist/cms.js"></script>
	</body>
	</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="{{ $.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>{{ .ingredient.amount }} {{ .ingredient.unit }} {{ .ingredient.name }}</li>
	{{ end }}
	</ul>
	<ul id="imperial" class="ingredients"></ul>

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

	{{ partial "footer" . }}
	<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
	<p>{{ $.Param "description" }}</p>
	<a href="{{ .Permalink }}">
	<img src="{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}">
	</a>