From 81553cf755f55bf1746019ae42936c418af80431 Mon Sep 17 00:00:00 2001 From: chengpeiquan Date: Fri, 22 Dec 2023 13:59:39 +0800 Subject: [PATCH] feat(docs): document structure and home page components --- .vscode/settings.json | 12 ++++- docs/components/Copyright.tsx | 25 +++++++++ docs/components/Hero.tsx | 28 +++++++++- docs/components/Logo.tsx | 15 ++++++ docs/hooks/data-hooks.ts | 16 ++++++ docs/package.json | 2 + docs/pages/getting-started.mdx | 1 + docs/pages/index.mdx | 6 --- docs/styles/globals.css | 99 ++++++++++++++++++++++++++++++++++ docs/tailwind.config.js | 1 + docs/theme.config.tsx | 20 +++---- eslint.config.js | 4 +- package.json | 4 ++ pnpm-lock.yaml | 7 ++- 14 files changed, 216 insertions(+), 24 deletions(-) create mode 100644 docs/components/Copyright.tsx create mode 100644 docs/components/Logo.tsx create mode 100644 docs/hooks/data-hooks.ts create mode 100644 docs/pages/getting-started.mdx diff --git a/.vscode/settings.json b/.vscode/settings.json index 4e9bf2b..edd4385 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,14 @@ { "eslint.experimental.useFlatConfig": true, - "cSpell.words": ["Elems", "iife", "inconnu", "tsup", "Unbekannt", "withtypes"] + "cSpell.words": [ + "clsx", + "Elems", + "iife", + "inconnu", + "nextra", + "tailwindcss", + "tsup", + "Unbekannt", + "withtypes" + ] } diff --git a/docs/components/Copyright.tsx b/docs/components/Copyright.tsx new file mode 100644 index 0000000..8765322 --- /dev/null +++ b/docs/components/Copyright.tsx @@ -0,0 +1,25 @@ +import React, { useMemo } from 'react' +import pkg from '../../package.json' + +export const Copyright: React.FC = () => { + console.log(pkg) + + const author = useMemo(() => { + const [name] = pkg.author.split(' ') + return name + }, []) + + const github = useMemo(() => { + return `https://github.com/${author}` + }, [author]) + + return ( + + {pkg.license} 2023-PRESENT ©{' '} + + {author} + + . + + ) +} diff --git a/docs/components/Hero.tsx b/docs/components/Hero.tsx index de1dd2d..33e085c 100644 --- a/docs/components/Hero.tsx +++ b/docs/components/Hero.tsx @@ -1,10 +1,34 @@ import React from 'react' +import clsx from 'clsx' import { WEBSITE_TITLE } from '../constants' +import { Link } from 'nextra-theme-docs' +import { useAppearance } from '../hooks/data-hooks' export const Hero: React.FC = () => { + const { isDark } = useAppearance() + + const btnCls = clsx( + 'flex flex-shrink-0 items-center justify-center', + 'rounded-lg max-w-full h-12 px-6', + '!text-white dark:!text-black', + 'bg-slate-900 hover:bg-slate-700', + 'dark:bg-zinc-100 dark:highlight-white/20 dark:hover:bg-zinc-200', + 'focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 ', + 'cursor-pointer !no-underline', + ) + return ( -
-

{WEBSITE_TITLE}

+
+
+

ISO 639

+

{WEBSITE_TITLE}

+
+ + {isDark &&
} + + + Get Started +
) } diff --git a/docs/components/Logo.tsx b/docs/components/Logo.tsx new file mode 100644 index 0000000..2dd4c5c --- /dev/null +++ b/docs/components/Logo.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { WEBSITE_TITLE } from '../constants' + +export const Logo: React.FC = () => { + return ( +
+ {WEBSITE_TITLE} + {WEBSITE_TITLE} +
+ ) +} diff --git a/docs/hooks/data-hooks.ts b/docs/hooks/data-hooks.ts new file mode 100644 index 0000000..cdf817c --- /dev/null +++ b/docs/hooks/data-hooks.ts @@ -0,0 +1,16 @@ +import { useMemo } from 'react' +import { useTheme } from 'nextra-theme-docs' +import { isServer } from '@bassist/utils' + +export function useAppearance() { + const { resolvedTheme } = useTheme() + + const isDark = useMemo(() => { + if (isServer) return true + return resolvedTheme === 'dark' + }, [resolvedTheme]) + + return { + isDark, + } +} diff --git a/docs/package.json b/docs/package.json index 8b20692..628c081 100644 --- a/docs/package.json +++ b/docs/package.json @@ -7,6 +7,7 @@ "start": "next start" }, "dependencies": { + "@bassist/utils": "^0.14.0", "next": "^14.0.3", "nextra": "^2.13.2", "nextra-theme-docs": "^2.13.2", @@ -15,6 +16,7 @@ }, "devDependencies": { "autoprefixer": "^10.4.16", + "clsx": "^2.0.0", "postcss": "^8.4.32", "tailwindcss": "^3.3.6" } diff --git a/docs/pages/getting-started.mdx b/docs/pages/getting-started.mdx new file mode 100644 index 0000000..bad5562 --- /dev/null +++ b/docs/pages/getting-started.mdx @@ -0,0 +1 @@ +# Getting Started diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 7e9b8b3..9147c48 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -1,9 +1,3 @@ import { Hero } from '../components/Hero' - -# Language Code - -Coming soon... - -
Hello
diff --git a/docs/styles/globals.css b/docs/styles/globals.css index 00c53a9..20b61af 100644 --- a/docs/styles/globals.css +++ b/docs/styles/globals.css @@ -2,6 +2,71 @@ @tailwind components; @tailwind utilities; +*::selection { + /* @apply bg-red-600 bg-opacity-60 dark:bg-red-700 dark:bg-opacity-30; */ + background-color: hsl( + var(--nextra-primary-hue) var(--nextra-primary-saturation) 66%/0.1 + ); +} + +.nextra-nav-container-blur { + box-shadow: none !important; +} + +.luster { + -webkit-mask-image: -webkit-linear-gradient( + 30deg, + black 25%, + rgba(0, 0, 0, 0.2) 50%, + black 75% + ); + mask-image: -webkit-linear-gradient( + 30deg, + black 25%, + rgba(0, 0, 0, 0.2) 50%, + black 75% + ); + mask-image: -moz-linear-gradient( + 30deg, + black 25%, + rgba(0, 0, 0, 0.2) 50%, + black 75% + ); + mask-image: -o-linear-gradient( + 30deg, + black 25%, + rgba(0, 0, 0, 0.2) 50%, + black 75% + ); + mask-image: linear-gradient( + 60deg, + black 25%, + rgba(0, 0, 0, 0.2) 50%, + black 75% + ); + -webkit-mask-size: 400%; + mask-size: 400%; + -webkit-mask-position: 0%; + mask-position: 0%; +} + +.luster:hover { + -webkit-mask-position: 100%; + mask-position: 100%; + -webkit-transition: + mask-position 1s ease, + -webkit-mask-position 1s ease; + -moz-transition: + mask-position 1s ease, + -webkit-mask-position 1s ease; + -o-transition: + mask-position 1s ease, + -webkit-mask-position 1s ease; + transition: + mask-position 1s ease, + -webkit-mask-position 1s ease; +} + .headline { font-size: min(4.375rem, max(8vw, 2.5rem)); line-height: 1.4; @@ -9,8 +74,42 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + user-select: none; } .dark .headline { background-image: linear-gradient(146deg, #fff, #757a7d); } + +.aperture { + --size: min(75vw, 400px); + --top: 0; + --left: calc(-0.5 * var(--size)); + --blur: calc(0.5 * var(--size)); + --opacity: 0.8; + --bg-color: #888; + --background: #000; + + position: absolute; + z-index: -1; + border-radius: calc(0.5 * var(--size)); + background-color: var(--bg-color); + background: radial-gradient( + circle at center, + var(--bg-color) 0, + var(--background) 100% + ); + width: var(--size); + height: var(--size); + top: 15%; + left: 50%; + filter: blur(var(--blur)) opacity(var(--opacity)); + transform: translate(-50%, 0); + user-select: none; +} + +@media screen and (min--moz-device-pixel-ratio: 1) { + .aperture { + --opacity: 0.4; + } +} diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index c6c4fea..66d7a56 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: 'class', content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}', diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx index 5486ebf..7679980 100644 --- a/docs/theme.config.tsx +++ b/docs/theme.config.tsx @@ -1,19 +1,15 @@ import React from 'react' -import { WEBSITE_TITLE } from './constants' +import { Logo } from './components/Logo' +import { Copyright } from './components/Copyright' export default { - logo: ( -
- {WEBSITE_TITLE} - {WEBSITE_TITLE} -
- ), + logo: , + primaryHue: 10, + gitTimestamp: false, + footer: { + text: , + }, project: { link: 'https://github.com/ISO-639/language-code', }, - // ... other theme options } diff --git a/eslint.config.js b/eslint.config.js index 71b80b4..9156597 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,9 +1,9 @@ // @ts-check -import { defineConfig, prettier, typescript } from '@bassist/eslint' +import { defineConfig, prettier, react } from '@bassist/eslint' export default defineConfig([ ...prettier, - ...typescript, + ...react, { rules: { '@typescript-eslint/prefer-ts-expect-error': 'off', diff --git a/package.json b/package.json index b1ebac3..daa2cf6 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,10 @@ "test": "vitest", "prepare": "husky install" }, + "repository": { + "type": "git", + "url": "git+https://github.com/ISO-639/language-code.git" + }, "devDependencies": { "@bassist/commit": "^0.1.0", "@bassist/eslint": "^0.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2748e1b..37d97b1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: docs: dependencies: + '@bassist/utils': + specifier: ^0.14.0 + version: 0.14.0 next: specifier: ^14.0.3 version: 14.0.3(react-dom@18.2.0)(react@18.2.0) @@ -72,6 +75,9 @@ importers: autoprefixer: specifier: ^10.4.16 version: 10.4.16(postcss@8.4.32) + clsx: + specifier: ^2.0.0 + version: 2.0.0 postcss: specifier: ^8.4.32 version: 8.4.32 @@ -1973,7 +1979,6 @@ packages: /clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} - dev: false /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}