feat: homepage for doc site

openbuildxyz · Dec 24, 2024 · a1949b1 · a1949b1
1 parent d9c9796
commit a1949b1
Show file tree

Hide file tree

Showing 53 changed files with 1,322 additions and 202 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,7 +25,9 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
-      - run: mv .knosys/sites/default/package-deploy.json .knosys/sites/default/package.json
+      - run: |
+          mv .knosys/sites/default/package-deploy.json .knosys/sites/default/package.json
+          cp .knosys/presets/tailwind/doc.js .knosys/sites/default/tailwind.config.js
       - name: Install, build, and upload your site output
         uses: withastro/action@v2
         with:

diff --git a/.knosys/presets/tailwind/app.js b/.knosys/presets/tailwind/app.js
@@ -0,0 +1,169 @@
+const { nextui } = require('@nextui-org/react')
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './src/shared/components/**/*.{js,ts,jsx,tsx}',
+    './src/domain/**/*.{js,ts,jsx,tsx}',
+    './src/entry/**/*.{js,ts,jsx,tsx}',
+    './src/app/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px',
+    },
+    extend: {
+      dropShadow: {
+        '3xl': '0 4px 12px rgba(0, 0, 0, 0.08)',
+        '4xl': '0px 0px 24px rgba(0, 0, 0, 0.12)',
+        'st': '0px -4px 14px 0px rgba(26, 26, 26, 0.08)',
+      },
+      fontFamily: {
+        sans: ['var(--font-pt_mono)', ...fontFamily.sans],
+      },
+      backgroundImage: {
+        'gradient-l-r':
+          'linear-gradient(90deg, rgba(1, 219, 131, 0.6) 0%, transparent 40.29%, transparent 40.29%, transparent 100%)',
+        'gradient-t-b': 'linear-gradient(180deg, #00FFA3 -21.21%, #F3FF65 100%)',
+        'signin-gradient': 'radial-gradient(circle at 100% 0%, transparent 12px, #f1f1f1 0)',
+        'signup-gradient': 'radial-gradient(circle at 0% 0%, transparent 12px, #f1f1f1 0)',
+        'home-green-ball-gradient-l-r': 'linear-gradient(360deg, #00B56C 0%, rgba(1, 219, 131, 0.00) 100%)',
+        'home-contributor-bg': 'linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0.00) 100%)',
+        'ticketLocation': 'linear-gradient(180deg, #ABEFD3 0%, #4BFBB4 100%)'
+      },
+      colors: {
+        green: {
+          DEFAULT: '#01DB83',
+          50: '#d6f4ea',
+          100: '#00A663',
+        },
+        yellow: {
+          DEFAULT: '#FCF192',
+          50: '#EFE37F',
+        },
+        orange: {
+          DEFAULT: '#FDB17E',
+          50: '#FDB17E',
+        },
+        red: {
+          DEFAULT: '#E43150',
+          50: '#E43150',
+        },
+        gray: {
+          DEFAULT: '#1A1A1A',
+          50: 'rgba(26, 26, 26, 0.8)',
+          100: 'rgba(26, 26, 26, 0.6)',
+          200: '#7C7C7C',
+          300: '#F3F3F3',
+          400: 'rgba(26, 26, 26, 0.06)',
+          500: 'rgba(26, 26, 26, 0.4)',
+          600: 'rgba(26, 26, 26, 0.1)',
+          700: '#282828',
+          800: 'rgba(26, 26, 26, 0.04)',
+          900: '#EFEFEF',
+          1000: '#f8f8f8',
+          1100: 'rgba(26, 26, 26, 0.2)',
+          1200: '#ebebeb',
+          1300: 'rgba(26, 26, 26, 0.7)',
+          1400: '#F1F1F1',
+        },
+        global: {
+          main: '#051613',
+          'bg-secondary': '#173C32',
+          primary: '#F3FF65',
+        },
+      },
+      borderRadius: {
+        none: '0',
+        DEFAULT: '8px',
+        md: '4px',
+        lg: '12px',
+        xl: '16px',
+        '2xl': '20px',
+      },
+      keyframes: {
+        // shimmer: {
+        //   '100%': {
+        //     transform: 'translateX(100%)',
+        //   },
+        // },
+        // barrage: {
+        //   from: {
+        //     transform: 'translateX(0px)',
+        //   },
+        //   to: {
+        //     transform: 'translateX(-100px)',
+        //   },
+        // },
+      },
+      animation: {
+        'spin-10s': 'spin 10s linear infinite'
+        // barrage: 'barrage linear 5s infinite',
+      },
+      aspectRatio: {
+        '19/10': '19 / 10',
+      },
+    },
+  },
+  plugins: [
+    require('daisyui'),
+    nextui({
+      themes: {
+        light: {
+          colors: {
+            background: '#FFFFFF', // or DEFAULT
+            foreground: '#1a1a1a', // or 50 to 900 DEFAULT
+            primary: {
+              foreground: '#FFFFFF',
+              DEFAULT: '#1a1a1a',
+            },
+            // ... rest of the colors
+          },
+        },
+      }
+    })
+  ],
+  daisyui: {
+    themes: [
+      // {'dark': {
+      //   'primary': '#793ef9',
+      //   'primary-focus': '#570df8',
+      //   'primary-content': '#ffffff',
+      //   'secondary': '#f000b8',
+      //   'secondary-focus': '#bd0091',
+      //   'secondary-content': '#ffffff',
+      //   'accent': '#37cdbe',
+      //   'accent-focus': '#2aa79b',
+      //   'accent-content': '#ffffff',
+      //   'neutral': '#2a2e37',
+      //   'neutral-focus': '#16181d',
+      //   'neutral-content': '#ffffff',
+      //   'base-100': '#3d4451',
+      //   'base-200': '#2a2e37',
+      //   'base-300': '#16181d',
+      //   'base-content': '#ebecf0',
+      //   'info': '#66c6ff',
+      //   'success': '#87d039',
+      //   'warning': '#e2d562',
+      //   'error': '#ff6f6f'
+      // }},
+      {'light': {
+        'primary': '#1a1a1a',
+        'primary-content': '#fff',
+        'base-100': '#fff',
+        'base-200': '#f8f8f8',
+        'base-300': '#ebebeb',
+        'base-content': 'rgba(26, 26, 26, 0.06)',
+      }},
+    ]
+  }
+  // require('@tailwindcss/line-clamp')
+}
diff --git a/.knosys/presets/tailwind/doc.js b/.knosys/presets/tailwind/doc.js
@@ -0,0 +1,15 @@
+const { nextui } = require('@nextui-org/react');
+const starlightPlugin = require('@astrojs/starlight-tailwind');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './.knosys/sites/default/src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: 'class',
+  plugins: [nextui(), starlightPlugin()],
+};
diff --git a/.knosys/scripts/command/site.js b/.knosys/scripts/command/site.js
@@ -4,7 +4,7 @@ const { resolveRootPath } = require('../helper');
 
 module.exports = {
   execute: (subCmd = 'dev') => {
-    const cmds = ['astro --root .knosys/sites/default'];
+    const cmds = ['cross-env OB_SITE=DOC astro --root .knosys/sites/default'];
 
     if (subCmd) {
       cmds.push(subCmd);

diff --git a/.knosys/sites/default/astro.config.mjs b/.knosys/sites/default/astro.config.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
 import starlight from '@astrojs/starlight';
 
 // https://astro.build/config
@@ -16,14 +18,23 @@ export default defineConfig({
     locales: ['en', 'zh'],
   },
   integrations: [
+    react({ experimentalReactChildren: true }),
+    tailwind({
+      applyBaseStyles: false,
+    }),
     starlight({
-      title: 'OpenBuild Official Website Dev Docs',
+      title: 'OpenBuild Dev Docs',
+      favicon: '/favicon.png',
       social: {
         github: 'https://github.com/openbuildxyz/openbuild-frontend',
       },
       customCss: [
+        './src/shared/styles/tailwind-starlight.css',
         './src/shared/styles/doc.css',
       ],
+      components: {
+        SiteTitle: './src/shared/controls/astro-brand-logo',
+      },
       sidebar: [
         {
           label: 'Guides',

diff --git a/.knosys/sites/default/package-deploy.json b/.knosys/sites/default/package-deploy.json
@@ -14,7 +14,21 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.30.3",
-    "astro": "^5.1.1"
+    "@astrojs/react": "3.6.2",
+    "@astrojs/starlight": "0.28.5",
+    "@astrojs/starlight-tailwind": "2.0.3",
+    "@astrojs/tailwind": "5.1.2",
+    "@nextui-org/react": "2.4.8",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "astro": "4.16.7",
+    "autoprefixer": "10.4.19",
+    "clsx": "2.1.1",
+    "framer-motion": "10.18.0",
+    "lucide-react": "0.454.0",
+    "postcss": "8.4.47",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "3.4.14"
   }
 }
diff --git a/.knosys/sites/default/public/favicon.png b/.knosys/sites/default/public/favicon.png
diff --git a/.knosys/sites/default/public/favicon.svg b/.knosys/sites/default/public/favicon.svg
diff --git a/.knosys/sites/default/public/fonts/atkinson-bold.woff b/.knosys/sites/default/public/fonts/atkinson-bold.woff
diff --git a/.knosys/sites/default/public/fonts/atkinson-regular.woff b/.knosys/sites/default/public/fonts/atkinson-regular.woff
diff --git a/.knosys/sites/default/public/robots.txt b/.knosys/sites/default/public/robots.txt
@@ -0,0 +1,9 @@
+User-agent: *
+
+Disallow: /cgi-bin/
+Disallow: /assets/
+Disallow: /categories/
+Disallow: /tags/
+Disallow: /archives/
+
+Disallow: /404.html
diff --git a/.knosys/sites/default/src/content/config.ts b/.knosys/sites/default/src/content/config.ts
@@ -1,7 +1,6 @@
 import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
 
 export const collections = {
-  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+  docs: defineCollection({ schema: docsSchema() }),
 };
diff --git a/.knosys/sites/default/src/content/docs/index.mdx b/.knosys/sites/default/src/content/docs/index.mdx
diff --git a/.knosys/sites/default/src/content/docs/zh/index.mdx b/.knosys/sites/default/src/content/docs/zh/index.mdx
diff --git a/.knosys/sites/default/src/entry/layouts/default/BaseHead.astro b/.knosys/sites/default/src/entry/layouts/default/BaseHead.astro
@@ -0,0 +1,48 @@
+---
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+import '@/styles/tailwind-default.css';
+import '@/styles/global.css';
+import { resolvePath } from '@/utils';
+
+interface Props {
+  title: string;
+  description: string;
+  image?: string;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const { title, description, image = resolvePath('/blog-placeholder-1.jpg') } = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" type="image/png" href={resolvePath('/favicon.png')} />
+
+<!-- Font preloads -->
+<link rel="preload" href={resolvePath('/fonts/atkinson-regular.woff')} as="font" type="font/woff" crossorigin />
+<link rel="preload" href={resolvePath('/fonts/atkinson-bold.woff')} as="font" type="font/woff" crossorigin />
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={new URL(image, Astro.url)} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={new URL(image, Astro.url)} />