Chore: 更新框架到 React Router 7
修复迁移到 Tailwind 4 之后的样式差异 修复 404 页面的异常并调整样式 优化分页器组件的无障碍化，Span 标签替换成 Button
This commit is contained in:
parent
0a9ae15732
commit
13a09d6995
|
|
@ -0,0 +1,4 @@
|
|||
.react-router
|
||||
build
|
||||
node_modules
|
||||
README.md
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/**
|
||||
* This is intended to be a basic starting point for linting in your app.
|
||||
* It relies on recommended configs out of the box for simplicity, but you can
|
||||
* and should modify this configuration to best suit your team's needs.
|
||||
*/
|
||||
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
commonjs: true,
|
||||
es6: true,
|
||||
},
|
||||
|
||||
// Base config
|
||||
extends: ["eslint:recommended"],
|
||||
|
||||
overrides: [
|
||||
// React
|
||||
{
|
||||
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||
plugins: ["react", "jsx-a11y"],
|
||||
extends: [
|
||||
"plugin:react/recommended",
|
||||
"plugin:react/jsx-runtime",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:jsx-a11y/recommended",
|
||||
],
|
||||
rules: {
|
||||
"jsx-a11y/media-has-caption": "off",
|
||||
"jsx-a11y/click-events-have-key-events": "off",
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
},
|
||||
formComponents: ["Form"],
|
||||
linkComponents: [
|
||||
{ name: "Link", linkAttribute: "to" },
|
||||
{ name: "NavLink", linkAttribute: "to" },
|
||||
],
|
||||
"import/resolver": {
|
||||
typescript: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Typescript
|
||||
{
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
plugins: ["@typescript-eslint", "import"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
settings: {
|
||||
"import/internal-regex": "^~/",
|
||||
"import/resolver": {
|
||||
node: {
|
||||
extensions: [".ts", ".tsx"],
|
||||
},
|
||||
typescript: {
|
||||
alwaysTryTypes: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
extends: [
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:import/recommended",
|
||||
"plugin:import/typescript",
|
||||
],
|
||||
},
|
||||
|
||||
// Node
|
||||
{
|
||||
files: [".eslintrc.js"],
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
node_modules
|
||||
|
||||
/.cache
|
||||
/build
|
||||
.DS_Store
|
||||
.env
|
||||
/node_modules/
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
FROM node:20-alpine AS development-dependencies-env
|
||||
COPY . /app
|
||||
WORKDIR /app
|
||||
RUN npm ci
|
||||
|
||||
FROM node:20-alpine AS production-dependencies-env
|
||||
COPY ./package.json package-lock.json /app/
|
||||
WORKDIR /app
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
FROM node:20-alpine AS build-env
|
||||
COPY . /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN npm run build
|
||||
|
||||
FROM node:20-alpine
|
||||
COPY ./package.json package-lock.json /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["npm", "run", "start"]
|
||||
|
|
@ -26,4 +26,4 @@
|
|||
|
||||
## 感谢
|
||||
|
||||
本项目采用 Remix + React + TypeScript + Less + Tailwind 作为主要的技术栈，感谢所有开源库作者提供的解决方案！
|
||||
本项目采用 React 19 + TypeScript + React Router 7 + Tailwind 4 作为主要的技术栈，感谢所有开源库作者提供的解决方案！
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-mi: MiSans, ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--animate-spinner-bar: spinner-bar 6s linear infinite;
|
||||
--animate-fade-in: fade-in 0.3s both;
|
||||
--animate-fade-out: fade-out 0.3s both;
|
||||
--animate-fade-in-left: fade-in-left 0.3s backwards;
|
||||
--animate-fade-off-right: fade-off-right 0.3s forwards;
|
||||
|
||||
@keyframes spinner-bar {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(1.5rem);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-off-right {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
||||
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
||||
import React, { useState, useRef, useImperativeHandle, forwardRef, Ref } from 'react';
|
||||
import React, { useState, useRef, useImperativeHandle, forwardRef, type Ref } from "react";
|
||||
import { createPortal } from 'react-dom';
|
||||
import { clsn } from '~/utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@reference "tailwindcss";
|
||||
|
||||
.article {
|
||||
line-height: 1.7;
|
||||
|
||||
|
|
@ -36,7 +38,8 @@
|
|||
height: 4px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
background-color: rgb(244 114 182 / var(--tw-text-opacity));
|
||||
|
||||
@apply bg-pink-400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +53,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color:rgb(244 114 182 / var(--tw-bg-opacity));
|
||||
@apply text-pink-400;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -77,7 +80,7 @@
|
|||
font-size: smaller;
|
||||
padding: .15rem .5rem;
|
||||
border-radius: .75rem;
|
||||
background-color: rgb(165 243 252);
|
||||
@apply bg-cyan-200;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -86,7 +89,7 @@
|
|||
margin-left: 1.25rem;
|
||||
|
||||
::marker {
|
||||
color: rgb(244 114 182 / var(--tw-bg-opacity));
|
||||
@apply text-pink-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { clsn } from "~/utils";
|
||||
import styles from "./article.module.less";
|
||||
import styles from "./article.module.css";
|
||||
|
||||
interface ArticleProps {
|
||||
className?: string;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { NavLink } from "@remix-run/react";
|
||||
import { NavLink } from "react-router";
|
||||
|
||||
const navItems = [
|
||||
{ name: "首页", to: "/" },
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useNavigation } from "@remix-run/react";
|
||||
import { useNavigation } from "react-router";
|
||||
|
||||
export default function SpinnerBar() {
|
||||
const navigation = useNavigation();
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { SVGProps } from "react";
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
type IconProps = SVGProps<SVGSVGElement>;
|
||||
|
||||
|
|
@ -55,16 +55,16 @@ function Pagination({ current = 3, total, size, onClick }: PaginationProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
<button
|
||||
key={index}
|
||||
className={clsn(
|
||||
"inline-block w-10 h-10 leading-[2] md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
|
||||
"inline-block w-10 h-10 leading-loose md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
|
||||
current === item ? "bg-cyan-200 border-b-cyan-300 text-white font-bold" : "bg-white border-b-cyan-200"
|
||||
)}
|
||||
onClick={() => onClick(item)}
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
116
app/root.tsx
116
app/root.tsx
|
|
@ -1,82 +1,90 @@
|
|||
import type { LinksFunction } from "@remix-run/node";
|
||||
import {
|
||||
isRouteErrorResponse,
|
||||
Links,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
isRouteErrorResponse,
|
||||
useNavigate,
|
||||
useRouteError,
|
||||
} from "@remix-run/react";
|
||||
import Header from "./components/layout/header";
|
||||
import Spinner from "./components/common/spinner";
|
||||
import Footer from "./components/layout/footer";
|
||||
} from "react-router";
|
||||
|
||||
import type { Route } from "./+types/root";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
import "./index.css";
|
||||
import "./app.css";
|
||||
|
||||
export function ErrorBoundary() {
|
||||
const error = useRouteError();
|
||||
const isRouteError = isRouteErrorResponse(error);
|
||||
|
||||
const [statusCode, message] = (() => {
|
||||
if (isRouteError) {
|
||||
return [error.status, error.statusText];
|
||||
}
|
||||
|
||||
if (error instanceof Error) {
|
||||
return [500, error.message];
|
||||
}
|
||||
|
||||
return [500, "未知异常"];
|
||||
})();
|
||||
|
||||
return (
|
||||
<html lang="zh-cmn-hans">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{siteTitle(statusCode)}</title>
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body className="font-mi pt-16 bg-orange-50 text-neutral-600">
|
||||
<Header />
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">
|
||||
{statusCode}
|
||||
</h1>
|
||||
<p className="text-center opacity-60">{message}</p>
|
||||
</main>
|
||||
<Footer />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
export const links: Route.LinksFunction = () => [
|
||||
{ rel: "icon", href: "/icon.png" },
|
||||
{ rel: "stylesheet", href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap" },
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap",
|
||||
},
|
||||
];
|
||||
|
||||
export default function App() {
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
const error = useRouteError();
|
||||
|
||||
return (
|
||||
<html lang="zh-cmn-hans">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
{isRouteErrorResponse(error) && error.status === 404 && <title>{siteTitle(error.status)}</title>}
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body className="font-mi pt-16 bg-orange-50 text-neutral-600">
|
||||
<Spinner />
|
||||
<Header />
|
||||
<Outlet />
|
||||
<Footer />
|
||||
{children}
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return <Outlet />;
|
||||
}
|
||||
|
||||
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
let message = "啊哦";
|
||||
let details = "发生了未知的异常";
|
||||
let stack: string | undefined;
|
||||
|
||||
if (isRouteErrorResponse(error)) {
|
||||
if (error.status === 404) {
|
||||
message = "404";
|
||||
details = "页面不存在";
|
||||
} else {
|
||||
details = error.statusText || details;
|
||||
}
|
||||
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
||||
details = error.message;
|
||||
stack = error.stack;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-2">
|
||||
{message}
|
||||
</h1>
|
||||
<p className="text-center opacity-60 mb-8">{details}</p>
|
||||
<p className="text-center">
|
||||
<button
|
||||
className="inline-block py-3 px-5 bg-pink-400 text-white rounded-xl cursor-pointer"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</p>
|
||||
{stack && (
|
||||
<pre className="w-full p-4 overflow-x-auto">
|
||||
<code>{stack}</code>
|
||||
</pre>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import {
|
||||
type RouteConfig,
|
||||
index,
|
||||
layout,
|
||||
route,
|
||||
} from "@react-router/dev/routes";
|
||||
|
||||
export default [
|
||||
layout("routes/app-layout.tsx", [
|
||||
index("routes/index.tsx"),
|
||||
route("note", "routes/note.tsx"),
|
||||
route("note/:year/:id", "routes/note-detail.tsx"),
|
||||
route("gallery/*", "routes/gallery.tsx"),
|
||||
route("*", "routes/page.tsx"),
|
||||
]),
|
||||
] satisfies RouteConfig;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import Article from "~/components/common/article";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||
return [
|
||||
{ title: data ? siteTitle(data.data.title) : "404" },
|
||||
{ name: "description", content: data?.data.desc },
|
||||
];
|
||||
}
|
||||
|
||||
export async function loader({ params }: LoaderFunctionArgs) {
|
||||
const slug = params["*"];
|
||||
|
||||
const page = await fetch(`https://paul.ren/api/page/get?slug=${slug}&html`).then((res) => res.json()) as API.Response<API.Page.IPageData>;
|
||||
|
||||
if (page.status === "Failed") {
|
||||
throw json("Not Found", { status: 404, statusText: page.msg });
|
||||
}
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
export default function DynamicPage() {
|
||||
const page = useLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
|
||||
<p className="text-center opacity-60">{page.data.desc}</p>
|
||||
</section>
|
||||
<section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
|
||||
<Article html={page.data.content} />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.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);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { Outlet } from "react-router";
|
||||
|
||||
import Footer from "~/components/layout/footer";
|
||||
import Header from "~/components/layout/header";
|
||||
import Spinner from "~/components/layout/spinner";
|
||||
|
||||
export default function AppLayout() {
|
||||
return (
|
||||
<>
|
||||
<Spinner />
|
||||
<Header />
|
||||
<Outlet />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +1,26 @@
|
|||
import { NavLink, useLoaderData, useNavigate } from "@remix-run/react";
|
||||
import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
|
||||
import Pagination from "~/components/common/pagination";
|
||||
import { clsn, siteTitle } from "~/utils";
|
||||
import { StarFill } from "~/components/common/icons";
|
||||
import { NavLink, useNavigate } from "react-router";
|
||||
|
||||
import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
|
||||
import { StarFill } from "~/components/ui/icons";
|
||||
import Pagination from "~/components/ui/pagination";
|
||||
import { clsn, siteTitle } from "~/utils";
|
||||
|
||||
import styles from "./styles.module.less";
|
||||
import type { Route } from "./+types/gallery";
|
||||
import styles from "./gallery.module.css";
|
||||
|
||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||
export function meta({ loaderData }: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: siteTitle(data?.currentCategory?.name || "相册") },
|
||||
{ name: "description", content: data?.currentCategory?.description || "奇趣保罗的照片与收藏" },
|
||||
{ title: siteTitle(loaderData?.currentCategory?.name || "相册") },
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
loaderData?.currentCategory?.description ||
|
||||
"奇趣保罗的照片与收藏",
|
||||
},
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
export async function loader({ request, params }: LoaderFunctionArgs) {
|
||||
export async function loader({ request, params }: Route.LoaderArgs) {
|
||||
const url = new URL(request.url);
|
||||
const page = url.searchParams.get("page") || "1";
|
||||
|
||||
|
|
@ -28,7 +34,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
|
|||
cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
|
||||
|
||||
if (cateIndex === -1) {
|
||||
throw json("Not Found", { status: 404 });
|
||||
throw new Response("Not Found", { status: 404 });
|
||||
}
|
||||
|
||||
searchParams.append("cate", String(category.data[cateIndex].id));
|
||||
|
|
@ -40,9 +46,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
|
|||
return { media, category, currentCategory, page };
|
||||
}
|
||||
|
||||
export default function Gallery() {
|
||||
export default function Gallery({ loaderData }: Route.ComponentProps) {
|
||||
const navigate = useNavigate();
|
||||
const { media, category, page } = useLoaderData<typeof loader>();
|
||||
const { media, category, page } = loaderData;
|
||||
|
||||
// const lightBoxInst = useRef();
|
||||
const { ref: lightBoxInst, open } = useLightBox();
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1,18 +1,27 @@
|
|||
import { Link, useLoaderData } from "@remix-run/react";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
import { siteTitle } from "~/utils";
|
||||
import { ArrowDown, BiliBili, CloudMusic, GitHub, QQ, Steam, TwitterX } from "~/components/common/icons";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import styles from "./styles.module.less";
|
||||
import {
|
||||
ArrowDown,
|
||||
BiliBili,
|
||||
CloudMusic,
|
||||
GitHub,
|
||||
QQ,
|
||||
Steam,
|
||||
TwitterX,
|
||||
} from "~/components/ui/icons";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
import type { Route } from "./+types/index";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: siteTitle() },
|
||||
{ name: "description", content: "一只正在学习前后端技术的萌新" },
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
export async function loader() {
|
||||
const data = (await fetch("https://paul.ren/api/sync").then((res) =>
|
||||
|
|
@ -22,12 +31,12 @@ export async function loader() {
|
|||
return { data };
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
const { data } = useLoaderData<typeof loader>();
|
||||
export default function Index({ loaderData }: Route.ComponentProps) {
|
||||
const { data } = loaderData;
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<section className="-mt-40 relative flex flex-col h-screen min-h-[40rem] max-w-3xl mx-auto">
|
||||
<section className="-mt-40 relative flex flex-col h-screen min-h-160 max-w-3xl 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>
|
||||
|
|
@ -1,39 +1,42 @@
|
|||
import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import Article from "~/components/common/article";
|
||||
import { CupFill, ShareFill, ThumbUpFill } from "~/components/common/icons";
|
||||
import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||
import type { Route } from "./+types/note-detail";
|
||||
|
||||
export function meta({ loaderData }: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: data ? siteTitle(data.data.title) : "404" },
|
||||
{ name: "description", content: data?.data.except },
|
||||
{ title: loaderData ? siteTitle(loaderData.data.title) : "404" },
|
||||
{ name: "description", content: loaderData?.data.except },
|
||||
];
|
||||
}
|
||||
|
||||
export async function loader({ params }: LoaderFunctionArgs) {
|
||||
export async function loader({ params }: Route.LoaderArgs) {
|
||||
if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
|
||||
throw json("Not Found", { status: 404, statusText: "链接格式错误" });
|
||||
throw new Response("Not Found", { status: 404 });
|
||||
}
|
||||
|
||||
const note = await fetch(`https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`).then((res) => res.json()) as API.Response<API.Note.INoteData>;
|
||||
const note = (await fetch(
|
||||
`https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`
|
||||
).then((res) => res.json())) as API.Response<API.Note.INoteData>;
|
||||
|
||||
if (note.status === "Failed") {
|
||||
throw json("Not Found", { status: 404, statusText: note.msg });
|
||||
throw new Response("Not Found", { status: 404 });
|
||||
}
|
||||
|
||||
return note;
|
||||
}
|
||||
|
||||
export default function Detail() {
|
||||
const note = useLoaderData<typeof loader>();
|
||||
export default function NoteDetail({ loaderData }: Route.ComponentProps) {
|
||||
const note = loaderData;
|
||||
|
||||
const [likes, setLikes] = useState(note.data.likes);
|
||||
|
||||
const onLike = () => {
|
||||
setLikes((prevLike) => prevLike + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const onShare = () => {
|
||||
const shareData = {
|
||||
|
|
@ -44,16 +47,18 @@ export default function Detail() {
|
|||
|
||||
if ("share" in navigator) {
|
||||
navigator.share(shareData);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
alert("当前操作系统尚未实现此 API");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4" style={{ viewTransitionName: `note-title-${note.data.id}` }}>
|
||||
<h1
|
||||
className="text-center text-5xl/tight md:text-7xl/tight mb-4"
|
||||
style={{ viewTransitionName: `note-title-${note.data.id}` }}
|
||||
>
|
||||
{note.data.title}
|
||||
</h1>
|
||||
<p className="text-center opacity-60">{note.data.date}</p>
|
||||
|
|
@ -1,19 +1,21 @@
|
|||
import { ChangeEvent } from "react";
|
||||
import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
|
||||
import { LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
|
||||
import Pagination from "~/components/common/pagination";
|
||||
import { type ChangeEvent } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router";
|
||||
|
||||
import { StarFill, ThumbUpFill } from "~/components/ui/icons";
|
||||
import Pagination from "~/components/ui/pagination";
|
||||
import { clsn, siteTitle } from "~/utils";
|
||||
import { getFirstImage, years } from "~/utils/note";
|
||||
import { StarFill, ThumbUpFill } from "~/components/common/icons";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
import type { Route } from "./+types/note";
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: siteTitle("日记") },
|
||||
{ name: "description", content: "奇趣保罗的日常笔记" },
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
export async function loader({ request }: Route.LoaderArgs) {
|
||||
const url = new URL(request.url);
|
||||
const year = url.searchParams.get("year") || new Date().getFullYear();
|
||||
const page = url.searchParams.get("page") || 1;
|
||||
|
|
@ -23,10 +25,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
|||
return { note, page, year };
|
||||
}
|
||||
|
||||
export default function Note() {
|
||||
export default function Note({ loaderData }: Route.ComponentProps) {
|
||||
const navigate = useNavigate();
|
||||
const [params, setParams] = useSearchParams();
|
||||
const { note, page, year } = useLoaderData<typeof loader>();
|
||||
const { note, page, year } = loaderData;
|
||||
|
||||
const onChangeYear = (ev: ChangeEvent<HTMLSelectElement>) => {
|
||||
navigate({
|
||||
|
|
@ -90,7 +92,7 @@ export default function Note() {
|
|||
</section>
|
||||
<section className="flex gap-4 flex-col-reverse justify-between md:flex-row items-center">
|
||||
<select
|
||||
className="cursor-pointer px-5 py-3 rounded-xl border-4 border-transparent border-b-cyan-200"
|
||||
className="cursor-pointer px-5 py-3 rounded-xl bg-white border-4 border-transparent border-b-cyan-200"
|
||||
value={year}
|
||||
onChange={onChangeYear}
|
||||
>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import Article from "~/components/common/article";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
import type { Route } from "./+types/page";
|
||||
|
||||
export function meta({ loaderData }: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: loaderData ? siteTitle(loaderData.data.title) : "404" },
|
||||
{ name: "description", content: loaderData?.data.desc },
|
||||
];
|
||||
}
|
||||
|
||||
export async function loader({ params }: Route.LoaderArgs) {
|
||||
const slug = params["*"];
|
||||
|
||||
const page = (await fetch(
|
||||
`https://paul.ren/api/page/get?slug=${slug}&html`,
|
||||
).then((res) => res.json())) as API.Response<API.Page.IPageData>;
|
||||
|
||||
if (page.status === "Failed") {
|
||||
throw new Response("Not Found", { status: 404 });
|
||||
}
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
export default function DynamicPage({ loaderData }: Route.ComponentProps) {
|
||||
const page = loaderData;
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
|
||||
<p className="text-center opacity-60">{page.data.desc}</p>
|
||||
</section>
|
||||
<section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
|
||||
<Article html={page.data.content} />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
/// <reference types="@remix-run/node" />
|
||||
/// <reference types="vite/client" />
|
||||
50
package.json
50
package.json
|
|
@ -5,43 +5,29 @@
|
|||
"url": "https://paul.ren"
|
||||
},
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "remix vite:build",
|
||||
"dev": "remix vite:dev",
|
||||
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
||||
"start": "remix-serve ./build/server/index.js",
|
||||
"typecheck": "tsc"
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
"start": "react-router-serve ./build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@remix-run/node": "^2.13.1",
|
||||
"@remix-run/react": "^2.13.1",
|
||||
"@remix-run/serve": "^2.13.1",
|
||||
"isbot": "^4.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"@react-router/node": "7.15.1",
|
||||
"@react-router/serve": "7.15.1",
|
||||
"isbot": "^5.1.36",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router": "7.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@remix-run/dev": "^2.13.1",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-import-resolver-typescript": "^3.6.1",
|
||||
"eslint-plugin-import": "^2.28.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"less": "^4.2.0",
|
||||
"postcss": "^8.4.31",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^5.1.0",
|
||||
"vite-tsconfig-paths": "^4.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"@react-router/dev": "7.15.1",
|
||||
"@tailwindcss/vite": "^4.2.2",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^8.0.3"
|
||||
}
|
||||
}
|
||||
8275
pnpm-lock.yaml
8275
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import type { Config } from "@react-router/dev/config";
|
||||
|
||||
export default {
|
||||
// Config options...
|
||||
// Server-side render by default, to enable SPA mode set this to `false`
|
||||
ssr: true,
|
||||
} satisfies Config;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./app/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
mi: "MiSans",
|
||||
},
|
||||
animation: {
|
||||
"spinner-bar": "spinnerBar 6s linear infinite",
|
||||
"fade-in": "fadeIn .3s both",
|
||||
"fade-out": "fadeOut .3s both",
|
||||
"fade-in-left": "fadeInLeft .3s backwards",
|
||||
"fade-off-right": "fadeOffRight .3s forwards",
|
||||
},
|
||||
keyframes: {
|
||||
spinnerBar: {
|
||||
"0%": { width: "0%" },
|
||||
"100%": { width: "100%" },
|
||||
},
|
||||
fadeIn: {
|
||||
"0%": { opacity: 0 },
|
||||
"100%": { opacity: 1 },
|
||||
},
|
||||
fadeOut: {
|
||||
"0%": { opacity: 1 },
|
||||
"100%": { opacity: 0 },
|
||||
},
|
||||
fadeInLeft: {
|
||||
"0%": { opacity: 0, transform: "translateX(1.5rem)" },
|
||||
"100%": { opacity: 1, transform: "translateX(0)" },
|
||||
},
|
||||
fadeOffRight: {
|
||||
"0%": { opacity: 1, transform: "translateX(0)" },
|
||||
"100%": { opacity: 0, transform: "translateX(1.5rem)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -1,24 +1,26 @@
|
|||
{
|
||||
"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"include": [
|
||||
"**/*",
|
||||
"**/.server/**/*",
|
||||
"**/.client/**/*",
|
||||
".react-router/types/**/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-jsx",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"types": ["node", "vite/client"],
|
||||
"target": "ES2022",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"rootDirs": [".", "./.react-router/types"],
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
|
||||
// Vite takes care of building everything, not tsc.
|
||||
"noEmit": true
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { vitePlugin as remix } from "@remix-run/dev";
|
||||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [remix(), tsconfigPaths()],
|
||||
plugins: [tailwindcss(), reactRouter()],
|
||||
resolve: {
|
||||
tsconfigPaths: true,
|
||||
},
|
||||
envPrefix: "APP_",
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue