Add Docs Site Scaffold (#236)

Author: jameskerr

modules/docs/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+resources
+public
+hugo_stats.json

modules/docs/.hugo_build.lock

@@ -0,0 +1,18 @@
+{
+  "printWidth": 90,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "quoteProps": "consistent",
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-go-template"],
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "go-template"
+      }
+    }
+  ]
+}

modules/docs/.prettierrc

@@ -0,0 +1,46 @@
+# Hugo Starter Site
+
+This is my favorite way to code static websites. It's a Hugo site with the following front-end technologies built in.
+
+### CUBE CSS
+
+I copied much of the inspiring [cube-boilerplate](https://github.com/Set-Creative-Studio/cube-boilerplate/tree/main) into this Hugo enviroment. I've modified it to use the [utopia-core](https://github.com/trys/utopia-core) functions for font sizes and spacing.
+
+The boilerplate uses a modified tailwindcss config. In order to get tailwindy behavior in Hugo, I followed this [hugo-starter-tailwind-basic](https://github.com/bep/hugo-starter-tailwind-basic) from [bep](https://github.com/bep).
+
+### Hotwired Turbo
+
+I use [@hotwired/turbo](https://github.com/hotwired/turbo) to speed everything up for free.
+
+## Installation
+
+```sh
+
+git clone https://github.com/jameskerr/hugo-starter
+
+mv hugo-starter my-cool-site # rename to something you want
+
+cd my-cool-site
+
+yarn
+
+hugo server
+```
+
+## CSS Instructions
+
+Add your own CSS files anywhere in these directories to have them automatically included.
+
+- `assets/css/blocks/`
+- `assets/css/compositions/`
+- `assets/css/utilities/`
+
+Take a look at `assets/css/main.css` for how it all is stitched together. Also visit the docs for [CUBE CSS](https://cube.fyi/) and [Utopia](https://utopia.fyi/).
+
+## JS Instructions
+
+Add your JavaScript files to `assets/js`, then import then into `assets/js/main.js`. These will get build using Hugo's [js.Build pipe](https://gohugo.io/hugo-pipes/js/).
+
+Enjoy!
+
+Authored by [James Kerr](http://jameskerr.blog)

modules/docs/README.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

modules/docs/archetypes/default.md

@@ -0,0 +1,24 @@
+const slugify = require('slugify');
+
+const nameSlug = (text) => {
+  return slugify(text, {lower: true});
+};
+
+/**
+ * Converts human readable tokens into tailwind config friendly ones
+ *
+ * @param {array} tokens {name: string, value: any}
+ * @return {object} {key, value}
+ */
+const tokensToTailwind = (tokens, options = {slugify: true}) => {
+  let response = {};
+
+  tokens.forEach(({name, value}) => {
+    const key = options.slugify ? nameSlug(name) : name;
+    response[key] = value;
+  });
+
+  return response;
+};
+
+module.exports = tokensToTailwind;

modules/docs/assets/css-utils/tokens-to-tailwind.js

@@ -0,0 +1,7 @@
+.prose {
+  --flow-space: var(--space-m);
+}
+
+.prose p {
+  max-inline-size: var(--measure);
+}

modules/docs/assets/css/blocks/code-example.css

@@ -0,0 +1,24 @@
+/*
+CLUSTER
+More info: https://every-layout.dev/layouts/cluster/
+A layout that lets you distribute items with consitent
+spacing, regardless of their size
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--cluster-horizontal-alignment (flex-start) How items should align
+horizontally. Can be any acceptable flexbox aligmnent value.
+
+--cluster-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, var(--space-s-m));
+  justify-content: var(--cluster-horizontal-alignment, flex-start);
+  align-items: var(--cluster-vertical-alignment, center);
+}

modules/docs/assets/css/blocks/prose.css

@@ -0,0 +1,8 @@
+/* 
+FLOW COMPOSITION 
+Like the Every Layout stack: https://every-layout.dev/layouts/stack/
+Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
+*/
+.flow > * + * {
+  margin-top: var(--flow-space, 1em);
+}