Forestry setup

DirtyF · DirtyF · commit 8af8dbf6bc4c · 2020-07-03T10:32:08.000+02:00
diff --git a/.eleventy.js b/.eleventy.js
@@ -55,6 +55,13 @@ module.exports = function(config) {
   // Plugins
   config.addPlugin(rssPlugin);
   config.addPlugin(syntaxHighlight);
+  
+  /* Forestry instant previews 
+  if( process.env.ELEVENTY_ENV == "staging" ) {
+    eleventyConfig.setBrowserSyncConfig({
+      host: "0.0.0.0"
+    });
+  }*/
 
   // 404
   config.setBrowserSyncConfig({
diff --git a/.forestry/front_matter/templates/post.yml b/.forestry/front_matter/templates/post.yml
@@ -0,0 +1,17 @@
+---
+label: Post
+hide_body: false
+fields:
+- type: text
+  name: title
+  label: title
+- type: datetime
+  name: date
+  label: date
+  default: now
+  config:
+    date_format: YYYY-MM-DD
+    export_format: YYYY-MM-DD
+- type: list
+  name: tags
+  label: tags
diff --git a/.forestry/front_matter/templates/tokens-colors.yml b/.forestry/front_matter/templates/tokens-colors.yml
@@ -0,0 +1,96 @@
+---
+label: Design Tokens
+hide_body: true
+fields:
+- type: field_group
+  name: size-scale
+  label: size-scale
+  fields:
+  - type: text
+    name: base
+    label: base
+  - type: text
+    name: '300'
+    label: '300'
+  - type: text
+    name: '500'
+    label: '500'
+  - type: text
+    name: '600'
+    label: '600'
+  - type: text
+    name: '700'
+    label: '700'
+  - type: text
+    name: '800'
+    label: '800'
+  - type: text
+    name: '900'
+    label: '900'
+  - type: text
+    name: max
+    label: max
+- type: field_group
+  name: colors
+  label: colors
+  fields:
+  - type: color
+    name: primary
+    label: primary
+    config:
+      color_format: Hex
+    default: "#173854"
+  - type: color
+    name: primary-shade
+    label: primary-shade
+    config:
+      color_format: Hex
+    default: "#102538"
+  - type: color
+    name: primary-glare
+    label: primary-glare
+    config:
+      color_format: Hex
+    default: "#22547c"
+  - type: color
+    name: highlight
+    label: highlight
+    config:
+      color_format: Hex
+    default: "#fedb8b"
+  - type: color
+    name: light
+    label: light
+    config:
+      color_format: Hex
+    default: "#ffffff"
+  - type: color
+    name: mid
+    label: mid
+    config:
+      color_format: Hex
+    default: "#cccccc"
+  - type: color
+    name: dark
+    label: dark
+    config:
+      color_format: Hex
+    default: "#333333"
+  - type: color
+    name: slate
+    label: slate
+    config:
+      color_format: Hex
+    default: "#404040"
+- type: field_group
+  name: fonts
+  label: fonts
+  fields:
+  - type: textarea
+    name: base
+    label: base
+  - type: text
+    name: serif
+    label: serif
+pages:
+- src/_data/tokens.json
diff --git a/.forestry/settings.yml b/.forestry/settings.yml
@@ -0,0 +1,34 @@
+---
+new_page_extension: md
+auto_deploy: false
+admin_path: ''
+webhook_url: 
+sections:
+- type: heading
+  label: Content
+- type: directory
+  path: src/posts
+  label: Posts
+  create: documents
+  match: "*.md"
+  templates:
+  - post
+- type: heading
+  label: Globals
+- type: document
+  path: src/_data/tokens.json
+  label: Theme settings
+upload_dir: src/images
+public_path: "/images"
+front_matter_path: ''
+use_front_matter_path: false
+file_template: ":filename:"
+build:
+  preview_env:
+  - ELEVENTY_ENV=development
+  preview_output_directory: src/dist
+  install_dependencies_command: npm install
+  preview_docker_image: forestryio/node:12
+  mount_path: "/srv"
+  working_dir: "/srv"
+  instant_preview_command: npm start
diff --git a/README.md b/README.md
@@ -1,27 +1,25 @@
 # A simple starter kit for Eleventy
 
-Hylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Netlify CMS](https://www.netlifycms.org/) pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend it for yourself.
+Hylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Forestry CMS](https://forestry.io/) pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend it for yourself.
 
-Get started now by **[deploying Hylia to Netlify.][deploy-to-netlify]**
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]
+[![Import to Forestry](https://assets.forestry.io/import-to-forestryK.svg)](https://app.forestry.io/quick-start?repo=dirtyf/hylia&provider=github&branch=forestry&engine=other&preview=https://hankchizljaw.imgix.net/hylia-github.jpg?auto=format&q=60)
 
 <img src="https://hankchizljaw.imgix.net/hylia-github.jpg?auto=format&q=60" width="550" />
 
 ## Features
 
 Hylia version 0.7.0 features:
 
-✍️ A pre-configured [Netlify CMS](https://www.netlifycms.org/) setup  
 🎨 Customisable design tokens to make it your own  
 🌍 Customisable global data and navigation  
 📂 Tags and tag archives  
-✅ Progressively enhanced, semantic and accessible  
 🎈 _Super_ lightweight front-end  
+✅ Progressively enhanced, semantic and accessible  
 🚰 Sass powered CSS system with utility class generator  
 ⚙️ Service worker that caches pages so people can read your articles offline  
 🚀 An RSS feed for your posts  
 💌 A basic contact form, ready for [Netlify Forms](https://docs.netlify.com/forms/setup/#html-forms)
+✍️ A pre-configured [Forestry CMS](https://forestry.io/) setup
 
 ## Roadmap
 
@@ -38,22 +36,6 @@ Hylia version 0.7.0 features:
 
 ---
 
-## Getting started
-
-### Method one: One-Click Deploy to Netlify
-
-You can [deploy Hylia to Netlify with one click][deploy-to-netlify] and you’ll be up and running in minutes!
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]
-
-I recorded a quick start video of me deploying Hylia to Netlify and getting the CMS set up. [Check it out here](https://youtu.be/0hM_0BH-Y_A).
-
-### Method two: Clone / Fork
-
-1. Clone or fork this repo: `git clone https://github.com/hankchizljaw/hylia`
-2. `cd` into the project directory and run `npm install`
-3. Once all the dependencies are installed run `npm start`
-4. Open your browser at `http://localhost:8080` and away you go!
 
 ## Terminal commands
 
@@ -83,18 +65,11 @@ npm run sass:tokens
 
 ## Getting started with the CMS
 
-Before you can use the CMS, you need to do some config in Netlify. Luckily they provide a [very handy guide to get started](https://www.netlify.com/docs/identity/).
+[![Import to Forestry](https://assets.forestry.io/import-to-forestryK.svg)](https://app.forestry.io/quick-start?repo=dirtyf/hylia&provider=github&branch=forestry&engine=other&preview=https://camo.githubusercontent.com/8bae59778d46d15e98e701d5b6f4d0cb3a2cb880/68747470733a2f2f68616e6b6368697a6c6a61772e696d6769782e6e65742f68796c69612d6769746875622e6a70673f6175746f3d666f726d617426713d3630)
 
-In short, though:
+Once the site is imported in Forestry, go to settings/previews to start the preview server.
 
-- Once you’ve set up the site on Netlify, go to “Settings” > “Identity” and enable Identity
-- Scroll down to the “Git Gateway” area, click “Enable Git Gateway” and follow the steps
-- Click the “Identity” tab at the top
-- Once you’ve enabled identity, click “Invite Users”
-- Check the invite link in your inbox and click the link in the email that’s sent to you
-- Set a password in the popup box
-- Go to `/admin` on your site and login
-- You’re in and ready to edit your content!
+You'll be able to create drafts and preview the final rendering before publishing.
 
 ## Design Tokens and Styleguide
 
@@ -108,7 +83,7 @@ Although Hylia has a pretty simple design, you can configure the core design tok
 
 ---
 
-To change the design tokens in the CMS, find the “Globals” in the sidebar then in the presented options, select “Theme Settings”.
+To change the design tokens in the CMS, click on “theme settings” in the sidebar.
 
 To change the design tokens directly, edit [`_src/data/tokens.json`](https://github.com/hankchizljaw/hylia/blob/master/src/_data/tokens.json).
 
@@ -182,7 +157,7 @@ Pass in the key of one of your breakpoints set in `$stalfos-config['breakpoints'
 
 ## CMS
 
-Hylia has [Netlify CMS](https://www.netlifycms.org/) pre-configured as standard. You can customise the configuration by editing [`src/admin/config.yml`](https://github.com/hankchizljaw/hylia/blob/master/src/admin/config.yml).
+Hylia has [Forestry CMS](https://forestry.io/) pre-configured as standard. You can customise the configuration by editing [`.forestry/settings.yml`](https://github.com/DirtyF/hylia/blob/forestry/.forestry/settings.yml).
 
 ### Content that you can edit
 
@@ -205,4 +180,3 @@ The stuff that I need the most help with is:
 - [Webmentions](https://www.w3.org/TR/webmention/)
 - Performance
 
-[deploy-to-netlify]: https://app.netlify.com/start/deploy?repository=https://github.com/hankchizljaw/hylia&stack=cms
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "semver": "^6.3.0",
     "slugify": "^1.4.0",
     "stalfos": "github:hankchizljaw/stalfos#c8971d22726326cfc04089b2da4d51eeb1ebb0eb"
-  },
+ },
   "devDependencies": {
     "@erquhart/rollup-plugin-node-builtins": "^2.1.5",
     "bl": "^3.0.0",
diff --git a/src/_data/tokens.json b/src/_data/tokens.json
@@ -1,12 +1,12 @@
 {
   "size-scale": {
-    "base": "1rem",
     "300": "0.8rem",
     "500": "1.25rem",
     "600": "1.56rem",
     "700": "1.95rem",
     "800": "2.44rem",
     "900": "3.05rem",
+    "base": "1rem",
     "max": "4rem"
   },
   "colors": {
diff --git a/src/index.md b/src/index.md
@@ -7,6 +7,9 @@ metaDesc: 'Hylia is a lightweight Eleventy starter kit to help you to create you
 socialImage: ''
 ---
 
-Hylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Netlify CMS](https://www.netlifycms.org/) pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend yourself. It’s by [Andy Bell](https://twitter.com/hankchizljaw) and [friends](https://github.com/aarongustafson/hylia/graphs/contributors).
+Hylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Forestry
+CMS](https://forestry.io/) pre-configured, so that you can one-click install a
+progressive, accessible blog in minutes. It also gives you a well organised
+starting point to extend yourself.
 
-Get started now by [deploying Hylia to Netlify.](https://app.netlify.com/start/deploy?repository=https://github.com/hankchizljaw/hylia&stack=cms)
+Get started now by [deploying Hylia to Netlify.](https://app.netlify.com/start/deploy?repository=https://github.com/dirtyf/hylia)
diff --git a/src/posts/a-post-with-code-samples.md b/src/posts/a-post-with-code-samples.md
@@ -6,7 +6,11 @@ tags:
   - code
   - blog
 ---
-The best way to demo a code post is to display a real life post, so check out this one from [andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/) about a full bleed CSS utility.
+
+The best way to demo a code post is to display a real life post, so check out
+this one from
+[andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/)
+about a full bleed CSS utility.
 
 - - -
 
@@ -49,7 +53,7 @@ The `.full-bleed` utility gives those elements prominence and _importantly_ keep
 }
 ```
 
-Having a container like `.wrapper` helps to create consistent, centred content.  
+Having a container like `.wrapper` helps to create consistent, centred content.
 
 - - -
 
diff --git a/src/posts/a-post-with-figures-and-video.md b/src/posts/a-post-with-figures-and-video.md
@@ -6,7 +6,10 @@ tags:
   - blog
   - media
 ---
-A post to demonstrate how a blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
+
+A post to demonstrate how a blog post looks on Hylia. Content is all set in the
+“Body” field as markdown and Eleventy transforms it into a proper HTML post. You
+can also edit the markdown file directly if you prefer not to use the CMS.
 
 If you want to make an image bleed-out, add a title attribute to it and the front-end will automatically wrap it in a `<figure>` tag for you.
 
diff --git a/src/posts/a-scheduled-post.md b/src/posts/a-scheduled-post.md
@@ -1,13 +1,16 @@
 ---
 title: A scheduled post
-date: '2022-06-18'
+date: 2022-06-18
 tags:
-  - demo-content
-  - simple-post
-  - blog
+- demo-content
+- simple-post
+- blog
+
 ---
 
-This post is scheduled for the future, specifically mid-2022. Hopefully you're still blogging by then too. Once that date ticks by, this post will automatically become published and visible.
+This post is scheduled for the future, specifically mid-2022. Hopefully you're
+still blogging by then too. Once that date ticks by, this post will
+automatically become published and visible.
 
 Otherwise, below is some styled content for you to play with.
 
diff --git a/src/posts/a-simple-post.md b/src/posts/a-simple-post.md
