Feat: Home Page

增加首页，调整页眉页尾，样式优化

app/components/common/icons.tsx

@@ -17,3 +17,27 @@ export const ShareFill = (props: IconProps) => (
 export const CupFill = (props: IconProps) => (
   <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 3H20C21.1046 3 22 3.89543 22 5V8C22 9.10457 21.1046 10 20 10H18V13C18 15.2091 16.2091 17 14 17H8C5.79086 17 4 15.2091 4 13V4C4 3.44772 4.44772 3 5 3ZM18 5V8H20V5H18ZM2 19H20V21H2V19Z"></path></svg>
 );
+
+export const QQ = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.9139 14.529C19.7336 13.955 19.4877 13.2856 19.2385 12.643L18.3288 10.3969C18.3295 10.371 18.3408 9.92858 18.3408 9.70053C18.3408 5.8599 16.5082 2.00037 12.0009 2C7.49403 2.00037 5.66113 5.8599 5.66113 9.70053C5.66113 9.92858 5.67237 10.371 5.67312 10.3969L4.76379 12.643C4.51453 13.2856 4.26827 13.955 4.08798 14.529C3.2285 17.2657 3.507 18.3982 3.71915 18.4238C4.17419 18.4779 5.49021 16.3635 5.49021 16.3635C5.49021 17.5879 6.12741 19.1858 7.5064 20.3398C6.99064 20.4971 6.35868 20.7388 5.95237 21.0355C5.58729 21.3025 5.63302 21.5743 5.69861 21.6841C5.9876 22.1661 10.6542 21.9918 12.0017 21.8417C13.3488 21.9918 18.0158 22.1661 18.3044 21.6841C18.3704 21.5743 18.4157 21.3025 18.0507 21.0355C17.6443 20.7388 17.012 20.4971 16.4959 20.3395C17.8745 19.1858 18.5117 17.5879 18.5117 16.3635C18.5117 16.3635 19.8281 18.4779 20.2831 18.4238C20.4949 18.3982 20.7734 17.2657 19.9139 14.529Z"></path></svg>
+);
+
+export const GitHub = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"></path></svg>
+);
+
+export const CloudMusic = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22ZM10.915 11.5684C11.1559 10.7273 11.9899 10.0266 12.9053 9.9202C13.092 10.6139 13.2926 11.2934 13.4503 11.9826C13.503 12.2127 13.4869 12.4776 13.4317 12.7098C13.2195 13.6019 12.1844 13.9521 11.4543 13.3949C10.9232 12.9896 10.7125 12.2757 10.915 11.5684ZM14.7323 11.3707C14.6071 10.9065 14.476 10.4438 14.3394 9.95097C14.8388 10.081 15.2465 10.3108 15.594 10.6485C16.8506 11.87 16.9793 13.9488 15.888 15.3804C14.7526 16.8698 12.7331 17.5141 10.8596 16.9848C8.55798 16.3345 7.05207 14.0327 7.41861 11.6692C7.69287 9.90076 8.68938 8.66514 10.3187 7.93582C10.7257 7.75367 10.8985 7.37612 10.739 7.0063C10.5818 6.64172 10.1984 6.50242 9.79548 6.66349C7.07384 7.7515 5.47405 10.7974 6.12578 13.6503C6.83792 16.7679 9.61963 18.8125 12.7995 18.5089C14.5318 18.3435 15.9636 17.5609 17.0156 16.1624C18.5218 14.1599 18.3131 11.3794 16.5534 9.66325C15.8867 9.01311 15.0816 8.64501 14.1638 8.50972C14.08 8.49736 13.9463 8.45787 13.9314 8.40426C13.8437 8.09092 13.7506 7.77237 13.7249 7.45035C13.6963 7.09273 14.0143 6.80938 14.3753 6.80488C14.6282 6.80173 14.8087 6.93579 14.9784 7.10468C15.2805 7.40513 15.6824 7.42674 15.9662 7.16733C16.2551 6.90322 16.2624 6.48912 15.984 6.15892C15.4178 5.48746 14.3978 5.26779 13.5545 5.63572C12.7067 6.00566 12.233 6.82256 12.3546 7.72916C12.3922 8.00993 12.4639 8.28616 12.5213 8.57131C12.4302 8.59639 12.3452 8.61951 12.2605 8.64317C11.4048 8.88224 10.6999 9.34675 10.1634 10.0575C9.24196 11.2778 9.22657 12.8846 10.1219 14.0044C11.3962 15.5982 13.8687 15.2882 14.6453 13.4357C14.9287 12.7595 14.9201 12.0676 14.7323 11.3707Z"></path></svg>
+);
+
+export const TwitterX = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 2H1L9.26086 13.0145L1.44995 21.9999H4.09998L10.4883 14.651L16 22H23L14.3917 10.5223L21.8001 2H19.1501L13.1643 8.88578L8 2ZM17 20L5 4H7L19 20H17Z"></path></svg>
+);
+
+export const BiliBili = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.223 3.08609C18.7112 3.57424 18.7112 4.3657 18.223 4.85385L17.08 5.99622L18.25 5.99662C20.3211 5.99662 22 7.67555 22 9.74662V17.2466C22 19.3177 20.3211 20.9966 18.25 20.9966H5.75C3.67893 20.9966 2 19.3177 2 17.2466V9.74662C2 7.67555 3.67893 5.99662 5.75 5.99662L6.91625 5.99622L5.77466 4.85481C5.28651 4.36665 5.28651 3.5752 5.77466 3.08704C6.26282 2.59889 7.05427 2.59889 7.54243 3.08704L10.1941 5.73869C10.2729 5.81753 10.339 5.90428 10.3924 5.99638L13.6046 5.99661C13.6581 5.90407 13.7244 5.81691 13.8036 5.73774L16.4553 3.08609C16.9434 2.59793 17.7349 2.59793 18.223 3.08609ZM18.25 8.50662H5.75C5.09102 8.50662 4.55115 9.01654 4.50343 9.66333L4.5 9.75662V17.2566C4.5 17.9156 5.00992 18.4555 5.65671 18.5032L5.75 18.5066H18.25C18.909 18.5066 19.4489 17.9967 19.4966 17.3499L19.5 17.2566V9.75662C19.5 9.06626 18.9404 8.50662 18.25 8.50662ZM8.25 11.0066C8.94036 11.0066 9.5 11.5663 9.5 12.2566V13.5066C9.5 14.197 8.94036 14.7566 8.25 14.7566C7.55964 14.7566 7 14.197 7 13.5066V12.2566C7 11.5663 7.55964 11.0066 8.25 11.0066ZM15.75 11.0066C16.4404 11.0066 17 11.5663 17 12.2566V13.5066C17 14.197 16.4404 14.7566 15.75 14.7566C15.0596 14.7566 14.5 14.197 14.5 13.5066V12.2566C14.5 11.5663 15.0596 11.0066 15.75 11.0066Z"></path></svg>
+);
+
+export const Steam = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>
+);

app/components/layout/footer.tsx

@@ -3,9 +3,9 @@ const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env;
 function Footer() {
   return (
     <footer className="pb-12">
-      <div className="grid grid-cols-2 px-2 max-w-3xl mx-auto text-sm opacity-60">
+      <div className="grid gap-2 sm:grid-cols-2 px-2 max-w-3xl mx-auto text-sm text-center sm:text-left opacity-60">
         <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
-        {APP_FOOTER_EXTRA && <p className="text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
+        {APP_FOOTER_EXTRA && <p className="sm:text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
       </div>
     </footer>
   );

app/components/layout/header.tsx

@@ -1,4 +1,4 @@
-import { Link, NavLink } from "@remix-run/react";
+import { NavLink } from "@remix-run/react";
 
 const navItems = [
   { name: "首页", to: "/" },

app/routes/_index.tsx

@@ -1,41 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
-};
-
-export default function Index() {
-  return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}

app/routes/_index/route.tsx

@@ -0,0 +1,49 @@
+import type { MetaFunction } from "@remix-run/node";
+import { siteTitle } from "~/utils";
+import { BiliBili, CloudMusic, GitHub, QQ, Steam, TwitterX } from "~/components/common/icons";
+
+import styles from "./styles.module.less";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: siteTitle() },
+    { name: "description", content: "一只正在学习前后端技术的萌新" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <main className="px-2 py-24">
+      <section className="flex flex-col h-[60vh] max-w-2xl mx-auto">
+        <div className="my-auto px-4 py-10 bg-white rounded-xl text-center">
+          <div className="mx-auto w-40 mb-10 relative select-none">
+            <div className="top-4 left-2 w-36 h-36 rounded-full absolute bg-pink-100"></div>
+            <img className={styles.avatar} src="/avatar.webp" alt="奇趣保罗" />
+          </div>
+          <h1 className="text-5xl mb-4">奇趣保罗</h1>
+          <p className="opacity-60 mb-10">一只正在学习前后端技术的萌新</p>
+          <p className="flex justify-center gap-3">
+            <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+              <QQ className="w-6" />
+            </a>
+            <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
+              <GitHub className="w-6" />
+            </a>
+            <a href="https://music.163.com/#/user/home?id=7041859" target="_blank" rel="noreferrer" title="网易云">
+              <CloudMusic className="w-6" />
+            </a>
+            <a href="https://x.com/Dreamer__Paul" target="_blank" rel="noreferrer" title="X">
+              <TwitterX className="w-6" />
+            </a>
+            <a href="https://space.bilibili.com/124512959" target="_blank" rel="noreferrer" title="哔哩哔哩">
+              <BiliBili className="w-6" />
+            </a>
+            <a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
+              <Steam className="w-6" />
+            </a>
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}

app/routes/_index/styles.module.less

@@ -0,0 +1,7 @@
+.avatar {
+  width: 160px;
+  position: relative;
+  --path: path('M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z');
+  --webkit-clip-path: var(--path);
+  clip-path: var(--path);
+}

app/routes/gallery.$/route.tsx

@@ -64,7 +64,7 @@ export default function Gallery() {
           ))}
         </div>
       </section>
-      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))] mb-12">
+      <section className="grid gap-4 lg:gap-8 grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12">
         {media.data.map((item) => (
           <div key={item.id} className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200">
             <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />

app/routes/note._index.tsx

@@ -1,5 +1,5 @@
-import { ChangeEvent, useEffect, useState } from "react";
+import { ChangeEvent } from "react";
-import { Link, unstable_useViewTransitionState, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
+import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
 import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
 import Pagination from "~/components/common/pagination";
 import { clsn, siteTitle } from "~/utils";

public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Disallow: /api
+
+User-agent: CCBot
+Disallow: /