feat: page 404

Author: p208p2002

src/index.js

@@ -20,32 +20,47 @@ let { page = undefined } = params
 
 function Index() {
   let appState = new AppState()
+  let pageContext
+
+  if (page === undefined) {
+    pageContext = (
+      <div>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{BLOG_NAME}</title>
+          <meta name="description" content="💻 程式技術、自然語言處理和論文筆記 🛠️" />
+        </Helmet>
+        <App />
+        <CornerMenu />
+        <Footer />
+      </div>
+    )
+  }
+  else if (page === "code-404") {
+    pageContext = (
+    <div className='flex flex-col p-2'>
+      <p>很抱歉，您要求的文章不存在。</p>
+      <p><a style={{color:'blue',textDecoration:'underline'}} href='/'>回首頁</a></p>
+    </div>
+    )
+  }
+  else {
+    pageContext = (
+      <div className="render-container">
+        <MdRender doc_id={page} />
+        <CornerMenu />
+        <Footer />
+      </div>
+    )
+  }
 
   return (
     <AppStateContext.Provider value={appState}>
-        <LoadingView />
-        <div>
-          {page === undefined ? (
-            <div>
-              <Helmet>
-                <meta charSet="utf-8" />
-                <title>{BLOG_NAME}</title>
-                <meta name="description" content="💻 程式技術、自然語言處理和論文筆記 🛠️" />
-              </Helmet>
-              <App />
-              <CornerMenu />
-              <Footer />
-            </div>
-          ) : (
-            <div className="render-container">
-              <MdRender doc_id={page} />
-              <CornerMenu />
-              <Footer />
-            </div>
-          )}
-
-        </div>
-    </AppStateContext.Provider>
+      <LoadingView />
+      <div>
+        {pageContext}
+      </div>
+    </AppStateContext.Provider >
   )
 }
 

src/modules/MdRender/index.jsx

@@ -169,21 +169,26 @@ export default function MdRender({ doc_id }) {
                 setPageTitle(`${gistTitle} - ${BLOG_NAME}`)
                 setPageDescription(gistContent.replaceAll("#", " ").slice(0, 500))
             })
+            .catch(()=>{
+                window.location.href = "/?page=code-404"
+            })
         // eslint-disable-next-line
     }, [])
 
     useEffect(() => {
-        const gitalk = new Gitalk({
-            clientID: '1026ba5908c2c038e457',
-            clientSecret: 'e89b2d013165eed176f47ba9afa49cf27cd2b63f',
-            repo: 'blog',      // The repository of store comments,
-            owner: 'p208p2002',
-            admin: ['p208p2002'],
-            id: doc_id,      // Ensure uniqueness and length less than 50
-            distractionFreeMode: false  // Facebook-like distraction free mode
-        })
-        gitalk.render("comments")
-    }, [doc_id])
+        if (postTitle !== "") {
+            const gitalk = new Gitalk({
+                clientID: '1026ba5908c2c038e457',
+                clientSecret: 'e89b2d013165eed176f47ba9afa49cf27cd2b63f',
+                repo: 'blog',      // The repository of store comments,
+                owner: 'p208p2002',
+                admin: ['p208p2002'],
+                id: doc_id,      // Ensure uniqueness and length less than 50
+                distractionFreeMode: false  // Facebook-like distraction free mode
+            })
+            gitalk.render("comments")
+        }
+    }, [doc_id,postTitle])
 
     let { date = "", tags = [] } = documentInfo
 

src/tailwindcss.css

@@ -655,6 +655,10 @@ video {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -718,6 +722,10 @@ video {
   font-weight: 500;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));