🐛 fix: Fix ssr

lobehub · Nov 24, 2024 · 05e82ea · 05e82ea
1 parent a255b0a
commit 05e82ea
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 26 deletions.
diff --git a/src/layouts/DocLayout/DocumentLayout.tsx b/src/layouts/DocLayout/DocumentLayout.tsx
@@ -76,7 +76,7 @@ const DocumentLayout = memo(() => {
       const elm = document.querySelector(`#${decodeURIComponent(id)}`);
       if (elm) {
         elm.scrollIntoView();
-        window.scrollBy({ top: -80 });
+        window?.scrollBy({ top: -80 });
       }
     }, 1);
   }, [loading, hash]);

diff --git a/src/layouts/DocLayout/Head/Og.tsx b/src/layouts/DocLayout/Head/Og.tsx
@@ -6,21 +6,22 @@ import urlJoin from 'url-join';
 import { siteSelectors, useSiteStore } from '@/store';
 
 const Og: FC = () => {
-  const [title, desc, logo, hostname] = useSiteStore((s) => [
+  const [title, desc, logo, hostname, pathname] = useSiteStore((s) => [
     siteSelectors.siteTitle(s),
     siteSelectors.siteDesc(s),
     siteSelectors.logo(s),
-    siteSelectors.hostname(s),
+    siteSelectors.hostname(s) || 'https://lobehub.com',
+    s.location.pathname,
   ]);
   const metadata = useSiteStore(siteSelectors.metadata, isEqual);
   return (
     <Helmet>
       <title>{metadata?.title || title}</title>
       <meta content={metadata?.description || desc} name="description" />
-      <link href={hostname || location.origin} rel="canonical" />
+      <link href={hostname} rel="canonical" />
       <meta content={metadata?.openGraph?.title || title} property="og:title" />
       <meta content={metadata?.openGraph?.description || desc} property="og:description" />
-      <meta content={urlJoin(hostname || location.origin, location.pathname)} property="og:url" />
+      <meta content={urlJoin(hostname, pathname)} property="og:url" />
       <meta content={metadata?.openGraph?.siteName} property="og:site_name" />
       <meta content="en" property="og:locale" />
       <meta content={metadata?.openGraph?.title || title} property="og:image:alt" />

diff --git a/src/layouts/DocLayout/Head/StructuredData.tsx b/src/layouts/DocLayout/Head/StructuredData.tsx
@@ -12,46 +12,45 @@ const StructuredData: FC = () => {
     siteSelectors.siteTitle(s),
     siteSelectors.siteDesc(s),
     siteSelectors.logo(s),
-    siteSelectors.hostname(s),
+    siteSelectors.hostname(s) || 'https://lobehub.com',
   ]);
   const metadata = useSiteStore(siteSelectors.metadata, isEqual);
-  const host = hostname || location.origin;
 
   const ld = {
     '@context': 'https://schema.org',
     '@graph': [
       {
-        '@id': urlJoin(host, '#website'),
+        '@id': urlJoin(hostname, '#website'),
         '@type': 'WebSite',
         'description': desc,
         'inLanguage': 'en-US',
         'name': 'LobeHub',
-        'publisher': { '@id': urlJoin(host, '#organization') },
-        'url': host,
+        'publisher': { '@id': urlJoin(hostname, '#organization') },
+        'url': hostname,
       },
       {
-        '@id': host,
+        '@id': hostname,
         '@type': 'WebPage',
-        'about': { '@id': urlJoin(host, '#organization') },
+        'about': { '@id': urlJoin(hostname, '#organization') },
         'dateModified': date,
         'datePublished': date,
         'description': desc,
-        'image': { '@id': urlJoin(host, '#primaryimage') },
+        'image': { '@id': urlJoin(hostname, '#primaryimage') },
         'inLanguage': 'en-US',
-        'isPartOf': { '@id': urlJoin(host, '#website') },
+        'isPartOf': { '@id': urlJoin(hostname, '#website') },
         'name': title,
-        'primaryImageOfPage': { '@id': urlJoin(host, '#primaryimage') },
+        'primaryImageOfPage': { '@id': urlJoin(hostname, '#primaryimage') },
         'thumbnailUrl': metadata?.twitter?.image || metadata?.openGraph?.image,
       },
       {
-        '@id': urlJoin(host, '#primaryimage'),
+        '@id': urlJoin(hostname, '#primaryimage'),
         '@type': 'ImageObject',
         'contentUrl': metadata?.twitter?.image || metadata?.openGraph?.image || logo,
         'inLanguage': 'en-US',
         'url': metadata?.twitter?.image || metadata?.openGraph?.image || logo,
       },
       {
-        '@id': urlJoin(host, '#organization'),
+        '@id': urlJoin(hostname, '#organization'),
         '@type': 'Organization',
         'alternateName': 'LobeHub',
         'contactPoint': {

diff --git a/src/pages/Changelog/index.tsx b/src/pages/Changelog/index.tsx
@@ -24,8 +24,8 @@ const Changelog = memo(() => {
   const { styles } = useStyles();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-    document.body.scrollTo(0, 0);
+    window?.scrollTo(0, 0);
+    document?.body.scrollTo(0, 0);
   }, []);
 
   return (

diff --git a/src/pages/Docs/index.tsx b/src/pages/Docs/index.tsx
@@ -20,8 +20,8 @@ const Documents = memo(() => {
   const { styles } = useStyles();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-    document.body.scrollTo(0, 0);
+    window?.scrollTo(0, 0);
+    document?.body.scrollTo(0, 0);
   }, [location.pathname]);
 
   const Comment = useCallback(

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -9,8 +9,8 @@ const Home = memo(() => {
   const outlet = useOutlet();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-    document.body.scrollTo(0, 0);
+    window?.scrollTo(0, 0);
+    document?.body.scrollTo(0, 0);
   }, []);
 
   return (

diff --git a/src/slots/Toc/index.tsx b/src/slots/Toc/index.tsx
@@ -11,20 +11,21 @@ const Toc = memo(() => {
   const items = useSiteStore(siteSelectors.tocAnchorItem, isEqual);
   const { mobile } = useResponsive();
   const theme = useTheme();
+  const hash = useSiteStore((s) => s.location.hash, isEqual);
   const [spacing, setSpacing] = useState<number>(GAP);
 
   useEffect(() => {
-    const ApiTitle = document.querySelector('#api-header');
+    const ApiTitle = document?.querySelector('#api-header');
     if (ApiTitle) setSpacing(ApiTitle.clientHeight + GAP);
-  }, [window.location.href, items]);
+  }, [hash, items]);
 
   if (items?.length < 1) return;
 
   return (
     <>
       {!mobile && <div style={{ height: spacing }} />}
       <T
-        getContainer={() => document.body}
+        getContainer={() => document?.body}
         headerHeight={theme.headerHeight}
         isMobile={mobile}
         items={items}