Merge pull request #14 from glandjs/develop

add new layout and new page

Author: m-mdy-m

astro.config.mjs

@@ -1,22 +1,32 @@
-// @ts-check
 import { defineConfig } from 'astro/config'
 import starlight from '@astrojs/starlight'
 import tailwind from '@astrojs/tailwind'
 
-// https://astro.build/config
 export default defineConfig({
-  site: 'https://glandjs.github.io/docs',
-  base: '/docs/',
+  site: 'https://glandjs.github.io',
+  base: '/',
   integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
     starlight({
-      expressiveCode: {
-        themes: ['vesper'],
-      },
       title: 'Gland',
+      logo: {
+        src: './src/assets/logo.svg',
+        alt: 'Gland Documentation',
+      },
       social: {
-        github: 'https://github.com/glandjs/gland',
+        github: 'https://github.com/glandjs/docs',
+        discord: 'https://discord.gg/glandjs',
+        npm: 'https://www.npmjs.com/package/@glandjs/core',
+      },
+      expressiveCode: {
+        themes: ['github-dark-default'],
+        styleOverrides: {
+          borderRadius: '0.5rem',
+        },
       },
-      customCss: ['./src/tailwind.css'],
+      customCss: ['@styles/tailwind.css'],
       components: {
         Header: '@components/Header.astro',
         ContentPanel: '@components/ContentPanel.astro',
@@ -35,18 +45,153 @@ export default defineConfig({
           attrs: {
             rel: 'preconnect',
             href: 'https://fonts.gstatic.com',
-            crossorigin: true,
+            crossorigin: 'anonymous',
+          },
+        },
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
           },
         },
         {
           tag: 'link',
           attrs: {
             rel: 'stylesheet',
-            href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
+            href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap',
           },
         },
       ],
+      sidebar: [
+        {
+          label: 'Introduction',
+          collapsed: false,
+          items: [
+            {
+              label: 'Getting Started',
+              link: '/getting-started',
+              badge: 'New',
+            },
+            {
+              label: 'Installation',
+              link: '/installation',
+            },
+            {
+              label: 'Quickstart',
+              link: '/quickstart',
+            },
+          ],
+        },
+        {
+          label: 'Core Concepts',
+          collapsed: false,
+          items: [
+            {
+              label: 'Event-Driven Architecture',
+              link: '/concepts/event-driven',
+            },
+            {
+              label: 'Channels',
+              link: '/concepts/channels',
+            },
+            {
+              label: 'Controllers',
+              link: '/concepts/controllers',
+            },
+            {
+              label: 'Modules',
+              link: '/concepts/modules',
+            },
+          ],
+        },
+        {
+          label: 'Guides',
+          collapsed: true,
+          items: [
+            {
+              label: 'Basic Usage',
+              link: '/guides/basic-usage',
+            },
+            {
+              label: 'Dependency Injection',
+              link: '/guides/dependency-injection',
+            },
+            {
+              label: 'Advanced Features',
+              link: '/guides/advanced-features',
+            },
+            {
+              label: 'Best Practices',
+              link: '/guides/best-practices',
+            },
+          ],
+        },
+        {
+          label: 'HTTP Integration',
+          collapsed: true,
+          items: [
+            {
+              label: 'Express Integration',
+              link: '/http/express',
+            },
+            {
+              label: 'Fastify Integration',
+              link: '/http/fastify',
+            },
+            {
+              label: 'Custom Integrations',
+              link: '/http/custom',
+            },
+          ],
+        },
+        {
+          label: 'API Reference',
+          collapsed: true,
+          items: [
+            {
+              label: 'Core API',
+              link: '/api/core',
+            },
+            {
+              label: 'Utilities',
+              link: '/api/utilities',
+            },
+            {
+              label: 'Configuration',
+              link: '/api/configuration',
+            },
+            {
+              label: 'Decorators',
+              link: '/api/decorators',
+            },
+          ],
+        },
+        {
+          label: 'Resources',
+          collapsed: true,
+          items: [
+            {
+              label: 'FAQ',
+              link: '/resources/faq',
+            },
+            {
+              label: 'Examples',
+              link: '/resources/examples',
+            },
+            {
+              label: 'Community',
+              link: '/resources/community',
+            },
+            {
+              label: 'Contributing',
+              link: '/resources/contributing',
+            },
+          ],
+        },
+      ],
+      lastUpdated: true,
+      pagination: true,
     }),
-    tailwind({ applyBaseStyles: false }),
   ],
 })

ec.config.mjs

@@ -0,0 +1,6 @@
+import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
+
+/** @type {import('@astrojs/starlight/expressive-code').StarlightExpressiveCodeOptions} */
+export default {
+  plugins: [pluginLineNumbers()],
+}

package.json

@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/glandjs/docs/issues"
   },
-  "homepage": "https://glandjs.github.io/docs/",
+  "homepage": "https://glandjs.github.io/",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -25,6 +25,7 @@
     "@astrojs/starlight": "^0.32.5",
     "@astrojs/starlight-tailwind": "^3.0.1",
     "@astrojs/tailwind": "^5.1.4",
+    "@expressive-code/plugin-line-numbers": "^0.41.2",
     "astro": "^5.5.3",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.4.4"

pnpm-lock.yaml

@@ -3,14 +3,14 @@ import { Icon } from '@astrojs/starlight/components';
 
 const navItems = [
   { name: "Gland_", href: "/help" },
-  { name: "docs", href: "/docs" },
-  { name: "Changelogs", href: "/changelogs" },
-  { name: "Community", href: "/community" }
+  { name: "documentation", href: "/documentation" },
+  { name: "changelog", href: "/changelog" },
+  { name: "community", href: "/community" }
 ];
 ---
 
   <div class="logo-section">
-    <img src="/assets/logo.png"  alt="Gland Logo" class="h-10 mr-3" />
+    <img src="src/assets/logo.png"  alt="Gland Logo" class="h-10 mr-3" />
     <span>GLAND</span>
   </div>
 
@@ -74,7 +74,7 @@ const navItems = [
   document.addEventListener('DOMContentLoaded', () => {
     // Mobile menu toggle
     const mobileMenuButton = document.querySelector('.mobile-menu-button');
-    const mobileMenu = document.querySelector('.mobile-menu');
+    const mobileMenu = document.querySelector('.mobile-menu')!;
 
     if (mobileMenuButton && mobileMenu) {
       mobileMenuButton.addEventListener('click', () => {