feat(docs): document structure and home page components

.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"
+  ]
 }

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 (
+    <span>
+      {pkg.license} 2023-PRESENT ©{' '}
+      <a href={github} target="_blank" rel="noreferrer">
+        {author}
+      </a>
+      .
+    </span>
+  )
+}

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 (
-    <div className="w-full text-center my-40">
-      <h2 className="font-bold headline">{WEBSITE_TITLE}</h2>
+    <div className="flex flex-col items-center gap-20 w-full text-center my-40">
+      <div className="flex flex-col luster">
+        <h3 className="headline !text-4xl">ISO 639</h3>
+        <h2 className="font-bold headline">{WEBSITE_TITLE}</h2>
+      </div>
+
+      {isDark && <div className="aperture" />}
+
+      <Link className={btnCls} href="/getting-started">
+        <span>Get Started</span>
+      </Link>
     </div>
   )
 }

docs/components/Logo.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { WEBSITE_TITLE } from '../constants'
+
+export const Logo: React.FC = () => {
+  return (
+    <div className="flex items-center gap-3">
+      <img
+        className="flex flex-shrink-0 w-6 rounded"
+        src="/assets/logo.png"
+        alt={WEBSITE_TITLE}
+      />
+      <span className="luster">{WEBSITE_TITLE}</span>
+    </div>
+  )
+}

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,
+  }
+}

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"
   }

docs/pages/getting-started.mdx

@@ -0,0 +1 @@
+# Getting Started

docs/pages/index.mdx

@@ -1,9 +1,3 @@
 import { Hero } from '../components/Hero'
 
 <Hero />
-
-# Language Code
-
-Coming soon...
-
-<div className="flex">Hello</div>

docs/styles/globals.css

@@ -2,15 +2,114 @@
 @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;
   background-image: linear-gradient(146deg, #000, #757a7d);
   -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;
+  }
+}

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}',

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: (
-    <div className="flex items-center gap-3">
-      <img
-        className="flex flex-shrink-0 w-6 rounded"
-        src="/assets/logo.png"
-        alt={WEBSITE_TITLE}
-      />
-      <span>{WEBSITE_TITLE}</span>
-    </div>
-  ),
+  logo: <Logo />,
+  primaryHue: 10,
+  gitTimestamp: false,
+  footer: {
+    text: <Copyright />,
+  },
   project: {
     link: 'https://github.com/ISO-639/language-code',
   },
-  // ... other theme options
 }

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',

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",