Release 2.0.0 (#40)

* 2.0.0

* add reports workflow w/preactjs/compressed-size-action (#41)

* Stub out site refactor (#26)

* 1.1.0

* just watch all of src for css changes

* style input placeholders (text-slate-light)

* add 48px spacer

* add "action" color alias (to bright blue)

* add "inherit" to textColor (text-inherit)

* switch default borderWidth from 4px to 3px

* add "xl" breakpoint (1090px)

* reset body margin + padding; add default link color

* enable flexWrap + overflow in tailwind

* bump postcss, nix unused plugins

* delete fractal config

* uninstall fractal; install eleventy

* rebuild package-lock

* install js-yaml

* delete fractal.js

* stub out docs dir, docs.css

* add eleventy config

* bump postcss deps w/npm audit

* rename "build-site" script -> "build-docs"

* use eslint-config-sfgov

* add eleventy nav plugin

* ignore more vim swapfiles

* nix postcss-scss

* reorganize top-level CSS imports

* rewrite button docs

* fix up watching /dist

* set up remark plugin

* delete fractal.css

* set markdownTemplateEngine to "njk"

* rename preview.js to docs.js

* add examples dataset + pagination render

* wrap main template area w/margins

* add default { layout: "base" } via global data

* add type="text/javascript"

* add text between headings + button code examples

* set HTML template engine to Nunjucks

* add CSS override for [hidden]

* fix tokens data export

* add 2px to spacing scale

* add "design system" to header, hide search

* add "component" tag to buttons page

* stub out components and tokens index pages

* flesh out colors page

* move font imports to fonts.css

* add "Monospace body" type specimen

* add fontFamily.mono to the theme

* apply .text-small to .font-mono

* delete .body class declaration (dupe of .text-body)

* add highlight.js styles

* add "position" to tailwind config

* add base styles for <pre> and <code>

* add "inherit" to fontFamily tokens

* break out each button example

* fix link hrefs and padding in header

* improve responsive padding in main layout

* build out code copy and preview links

* add 4px borderRadius

* install classnames

* add sfgov-icons and clipboard-copy-element scripts

* fix up <code> and <pre> base styles

* tidy up color docs

* fix up eslint config

* move typography to /docs/components

* move spacing docs from src/components/spacing to docs/components

* set up eleventy nav for /components + /tokens

* add new slate colors

* use new slate colors

* simplify font css loading

* move fontFamily.inherit into theme.js

* delete fractal button page + preview template

* rework example parsing, add /examples/ listing

* add group-hover variant to display in tailwind config

* make autolink header links nicer

* use node 14+

* fix code block ids

* run npm audit fix

* tokens -> foundations, update top-level nav

* extract search include

* nix inline TOC from components page

* stub out nav and toc includes, base layout

* enable flexDirection tailwind plugin

* stub out prose heading styles

* responsive layout

* delete unused includes

* move typography from /components to /foundations

* add stuff to Overview page

* upgrade eleventy-navigation

* add metadata to component pages

* add metadata to foundation pages

* stub out breadcrumb

* rework page templates

* stub out TOC

* add computed eleventy data for components and foundations

* add remark-toc, remark-behead

* rework remark plugin setup

* add TOC heading to buttons page

* enable Tailwind "inset" config

* swap eleventy-plugin-toc in for remark-toc

* nix remark-toc, toc-rename

* nix TOC heading on buttons page

* move typography to markdown

* install remark-gfm

* add responsive variant to tw flexDirection

* add spacing scale to tw width and height configs

* add 11ty toc plugin, custom nav

* migrate spacing docs to markdown

* ename remark-gfm

* make code example plugins more resilient

* stub out kbd component page

* delete unused nav.yml

* delete remark prose plugin

* fix theme data export

* reset toc wrapper

* add 24px spacer for body line height

* add 2-, 3- and 4-pixel border widths

* tidy up buttons metadata

* migrate typography page to markdown w/examples

* delete h1 from overview page

* tidy up color metadata

* rework toc, page title layout

* stub out prose and toc styles

* add "develop" npm script w/NODE_ENV=development

* add force-reloader for eleventy config

* rework code frame layout

* swap eleventy-plugin-toc for custom plugin

* tidy up metadata

* nix .toc styles

* rework toc include

* nix top margin on first prose heading

* improve TOC layout

* add back highlight.js colors 😬

* use "Page title | Site title" document title convention

* add sf.gov favicon

* swap left nav pr-100 for mr-60

* add filesize template filter

* stub out prose table styles

* exclude code blocks w/static="true" from examples

* style non-example code blocks with same classes

* stub out usage page, manifest data (with file sizes)

* more subdued prose table styles

* more subdued code block styles (no border)

* use font-regular in autolink headers ("#")

* simplify button example markup

* make child nav links block

* fix :first-of-type top margin reset, add .hljs-comment styles

* add browser support + IE sections to usage

* move CSS docs to separate page

* stub out React usage page

* tweak css bundle usage

* use variables on react usage page

* fix typo on typography page

* fix up spacing

* update README

* install rehype-raw

* add rehype-raw to enable HTML in markdown 🙃

* make the TOC sticky

* nix eleventyNavigation from index.md

* only reset top margin on .prose > :first-child

* set https_only: true in static.json

* upgrade babel packages

* use node 14.x

* add repo_url template filter

* stub out Development (usage) docs

* fix up example open and copy buttons

* add shellcheck reference

* install nunjucks, hast utilities

* move template filters into lib/eleventy/filters

* set up remark "presets"

* replace code example markup with template

* add remark plugin to interpolate standalone code examples w/nunjucks

* iterate over tokens in spacing examples

* better spacing on typography examples

* move nunjucks env into lib/eleventy/nunjucksEnv

* install remark-directive

* add swatch directives

* migrate color docs to markdown w/directives

* simplify autolink-headings plugin

* add custom filters to nunjucksEnv

* fix branch substitution in repo_url filter

* add generated timestamp to site data

* add git metadata

* add build-meta include

* better git metadata

* add local_time template filter

* format generated timestamp in Pacific time

* add unpkg + GitHub links to header

* add Versioning section to usage docs

* try "America/Los_Angeles" instead of "US/Pacific"

* update color docs to match Figma

* fix wrapping of swatches

* tweak heading spacing in prose (docs only)

* add better heading classes

* simplify readme

development docs live in on the site now, so we can simplify this

* Create docs.md

* nix .prose margin reset for <pre>

* 1.4.0

* nix "project" field from package.json

Co-authored-by: jackson.flint.gonzales <[email protected]>

* Improve page git metadata (#42)

* use dotenv in development

* move git CLI helper to lib/git

* use common nunjucks env in code-example-frame

* replace local_time template filter with local_date

* install dotenv, @octokit/rest

* improve computed git metadata

* make git metadata fetching more efficient

Co-authored-by: jackson.flint.gonzales <[email protected]>

Author: shawnbot

.eleventy.js

@@ -0,0 +1,44 @@
+const dev = process.env.NODE_ENV === 'development'
+if (dev) {
+  require('dotenv').config()
+}
+
+const remark = require('@fec/eleventy-plugin-remark')
+const remarkConfig = require('./lib/remark').eleventyPluginConfig
+const navigation = require('./lib/eleventy/nav')
+const yaml = require('js-yaml')
+const toc = require('./lib/eleventy/toc')
+const filters = require('./lib/eleventy/filters')
+
+module.exports = config => {
+  if (dev) {
+    const reloadOnChange = require('./lib/eleventy/reload')
+    reloadOnChange(__filename, ['lib/**/*.js'])
+  }
+
+  config.addPlugin(navigation)
+  config.addPlugin(remark, remarkConfig)
+  config.addPlugin(toc, {
+    ignore: 'h1',
+    startLevel: 3
+  })
+
+  for (const [name, filter] of Object.entries(filters)) {
+    config.addFilter(name, filter)
+  }
+
+  config.addDataExtension('yml', contents => yaml.safeLoad(contents))
+
+  config.setUseGitIgnore(false)
+  config.addWatchTarget('./dist')
+  config.addPassthroughCopy('dist')
+
+  return {
+    dir: {
+      input: 'docs',
+      output: 'public'
+    },
+    htmlTemplateEngine: 'njk',
+    markdownTemplateEngine: 'njk'
+  }
+}

.eslintignore

@@ -0,0 +1 @@
+!.*.js

.eslintrc.js

@@ -1,13 +1,13 @@
 module.exports = {
+  plugins: ['sfgov'],
+  extends: [
+    'plugin:sfgov/recommended',
+    'plugin:sfgov/node'
+  ],
   env: {
-    browser: true,
-    commonjs: true,
     es2021: true,
     node: true
   },
-  extends: [
-    'standard'
-  ],
   parserOptions: {
     ecmaVersion: 12
   },

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
 
       - run: npm ci
       - run: npm run lint

.github/workflows/reports.yml

@@ -0,0 +1,12 @@
+name: Reports
+on: [pull_request]
+
+jobs:
+  reports:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: ${{ github.token }}
+          pattern: 'dist/**/*.{css,js}'

.gitignore

@@ -1,5 +1,5 @@
+**/.*.sw?
 *.tgz
-.*.sw?
 .env
 dist/
 node_modules/

README.md

@@ -1,2 +1,5 @@
-# design-system
-The new design system for the City & County of San Francisco
+# San Francisco Design System
+
+This is the design system for [SF.gov](https://sf.gov) and the City & County of San Francisco.
+
+Design and developer documentation is available at [design-system.sf.gov](https://design-system.sf.gov).

docs/_data/assets.js

@@ -0,0 +1,12 @@
+module.exports = {
+  styles: [
+    { href: '/dist/css/sfds.css' },
+    { href: '/dist/css/fonts.css' },
+    { href: '/dist/css/docs.css' }
+  ],
+  scripts: [
+    { src: '/dist/js/docs.js' },
+    { src: 'https://unpkg.com/@sfgov/[email protected]/dist/sfgov-icons.umd.js', defer: true },
+    { src: 'https://unpkg.com/@github/[email protected]/dist/index.umd.js', defer: true }
+  ]
+}

docs/_data/eleventyComputed.js

@@ -0,0 +1,88 @@
+const pkg = require('../../package.json')
+const { git } = require('../../lib/git')
+const { Octokit } = require('@octokit/rest')
+const { branch } = require('./git')
+
+const github = new Octokit({ auth: process.env.GITHUB_TOKEN })
+
+const gitMetaCache = new Map()
+
+module.exports = {
+  git: {
+    commit (data) {
+      const path = data.page.inputPath.replace(/^\.\//, '')
+      return getLastCommit(path)
+    }
+  }
+}
+
+async function getLastCommit (path) {
+  let meta
+  if (gitMetaCache.has(path)) {
+    return await gitMetaCache.get(path)
+  }
+
+  console.info('getting last commit for', path)
+  if (process.env.NODE_ENV === 'development') {
+    meta = getLastCommitFromGit(path)
+  } else if (github) {
+    const promise = getLastCommitFromGitHub(path)
+    // put the promise in the cache so that simultaneous requests for the same
+    // path await the same request
+    gitMetaCache.set(path, promise)
+    meta = await promise
+  }
+  gitMetaCache.set(path, meta)
+  return meta
+}
+
+function getLastCommitFromGit (path) {
+  const log = git('log', '-1', '--', path)
+  const [first, second, third] = log.split('\n')
+  return {
+    sha: match(first, /^commit ([a-f0-9]+)/, 1),
+    author: match(second, /Author: +.*<([^@]+)@users\.noreply\.github\.com>/, 1),
+    date: match(third, /Date: +(.+)/, 1)
+  }
+}
+
+async function getLastCommitFromGitHub (path) {
+  const [owner, repo] = pkg.repository.split('/')
+  let res, commits
+  try {
+    res = await github.rest.repos.listCommits({
+      owner,
+      repo,
+      path,
+      sha: branch,
+      per_page: 1
+    })
+    commits = res.data
+  } catch (error) {
+    console.warn('error loading commits for "%s"', path, error)
+    gitMetaCache.set(path, null)
+    return null
+  }
+
+  if (commits?.length) {
+    const [{ sha, commit, author }] = commits
+    const meta = {
+      sha,
+      date: commit.author?.date,
+      author: {
+        name: commit.author?.name,
+        login: author.login
+      }
+    }
+    // console.info('caching git meta for "%s"', path, meta)
+    return meta
+  } else {
+    console.warn('unable to get commit for "%s"', path, res)
+    return null
+  }
+}
+
+function match (str, pattern, index = 1) {
+  const m = str ? str.match(pattern) : null
+  return m ? m[index] : null
+}

docs/_data/examples.js

@@ -0,0 +1,36 @@
+const globby = require('globby')
+const remark = require('remark')
+const visit = require('unist-util-visit')
+const interpolateCode = require('../../lib/remark/interpolate-code')
+const codeExample = require('../../lib/remark/code-example')
+const { readFileSync } = require('fs')
+
+module.exports = getExamples
+
+async function getExamples () {
+  const examples = []
+  const mds = await globby('docs/**/*.md')
+  const processor = remark()
+    .use(require('remark-slug'))
+    .use(interpolateCode)
+    .use(codeExample)
+    .use(() => (tree, file) => {
+      visit(tree, 'code', (node, index, parent) => {
+        if (node.data?.id && node.data?.meta?.static !== 'true') {
+          examples.push({
+            code: node.value,
+            ...node.data
+          })
+        }
+      })
+    })
+
+  for (const path of mds) {
+    await processor.process({
+      path,
+      contents: readFileSync(path, 'utf8')
+    })
+  }
+
+  return examples
+}

docs/_data/git.js

@@ -0,0 +1,17 @@
+const pkg = require('../../package.json')
+const { git } = require('../../lib/git')
+
+const repoUrl = `https://github.com/${pkg.repository}`
+const {
+  HEROKU_BRANCH: branch = git('symbolic-ref', '--short', 'HEAD'),
+  HEROKU_SLUG_COMMIT: sha = git('rev-parse', 'HEAD'),
+  HEROKU_PR_NUMBER: pr
+} = process.env
+
+module.exports = {
+  repo: repoUrl,
+  defaultBranch: 'main',
+  pr: pr ? `${repoUrl}/pull/${pr}` : null,
+  branch,
+  sha
+}

docs/_data/layout.js

@@ -0,0 +1 @@
+module.exports = 'base'

docs/_data/manifest.js

@@ -0,0 +1,19 @@
+const globby = require('globby')
+const { stat } = require('fs').promises
+
+module.exports = async function loadManifest () {
+  const paths = await globby('dist/**/*.{css,js}')
+  return Promise.all(
+    paths.map(path => {
+      return stat(path)
+        .then(({ size }) => ({
+          path,
+          size
+        }))
+        .catch(() => ({ path, size: undefined }))
+    })
+  ).then(results => results.reduce((map, { path, size }) => {
+    map[path] = { size }
+    return map
+  }, {}))
+}

docs/_data/package.js

@@ -0,0 +1 @@
+module.exports = require('../../package.json')

docs/_data/site.js

@@ -0,0 +1,4 @@
+module.exports = {
+  title: 'San Francisco Design System',
+  generated: new Date()
+}

docs/_data/theme.js

@@ -0,0 +1 @@
+module.exports = require('../../src/theme')

docs/_data/tokens.js

@@ -0,0 +1 @@
+module.exports = require('../../src/tokens')

docs/_includes/banner.njk

@@ -0,0 +1,20 @@
+<div class="max-w-xl mx-auto">
+  <!-- banner -->
+  <div class="flex bg-yellow-3 rounded" style="overflow: hidden;">
+    <div class="w-1/2 p-40 text-slate">
+      <div>Latest</div>
+      <h1 class="title-lg my-40">
+        Get updates about the COVID-19 vaccine
+      </h1>
+      <a class="btn btn-inverse mb-20" href="javascript:void(0)">Learn more</a>
+    </div>
+    <div class="w-1/2" style="position: relative;">
+      <img style="position: absolute; width: auto; height: 100%; object-fit: cover;"
+           src="https://sf.gov/sites/default/files/styles/836x484/public/2021-02/Geraldine%20McCowanLHHWeb.jpg?itok=ijhjZjoJ"
+           aria-describedby="campaign-image-caption">
+    </div>
+  </div>
+  <div class="text-slate-light text-small text-right mt-4">
+    “Mama G gets her COVID-19 vaccine at Laguna Honda, so she can resume her art” by Laguna Honda Hospital
+  </div>
+</div>

docs/_includes/base.njk

@@ -0,0 +1,39 @@
+---
+layout: skeleton
+---
+{% include 'header.njk' %}
+
+{% set toc = content | toc %}
+
+{% block main %}
+  <div class="px-20 max-w-xl mx-auto mt-40 mb-100">
+    <div class="lg:flex justify-end">
+      <div class="lg:w-1/4 lg:mr-60 mb-40">
+        {% block nav %}
+          {% include 'nav.njk' %}
+        {% endblock %}
+      </div>
+      <div class="lg:w-3/4">
+        {% block content %}
+          {% include 'title.njk' %}
+          {% if toc %}
+            <div class="flex justify-start flex-row-reverse">
+              <div class="none lg:block lg:w-1/4 mb-40 ml-40">
+                {% include 'toc.njk' %}
+              </div>
+              <div class="lg:w-3/4">
+                {% include 'main.njk' %}
+              </div>
+            </div>
+          {% else %}
+            {% include 'main.njk' %}
+          {% endif %}
+        {% endblock %}
+        {% include 'build-meta.njk' %}
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% include 'footer.njk' %}
+{% include 'scripts.njk' %}

docs/_includes/breadcrumb.njk

@@ -0,0 +1,9 @@
+{% set crumbs = page | ancestors(collections.all, '/') %}
+{% if crumbs.length %}
+  <div class="text-small mb-8">
+    {% for ancestor in crumbs | reverse %}
+      <a href="{{ ancestor.data.page.url }}" class="text-slate no-underline">{{ ancestor.data.title }}</a>
+      {% if not loop.last %} / {% endif %}
+    {% endfor %}
+  </div>
+{% endif %}

docs/_includes/build-meta.njk

@@ -0,0 +1,17 @@
+<div class="mt-60 text-slate-light">
+  {% set branch = git.branch if git.pr else git.defaultBranch %}
+  <a href="{{ page.inputPath | repo_url(branch) }}">Edit on GitHub</a>
+  {% if git.commit %}
+    | last updated
+    <a
+      class="text-inherit"
+      href="{{ '' | repo_url }}/commit/{{ git.commit.sha }}"
+    >{{ git.commit.date | local_date }}</a>
+    {% if git.commit.author %}
+      by <a
+        class="text-inherit"
+        href="https://github.com/{{ git.commit.author.login }}"
+      >{{ git.commit.author.name | default('@' + git.commit.author.login) }}</a>
+    {% endif %}
+  {% endif %}
+</div>