zhuzh up docs

docs/astro.config.mjs → docs/astro.config.js

@@ -2,16 +2,29 @@ import { defineConfig } from "astro/config";
 import preact from "@astrojs/preact";
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
+import sassDts from "vite-plugin-sass-dts";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [preact(), react(), sitemap()],
   site: `https://openapi-ts.pages.dev`,
+  markdown: {
+    shikiConfig: {
+      theme: "poimandres",
+      langs: ["bash", "js", "json", "shell", "ts", "yaml"],
+    },
+  },
   vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {},
+      },
+    },
     define: {
       "import.meta.env.VITE_ALGOLIA_APP_ID": JSON.stringify(process.env.ALGOLIA_APP_ID ?? ""),
       "import.meta.env.VITE_ALGOLIA_INDEX_NAME": JSON.stringify(process.env.ALGOLIA_INDEX_NAME ?? ""),
       "import.meta.env.VITE_ALGOLIA_SEARCH_KEY": JSON.stringify(process.env.ALGOLIA_SEARCH_KEY ?? ""),
     },
+    plugins: [sassDts()],
   },
 });

docs/package.json

@@ -4,8 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "npm run update-contributors && astro build",
-    "dev": "npm run update-contributors && astro dev",
+    "build": "pnpm run tokens && pnpm run update-contributors && astro build",
+    "dev": "pnpm run tokens && pnpm run update-contributors && astro dev",
+    "tokens": "co build",
     "update-contributors": "node scripts/update-contributors.js"
   },
   "dependencies": {
@@ -24,8 +25,11 @@
   },
   "devDependencies": {
     "@astrojs/sitemap": "^2.0.2",
+    "@cobalt-ui/cli": "^1.4.1",
+    "@cobalt-ui/plugin-sass": "^1.2.3",
     "@types/node": "^20.5.0",
     "html-escaper": "^3.0.3",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite-plugin-sass-dts": "^1.3.9"
   }
 }

docs/src/components/Contributors.astro

@@ -23,14 +23,15 @@ const { contributors = [] } = Astro.props;
 
 <style lang="scss">
   .wrapper {
+    column-gap: 0.5rem;
     display: grid;
     font-size: 0.75rem;
-    gap: 0.5rem 0.25rem;
-    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
     line-height: 1;
     list-style: none;
     margin: 0;
     padding: 0;
+    row-gap: 1rem;
   }
 
   .avatar {
@@ -44,14 +45,16 @@ const { contributors = [] } = Astro.props;
     display: flex;
     justify-content: center;
     margin: 0 !important;
+    padding: 0;
   }
 
   .link {
     align-items: center;
     display: flex;
     flex-direction: column;
-    line-height: 1;
+    font-size: 0.875rem;
     gap: 0.25rem;
+    line-height: 1;
     text-align: center;
     text-decoration: none;
 

docs/src/components/HeadCommon.astro

@@ -9,11 +9,12 @@ import "../styles/app.scss";
 <link rel="sitemap" href="/sitemap-index.xml" />
 <script src="/make-scrollable-code-focusable.js" is:inline></script>
 <script is:inline>
-  const root = document.documentElement;
-  const theme = localStorage.getItem("theme");
+const theme = localStorage.getItem("theme");
+if (document.body) {
   if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-    root.classList.add("theme-dark");
+    document.body.setAttribute("data-color-mode", "dark");
   } else {
-    root.classList.remove("theme-dark");
+    document.body.removeAttribute("data-color-mode");
   }
+}
 </script>

docs/src/components/HeadSEO.astro

@@ -1,14 +1,14 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import { SITE, OPEN_GRAPH } from "../consts";
+import { SITE, OPEN_GRAPH } from "../consts.js";
 
 type Props = { canonicalUrl: URL } & CollectionEntry<"docs">["data"];
 
 const { ogLocale, image, title, description, canonicalUrl } = Astro.props;
 const formattedContentTitle = `${title} › ${SITE.title}`;
 const imageSrc = image?.src ?? OPEN_GRAPH.image.src;
 const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
+const imageAlt = image?.alt;
 ---
 
 <link rel="canonical" href={canonicalUrl} />
@@ -21,7 +21,6 @@ const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
 <meta name="description" property="og:description" content={description ?? SITE.description} />
 <meta property="og:site_name" content={SITE.title} />
 <meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
 <meta name="twitter:title" content={formattedContentTitle} />
 <meta name="twitter:description" content={description ?? SITE.description} />
 <meta name="twitter:image" content={canonicalImageSrc} />

docs/src/components/Header/Header.astro

@@ -1,6 +1,5 @@
 ---
 import SkipToContent from "./SkipToContent.astro";
-import SidebarToggle from "./SidebarToggle.jsx";
 import Search from "./Search.jsx";
 
 type Props = {
@@ -13,9 +12,6 @@ const { currentPage } = Astro.props;
 <header>
   <SkipToContent />
   <nav class="nav-wrapper">
-    <div class="menu-toggle">
-      <SidebarToggle client:idle />
-    </div>
     <div class="logo flex">
       <a href="/">
         <img src="/assets/openapi-ts.svg" />
@@ -38,17 +34,16 @@ const { currentPage } = Astro.props;
 </header>
 
 <style lang="scss">
+  @use '../../tokens' as *;
+
   header {
     align-items: center;
-    background-color: var(--theme-navbar-bg);
     display: flex;
-    height: var(--theme-navbar-height);
+    height: 3rem;
     justify-content: center;
-    width: 100%;
   }
 
   .logo {
-    color: hsla(var(--color-base-white), 100%, 1);
     display: flex;
     flex: 1;
   }
@@ -65,17 +60,10 @@ const { currentPage } = Astro.props;
     min-width: 6rem;
 
     a {
-      color: var(--theme-text);
+      color: inherit;
       display: flex;
-      padding: 0.5em 0.25em;
-      margin: -0.5em -0.25em;
-      text-decoration: none;
       font-weight: bold;
-
-      &:hover,
-      &:focus {
-        color: var(--theme-text-accent);
-      }
+      text-decoration: none;
     }
 
     img {
@@ -91,12 +79,17 @@ const { currentPage } = Astro.props;
   }
 
   .nav-wrapper {
+    --padding: 1.5rem;
+
     display: flex;
     gap: 0.5rem;
     justify-content: flex-end;
-    width: 100%;
-    max-width: 81rem;
-    padding-right: 0.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    padding-left: var(--padding);
+    padding-right: var(--padding);
+    width: 81rem;
 
     @media (min-width: 600px) {
       gap: 1em;
@@ -111,8 +104,8 @@ const { currentPage } = Astro.props;
 
   /** Style Algolia */
   :root {
-    --docsearch-primary-color: var(--theme-accent);
-    --docsearch-logo-color: var(--theme-text);
+    --docsearch-primary-color: #{token('color.ui.bg')};
+    --docsearch-logo-color: #{token('color.blue.60')};
   }
 
   .search-item {
@@ -134,7 +127,7 @@ const { currentPage } = Astro.props;
     a {
       align-items: center;
       align-self: stretch;
-      color: var(--theme-text);
+      color: inherit;
       display: flex;
 
       &:hover {

docs/src/components/Header/LanguageSelect.css

@@ -1,47 +1,47 @@
 .language-select {
-	flex-grow: 1;
-	width: 48px;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0.33em 0.5em;
-	overflow: visible;
-	font-weight: 500;
-	font-size: 1rem;
-	font-family: inherit;
-	line-height: inherit;
-	background-color: var(--theme-bg);
-	border-color: var(--theme-text-lighter);
-	color: var(--theme-text-light);
-	border-style: solid;
-	border-width: 1px;
-	border-radius: 0.25rem;
-	outline: 0;
-	cursor: pointer;
-	transition-timing-function: ease-out;
-	transition-duration: 0.2s;
-	transition-property: border-color, color;
-	-webkit-font-smoothing: antialiased;
-	padding-left: 30px;
-	padding-right: 1rem;
+  flex-grow: 1;
+  width: 48px;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.33em 0.5em;
+  overflow: visible;
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: inherit;
+  line-height: inherit;
+  background-color: var(--theme-bg);
+  border-color: var(--theme-text-lighter);
+  color: var(--theme-text-light);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.25rem;
+  outline: 0;
+  cursor: pointer;
+  transition-timing-function: ease-out;
+  transition-duration: 0.2s;
+  transition-property: border-color, color;
+  -webkit-font-smoothing: antialiased;
+  padding-left: 30px;
+  padding-right: 1rem;
 }
 .language-select-wrapper .language-select:hover,
 .language-select-wrapper .language-select:focus {
-	color: var(--theme-text);
-	border-color: var(--theme-text-light);
+  color: var(--theme-text);
+  border-color: var(--theme-text-light);
 }
 .language-select-wrapper {
-	color: var(--theme-text-light);
-	position: relative;
+  color: var(--theme-text-light);
+  position: relative;
 }
 .language-select-wrapper > svg {
-	position: absolute;
-	top: 7px;
-	left: 10px;
-	pointer-events: none;
+  position: absolute;
+  top: 7px;
+  left: 10px;
+  pointer-events: none;
 }
 
 @media (min-width: 50em) {
-	.language-select {
-		width: 100%;
-	}
+  .language-select {
+    width: 100%;
+  }
 }