website: add document title.

uiwjs · Jul 11, 2022 · 08bc13a · 08bc13a
1 parent d632e70
commit 08bc13a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/www/src/pages/extensions/index.tsx b/www/src/pages/extensions/index.tsx
@@ -1,4 +1,5 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
 import { Warpper, Header, Title, Tools, Link } from '../theme';
 import { Document } from './Document';
 import logo from '../../logo.png';
@@ -10,6 +11,12 @@ import { mdSource } from './datas';
 export const Extensions = () => {};
 
 export const ExtensionsLayout = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    document.title = `${location.pathname.split('/').join(' ')} for CodeMirror 6`;
+  }, [location]);
+
   return (
     <Warpper>
       <Header>

diff --git a/www/src/pages/theme/index.tsx b/www/src/pages/theme/index.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
-import { NavLink, Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+import { NavLink, Outlet, useParams } from 'react-router-dom';
 import '@wcj/dark-mode';
 import logo from '../../logo.png';
 
@@ -59,6 +60,16 @@ export const Link = styled(NavLink)`
 `;
 
 export function ThemeLayout() {
+  const { name = '', lightOrDark = '' } = useParams();
+
+  useEffect(() => {
+    let title = 'CodeMirror 6 themes';
+    if (name || lightOrDark) {
+      title = `CodeMirror 6 ${name} ${lightOrDark ? ` ${lightOrDark}` : ''} theme`;
+    }
+    document.title = title;
+  }, [name, lightOrDark]);
+
   return (
     <Warpper>
       <Header>