From 1fdba3606bea338e6f662d95d75385a8c1b7dc64 Mon Sep 17 00:00:00 2001
From: ikkz <ylei.mk@gmail.com>
Date: Tue, 11 Feb 2025 16:39:08 +0800
Subject: [PATCH] feat: improve site seo

---
 package.json                       |  1 +
 playground/index.html              |  6 +++++-
 playground/src/const.ts            |  2 ++
 playground/src/main.tsx            |  5 ++++-
 playground/src/pages/docs/[id].tsx |  5 +++++
 playground/src/pages/index.tsx     |  9 +++++++++
 pnpm-lock.yaml                     | 27 +++++++++++++++++++++++++++
 7 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ed51711..ae203c0 100644
--- a/package.json
+++ b/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",
diff --git a/playground/index.html b/playground/index.html
index aac21b7..0fe1f13 100644
--- a/playground/index.html
+++ b/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
diff --git a/playground/src/const.ts b/playground/src/const.ts
index 4f95525..7d00471 100644
--- a/playground/src/const.ts
+++ b/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';
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index 7bd3c49..7ae3bfa 100644
--- a/playground/src/main.tsx
+++ b/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>,
 );
diff --git a/playground/src/pages/docs/[id].tsx b/playground/src/pages/docs/[id].tsx
index bb8a7b4..4d60652 100644
--- a/playground/src/pages/docs/[id].tsx
+++ b/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" />
diff --git a/playground/src/pages/index.tsx b/playground/src/pages/index.tsx
index 0cb676e..17ad45d 100644
--- a/playground/src/pages/index.tsx
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d5d10c..771ace9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       react-error-boundary:
         specifier: ^4.1.1
         version: 4.1.1(react@18.3.1)
+      react-helmet-async:
+        specifier: ^2.0.5
+        version: 2.0.5(react@18.3.1)
       react-quill:
         specifier: ^2.0.0
         version: 2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3323,6 +3326,9 @@ packages:
   intersection-observer@0.12.2:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
 
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
   is-array-buffer@3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
@@ -4999,6 +5005,11 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-helmet-async@2.0.5:
+    resolution: {integrity: sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -5285,6 +5296,9 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -9419,6 +9433,10 @@ snapshots:
 
   intersection-observer@0.12.2: {}
 
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
   is-array-buffer@3.0.4:
     dependencies:
       call-bind: 1.0.7
@@ -11262,6 +11280,13 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-helmet-async@2.0.5(react@18.3.1):
+    dependencies:
+      invariant: 2.2.4
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+      shallowequal: 1.1.0
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}
@@ -11670,6 +11695,8 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
+  shallowequal@1.1.0: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0