feat: improve site seo

package.json

@@ -103,6 +103,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.1",
+    "react-helmet-async": "^2.0.5",
     "react-quill": "^2.0.0",
     "react-router": "^7.1.5",
     "react-router-dom": "^7.1.5",

playground/index.html

@@ -6,7 +6,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <title>ikkz Template Playground</title>
+    <title>ikkz Template</title>
+    <meta
+      name="description"
+      content="Collection of customizable Anki templates, featuring Markdown format, GPT integration, larger question text, dark/light modes, countdown motivation, and support for multiple-choice, true/false, match, and basic Q&A formats"
+    />
   </head>
   <script
     async

playground/src/const.ts

@@ -14,3 +14,5 @@ export const fieldOptions = [
   { value: 'native', label: 'The native Anki field' },
   { value: 'markdown', label: 'With markdown support, but larger size' },
 ];
+
+export const siteName = 'ikkz Template';

playground/src/main.tsx

@@ -2,6 +2,7 @@ import './index.css';
 import { Spin } from 'antd';
 import { StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter, useRoutes } from 'react-router-dom';
 import routes from '~react-pages';
 
@@ -16,7 +17,9 @@ function App() {
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>
     </BrowserRouter>
   </StrictMode>,
 );

playground/src/pages/docs/[id].tsx

@@ -1,6 +1,8 @@
 import { Header } from '../../components/header';
+import { siteName } from '../../const';
 import { useRequest } from 'ahooks';
 import { Spin } from 'antd';
+import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router';
 
 export default () => {
@@ -17,6 +19,9 @@ export default () => {
 
   return (
     <div className="p-4 max-w-[700px] mx-auto">
+      <Helmet>
+        <title>{`${params.id} - ${siteName} Docs`}</title>
+      </Helmet>
       <Header />
       {loading ? (
         <Spin className="flex items-center justify-center" />

playground/src/pages/index.tsx

@@ -1,11 +1,20 @@
 import { Previewer } from '../components/previewer';
 import { TemplateSelector } from '../components/template-selector';
+import { siteName } from '../const';
 import { useTemplate } from '../hooks/use-template';
+import { Helmet } from 'react-helmet-async';
 
 const IndexPage = () => {
   const [template] = useTemplate();
   return (
     <div className="md:flex h-full">
+      <Helmet>
+        <title>
+          {template
+            ? `${template} - ${siteName} Playground`
+            : `${siteName} Playground`}
+        </title>
+      </Helmet>
       <div className="md:w-[400px] md:border-r p-6">
         <TemplateSelector />
       </div>