feat: archive

p208p2002 · Nov 15, 2024 · 096161c · 096161c
1 parent 160a481
commit 096161c
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 59 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,37 +1,13 @@
-.blog-icon{
-    color: white;
-    font-family: Verdana;
-    font-size: 12px;
-    background-color: var(--main-2);
-    border-radius: 4px;
-    padding: 5px;
-    font-weight: 700;
-    height: 18px;
-    position: relative;
-    top: -8px;
-}
-
-#App .context {
-    max-width: 800px;
-    min-width: 600px;
-    margin: 0 auto;
-    position: relative;
-}
-
-#App h1 {
-    font-size: 32px;
+#App a{
+    color: var(--main-2);
 }
-
-#App h1 img{
-    display: inline;
-    height: 36px;
-    padding-bottom: 6px;
-    padding-right: 6px;
+
+#App a:link{
+    text-decoration: none;
 }
 
-#App .home-page-title {
-    color: var(--text-1);
-    text-decoration: none;
+#App small{
+    color: var(--text-2);
 }
 
 #App ol {
@@ -54,20 +30,15 @@
     padding-left: 40px;
 }
 
-#App a{
-    color: var(--main-2);
-}
-
-#App a:link{
-    text-decoration: none;
-}
-
-#App small{
-    color: var(--text-2);
+.context {
+    max-width: 800px;
+    min-width: 600px;
+    margin: 0 auto;
+    position: relative;
 }
 
 @media screen and (max-width: 768px) {
-    #App .context {
+    .context {
         width: 100%;
         margin: 0 auto;
         position: relative;
@@ -76,7 +47,7 @@
 }
 
 @media screen and (max-width: 576px) {
-    #App .context {
+    .context {
         margin-left: 0px;
         box-sizing: border-box;
         max-width: 576px;

diff --git a/src/App.js b/src/App.js
@@ -2,11 +2,11 @@ import React from 'react'
 import { useState, useEffect, useContext } from 'react'
 import './App.css';
 import { AppStateContext } from './index'
-import { BLOG_NAME } from './configs/general'
 import PostBlock from './modules/PostBlock'
 import Search from './modules/Search'
 import MDPreviewer from './modules/MdRender/preview'
 import { POST_PRE_PAGE } from './configs/general'
+import Banner from './modules/Banner';
 
 const axios = require('axios');
 
@@ -41,16 +41,10 @@ function App() {
 
   return (
     <div id="App">
-      <div style={{ marginTop: 40 }} className="text-center">
-        <h1>
-          <a href="/" className="home-page-title font-medium">
-              <img src="/icon.svg" alt="" srcSet="" />
-            {BLOG_NAME}
-          </a>
-        </h1>
-        <small>程式技術、自然語言處理和論文筆記</small>
+
+      <Banner>
         <Search setPosts={setPosts} fullIndex={fullIndex} />
-      </div>
+      </Banner>
 
       <div className="context">
         {posts.map((post, i) => (

diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
 import LoadingView from './modules/Loading'
 import CornerMenu from './modules/CornerMenu'
 import Footer from './modules/Footer'
+import Archive from './modules/Archive'
 import { BLOG_NAME } from './configs/general'
 import MdRender from './modules/MdRender';
 import { Helmet } from 'react-helmet'
@@ -36,12 +37,21 @@ function Index() {
       </div>
     )
   }
+  else if (page === "archive") {
+    pageContext = (
+      <div>
+        <Archive />
+        <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>
+      <div className='flex flex-col p-2'>
+        <p>很抱歉，您要求的文章不存在。</p>
+        <p><a style={{ color: 'blue', textDecoration: 'underline' }} href='/'>回首頁</a></p>
+      </div>
     )
   }
   else {

diff --git a/src/modules/Archive/index.css b/src/modules/Archive/index.css
@@ -0,0 +1,29 @@
+#Archive p {
+    color: var(--text-1);
+    white-space: nowrap;       /* 不換行 */
+    overflow: hidden;          /* 隱藏超出範圍的內容 */
+    text-overflow: ellipsis;   /* 顯示省略號 */
+    width: 100%;              /* 設定固定寬度 */
+    line-height: 20px;
+}
+
+#Archive small{
+    color: var(--text-2);
+    margin-right: 5px;
+}
+
+#Archive .row{
+    margin-bottom: 12px;
+}
+
+#Archive a{
+    color: var(--main-2);
+}
+
+#Archive a:link{
+    text-decoration: none;
+}
+
+#Archive small{
+    color: var(--text-2);
+}
diff --git a/src/modules/Archive/index.jsx b/src/modules/Archive/index.jsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import Banner from '../Banner'
+import { useState, useEffect, useContext } from 'react'
+import { AppStateContext } from '../../index'
+import './index.css'
+const axios = require('axios')
+
+function Archive() {
+    let [posts, setPosts] = useState([])
+    let appState = useContext(AppStateContext)
+    let fetchPost = () => {
+        appState.setLoading(true)
+        axios.get("/index.json")
+            .then((res) => {
+                posts = res.data
+                setPosts(posts)
+            })
+            .catch((err) => {
+                console.log(err)
+            })
+            .then(() => {
+                appState.setLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        fetchPost()
+
+        // eslint-disable-next-line
+    }, [])
+
+    return (
+        <div id="Archive">
+            <Banner />
+
+            <div className="context">
+                {
+                    posts.map((post, index) => {
+                        return <div key={index}>
+                            <div className='row'>
+                                <p><b>{post.date}</b> - <a href={post.page_link}>{post.title}</a></p>
+                                {post.tags.map((tag)=><small>#{tag}</small>)}
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+
+        </div>
+    )
+}
+
+export default Archive
diff --git a/src/modules/Banner/index.css b/src/modules/Banner/index.css
@@ -0,0 +1,57 @@
+#Banner {
+    margin-bottom: 10px;
+}
+#Banner .blog-icon{
+    color: white;
+    font-size: 12px;
+    background-color: var(--main-2);
+    border-radius: 4px;
+    padding: 5px;
+    font-weight: 700;
+    height: 18px;
+    position: relative;
+    top: -8px;
+}
+
+#Banner h1 {
+    font-size: 32px;
+}
+
+#Banner h1 img{
+    display: inline;
+    height: 36px;
+    padding-bottom: 6px;
+    padding-right: 6px;
+}
+
+#Banner .home-page-title {
+    color: var(--text-1);
+    text-decoration: none;
+}
+
+#Banner a{
+    color: var(--main-2);
+}
+
+#Banner a:link{
+    text-decoration: none;
+}
+
+#Banner small{
+    color: var(--text-2);
+}
+
+#Banner small.spec-page{
+    color: var(--text-2);
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+#Banner small.spec-page a{
+    color: var(--text-2);
+}
+
+#Banner span.sep::before {
+    content: '·';
+    color: var(--text-2);
+}
diff --git a/src/modules/Banner/index.jsx b/src/modules/Banner/index.jsx
@@ -0,0 +1,22 @@
+import { React } from 'react'
+import { BLOG_NAME } from '../../configs/general'
+import './index.css'
+
+function Banner(props) {
+    return (
+        <div id="Banner" style={{ marginTop: 20 }} className="text-center">
+            <h1>
+                <a href="/" className="home-page-title font-medium">
+                    <img src="/icon.svg" alt="" srcSet="" />
+                    {BLOG_NAME}
+                </a>
+            </h1>
+            <small>程式技術、自然語言處理和論文筆記</small>
+            <br />
+            {props.children}
+            <small className='spec-page'><a href="/?page=archive">Archive</a></small>        
+        </div>
+    )
+}
+
+export default Banner
diff --git a/src/modules/Search/index.css b/src/modules/Search/index.css
@@ -1,14 +1,15 @@
 #Search-Bar {
     margin-top: 16px;
-    margin-bottom: 32px;
+    /* margin-bottom: 32px; */
     background-color: var(--main-bg-1);
 }
 
 #Search-Bar input[type=text] {
     border-color: var(--support-1);
     border-style: solid;
     border-width: 0px 0px 1px 0px;
-    height: 24px;
+    height: 30px;
+    text-align: center;
     padding-left: 5px;
     margin-right: 5px;
     background-color: var(--main-bg-1);