feat: dark mode and seo

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/components/CustomStyle.astro

@@ -0,0 +1,59 @@
+<style is:inline is:global>
+  :root {
+    --c-primary: rgb(30 64 175);
+    --c-secondary: rgb(30 58 138);
+    --c-accent: rgb(109 40 217);
+
+    --c-text-heading: rgb(0 0 0);
+    --c-text-default: #222;
+    --c-text-muted: rgb(16 16 16 / 66%);
+
+    --c-bg-page: #fafafa;
+    --c-bg-page-dark: #111;
+
+    --c-scroll: #d9d9d9;
+    --c-scroll-hover: #bbbbbb;
+
+    --c-shadow: #00000008;
+  }
+
+  html.dark {
+    --c-primary: rgb(30 64 175);
+    --c-secondary: rgb(30 58 138);
+    --c-accent: rgb(109 40 217);
+
+    --c-text-heading: rgb(0 0 0);
+    --c-text-default: #dadada;
+    --c-text-muted: rgb(229 236 246 / 66%);
+
+    --c-bg-page: var(--c-bg-page-dark);
+
+    --c-scroll: #333333;
+    --c-scroll-hover: #555555;
+
+    --c-shadow: #ffffff08;
+  }
+
+  html,
+  body {
+    height: 100%;
+    touch-action: manipulation;
+  }
+
+  ::selection {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--c-scroll);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--c-scroll-hover);
+  }
+</style>

src/components/Favicons.astro

@@ -0,0 +1,4 @@
+<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
+<link rel='shortcut icon' href='/favicon.svg' />
+<link rel='mask-icon' href='/maskable-icon.png' />
+<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />

src/components/Header.astro

@@ -0,0 +1,10 @@
+---
+import ToggleDarkMode from './ToggleColorMode'
+---
+
+<div class='flex justify-between'>
+  <h1 class='text-5xl font-bold'>
+    {/* AudiRead */}
+  </h1>
+  <ToggleDarkMode client:only />
+</div>

src/components/InitColorMode.astro

@@ -0,0 +1,7 @@
+<script>
+  (function () {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    const setting = localStorage.getItem('theme') || 'auto'
+    if (setting === 'dark' || (prefersDark && setting !== 'light')) document.documentElement.classList.toggle('dark', true)
+  })()
+</script>

src/components/Metadata.astro

@@ -0,0 +1,18 @@
+---
+import type { MetaData } from '@/types'
+
+export type Props = MetaData
+
+const {
+  title,
+  description,
+} = Astro.props
+---
+
+<meta charset='UTF-8' />
+<meta name='description' content={description} />
+<meta name='viewport' content='width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />
+<meta name='theme-color' content='#101010' />
+<meta name='generator' content={Astro.generator} />
+<title>{title}</title>
+

src/components/Ribbon/Setting.tsx

@@ -0,0 +1,5 @@
+const Setting = () => {
+  return <div>Setting</div>
+}
+
+export default Setting

src/components/Ribbon/SoundSynthetic.tsx

@@ -0,0 +1,5 @@
+const SoundSynthetic = () => {
+  return <div />
+}
+
+export default SoundSynthetic

src/components/Ribbon/index.tsx

@@ -0,0 +1,14 @@
+import Setting from './Setting'
+import SoundSynthetic from './SoundSynthetic'
+
+const Ribbon = () => {
+  return (
+    <div>
+      <textarea />
+      <Setting />
+      <SoundSynthetic />
+    </div>
+  )
+}
+
+export default Ribbon

src/components/ToggleColorMode.tsx

@@ -0,0 +1,35 @@
+import type { Component } from 'solid-js'
+import { onMount } from 'solid-js'
+import cx from 'classnames'
+import { useDark } from '@/hooks'
+
+interface Props {
+  class?: string
+}
+const ToggleDarkMode: Component<Props> = (props) => {
+  const { class: className } = props
+  const [isDark, setIsDark] = useDark()
+
+  const setMetaThemeColor = () => {
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', 'var(--c-bg-page)')
+  }
+
+  onMount(() => {
+    setMetaThemeColor()
+  })
+
+  const toggleDark = () => {
+    const dark = !isDark()
+    setMetaThemeColor()
+    setIsDark(dark)
+  }
+
+  return (
+    <i
+      onClick={toggleDark}
+      class={cx('i-ic-sharp-dark-mode icon-btn dark:i-ic-round-wb-sunny', className)}
+    />
+  )
+}
+
+export default ToggleDarkMode

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useDark'

src/hooks/useDark.ts

@@ -0,0 +1,30 @@
+import { createEffect, createSignal } from 'solid-js'
+
+export const useDark = () => {
+  const [dark, setIsDark] = createSignal(false)
+
+  const listenColorSchema = () => {
+    const colorSchema = window.matchMedia('(prefers-color-scheme: dark)')
+    colorSchema.addEventListener('change', () => {
+      document.documentElement.classList.toggle('dark', colorSchema.matches)
+    })
+  }
+
+  createEffect(() => {
+    const theme = localStorage.getItem('theme')
+    if (theme) { setIsDark(theme === 'dark') }
+    else {
+      const colorSchema = window.matchMedia('(prefers-color-scheme: dark)')
+      setIsDark(colorSchema.matches)
+    }
+  })
+
+  createEffect(() => {
+    document.documentElement.classList.toggle('dark', dark())
+    localStorage.setItem('theme', dark() ? 'dark' : 'light')
+  })
+
+  listenColorSchema()
+
+  return [dark, setIsDark] as const
+}

src/layouts/Layout.astro

@@ -1,51 +1,38 @@
 ---
-interface Props {
-	title: string;
+import '@/style/tailwind.css'
+
+import { appDescription, appName } from '@/constants'
+
+import CustomStyle from '@/components/CustomStyle.astro'
+import Favicons from '@/components/Favicons.astro'
+import Metadata from '@/components/Metadata.astro'
+import ApplyColorMode from '@/components/InitColorMode.astro'
+
+import type { MetaData as MetaDataType } from '@/types'
+export interface Props {
+  metadata?: MetaDataType
 }
 
-const { title } = Astro.props;
+const defaultMetadata: MetaDataType = {
+  title: appName,
+  description: appDescription,
+}
+
+const {
+  metadata = defaultMetadata,
+} = Astro.props
+
 ---
 
 <!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+<html>
+  <head>
+    <Metadata {...metadata} />
+    <Favicons />
+    <CustomStyle />
+    <ApplyColorMode />
+  </head>
+  <body class='bg-page text-default'>
+    <slot />
+  </body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>