From 763810e8b7e6cd41fdc0d83d28262dc7d747e4bf Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sat, 12 Oct 2024 20:07:11 +0800 Subject: [PATCH] docs: add shacdn to website --- pnpm-lock.yaml | 16 ++++++++ website/package.json | 4 ++ website/src/css/base.css | 76 ++++++++++++++++++++++++++++++++++++++ website/src/lib/utils.ts | 6 +++ website/tailwind.config.ts | 70 ++++++++++++++++++++++++++++++++++- website/tsconfig.json | 1 + 6 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 website/src/lib/utils.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e0b216..802312e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -704,9 +704,15 @@ importers: '@mdx-js/react': specifier: ^3.0.0 version: 3.0.1(@types/react@18.2.78)(react@18.3.1) + '@radix-ui/react-icons': + specifier: ^1.3.0 + version: 1.3.0(react@18.3.1) antd: specifier: ^5.12.5 version: 5.13.1(date-fns@3.6.0)(moment@2.30.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1) + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 clsx: specifier: ^1.2.1 version: 1.2.1 @@ -734,6 +740,12 @@ importers: react-vertical-timeline-component: specifier: ^3.6.0 version: 3.6.0(react@18.3.1) + tailwind-merge: + specifier: ^2.2.1 + version: 2.2.1 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.5.4))) tianji-client-sdk: specifier: workspace:^ version: link:../packages/client-sdk @@ -15897,6 +15909,10 @@ snapshots: dependencies: react: 18.2.0 + '@radix-ui/react-icons@1.3.0(react@18.3.1)': + dependencies: + react: 18.3.1 + '@radix-ui/react-id@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: '@babel/runtime': 7.24.0 diff --git a/website/package.json b/website/package.json index dcb31ca..68c9d01 100644 --- a/website/package.json +++ b/website/package.json @@ -19,7 +19,9 @@ "@docusaurus/plugin-sitemap": "3.5.2", "@docusaurus/preset-classic": "3.5.2", "@mdx-js/react": "^3.0.0", + "@radix-ui/react-icons": "^1.3.0", "antd": "^5.12.5", + "class-variance-authority": "^0.7.0", "clsx": "^1.2.1", "docusaurus-preset-openapi": "^0.7.5", "prism-react-renderer": "^2.1.0", @@ -29,6 +31,8 @@ "react-responsive-carousel": "^3.2.23", "react-slick": "^0.29.0", "react-vertical-timeline-component": "^3.6.0", + "tailwind-merge": "^2.2.1", + "tailwindcss-animate": "^1.0.7", "tianji-client-sdk": "workspace:^" }, "devDependencies": { diff --git a/website/src/css/base.css b/website/src/css/base.css index b3bd89d..f2ad3fc 100644 --- a/website/src/css/base.css +++ b/website/src/css/base.css @@ -1,6 +1,82 @@ @tailwind base; @layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; + } + + .dark { + --background: 224 71% 4%; + --foreground: 213 31% 91%; + + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; + + --border: 216 34% 17%; + --input: 216 34% 17%; + + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; + + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; + + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; + + --ring: 216 34% 17%; + + --radius: 0.5rem; + } +} + +@layer base { + * { + @apply border-border; + } + body { + /* @apply bg-background text-foreground; */ + font-feature-settings: "rlig" 1, "calt" 1; + } + /* Scrollbar */ ::-webkit-scrollbar { width: 8px; diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts new file mode 100644 index 0000000..2819a83 --- /dev/null +++ b/website/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts index 36e3f66..6bb65b1 100644 --- a/website/tailwind.config.ts +++ b/website/tailwind.config.ts @@ -1,5 +1,6 @@ import type { Config } from 'tailwindcss'; import { PluginCreator } from 'tailwindcss/types/config'; +import { fontFamily } from 'tailwindcss/defaultTheme'; const plugin: PluginCreator = (api) => { api.addUtilities({ @@ -19,7 +20,72 @@ export default { }, content: ['./src/**/*.{html,tsx}'], theme: { - extend: {}, + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px', + }, + }, + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + }, + borderRadius: { + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, + sm: 'calc(var(--radius) - 4px)', + }, + fontFamily: { + sans: ['var(--font-sans)', ...fontFamily.sans], + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, + }, + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + }, + }, }, - plugins: [plugin], + plugins: [plugin, require('tailwindcss-animate')], } satisfies Config; diff --git a/website/tsconfig.json b/website/tsconfig.json index 5552631..681da39 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -5,6 +5,7 @@ "baseUrl": ".", "strict": false, "paths": { + "@/*": ["./*"], "@/utils/style": ["../src/client/utils/style"] } }