terrazzoapp · drwpow · Nov 6, 2023 · Nov 6, 2023
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,6 +1,8 @@
 import {defineConfig} from 'vitepress';
 import packageJSON from '../../packages/cli/package.json';
 
+const HOSTNAME = 'https://cobalt-ui.pages.dev';
+
 /** @see https://vitepress.dev/reference/site-config */
 export default defineConfig({
   title: 'Cobalt',
@@ -13,7 +15,15 @@ export default defineConfig({
     ['script', {defer: '', src: 'https://static.cloudflareinsights.com/beacon.min.js', 'data-cf-beacon': '{"token": "f5713e86f9aa43278151f2763d6b59ae"}'}],
   ],
   sitemap: {
-    hostname: 'https://cobalt-ui.pages.dev',
+    hostname: HOSTNAME,
+  },
+  transformHead(context) {
+    return [
+      ['meta', {name: 'og:title', content: context.pageData.frontmatter.title ? `${context.pageData.frontmatter.title} | Cobalt` : `Cobalt: CI for your Design Tokens`}],
+      ['meta', {name: 'og:description', content: context.pageData.frontmatter.description || 'Use Design Tokens Format Module tokens to generate CSS, Sass, JS/TS, universal JSON, and more.'}],
+      ['meta', {name: 'og:image', content: `${HOSTNAME}/social.png`}],
+      ['meta', {name: 'twitter:card', content: 'summary_large_image'}],
+    ];
   },
   /** @see https://vitepress.dev/reference/default-theme-config */
   themeConfig: {

diff --git a/docs/advanced/about.md b/docs/advanced/about.md
@@ -1,5 +1,5 @@
 ---
-title: About
+title: About Cobalt
 ---
 
 # About

diff --git a/docs/advanced/ci.md b/docs/advanced/ci.md
@@ -1,8 +1,8 @@
 ---
-title: CI
+title: Using Cobalt in CI
 ---
 
-# CI
+# Using Cobalt in CI
 
 Using your preferred CI stack, here’s an example of how you could add Cobalt to your CI. First, we’ll take a `package.json` that had an existing `npm run build` command, and add `co build` script to it:
 

diff --git a/docs/advanced/config.md b/docs/advanced/config.md
@@ -1,5 +1,5 @@
 ---
-title: Config
+title: Cobalt Config
 ---
 
 # Config

diff --git a/docs/advanced/node.md b/docs/advanced/node.md
@@ -1,5 +1,5 @@
 ---
-title: Node.js API
+title: Cobalt Node.js API
 ---
 
 # Node.js API

diff --git a/docs/advanced/plugin-api.md b/docs/advanced/plugin-api.md
@@ -1,5 +1,5 @@
 ---
-title: Plugin API
+title: Cobalt Plugin API
 ---
 
 # Plugin API

diff --git a/docs/guides/cli.md b/docs/guides/cli.md
@@ -1,5 +1,5 @@
 ---
-title: CLI
+title: Cobalt CLI
 ---
 
 # CLI

diff --git a/docs/guides/modes.md b/docs/guides/modes.md
@@ -1,5 +1,5 @@
 ---
-title: Modes
+title: Token Modes
 ---
 
 # Modes

diff --git a/docs/guides/tokens.md b/docs/guides/tokens.md
@@ -1,5 +1,5 @@
 ---
-title: tokens.json
+title: tokens.json Manifest
 ---
 
 # tokens.json

diff --git a/docs/index.md b/docs/index.md
@@ -2,6 +2,8 @@
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
+title: 'Cobalt: CI for your design tokens'
+
 hero:
   name: Cobalt
   text: CI for Design Tokens

diff --git a/docs/integrations/css.md b/docs/integrations/css.md
@@ -1,8 +1,8 @@
 ---
-title: CSS
+title: CSS Integration
 ---
 
-# CSS
+# CSS Integration
 
 Generate CSS variables from your Design Tokens Format Module (DTFM) tokens.
 

diff --git a/docs/integrations/figma.md b/docs/integrations/figma.md
@@ -1,8 +1,8 @@
 ---
-title: Figma
+title: Figma Integration
 ---
 
-# Figma
+# Figma Integration
 
 Because Figma doesn’t have a way to export the [Design Tokens Format Module (DTFM)](https://designtokens.org) directly, you’ll need a plugin to export your styles to the DTFM format.
 

diff --git a/docs/integrations/js.md b/docs/integrations/js.md
@@ -1,8 +1,8 @@
 ---
-title: JS / TS
+title: JS + TS Integration
 ---
 
-# JavaScript + TypeScript
+# JavaScript + TypeScript Integration
 
 Generate JavaScript (with TypeScript declarations) from your Design Tokens Format Module (DTFM) tokens.
 

diff --git a/docs/integrations/json.md b/docs/integrations/json.md
@@ -1,8 +1,8 @@
 ---
-title: JSON
+title: JSON Integration
 ---
 
-# JSON + Native Apps
+# JSON + Native App Integration
 
 Generate universal JSON from your Design Tokens Format Module (DTFM) tokens. This is usable by any platform, any language (provided you do a small amount of JSON parsing).
 

diff --git a/docs/integrations/other.md b/docs/integrations/other.md
@@ -1,5 +1,5 @@
 ---
-title: Other
+title: Other Integrations
 ---
 
 # Other Integrations

diff --git a/docs/integrations/sass.md b/docs/integrations/sass.md
@@ -1,8 +1,8 @@
 ---
-title: Sass
+title: Sass Integration
 ---
 
-# Sass
+# Sass Integration
 
 Generate `.scss` and `.sass` from your Design Tokens Format Module (DTFM) tokens.
 

diff --git a/docs/integrations/style-dictionary.md b/docs/integrations/style-dictionary.md
@@ -1,8 +1,8 @@
 ---
-title: Style Dictionary
+title: Style Dictionary Integration
 ---
 
-# Style Dictionary
+# Style Dictionary Integration
 
 You can migrate your [Style Dictionary](https://amzn.github.io/style-dictionary) tokens to the Design Tokens Format Module (DTFM) standard by running the following command (granted you have [the CLI installed](/guides/cli)):
 

diff --git a/docs/integrations/tailwind.md b/docs/integrations/tailwind.md
@@ -1,8 +1,8 @@
 ---
-title: Tailwind CSS
+title: Tailwind CSS Integration
 ---
 
-# Tailwind CSS
+# Tailwind CSS Integration
 
 Generate a [Tailwind CSS](https://tailwindcss.com/) preset from your design tokens.
 

diff --git a/docs/public/social.png b/docs/public/social.png
diff --git a/docs/tokens/alias.md b/docs/tokens/alias.md
@@ -1,5 +1,5 @@
 ---
-title: Alias
+title: Token Alias
 ---
 
 # Alias

diff --git a/docs/tokens/border.md b/docs/tokens/border.md
@@ -1,5 +1,5 @@
 ---
-title: Border
+title: Border Token
 ---
 
 # Border

diff --git a/docs/tokens/color.md b/docs/tokens/color.md
@@ -1,5 +1,5 @@
 ---
-title: color
+title: Color Token
 ---
 
 # Color

diff --git a/docs/tokens/cubic-bezier.md b/docs/tokens/cubic-bezier.md
@@ -1,5 +1,5 @@
 ---
-title: Cubic Bézier
+title: Cubic Bézier Token
 ---
 
 # Cubic Bézier

diff --git a/docs/tokens/dimension.md b/docs/tokens/dimension.md
@@ -1,5 +1,5 @@
 ---
-title: Dimension
+title: Dimension Token
 ---
 
 # Dimension

diff --git a/docs/tokens/duration.md b/docs/tokens/duration.md
@@ -1,5 +1,5 @@
 ---
-title: Duration
+title: Duration Token
 ---
 
 # Duration

diff --git a/docs/tokens/font-family.md b/docs/tokens/font-family.md
@@ -1,5 +1,5 @@
 ---
-title: Font Family
+title: Font Family Token
 ---
 
 # Font Family

diff --git a/docs/tokens/font-weight.md b/docs/tokens/font-weight.md
@@ -1,5 +1,5 @@
 ---
-title: Font Weight
+title: Font Weight Token
 ---
 
 # Font Weight

diff --git a/docs/tokens/gradient.md b/docs/tokens/gradient.md
@@ -1,5 +1,5 @@
 ---
-title: Gradient
+title: Gradient Token
 ---
 
 # Gradient

diff --git a/docs/tokens/group.md b/docs/tokens/group.md
@@ -1,5 +1,5 @@
 ---
-title: Group
+title: Token Group
 ---
 
 # Group

diff --git a/docs/tokens/link.md b/docs/tokens/link.md
@@ -1,5 +1,5 @@
 ---
-title: Link
+title: Link Token
 ---
 
 # Link

diff --git a/docs/tokens/number.md b/docs/tokens/number.md
@@ -1,5 +1,5 @@
 ---
-title: Number
+title: Number Token
 ---
 
 # Number

diff --git a/docs/tokens/shadow.md b/docs/tokens/shadow.md
@@ -1,5 +1,5 @@
 ---
-title: Shadow
+title: Shadow Token
 ---
 
 # Shadow

diff --git a/docs/tokens/stroke-style.md b/docs/tokens/stroke-style.md
@@ -1,5 +1,5 @@
 ---
-title: Stroke Style
+title: Stroke Style Token
 ---
 
 # Stroke Style

diff --git a/docs/tokens/transition.md b/docs/tokens/transition.md
@@ -1,5 +1,5 @@
 ---
-title: Transition
+title: Transition Token
 ---
 
 # Transition

diff --git a/docs/tokens/typography.md b/docs/tokens/typography.md
@@ -1,5 +1,5 @@
 ---
-title: Typography
+title: Typography Token
 ---
 
 # Typography