Moving to docs theme

Author: jayair

www/astro.config.mjs

@@ -1,18 +1,23 @@
-import { defineConfig } from "astro/config"
+import theme from "toolbeam-docs-theme"
 import starlight from "@astrojs/starlight"
+import { defineConfig } from "astro/config"
 import { rehypeHeadingIds } from "@astrojs/markdown-remark"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
-import config from "./config"
+
+const github = "https://github.com/toolbeam/openauth"
+const discord = "https://sst.dev/discord"
+const url = "https://openauth.js.org"
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://openauth.js.org",
+  site: url,
   trailingSlash: 'always',
   devToolbar: {
     enabled: false,
   },
   integrations: [
     starlight({
+      plugins: [theme()],
       title: "OpenAuth",
       description: "Universal, standards-based auth provider.",
       head: [
@@ -41,39 +46,40 @@ export default defineConfig({
             media: "(prefers-color-scheme: dark)",
           },
         },
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image",
+            content: `${url}/social-share.png`,
+          },
+        },
+        {
+          tag: "meta",
+          attrs: {
+            property: "twitter:image",
+            content: `${url}/social-share.png`,
+          },
+        },
       ],
-      pagination: false,
       logo: {
         light: "./src/assets/logo-light.svg",
         dark: "./src/assets/logo-dark.svg",
         replacesTitle: true,
       },
       social: {
-        github: config.github,
-        discord: config.discord,
+        github,
+        discord,
       },
       lastUpdated: true,
       editLink: {
-        baseUrl: `${config.github}/edit/master/www/`,
+        baseUrl: `${github}/edit/master/www/`,
       },
       components: {
         Hero: "./src/components/Hero.astro",
-        Head: "./src/components/Head.astro",
-        Header: "./src/components/Header.astro",
-        Footer: "./src/components/Footer.astro",
-        PageTitle: "./src/components/PageTitle.astro",
       },
       customCss: [
-        "@fontsource/ibm-plex-mono/400.css",
-        "@fontsource/ibm-plex-mono/400-italic.css",
-        "@fontsource/ibm-plex-mono/500.css",
-        "@fontsource/ibm-plex-mono/600.css",
-        "@fontsource/ibm-plex-mono/700.css",
         "./src/custom.css",
-        "./src/styles/tsdoc.css",
         "./src/styles/lander.css",
-        "./src/styles/markdown.css",
-        "./src/styles/headings.css",
       ],
       sidebar: [
         { label: "Intro", slug: "docs" },

www/bun.lockb

@@ -311,22 +311,14 @@ function renderHeader(input: {
   editUrl: string | boolean
   description: string
 }) {
-  const relativePath = path.relative(
-    path.dirname(path.join(OUTPUT_DIR, `${input.moduleName}.mdx`)),
-    "src/components/tsdoc",
-  )
   return [
     `---`,
     `title: ${input.title}`,
     `editUrl: ${input.editUrl}`,
     `description: ${input.description}`,
     `---`,
     "",
-    `import Segment from '${relativePath}/Segment.astro';`,
-    `import Section from '${relativePath}/Section.astro';`,
-    `import NestedTitle from '${relativePath}/NestedTitle.astro';`,
-    `import InlineSection from '${relativePath}/InlineSection.astro';`,
-    `import { Tabs, TabItem } from '@astrojs/starlight/components';`,
+    "import { Segment, Section, NestedTitle, InlineSection } from 'toolbeam-docs-theme/components'",
     "",
   ]
 }
@@ -497,16 +489,16 @@ function renderComment(declaration: TypeDoc.Reflection) {
 
   return [
     declaration instanceof TypeDoc.DeclarationReflection &&
-    declaration.defaultValue
+      declaration.defaultValue
       ? [
-          ``,
-          `<InlineSection>`,
-          `**Default** ${renderType({
-            type: "literal",
-            value: declaration.defaultValue.replace(/"/g, ""),
-          } as TypeDoc.LiteralType)}`,
-          `</InlineSection>`,
-        ]
+        ``,
+        `<InlineSection>`,
+        `**Default** ${renderType({
+          type: "literal",
+          value: declaration.defaultValue.replace(/"/g, ""),
+        } as TypeDoc.LiteralType)}`,
+        `</InlineSection>`,
+      ]
       : [],
     declaration.comment.blockTags
       .filter((tag) => tag.tag === "@default")
@@ -518,13 +510,13 @@ function renderComment(declaration: TypeDoc.Reflection) {
           // Otherwise render it as a comment ie. No domains configured
           tag.content.length === 1 && tag.content[0].kind === "code"
             ? `**Default** ${renderType(
-                new TypeDoc.IntrinsicType(
-                  tag.content[0].text
-                    .replace(/`/g, "")
-                    .replace(/{/g, "&lcub;")
-                    .replace(/}/g, "&rcub;"),
-                ),
-              )}`
+              new TypeDoc.IntrinsicType(
+                tag.content[0].text
+                  .replace(/`/g, "")
+                  .replace(/{/g, "&lcub;")
+                  .replace(/}/g, "&rcub;"),
+              ),
+            )}`
             : `**Default** ${tag.content.map((c) => c.text)}`,
           `</InlineSection>`,
         ]
@@ -546,11 +538,11 @@ function renderSignatureAsType(signature: TypeDoc.SignatureReflection) {
     .map(
       (parameter) =>
         `${renderParameter(parameter)}: ${
-          // If the type is an object, render it inline
-          parameter.type?.type === "reflection" &&
+        // If the type is an object, render it inline
+        parameter.type?.type === "reflection" &&
           parameter.type.declaration.kind === TypeDoc.ReflectionKind.TypeLiteral
-            ? renderObjectTypeInline(parameter.type)
-            : renderType(parameter.type!)
+          ? renderObjectTypeInline(parameter.type)
+          : renderType(parameter.type!)
         }`,
     )
     .join(", ")
@@ -696,8 +688,8 @@ function renderUnionType(type: TypeDoc.UnionType) {
 function renderArrayType(type: TypeDoc.ArrayType) {
   return type.elementType.type === "union"
     ? `<code class="symbol">(</code>${renderType(
-        type.elementType,
-      )}<code class="symbol">)[]</code>`
+      type.elementType,
+    )}<code class="symbol">)[]</code>`
     : `${renderType(type.elementType)}<code class="symbol">[]</code>`
 }
 function renderCallbackType(type: TypeDoc.ReflectionType) {
@@ -713,7 +705,7 @@ function renderObjectTypeInline(type: TypeDoc.ReflectionType): Text {
           `<code class="symbol">&colon; </code>`,
           // If rendering inline, also render children inline
           c.type?.type === "reflection" &&
-          c.type.declaration.kind === TypeDoc.ReflectionKind.TypeLiteral
+            c.type.declaration.kind === TypeDoc.ReflectionKind.TypeLiteral
             ? renderObjectTypeInline(c.type)
             : renderType(c.type!),
         ].join(""),
@@ -809,17 +801,17 @@ function flattenNestedTypes(
         { prefix, subType, depth },
         ...(subType.kind === TypeDoc.ReflectionKind.Property
           ? flattenNestedTypes(
-              subType.type!,
-              `${prefix}.${subType.name}`,
-              depth + 1,
-            )
+            subType.type!,
+            `${prefix}.${subType.name}`,
+            depth + 1,
+          )
           : []),
         ...(subType.kind === TypeDoc.ReflectionKind.Accessor
           ? flattenNestedTypes(
-              subType.getSignature?.type!,
-              `${prefix}.${subType.name}`,
-              depth + 1,
-            )
+            subType.getSignature?.type!,
+            `${prefix}.${subType.name}`,
+            depth + 1,
+          )
           : []),
       ])
   }
@@ -847,8 +839,8 @@ function configureLogger() {
     return
   }
 
-  console.debug = () => {}
-  console.warn = () => {}
+  console.debug = () => { }
+  console.warn = () => { }
 }
 
 function printWarnings() {

www/config.ts

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^6.0.1",
-    "@astrojs/starlight": "^0.29.2",
+    "@astrojs/starlight": "^0.32.0",
     "@fontsource/ibm-plex-mono": "^5.1.0",
-    "astro": "^4.16.10",
+    "astro": "^5.1.5",
     "rehype-autolink-headings": "^7.1.0",
-    "sharp": "^0.32.5"
+    "sharp": "^0.33.4",
+    "toolbeam-docs-theme": "^0.0.3"
   },
   "devDependencies": {
     "typedoc": "^0.27.5"