Add git build system (#6)

* Initial structure refactor

* Minor data refactor

* Add basic git lifecycle

* Add git-builds + postcss plugins

* Add postcss hook plugin

* Minor refactor

* Fix race condition

* Update ignores

* Add basic sidebar nav

* Fix intra-doc anchor bug

* Minor refactor

* Add recursive navigation

* Add mobile drawer

* Fix navbar

* Add hidden property

* Minor optimise

* Add support for hidden dirs

* Minor dev fix

* Major git build fix + refactor

.eleventy.js

@@ -1,40 +1,65 @@
+const path = require('path')
 const { DateTime } = require('luxon')
 const readingTime = require('reading-time')
 const tocPlugin = require('eleventy-plugin-toc')
-const proseFilter = require('./utils/prose')
+const postcssPlugin = require('eleventy-plugin-postcss')
+const navigationPlugin = require('@11ty/eleventy-navigation')
+
+const gitBuildPlugin = require('./utils/plugins/git-build')
+const markdown = require('./utils/parsers/markdown')
+const slugify = require('./utils/filters/slugify')
+
+const pkg = require('./package.json')
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.setUseGitIgnore(false)
+
+  eleventyConfig.addPassthroughCopy('import-map.json')
+  eleventyConfig.addPassthroughCopy(
+    path.join(
+      pkg.eleventy.dir.input,
+      'assets',
+      '/**/[!_]*.{png,jpg,jpeg,webp,svg,gif,bmp,ico}'
+    )
+  )
+
+  eleventyConfig.addPlugin(gitBuildPlugin, {
+    repos: [
+      { name: 'blog' },
+      {
+        name: 'open-governance',
+        cloneOptions: {
+          '--branch': 'website-build',
+        },
+      },
+    ],
+    clean: false,
+  })
+  eleventyConfig.addPlugin(postcssPlugin)
+  eleventyConfig.addPlugin(navigationPlugin)
   eleventyConfig.addPlugin(tocPlugin, {
     tags: ['h2', 'h3', 'h4'],
   })
 
-  eleventyConfig.addFilter('prose', proseFilter)
-  eleventyConfig.addFilter(
-    'readingTime',
-    (str) => readingTime(str, { wordsPerMinute: 250 }).text
-  )
-  eleventyConfig.addFilter('readable', (date) =>
-    DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_FULL)
-  )
-  eleventyConfig.addFilter('blobsToNavigation', (list) =>
-    list.reduce((rv, x) => {
-      ;(rv[x['parent']] = rv[x['parent']] || []).push(x)
-      return rv
-    }, {})
-  )
+  eleventyConfig.addFilter('slugify', slugify)
+  eleventyConfig.addFilter('readable', (date) => {
+    return DateTime.fromJSDate(date).toLocaleString(
+      DateTime.DATE_FULL
+    )
+  })
+  eleventyConfig.addFilter('readingTime', (str) => {
+    return readingTime(str, { wordsPerMinute: 250 }).text
+  })
 
-  eleventyConfig.addPassthroughCopy('import-map.json')
-  eleventyConfig.addPassthroughCopy('assets/favicon.ico')
+  eleventyConfig.addWatchTarget('postcss.config.js')
+  eleventyConfig.addWatchTarget('tailwind.config.js')
+
+  eleventyConfig.setLibrary('md', markdown)
 
   eleventyConfig.setNunjucksEnvironmentOptions({
     throwOnUndefined: true,
     autoescape: false,
   })
 
-  return {
-    dir: {
-      input: 'src',
-      output: 'dist',
-    },
-  }
+  return pkg.eleventy
 }

.eleventyignore

@@ -0,0 +1,86 @@
+# Eleventy fetch cache
+.cache/
+
+# Build output
+dist/
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/caching#zero-installs
+
+#!.yarn/cache
+.pnp.*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Dependency directories
+**/node_modules/**
+**/jspm_packages/**
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

.gitignore

@@ -2,9 +2,11 @@
 .cache/
 
 # Build output
-site/
 dist/
-build/
+
+# Cloned repositories during build
+src/content/blog/
+src/content/open-governance/
 
 # Yarn
 .yarn/*
@@ -53,8 +55,8 @@ bower_components
 .lock-wscript
 
 # Dependency directories
-node_modules/
-jspm_packages/
+**/node_modules/**
+**/jspm_packages/**
 
 # TypeScript v1 declaration files
 typings/

package.json

@@ -5,29 +5,48 @@
   "packageManager": "[email protected]",
   "scripts": {
     "clean": "rimraf dist",
-    "dev:tailwind": "tailwindcss -i ./assets/main.css -o ./dist/assets/main.css --watch",
-    "dev:eleventy": "ELEVENTY_ENV=development eleventy --serve",
-    "dev": "npm-run-all clean --parallel \"dev:*\"",
-    "build:tailwind": "tailwindcss -i ./assets/main.css -o ./dist/assets/main.css --minify",
-    "build:eleventy": "ELEVENTY_ENV=development eleventy",
-    "build": "NODE_ENV=production run-s clean \"build:*\""
+    "eleventy:dev": "eleventy --serve",
+    "dev": "run-s clean eleventy:dev",
+    "eleventy": "eleventy",
+    "build": "NODE_ENV=production run-s clean eleventy"
+  },
+  "eleventy": {
+    "dir": {
+      "input": "src/content",
+      "output": "dist",
+      "data": "../_data",
+      "includes": "../_includes"
+    },
+    "templateFormats": [
+      "njk",
+      "md",
+      "html"
+    ],
+    "htmlTemplateEngine": "njk",
+    "markdownTemplateEngine": "njk"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-fetch": "^4.0.0",
+    "@11ty/eleventy-navigation": "^0.3.5",
     "@redbrick/design-system": "https://github.com/redbrick/design-system",
     "@types/markdown-it": "^13.0.7",
+    "autoprefixer": "^10.4.17",
     "debug": "^4.3.4",
+    "eleventy-plugin-postcss": "^1.0.4",
     "eleventy-plugin-toc": "^1.1.5",
-    "front-matter": "^4.0.2",
+    "gray-matter": "^4.0.3",
+    "js-yaml": "^4.1.0",
     "luxon": "^3.4.4",
     "markdown-it": "^14.0.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-replace-link": "^1.2.1",
+    "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.33",
+    "postcss-load-config": "^5.0.2",
     "reading-time": "^1.5.0",
     "rimraf": "^5.0.5",
+    "simple-git": "^3.22.0",
     "slugify": "^1.6.6",
     "tailwindcss": "^3.4.1"
   }

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+}

src/_data/eleventyComputed.js

@@ -0,0 +1,42 @@
+const path = require('path')
+
+const { splitExtension } = require('../../utils/urls')
+
+module.exports = () => {
+  const getUrl = (data) => {
+    const url = data.page.url
+    if (!url) return null
+    return splitExtension(url).filepath
+  }
+
+  const getKey = (data) => {
+    const url = getUrl(data)
+    if (!url) return null
+    if (data.index) return path.join(url, '..')
+    return url
+  }
+
+  const getParent = (data) => {
+    if (!data.page.url) return null
+    let parent = path.join(data.page.url, '..')
+    if (data.index) parent = path.join(parent, '..')
+    if (parent == '/') parent = null
+    return parent
+  }
+
+  return {
+    permalink: (data) => {
+      if (data.hidden) {
+        return false
+      }
+      return data.permalink
+    },
+    eleventyExcludeFromCollections: (data) => data.hidden,
+    eleventyNavigation: {
+      title: (data) => data.title,
+      url: getUrl,
+      key: getKey,
+      parent: getParent,
+    },
+  }
+}

src/_data/navbar.json

@@ -1,10 +1,10 @@
 [
   {
     "name": "Open Governance",
-    "url": "/open-governance/documents/constitution/"
+    "url": "/open-governance/readme"
   },
   {
     "name": "Blog",
-    "url": "/blog/posts/2024-01-31-redbrick-maintenance-with-nomad/"
+    "url": "/blog/posts/2024-01-31-redbrick-maintenance-with-nomad"
   }
 ]

src/_data/permalink.js

@@ -0,0 +1,13 @@
+const slugify = require('../../utils/filters/slugify')
+
+const pkg = require('../../package.json')
+
+module.exports = () => (data) => {
+  const inputDepth = pkg.eleventy.dir.input.split('/').length
+  const filePath = data.page.inputPath
+    .split('/')
+    .slice(inputDepth + 1)
+    .join('/')
+
+  return `/${slugify(filePath)}.${data.page.outputFileExtension}`
+}

src/_includes/layout/root.njk → src/_includes/base.njk

@@ -1,3 +1,6 @@
+---
+title: Redbrick
+---
 <!DOCTYPE html>
 <html lang="en">
   <head>

src/_includes/layout/base.njk → src/_includes/default.njk

@@ -1,12 +1,12 @@
 ---
-layout: layout/root.njk
+layout: base.njk
 ---
 <div class="drawer">
   <input id="drawer" type="checkbox" class="drawer-toggle" />
   <div class="drawer-content">
-    {% include "layout/header.njk" %}
+    {% include "partials/header.njk" %}
     {{ content | safe }}
-    {% include "layout/footer.njk" %}
+    {% include "partials/footer.njk" %}
   </div>
-  {% include "layout/drawer.njk" %}
+  {% include "partials/drawer.njk" %}
 </div>

src/_includes/layouts/blog.njk

@@ -0,0 +1,25 @@
+---
+layout: markdown.njk
+collection: blog
+outline: In this article
+---
+
+<div class="inline-block pb-8">
+  {% for tag in tags %}
+  <span class="badge">#{{ tag }}</span>
+  {% endfor %}
+</div>
+<h1 class="text-3xl font-bold">{{ title }}</h1>
+<div class="inline-block py-2">
+  {% if author %}
+  <span class="font-mono badge badge-lg badge-ghost my-2 mr-2">@{{ author }}</span>
+  {% endif %}
+  {% if created %}
+  <span class="badge badge-lg badge-ghost">📆 {{ created | readable }}</span>
+  {% endif %}
+  <span class="badge badge-lg badge-ghost">🍿 {{ content | readingTime }}</span>
+</div>
+<div class="divider"></div>
+<div class="prose min-w-full">
+  {{ content | safe }}
+</div>