Add Docs Site Scaffold

modules/docs/.gitignore

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

modules/docs/.prettierrc

@@ -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/README.md

@@ -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/archetypes/default.md

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

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

@@ -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/blocks/prose.css

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

modules/docs/assets/css/compositions/cluster.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/compositions/flow.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);
+}

modules/docs/assets/css/compositions/grid.css

@@ -0,0 +1,59 @@
+/* AUTO GRID
+Related Every Layout: https://every-layout.dev/layouts/grid/
+More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
+A flexible layout that will create an auto-fill grid with
+configurable grid item sizes
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--grid-min-item-size (14rem): How large each item should be
+ideally, as a minimum.
+
+--grid-placement (auto-fill): Set either auto-fit or auto-fill
+to change how empty grid tracks are handled */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--grid-placement, auto-fill),
+    minmax(var(--grid-min-item-size, 16rem), 1fr)
+  );
+  gap: var(--gutter, var(--space-s-l));
+}
+
+/* A split 50/50 layout */
+.grid[data-layout='50-50'] {
+  --grid-placement: auto-fit;
+  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
+}
+
+/* Three column grid layout */
+.grid[data-layout='thirds'] {
+  --grid-placement: auto-fit;
+  --grid-min-item-size: clamp(16rem, 33%, 20rem);
+}
+
+/* Twelve column grid layout */
+.grid[data-layout='twelfths'] {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+/* Special layout for larger devices. Used on home page intro */
+.grid[data-layout='lg:10/2'] {
+  grid-template-columns: 100%;
+}
+
+@media screen(md) {
+  .grid[data-layout='lg:10/2'] {
+    grid-template-columns: clamp(40rem, 80vw, 60rem);
+  }
+}
+
+@media screen(lg) {
+  .grid[data-layout='lg:10/2'] {
+    grid-template-columns: 10fr 2fr;
+  }
+}

modules/docs/assets/css/compositions/repel.css

@@ -0,0 +1,23 @@
+/*
+REPEL
+A little layout that pushes items away from each other where
+there is space in the viewport and stacks on small viewports
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--repel-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+.repel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: var(--repel-vertical-alignment, center);
+  gap: var(--gutter, var(--space-s-m));
+}
+
+.repel[data-nowrap] {
+  flex-wrap: nowrap;
+}

modules/docs/assets/css/compositions/sidebar.css

@@ -0,0 +1,36 @@
+/* 
+SIDEBAR
+More info: https://every-layout.dev/layouts/sidebar/
+A layout that allows you to have a flexible main content area
+and a "fixed" width sidebar that sits on the left or right.
+If there is not enough viewport space to fit both the sidebar
+width *and* the main content minimum width, they will stack
+on top of each other
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-size-1)): This defines the space
+between the sidebar and main content.
+
+--sidebar-target-width (20rem): How large the sidebar should be
+
+--sidebar-content-min-width(50%): The minimum size of the main content area
+
+EXCEPTIONS
+.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
+*/
+.sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, var(--space-s-l));
+}
+
+.sidebar > :first-child {
+  flex-basis: var(--sidebar-target-width, 20rem);
+  flex-grow: 1;
+}
+
+.sidebar > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: var(--sidebar-content-min-width, 50%);
+}

modules/docs/assets/css/compositions/switcher.css

@@ -0,0 +1,33 @@
+/*
+SWITCHER
+More info: https://every-layout.dev/layouts/switcher/
+A layout that allows you to lay **2** items next to each other
+until there is not enough horizontal space to allow that.
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-size-1)): This defines the space
+between each item
+
+--switcher-target-container-width (40rem): How large the container
+needs to be to allow items to sit inline with each other
+
+--switcher-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, var(--space-s-l));
+  align-items: var(--switcher-vertical-alignment, flex-start);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
+}
+
+/* Max 2 items,
+so anything greater than 2 is full width */
+.switcher > :nth-child(n + 3) {
+  flex-basis: 100%;
+}

modules/docs/assets/css/compositions/wrapper.css

@@ -0,0 +1,11 @@
+/*
+WRAPPER COMPOSITION 
+A common wrapper/container
+*/
+.wrapper {
+  margin-inline: auto;
+  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
+  padding-left: var(--gutter);
+  padding-right: var(--gutter);
+  position: relative;
+}

modules/docs/assets/css/global/fonts.css

@@ -0,0 +1 @@
+/* @font-face here */

modules/docs/assets/css/global/global.css

@@ -0,0 +1,21 @@
+/* 
+  Global styles 
+
+  Low-specificity, global styles that apply to the whole 
+  project: https://cube.fyi/css.html
+*/
+body {
+  background: var(--color-light);
+  color: var(--color-dark);
+  font-size: var(--size-step-0);
+  font-family: var(--font-base);
+  line-height: var(--leading-standard);
+}
+
+pre {
+  font-size: var(--size-step--1);
+  padding: var(--space-s);
+  border-radius: var(--radius-m);
+  overflow-x: auto;
+  margin: 0;
+}