Merge pull request #260 from 1chooo/feature/#104

Feature/#104

Author: 1chooo

apps/web/package.json

@@ -28,7 +28,6 @@
     "remark-gfm": "^4.0.0",
     "sharp": "^0.33.5",
     "sugar-high": "^0.7.0",
-    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "web-vitals": "^4.2.3"
   },
@@ -66,12 +65,14 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "autoprefixer": "^10.4.20",
     "eslint": "9.10.0",
     "eslint-config-next": "14.2.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8",
+    "postcss": "^8.4.45",
     "sass": "^1.77.8",
-    "sass-loader": "^16.0.1"
+    "sass-loader": "^16.0.1",
+    "tailwindcss": "^3.4.11"
   }
 }

apps/web/src/components/side-bar/footer.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "@/styles/side-bar/footer.css";
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="footer">
+      <div className="footer-copyright">© 2024 1chooo</div>
+      <div className="footer-links">
+        <a href="https://docs.1chooo.com">Docs</a>
+        <a href="https://github.com/1chooo/1chooo.com">Vcard Theme</a>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

apps/web/src/components/side-bar/index.tsx

@@ -4,6 +4,7 @@ import React, { useState, useRef } from 'react';
 import SideBarInfo from './side-bar-info';
 import SocialList from './social-list';
 import ContactsList from './contact-list';
+import Footer from './footer';
 
 export const SideBar: React.FC = () => {
   const [isActive, setIsActive] = useState(false);
@@ -23,6 +24,7 @@ export const SideBar: React.FC = () => {
         <ContactsList />
         <div className="separator"></div>
         <SocialList />
+        <Footer />
       </div>
     </aside>
   );

apps/web/src/styles/side-bar/footer.css

@@ -0,0 +1,35 @@
+.footer {
+    color: var(--jet);
+    padding: 16px 32px;
+    text-align: center;
+    font-size: 14px;
+    color: hsl(0, 0%, 84%);
+    /* margin-bottom: 10px; */
+}
+
+.footer-copyright {
+    margin-bottom: 8px;
+}
+
+.footer-links a {
+    color: var(--orange-yellow-crayola);
+    text-decoration: underline;
+    margin: 0 8px;
+}
+
+.footer-links a:hover {
+    text-decoration: underline;
+    text-decoration-color: hsla(0, 0%, 84%, 0.7);
+}
+
+/* 在移动设备和平板上变为同一行显示 */
+@media (max-width: 768px) {
+    .footer-copyright, .footer-links {
+        display: inline-block;
+        margin-bottom: 0;
+    }
+
+    .footer-links {
+        margin-left: 8px;
+    }
+}

apps/web/tailwind.config.ts

@@ -2,18 +2,12 @@ import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
+    extend: {},
   },
   plugins: [],
 };