Feat: Add Pages & Footer

增加约定和维护记录页面

src/components/ArticleSnippet.tsx

@@ -11,8 +11,8 @@ export const About = () => {
       <p>保罗 API 基本上作为一只辅助角色，默默无闻的服务着其他主要项目，这便是它存在的意义。像「随机动漫壁纸」接口就是为 <a href="https://github.com/Dreamer-Paul/Single" target="_blank">Single</a> 主题量身定做的，既符合主题外观特性，又能满足其他人的快捷使用。它诞生于 2018 年 4 月，是保罗入门后端和 PHP 语言的主要项目之一。</p>
       <p>项目后端采用原生 PHP 编写，前端是原生 CSS 和 JS，也就是非前后端分离项目，不需要额外的前端 SSR 服务。它没有任何框架加持（自己写的），所以执行速度和并发还是个谜。尽管如此，它也较为稳定的跑了这么久，不是吗？</p>
       <ul>
-          <li>前端：CSS + Vanilla JS</li>
-          <li>后端：PHP</li>
+          <li>前端：React (CSR)</li>
+          <li>后端：MidwayJS (NodeJS)</li>
           <li>数据库：MariaDB</li>
           <li>缓存：Redis</li>
       </ul>

src/components/Layout/Footer.tsx

@@ -0,0 +1,29 @@
+// React
+import React from "react";
+
+
+// UI
+import { Link } from "react-router-dom";
+
+
+// Components
+function Footer() {
+  return (
+    <footer>
+      <div className="server-flag" title="你正在使用来自洛杉矶节点的服务">LA</div>
+      <div className="row s">
+        <div className="col-m-6 left to-center">
+          <p>© {new Date().getFullYear()} <a href="https://paul.ren" target="_blank">Dreamer-Paul</a>.</p>
+        </div>
+        <div className="col-m-6 right to-center">
+          <p className="links">
+            <Link to="/notice">使用约定</Link>
+            <Link to="/log">维护记录</Link>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer;

src/index.css

@@ -287,10 +287,23 @@ main .comments{
 footer{
   color: #666;
   padding: 1em 0;
-  text-align: center;
   border-top: 1px solid #eee;
 }
 
+footer p{
+  font-size: .875em;
+}
+
+footer .links a::after{
+  color: initial;
+  margin: .25em;
+  content: "·";
+  opacity: .5;
+}
+footer .links a:last-child::after{
+  content: unset;
+}
+
 .server-flag{
   top: 0;
   right: 0;

src/index.tsx

@@ -6,26 +6,38 @@ import "./index.css";
 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
+
+// Components
 import Aside from "./components/Layout/Aside";
+import Footer from "./components/Layout/Footer";
+
+
+// Routes
 import Home from "./pages/index";
+import Notice from "./pages/notice";
+import Log from "./pages/log";
 import Netease from "./pages/netease";
 import Wallpaper from "./pages/wallpaper";
 import ACGM from "./pages/acgm";
 import Bing from "./pages/bing";
 import NoMatch from "./pages/404";
 
+
 function App() {
   return (
     <Router>
       <Aside />
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/notice" element={<Notice />} />
+        <Route path="/log" element={<Log />} />
         <Route path="/netease" element={<Netease />} />
         <Route path="/wallpaper" element={<Wallpaper />} />
         <Route path="/acgm" element={<ACGM />} />
         <Route path="/bing" element={<Bing />} />
         <Route path="*" element={<NoMatch />} />
       </Routes>
+      <Footer />
     </Router>
   );
 }

src/pages/index.tsx

@@ -53,20 +53,14 @@ function Index() {
               <p>解析音乐并精简输出，配合 Kico Player 使用更佳</p>
             </Link>
           </div>
-          {/* <div className="col-6 col-m-4">
-            <a className="box second" href="javascript:ks.notice('由于经费和资源问题，暂不考虑公开，求赞助！', {time: 2000, color: 'yellow'})">
-              <h3><i className="fa fa-heart"></i>随机看板娘模型</h3>
-              <p>在你的网站生成随机的 L2D 看板娘</p>
-            </a>
-          </div> */}
           <div className="col-6 col-m-4">
-            <Link className="box third" to="/wallpaper">
+            <Link className="box second" to="/wallpaper">
               <h3><i className="fa fa-photo"></i>随机动漫壁纸</h3>
               <p>生成适合 Single 主题的白底动漫壁纸</p>
             </Link>
           </div>
           <div className="col-6 col-m-4">
-            <Link className="box fourth" to="/acgm">
+            <Link className="box third" to="/acgm">
               <h3><i className="fa fa-headphones"></i>随机动漫音乐</h3>
               <p>随机生成动漫背景音乐，基于网易云解析</p>
             </Link>
@@ -78,13 +72,13 @@ function Index() {
             </Link>
           </div> */}
           <div className="col-6 col-m-4">
-            <Link className="box sixth" to="/bili">
+            <Link className="box fourth" to="/bili">
               <h3><i className="fa fa-film"></i>哔哩哔哩小窗</h3>
               <p>更简洁的展示你在 B 站发布的视频内容</p>
             </Link>
           </div>
           <div className="col-6 col-m-4">
-            <Link className="box seventh" to="/bing">
+            <Link className="box fifth" to="/bing">
               <h3><i className="fa fa-gift"></i>必应每日壁纸</h3>
               <p>每日更新，尽享乐趣，直接跳转，使用便捷</p>
             </Link>

src/pages/log.tsx

@@ -0,0 +1,29 @@
+// React
+import React from "react";
+
+
+// UI
+import ArticleHead from "@/components/Layout/ArticleHead";
+
+
+// Components
+function Log() {
+  return (
+    <main>
+      <ArticleHead title="更新记录" desc="本项目的维护及更新记录" />
+      <article className="post">
+        <h3>2022.4.13</h3>
+        <p>陆续还原网易云、随机动漫音乐等 API 的说明页面，引入 PrismJS 实现代码高亮</p>
+        <p>网易云 API 增加别名字段，随机动漫音乐 API 增加缓存的字段（番名）</p>
+
+        <h3>2022.4.12</h3>
+        <p>陆续还原「随机动漫壁纸」、「必应每日壁纸」、「网易云解析」和「随机动漫音乐」四大王牌 API</p>
+
+        <h3>2022.4.10</h3>
+        <p>开始使用 MidwayJS 框架重构本项目，技术选型方面前端为 React (CSR)，后端为 NodeJS</p>
+      </article>
+    </main>
+  )
+}
+
+export default Log;

src/pages/notice.tsx

@@ -0,0 +1,33 @@
+// React
+import React from "react";
+
+
+// UI
+import ArticleHead from "@/components/Layout/ArticleHead";
+import { Donate } from "@/components/ArticleSnippet";
+
+
+// Components
+function Notice() {
+  return (
+    <main>
+      <ArticleHead title="使用约定" desc="使用此服务请遵守我的约定喔" />
+      <article className="post">
+        <h3>总则：</h3>
+        <p>使用者的网站需为内容合法的网站，非法网站直接进行黑名单处理。</p>
+        <p>使用者不得对本服务器进行流量攻击，否则直接黑名单处理。</p>
+        <p>使用时可以注明本服务及提供者（保罗），不得将本服务占为己有。</p>
+        <p>如想完善充实本服务所提供的内容，欢迎在首页评论区留言，或 <a href="https://paugram.com/about.html" target="_blank">联系保罗</a>！</p>
+
+        <h3>隐私：</h3>
+        <p>本服务将记录您的使用信息，包括但不限于站点、使用的 API 内容及参数。</p>
+        <p>以上内容将用于作者的统计及审查，且采用 <code>https</code> 加密传输，将不对外完全保密。</p>
+        <p>部分 API 需要使用 <code>Cookie</code> 记录使用信息，以优化使用体验（例如随机动漫音乐）。</p>
+
+        <Donate />
+      </article>
+    </main>
+  )
+}
+
+export default Notice;