Redesign landing page and reskin docs (Iris/Cloud design system)

website/__a11y__/test-utils.ts

@@ -21,35 +21,18 @@ const config: Config = {
   i18n: {
     // A list of slugs to exclude from the sitemap for the default locale.
     // By default, all slugs for the default locale are included.
-    exclude: [
-      'components/using-components',
-      'getting-started',
-      'guides/customization',
-      'guides/i18n',
-      'guides/overriding-components',
-      'guides/pages',
-      'guides/project-structure',
-      'guides/route-data',
-      'guides/site-search',
-      'manual-setup',
-      'reference/frontmatter',
-      'reference/overrides',
-      'reference/plugins',
-      'reference/route-data',
-    ],
+    exclude: [],
     // Locale-specific included slugs (non-default locale slugs are excluded by default).
-    locales: {
-      // N.B. If adding more locales here, also update the changed files filters in
-      // `.github/workflows/ci.yml` to ensure tests run when files for those locales change.
-      ja: ['guides/route-data', 'reference/frontmatter'],
-    },
+    locales: {},
   },
   // A list of violation to ignore.
   ignore: [{ id: 'landmark-unique', nodeMatcher: landmarkUniqueNodeMatcher }],
   sitemap: {
     url: 'http://localhost:4321/sitemap-index.xml',
     replace: {
-      query: 'https://starlight.astro.build',
+      // The sitemap lists production URLs (astro.config.mjs `site`); rewrite
+      // them onto the local preview server under test.
+      query: 'https://actionbase.io',
       value: 'http://localhost:4321',
     },
   },

website/astro.config.mjs

@@ -2,11 +2,9 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightLinksValidator from 'starlight-links-validator';
-import markdocGrammar from './grammars/markdoc.tmLanguage.json';
 import starlightLlmsTxt from 'starlight-llms-txt';
 import mermaid from 'astro-mermaid';
 import { remarkHeadingId } from 'remark-custom-heading-id';
-import starlightUtils from '@lorenzo_lewis/starlight-utils';
 
 export const locales = {
   root: { label: 'English', lang: 'en' },
@@ -85,8 +83,23 @@ export default defineConfig({
       editLink: {
         baseUrl: 'https://github.com/kakao/actionbase/edit/main/website/',
       },
-      social: [],
+      social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/kakao/actionbase' }],
       head: [
+        {
+          tag: 'link',
+          attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
+        },
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            href: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap',
+          },
+        },
         {
           tag: 'script',
           attrs: { async: true, src: `https://www.googletagmanager.com/gtag/js?id=${GA_ID}` },
@@ -113,81 +126,54 @@ export default defineConfig({
       locales,
       sidebar: [
         {
-          label: 'Nav',
-          items: [
-            { label: 'Docs', slug: 'introduction' },
-            {
-              label: 'GitHub',
-              link: 'https://github.com/kakao/actionbase',
-              attrs: { class: 'nav-external', target: '_blank', rel: 'noopener' },
-            },
-          ],
-        },
-        {
-          label: 'Main',
-          items: [
-            {
-              label: 'Getting Started',
-              items: ['introduction', 'quick-start', 'faq', 'for-rdb-users', 'llms-txt'],
-            },
-            {
-              label: 'Design',
-              autogenerate: { directory: 'design' },
-            },
-            {
-              label: 'Guides',
-              autogenerate: { directory: 'guides' },
-            },
-            {
-              label: 'Provisioning',
-              autogenerate: { directory: 'provisioning' },
-            },
-            {
-              label: 'Operations',
-              autogenerate: { directory: 'operations' },
-            },
-            {
-              label: 'Internals',
-              autogenerate: { directory: 'internals' },
-            },
-            {
-              label: 'API References',
-              autogenerate: { directory: 'api-references' },
-            },
-            {
-              label: 'Project',
-              autogenerate: { directory: 'project' },
-            },
-            'community',
-          ],
+          label: 'Getting Started',
+          collapsed: true,
+          items: ['introduction', 'quick-start', 'faq', 'for-rdb-users', 'llms-txt'],
         },
+        { label: 'Design', collapsed: true, autogenerate: { directory: 'design' } },
+        { label: 'Guides', collapsed: true, autogenerate: { directory: 'guides' } },
+        { label: 'Provisioning', collapsed: true, autogenerate: { directory: 'provisioning' } },
+        { label: 'Operations', collapsed: true, autogenerate: { directory: 'operations' } },
+        { label: 'Internals', collapsed: true, autogenerate: { directory: 'internals' } },
+        { label: 'API References', collapsed: true, autogenerate: { directory: 'api-references' } },
+        { label: 'Project', collapsed: true, autogenerate: { directory: 'project' } },
         {
           label: 'Stories',
+          collapsed: true,
           items: [
             'stories',
-            { label: 'Use Cases', autogenerate: { directory: 'stories/use-cases' } },
-            { label: 'Engineering', autogenerate: { directory: 'stories/engineering' } },
-            { label: 'How We Survived', autogenerate: { directory: 'stories/how-we-survived' } },
-            { label: 'Vision', autogenerate: { directory: 'stories/vision' } },
+            { label: 'Use Cases', collapsed: true, autogenerate: { directory: 'stories/use-cases' } },
+            { label: 'Engineering', collapsed: true, autogenerate: { directory: 'stories/engineering' } },
+            { label: 'How We Survived', collapsed: true, autogenerate: { directory: 'stories/how-we-survived' } },
+            { label: 'Vision', collapsed: true, autogenerate: { directory: 'stories/vision' } },
           ],
         },
+        'community',
       ],
       components: {
         Head: './src/components/Head.astro',
         PageSidebar: './src/components/PageSidebar.astro',
+        ThemeSelect: './src/components/ThemeSelect.astro',
+        Footer: './src/components/Footer.astro',
       },
-      expressiveCode: { shiki: { langs: [markdocGrammar] } },
-      plugins: [
-        starlightUtils({
-          multiSidebar: {
-            switcherStyle: 'horizontalList',
-          },
-          navLinks: {
-            leading: {
-              useSidebarLabelled: 'Nav',
-            },
+      expressiveCode: {
+        // A single dark theme keeps code blocks on the terminal surface in both
+        // light and dark site themes, matching the design mocks.
+        themes: ['github-dark'],
+        styleOverrides: {
+          borderRadius: '10px',
+          borderColor: 'transparent',
+          codeBackground: '#1b1c2b',
+          frames: {
+            editorBackground: '#1b1c2b',
+            terminalBackground: '#1b1c2b',
+            editorActiveTabBackground: '#1b1c2b',
+            terminalTitlebarBackground: '#1b1c2b',
+            shadowColor: 'transparent',
           },
-        }),
+        },
+      },
+      plugins: [
         starlightLinksValidator({
           errorOnFallbackPages: false,
         }),