docs theme update & fixes

Author: Arhell

astro.config.mjs

@@ -6,25 +6,25 @@ import starlightImageZoom from 'starlight-image-zoom';
 import rehypeAstroRelativeMarkdownLinks from "astro-rehype-relative-markdown-links";
 import starlightScrollToTop from 'starlight-scroll-to-top';
 import starlightBlog from 'starlight-blog';
-import astroExpressiveCode from 'astro-expressive-code';
 
 const options = {
     collectionBase: false,
 };
 
 export default defineConfig({
     integrations: [
-        astroExpressiveCode({
-            themes: ['material-theme'],
-        }),
         starlight({
+            expressiveCode: {
+                themes: ['github-dark', 'dracula'],
+            },
             title: '',
             favicon: '/favicon.svg',
             social: [
                 {icon: 'github', label: 'GitHub', href: 'https://github.com/codeceptjs/CodeceptJS'},
             ],
             components: {
                 Head: "./src/components/Head.astro",
+                PageFrame: "./src/components/PageFrame.astro",
                 PageTitle: './src/components/PageTitle.astro',
                 Footer: './src/components/Footer.astro',
                 SiteTitle: './src/components/SiteTitle.astro',
@@ -171,7 +171,12 @@ export default defineConfig({
             ],
         }),
     ],
-    vite: {plugins: [tailwindcss()]},
+    vite: {
+        plugins: [tailwindcss()],
+        build: {
+            assetsInlineLimit: 0,
+        },
+    },
     markdown: {
         rehypePlugins: [
             [rehypeAstroRelativeMarkdownLinks, options],

package.json

@@ -16,7 +16,6 @@
     "@tailwindcss/vite": "^4.1.17",
     "astro": "^5.16.4",
     "astro-breadcrumbs": "^3.3.1",
-    "astro-expressive-code": "^0.41.3",
     "astro-rehype-relative-markdown-links": "0.18.1",
     "astro-vtbot": "^2.1.9",
     "meilisearch-docsearch": "^0.8.0",

pnpm-lock.yaml

@@ -0,0 +1,100 @@
+---
+import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+const isHome = Astro.url.pathname === "/";
+---
+
+<div class="page sl-flex">
+    <header class={isHome ? "home-header header" : "header"} data-vtbot-replace="header">
+        <slot name="header" />
+    </header>
+    {
+    hasSidebar && (
+    <nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
+        <MobileMenuToggle />
+        <div id="starlight__sidebar" class="sidebar-pane">
+            <div class="sidebar-content sl-flex">
+                <slot name="sidebar" />
+            </div>
+        </div>
+    </nav>
+    )
+    }
+    <div class="main-frame"><slot /></div>
+</div>
+
+<style>
+    @layer starlight.core {
+        .page {
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        .header {
+            z-index: var(--sl-z-index-navbar);
+            position: fixed;
+            inset-inline-start: 0;
+            inset-block-start: 0;
+            width: 100%;
+            height: var(--sl-nav-height);
+            border-bottom: 1px solid var(--sl-color-hairline-shade);
+            padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+            padding-inline-end: var(--sl-nav-pad-x);
+            background-color: var(--sl-color-bg-nav);
+        }
+
+        :global([data-has-sidebar]) .header {
+            padding-inline-end: calc(
+                var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
+            );
+        }
+
+        .sidebar-pane {
+            visibility: var(--sl-sidebar-visibility, hidden);
+            position: fixed;
+            z-index: var(--sl-z-index-menu);
+            inset-block: var(--sl-nav-height) 0;
+            inset-inline-start: 0;
+            width: 100%;
+            background-color: var(--sl-color-black);
+            overflow-y: auto;
+        }
+
+        :global([aria-expanded='true']) ~ .sidebar-pane {
+            --sl-sidebar-visibility: visible;
+        }
+
+        .sidebar-content {
+            height: 100%;
+            min-height: max-content;
+            padding: 1rem var(--sl-sidebar-pad-x) 0;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        @media (min-width: 50rem) {
+            .sidebar-content::after {
+                content: '';
+                padding-bottom: 1px;
+            }
+        }
+
+        .main-frame {
+            padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+            padding-inline-start: var(--sl-content-inline-start);
+        }
+
+        @media (min-width: 50rem) {
+            :global([data-has-sidebar]) .header {
+                padding-inline-end: var(--sl-nav-pad-x);
+            }
+            .sidebar-pane {
+                --sl-sidebar-visibility: visible;
+                width: var(--sl-sidebar-width);
+                background-color: var(--sl-color-bg-sidebar);
+                border-inline-end: 1px solid var(--sl-color-hairline-shade);
+            }
+        }
+    }
+</style>

src/components/Links.astro

@@ -4,7 +4,7 @@
 ---
 
 {/* AI-Powered Testing Section */}
-<section class="py-20 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden">
+<section class="mt-0 py-20 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden">
     {/* Floating Background Elements */}
     <div class="absolute inset-0">
         <div class="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 dark:bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>

src/components/PageFrame.astro

@@ -2,7 +2,7 @@
 ---
 
 {/* Community Section */}
-<section class="py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
+<section class="mt-0 py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
       <h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">

src/pages/home/components/ai/index.astro

@@ -104,4 +104,10 @@ Scenario('Create a new store', async ({ I, login, SettingsPage }) => {
       </div>
     </div>
   </div>
-</section>
+</section>
+
+<style is:global>
+    .expressive-code pre {
+        overflow: hidden !important;
+    }
+</style>