chore: move docs folders for gh pages, fix a11y

amzn · Apr 2, 2024 · 626f020 · 626f020
1 parent 0a45dd5
commit 626f020
Show file tree

Hide file tree

Showing 53 changed files with 66 additions and 5,220 deletions.
diff --git a/.gitignore b/.gitignore
@@ -81,6 +81,6 @@ xcuserdata/
 __tests__/__output
 
 # build output
-dist/
+docs/
 # generated types
 .astro/
diff --git a/docs/astro.config.mjs → docs-src/astro.config.mjs b/docs/astro.config.mjs → docs-src/astro.config.mjs
@@ -5,6 +5,7 @@ import starlightConfig from './starlight-config';
 
 // https://astro.build/config
 export default defineConfig({
+  outDir: '../docs', // necessary folder for Github Pages
   integrations: [starlight(starlightConfig)],
   markdown: {
     remarkPlugins: [remarkPlayground],

diff --git a/docs/src/assets/favicon.png → docs-src/public/favicon.png b/docs/src/assets/favicon.png → docs-src/public/favicon.png
diff --git a/docs-src/public/meta-img.png b/docs-src/public/meta-img.png
diff --git a/docs/src/assets/build-diagram.png → docs-src/src/assets/build-diagram.png b/docs/src/assets/build-diagram.png → docs-src/src/assets/build-diagram.png
diff --git a/docs/src/assets/cti.png → docs-src/src/assets/cti.png b/docs/src/assets/cti.png → docs-src/src/assets/cti.png
diff --git a/docs/src/assets/fake_player.png → docs-src/src/assets/fake_player.png b/docs/src/assets/fake_player.png → docs-src/src/assets/fake_player.png
diff --git a/public/favicon.png → docs-src/src/assets/favicon.png b/public/favicon.png → docs-src/src/assets/favicon.png
diff --git a/docs/src/assets/houston.webp → docs-src/src/assets/houston.webp b/docs/src/assets/houston.webp → docs-src/src/assets/houston.webp
diff --git a/docs/src/assets/logo.png → docs-src/src/assets/logo.png b/docs/src/assets/logo.png → docs-src/src/assets/logo.png
diff --git a/docs-src/src/assets/meta-img.png b/docs-src/src/assets/meta-img.png
diff --git a/docs/src/assets/property-definitions.png → docs-src/src/assets/property-definitions.png b/docs/src/assets/property-definitions.png → docs-src/src/assets/property-definitions.png
diff --git a/docs-src/src/components/Head.astro b/docs-src/src/components/Head.astro
@@ -0,0 +1,8 @@
+---
+import Default from '@astrojs/starlight/components/Head.astro';
+import type { Props } from '@astrojs/starlight/props';
+---
+<Default {...Astro.props}>
+  <slot />
+</Default>
+<script src="../load-playground"></script>
diff --git a/docs/src/components/sd-playground.ts → docs-src/src/components/sd-playground.ts b/docs/src/components/sd-playground.ts → docs-src/src/components/sd-playground.ts
@@ -61,6 +61,21 @@ class SdPlayground extends LitElement {
         min-height: 28px;
         margin-left: 10px;
       }
+
+      /** screen-reader only CSS */
+      sl-select::part(form-control-label) {
+        border: 0 !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
+        height: 1px !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+        position: absolute !important;
+        width: 1px !important;
+        white-space: nowrap !important;
+      }
     `;
   }
 
@@ -144,8 +159,8 @@ class SdPlayground extends LitElement {
                 ? html`
                     <sl-select
                       class="output-select"
-                      name="pets"
-                      id="pet-select"
+                      name="output-select"
+                      label="Select output file"
                       value="${this.outputFiles[0]}"
                       @sl-change=${(ev: Event) => {
                         ev.stopPropagation();

diff --git a/docs/src/content/config.ts → docs-src/src/content/config.ts b/docs/src/content/config.ts → docs-src/src/content/config.ts
diff --git a/docs/src/env.d.ts → docs-src/src/env.d.ts b/docs/src/env.d.ts → docs-src/src/env.d.ts
diff --git a/docs/src/load-playground.ts → docs-src/src/load-playground.ts b/docs/src/load-playground.ts → docs-src/src/load-playground.ts
diff --git a/docs/src/monaco/monaco-theme.ts → docs-src/src/monaco/monaco-theme.ts b/docs/src/monaco/monaco-theme.ts → docs-src/src/monaco/monaco-theme.ts
diff --git a/docs/src/monaco/monaco.ts → docs-src/src/monaco/monaco.ts b/docs/src/monaco/monaco.ts → docs-src/src/monaco/monaco.ts
diff --git a/docs/src/remark-playground.ts → docs-src/src/remark-playground.ts b/docs/src/remark-playground.ts → docs-src/src/remark-playground.ts
diff --git a/docs/src/styles.css → docs-src/src/styles.css b/docs/src/styles.css → docs-src/src/styles.css
@@ -1,15 +1,15 @@
 /* Dark mode colors. */
 :root {
-  --sl-color-accent-low: #0a6e6b;
+  --sl-color-accent-low: #074947;
   --sl-color-accent: #3fc6bf;
   --sl-color-accent-high: #80d9d6;
 }
 
 /* Light mode colors. */
 :root[data-theme='light'] {
-  --sl-color-accent-low: #80d9d6;
-  --sl-color-accent: #3fc6bf;
-  --sl-color-accent-high: #0fb6b0;
+  --sl-color-accent-low: #55b3af;
+  --sl-color-accent: #047771;
+  --sl-color-accent-high: #07524f;
 }
 
 table code {

diff --git a/docs/src/utils/rollup-bundle.ts → docs-src/src/utils/rollup-bundle.ts b/docs/src/utils/rollup-bundle.ts → docs-src/src/utils/rollup-bundle.ts
diff --git a/docs/starlight-config.ts → docs-src/starlight-config.ts b/docs/starlight-config.ts → docs-src/starlight-config.ts
@@ -8,7 +8,7 @@ export default {
   editLink: {
     baseUrl: 'https://github.com/amzn/style-dictionary/edit/v4/src/content/docs/',
   },
-  favicon: 'favicon.png',
+  favicon: '/favicon.png',
   social: {
     github: 'https://github.com/amzn/style-dictionary',
     slack:
@@ -102,15 +102,37 @@ export default {
       ],
     },
   ],
-  // head: [
-  //   {
-  //     tag: 'script',
-  //     attrs: {
-  //       type: 'module',
-  //       src: '/src/load-playground.ts',
-  //     },
-  //   },
-  // ],
+  head: [
+    {
+      tag: 'meta',
+      attrs: {
+        name: 'keywords',
+        content:
+          'style-dictionary, style dictionary, style, dictionary, design, tokens, design tokens, design system, DTCG, W3C, Design Token Community Group',
+      },
+    },
+    {
+      tag: 'meta',
+      attrs: {
+        name: 'theme-color',
+        content: '#11aea7',
+      },
+    },
+    {
+      tag: 'meta',
+      attrs: {
+        name: 'og:image',
+        content: '/meta-img.png',
+      },
+    },
+    {
+      tag: 'meta',
+      attrs: {
+        name: 'og:image:alt',
+        content: 'Image of Style-Dictionary docs site',
+      },
+    },
+  ],
   customCss: ['./src/styles.css'],
   components: {
     Head: './src/components/Head.astro',

diff --git a/docs/src/assets/favicon copy.png b/docs/src/assets/favicon copy.png
diff --git a/docs/src/components/Head.astro b/docs/src/components/Head.astro