Adding Chromatic action

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      # FIXME: Because the setup-node action is dumb, we have to manually
+      #        install the dependencies ourselves. See: https://github.com/actions/setup-node/issues/182
+      - name: Install dependencies
+        run: yarn install
+      - name: Run Chromatic
+        run: yarn build-storybook

.yarnrc.yml

@@ -1,3 +1,5 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+nodeLinker: node-modules

package.json

@@ -12,7 +12,7 @@
     "build-storybook": "storybook build",
     "generate:github": "ts-node ./scripts/github",
     "generate:medium": "ts-node ./scripts/medium",
-    "chromatic": "npx chromatic --project-token=chpt_0a69331ccacaeaf"
+    "chromatic": "chromatic"
   },
   "dependencies": {
     "@linaria/atomic": "^6.0.0",
@@ -83,5 +83,5 @@
     "vite-imagetools": "^7.0.4",
     "vite-plugin-markdown": "^2.2.0"
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.4.1"
 }

src/.stories/components/loc.stories.tsx → src/.stories/components/loc._.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { LOC } from '@components/github/loc';
+import { LOC } from '@components/github';
 
 const meta: Meta<typeof LOC> = {
   title: 'Components/Github/Lines of Code',

src/components/github/index.ts

@@ -1,2 +1,3 @@
 export { GithubCorner } from './corner';
+export { LOC } from './loc';
 export { GithubStats } from './stats';

src/theme/index.ts

@@ -1,6 +1,6 @@
 import 'ress';
-import 'unfonts.css';
 
+// import 'unfonts.css';
 import { color } from '@theme/color';
 import { font } from '@theme/font';
 import { grid } from '@theme/grid';

storybook-static/CNAME

@@ -0,0 +1 @@
+clintandrewhall.com

storybook-static/README.md

@@ -0,0 +1,7 @@
+# About this repository
+
+This is a static build of [clintandrewhall.com](https://github.com/clintandrewhall/clintandrewhall.com).  It is generated automatically by a Github Action and committed to this repo by [`gh-pages`](https://github.com/tschaub/gh-pages).
+
+For the curious, I used to CD my website with Heroku.  Since Heroku had their breach and has [disabled GH OAuth tokens](https://status.heroku.com/incidents/2413), I decided to pull the trigger on an auto-deploy-to-gh-pages approach.
+
+It was [pretty easy](https://github.com/clintandrewhall/clintandrewhall.com/commit/22176bf5f4e693cc942cad21bdafba5d7807722b), in [the end](https://github.com/clintandrewhall/clintandrewhall.com/commits/main).

storybook-static/assets/client-e941fabf.js

@@ -0,0 +1 @@
+import{r}from"./index-5f347087.js";var o={},t=r;o.createRoot=t.createRoot,o.hydrateRoot=t.hydrateRoot;export{o as c};

storybook-static/assets/font.stories-d780e3c6.js

@@ -0,0 +1,112 @@
+import{j as s}from"./jsx-runtime-d079401a.js";import"./index-f1f2c4b1.js";const N={title:"Theme/Font"},e={render:()=>s.jsxs("div",{className:"atm_bx_3wtidt",children:[s.jsx("h1",{className:"atm_c8_jmbdy6",children:"Header 1"}),s.jsx("h2",{className:"atm_c8_115vrgw",children:"Header 2"}),s.jsx("h3",{className:"atm_c8_1ic6ef2",children:"Header 3"}),s.jsx("h4",{className:"atm_c8_1088tx0",children:"Header 4"}),s.jsx("h5",{className:"atm_c8_wwia0z",children:"Header 5"}),s.jsx("p",{className:"atm_c8_jmbdy6",children:"Step 5"}),s.jsx("p",{className:"atm_c8_115vrgw",children:"Step 4"}),s.jsx("p",{className:"atm_c8_1ic6ef2",children:"Step 3"}),s.jsx("p",{className:"atm_c8_1088tx0",children:"Step 2"}),s.jsx("p",{className:"atm_c8_wwia0z",children:"Step 1"}),s.jsx("p",{className:"atm_c8_xoeuol",children:"Step 0"}),s.jsx("p",{className:"atm_c8_ihbmcz",children:"Step -1"})]})},a={render:()=>s.jsxs("div",{children:[s.jsx("p",{className:"atm_c8_xoeuol atm_bx_18cx291",children:"'Libre Baskerville', serif"}),s.jsx("p",{className:"atm_c8_xoeuol atm_bx_3wtidt",children:"'Montserrat', sans-serif"})]})},n={render:()=>s.jsxs("div",{className:"atm_c8_wwia0z atm_bx_3wtidt",children:[s.jsx("p",{className:"atm_cs_d016ey",children:"Extra bold"}),s.jsx("p",{className:"atm_cs_m3gbs4",children:"Bold"}),s.jsx("p",{className:"atm_cs_zddnl",children:"Semi-bold"}),s.jsx("p",{className:"atm_cs_p0owkv",children:"Normal"}),s.jsx("p",{className:"atm_cs_1nt554y",children:"Light"})]})};var c,t,r;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:`{
+  render: () => <div className={csa\`
+        \${css.font.sansSerif.regular}
+      \`}>
+      <h1 className={csa\`
+          \${css.font.size.step5}
+        \`}>
+        Header 1
+      </h1>
+      <h2 className={csa\`
+          \${css.font.size.step4}
+        \`}>
+        Header 2
+      </h2>
+      <h3 className={csa\`
+          \${css.font.size.step3}
+        \`}>
+        Header 3
+      </h3>
+      <h4 className={csa\`
+          \${css.font.size.step2}
+        \`}>
+        Header 4
+      </h4>
+      <h5 className={csa\`
+          \${css.font.size.step1}
+        \`}>
+        Header 5
+      </h5>
+      <p className={csa\`
+          \${css.font.size.step5}
+        \`}>
+        Step 5
+      </p>
+      <p className={csa\`
+          \${css.font.size.step4}
+        \`}>
+        Step 4
+      </p>
+      <p className={csa\`
+          \${css.font.size.step3}
+        \`}>
+        Step 3
+      </p>
+      <p className={csa\`
+          \${css.font.size.step2}
+        \`}>
+        Step 2
+      </p>
+      <p className={csa\`
+          \${css.font.size.step1}
+        \`}>
+        Step 1
+      </p>
+      <p className={csa\`
+          \${css.font.size.step0}
+        \`}>
+        Step 0
+      </p>
+      <p className={csa\`
+          \${css.font.size.stepN1}
+        \`}>
+        Step -1
+      </p>
+    </div>
+}`,...(r=(t=e.parameters)==null?void 0:t.docs)==null?void 0:r.source}}};var i,l,m;a.parameters={...a.parameters,docs:{...(i=a.parameters)==null?void 0:i.docs,source:{originalSource:`{
+  render: () => <div>
+      <p className={csa\`
+          \${css.font.size.step0}
+          \${css.font.serif.regular}
+        \`}>
+        'Libre Baskerville', serif
+      </p>
+      <p className={csa\`
+          \${css.font.size.step0}
+          \${css.font.sansSerif.regular}
+        \`}>
+        'Montserrat', sans-serif
+      </p>
+    </div>
+}`,...(m=(l=a.parameters)==null?void 0:l.docs)==null?void 0:m.source}}};var o,p,d;n.parameters={...n.parameters,docs:{...(o=n.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  render: () => <div className={csa\`
+        \${css.font.size.step1}
+        \${css.font.sansSerif.regular}
+      \`}>
+      <p className={csa\`
+          font-weight: var(\${vars.font.weight.extraBold});
+        \`}>
+        Extra bold
+      </p>
+      <p className={csa\`
+          font-weight: var(\${vars.font.weight.bold});
+        \`}>
+        Bold
+      </p>
+      <p className={csa\`
+          font-weight: var(\${vars.font.weight.semiBold});
+        \`}>
+        Semi-bold
+      </p>
+      <p className={csa\`
+          font-weight: var(\${vars.font.weight.normal});
+        \`}>
+        Normal
+      </p>
+      <p className={csa\`
+          font-weight: var(\${vars.font.weight.light});
+        \`}>
+        Light
+      </p>
+    </div>
+}`,...(d=(p=n.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};const f=["FontSize","FontFamliy","FontWeight"];export{a as FontFamliy,e as FontSize,n as FontWeight,f as __namedExportsOrder,N as default};