Build technical notes archive
This commit is contained in:
wxf
Generated
+15
@@ -8,6 +8,7 @@
|
||||
"name": "fly-personal-site",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"lucide-react": "^1.17.0",
|
||||
"motion": "^12.40.0",
|
||||
"next": "16.2.7",
|
||||
"react": "19.2.4",
|
||||
@@ -4634,6 +4635,14 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-1.17.0.tgz",
|
||||
"integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@@ -9217,6 +9226,12 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"lucide-react": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-1.17.0.tgz",
|
||||
"integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
|
||||
"requires": {}
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^1.17.0",
|
||||
"motion": "^12.40.0",
|
||||
"next": "16.2.7",
|
||||
"react": "19.2.4",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 449 KiB |
+264
-10
@@ -1,8 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #101411;
|
||||
--foreground: #f4efe4;
|
||||
--background: #05050b;
|
||||
--foreground: #ffffff;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -18,38 +18,292 @@
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
overflow-x: clip;
|
||||
overscroll-behavior-y: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100dvh;
|
||||
overflow-x: clip;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-body), sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #d3ff30;
|
||||
color: #101411;
|
||||
background: #22d3ee;
|
||||
color: #05050b;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.noise-layer {
|
||||
.tech-doc-content {
|
||||
animation: doc-rise 720ms ease both;
|
||||
contain: paint;
|
||||
max-width: 100%;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.tech-doc-toc a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tech-doc-toc div::-webkit-scrollbar,
|
||||
.tech-doc-content pre::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.tech-doc-toc div::-webkit-scrollbar-thumb,
|
||||
.tech-doc-content pre::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(103, 232, 249, 0.38);
|
||||
}
|
||||
|
||||
.tech-doc-content::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
margin-bottom: 28px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #22d3ee, #a855f7, #f0abfc, #84cc16);
|
||||
box-shadow: 0 0 26px rgba(34, 211, 238, 0.42);
|
||||
}
|
||||
|
||||
.tech-doc-content :where(h3, h4) {
|
||||
margin: 42px 0 16px;
|
||||
scroll-margin-top: 32px;
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.tech-doc-content h3 {
|
||||
font-size: clamp(1.45rem, 2vw, 2rem);
|
||||
background: linear-gradient(90deg, #67e8f9, #f0abfc 58%, #bef264);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
|
||||
}
|
||||
|
||||
.tech-doc-content h4 {
|
||||
font-size: 1.05rem;
|
||||
color: #a5f3fc;
|
||||
}
|
||||
|
||||
.tech-doc-content :where(p, ul, ol, blockquote, pre) {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.tech-doc-content :where(ul, ol) {
|
||||
padding-left: 1.35rem;
|
||||
}
|
||||
|
||||
.tech-doc-content li {
|
||||
margin: 8px 0;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
|
||||
.tech-doc-content li::marker {
|
||||
color: #67e8f9;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tech-doc-content a {
|
||||
color: #67e8f9;
|
||||
border-bottom: 1px solid rgba(103, 232, 249, 0.35);
|
||||
transition:
|
||||
color 160ms ease,
|
||||
border-color 160ms ease,
|
||||
text-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.tech-doc-content a:hover {
|
||||
color: #f0abfc;
|
||||
border-color: rgba(240, 171, 252, 0.75);
|
||||
text-shadow: 0 0 18px rgba(240, 171, 252, 0.35);
|
||||
}
|
||||
|
||||
.tech-doc-content strong {
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tech-doc-content code {
|
||||
border: 1px solid rgba(103, 232, 249, 0.18);
|
||||
border-radius: 8px;
|
||||
background: rgba(34, 211, 238, 0.1);
|
||||
color: #a5f3fc;
|
||||
font-family: var(--font-code), monospace;
|
||||
font-size: 0.9em;
|
||||
padding: 0.1rem 0.38rem;
|
||||
}
|
||||
|
||||
.tech-doc-content pre {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(45, 212, 191, 0.28);
|
||||
border-radius: 20px;
|
||||
padding-top: 2.75rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0 2.75rem, transparent 2.75rem),
|
||||
radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.2), transparent 28%),
|
||||
radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.22), transparent 26%),
|
||||
#020617;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
|
||||
0 16px 46px rgba(2, 6, 23, 0.42),
|
||||
0 0 24px rgba(45, 212, 191, 0.08);
|
||||
}
|
||||
|
||||
.tech-doc-content pre::before {
|
||||
content: attr(data-language);
|
||||
position: absolute;
|
||||
left: 1.1rem;
|
||||
top: 0.9rem;
|
||||
color: #5eead4;
|
||||
font-family: var(--font-code), monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.tech-doc-code-copy {
|
||||
position: absolute;
|
||||
right: 0.85rem;
|
||||
top: 0.56rem;
|
||||
z-index: 1;
|
||||
width: 4.1rem;
|
||||
border: 1px solid rgba(103, 232, 249, 0.38);
|
||||
border-radius: 999px;
|
||||
background: rgba(8, 47, 73, 0.72);
|
||||
color: #cffafe;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body), sans-serif;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
padding: 0.52rem 0.72rem;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
color 160ms ease;
|
||||
}
|
||||
|
||||
.tech-doc-code-copy:hover,
|
||||
.tech-doc-code-copy[data-copied="true"] {
|
||||
border-color: rgba(94, 234, 212, 0.9);
|
||||
background: rgba(20, 184, 166, 0.22);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 24px rgba(45, 212, 191, 0.26);
|
||||
}
|
||||
|
||||
.tech-doc-content pre code {
|
||||
display: block;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
max-width: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.8;
|
||||
padding: 0 1.25rem 1.25rem;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.tech-doc-content img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
margin: 24px 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow: 0 18px 52px rgba(34, 211, 238, 0.12);
|
||||
}
|
||||
|
||||
.tech-doc-content blockquote {
|
||||
border-left: 3px solid #22d3ee;
|
||||
border-radius: 14px;
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.tech-doc-content hr {
|
||||
height: 1px;
|
||||
margin: 32px 0;
|
||||
border: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.45), transparent);
|
||||
}
|
||||
|
||||
.neon-aurora {
|
||||
position: absolute;
|
||||
inset: -18% -10% auto -10%;
|
||||
z-index: -3;
|
||||
height: 72%;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 12% 24%, rgba(34, 211, 238, 0.44), transparent 28%),
|
||||
radial-gradient(circle at 48% 8%, rgba(99, 102, 241, 0.36), transparent 30%),
|
||||
radial-gradient(circle at 86% 32%, rgba(217, 70, 239, 0.42), transparent 28%),
|
||||
radial-gradient(circle at 74% 72%, rgba(132, 204, 22, 0.18), transparent 24%);
|
||||
filter: blur(12px) saturate(1.18);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.cyber-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(217, 70, 239, 0.08) 1px, transparent 1px);
|
||||
background-size: 64px 64px;
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 56%, transparent 100%);
|
||||
}
|
||||
|
||||
.scanline {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.2;
|
||||
background-image:
|
||||
radial-gradient(circle at 18% 30%, rgba(244, 239, 228, 0.18) 0 1px, transparent 1px),
|
||||
radial-gradient(circle at 72% 64%, rgba(211, 255, 48, 0.14) 0 1px, transparent 1px);
|
||||
background-size: 34px 34px, 46px 46px;
|
||||
opacity: 0.18;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||||
background-size: 100% 7px;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
@keyframes doc-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { PlaceholderPage } from "@/components/placeholder-page";
|
||||
|
||||
export default function LifePage() {
|
||||
return (
|
||||
<PlaceholderPage
|
||||
eyebrow="Life journal"
|
||||
title="生活分享"
|
||||
description="技术之外的个人切面：日常、阅读、音乐、照片、旅行，以及阶段性的想法。"
|
||||
items={["日常记录", "阅读和音乐", "照片和旅行", "一些想法"]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { FrontendNotesPage } from "@/components/frontend-notes-page";
|
||||
import { frontendArticles } from "@/content/notes/frontend/articles";
|
||||
|
||||
const modules = ["frontend", "backend", "ai-agent"] as const;
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{
|
||||
module: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return modules.map((module) => ({ module }));
|
||||
}
|
||||
|
||||
export default async function NotesModulePage({ params }: PageProps) {
|
||||
const { module } = await params;
|
||||
|
||||
if (!modules.includes(module as (typeof modules)[number])) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
if (module === "frontend") {
|
||||
const articles = frontendArticles.map((article) => ({
|
||||
slug: article.slug,
|
||||
title: article.title,
|
||||
description: article.description,
|
||||
href: `/notes/frontend/${article.slug}`,
|
||||
}));
|
||||
|
||||
return (
|
||||
<FrontendNotesPage
|
||||
eyebrow="Frontend knowledge base"
|
||||
title="前端笔记"
|
||||
description="fly 的前端知识索引，覆盖基础语言、框架机制、浏览器、网络、性能与代码执行题。"
|
||||
listDescription="每个入口都是一组可独立阅读的知识点，适合快速定位概念、机制与常见问题。"
|
||||
articles={articles}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (module === "backend") {
|
||||
return (
|
||||
<FrontendNotesPage
|
||||
eyebrow="Backend knowledge base"
|
||||
title="后端笔记"
|
||||
description="后端方向会整理服务端基础、接口设计、数据库、部署、鉴权、缓存和稳定性相关内容。"
|
||||
featuredTitle="敬请期待"
|
||||
listTitle="规划内容"
|
||||
listDescription="这些模块会在后续逐步补齐，先保留入口和内容结构。"
|
||||
articles={[
|
||||
{
|
||||
slug: "backend-api",
|
||||
title: "API 设计",
|
||||
description: "接口规范、请求响应结构、错误码、鉴权边界和版本管理等内容整理。",
|
||||
status: "soon",
|
||||
},
|
||||
{
|
||||
slug: "backend-database",
|
||||
title: "数据库",
|
||||
description: "数据建模、索引、事务、查询优化和常见业务存储方案。",
|
||||
status: "soon",
|
||||
},
|
||||
{
|
||||
slug: "backend-deployment",
|
||||
title: "部署与服务稳定性",
|
||||
description: "服务部署、日志、监控、缓存、限流和故障排查相关实践。",
|
||||
status: "soon",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (module === "ai-agent") {
|
||||
return (
|
||||
<FrontendNotesPage
|
||||
eyebrow="AI Agent knowledge base"
|
||||
title="AI Agent 笔记"
|
||||
description="AI Agent 方向会记录工作流、工具调用、上下文工程、提示词和自动化场景实践。"
|
||||
featuredTitle="敬请期待"
|
||||
listTitle="规划内容"
|
||||
listDescription="这些方向会随着实践逐步沉淀成可回看的技术文章。"
|
||||
articles={[
|
||||
{
|
||||
slug: "agent-workflow",
|
||||
title: "Agent 工作流",
|
||||
description: "任务拆解、执行循环、状态管理和人机协作流程。",
|
||||
status: "soon",
|
||||
},
|
||||
{
|
||||
slug: "agent-tools",
|
||||
title: "工具调用",
|
||||
description: "函数调用、MCP、浏览器自动化、文件操作和外部系统集成。",
|
||||
status: "soon",
|
||||
},
|
||||
{
|
||||
slug: "agent-prompting",
|
||||
title: "提示词与上下文工程",
|
||||
description: "角色约束、上下文压缩、记忆策略和输出质量控制。",
|
||||
status: "soon",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
notFound();
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { TechDocPage } from "@/components/tech-doc-page";
|
||||
import { frontendArticles, getFrontendArticle } from "@/content/notes/frontend/articles";
|
||||
import { getTechArticle } from "@/lib/tech-article";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{
|
||||
slug: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return frontendArticles.map((article) => ({ slug: article.slug }));
|
||||
}
|
||||
|
||||
export default async function FrontendArticlePage({ params }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const articleMeta = getFrontendArticle(slug);
|
||||
|
||||
if (!articleMeta) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const article = getTechArticle(`frontend/${articleMeta.file}`);
|
||||
|
||||
return (
|
||||
<TechDocPage
|
||||
eyebrow="Frontend notes"
|
||||
title={articleMeta.title}
|
||||
description={articleMeta.description}
|
||||
contentHtml={article.contentHtml}
|
||||
toc={articleMeta.slug === "code-output" ? [] : article.toc}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { ArrowUp } from "lucide-react";
|
||||
|
||||
export function BackToTopButton() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
let frame = 0;
|
||||
|
||||
const updateVisibility = () => {
|
||||
frame = 0;
|
||||
setVisible(window.scrollY > 520);
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (frame) {
|
||||
return;
|
||||
}
|
||||
|
||||
frame = window.requestAnimationFrame(updateVisibility);
|
||||
};
|
||||
|
||||
updateVisibility();
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
if (frame) {
|
||||
window.cancelAnimationFrame(frame);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: prefersReducedMotion ? "auto" : "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{visible ? (
|
||||
<motion.button
|
||||
type="button"
|
||||
aria-label="回到顶部"
|
||||
title="回到顶部"
|
||||
className="fixed bottom-6 right-5 z-50 inline-flex h-12 w-12 items-center justify-center rounded-full border border-cyan-300/35 bg-[#07111f]/95 text-cyan-100 shadow-[0_0_28px_rgba(34,211,238,0.24)] outline-none transition hover:-translate-y-0.5 hover:border-fuchsia-300/70 hover:text-white hover:shadow-[0_0_34px_rgba(217,70,239,0.25)] focus-visible:ring-2 focus-visible:ring-cyan-300 sm:bottom-8 sm:right-8"
|
||||
initial={{ opacity: 0, scale: 0.82, y: 12 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.82, y: 12 }}
|
||||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||||
onClick={scrollToTop}
|
||||
>
|
||||
<ArrowUp className="h-5 w-5" />
|
||||
</motion.button>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,323 @@
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowUpRight,
|
||||
BookOpen,
|
||||
Braces,
|
||||
Code2,
|
||||
Gauge,
|
||||
Globe2,
|
||||
Layers3,
|
||||
MonitorCog,
|
||||
RadioTower,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
type FrontendArticle = {
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
href?: string;
|
||||
status?: "ready" | "soon";
|
||||
};
|
||||
|
||||
type FrontendNotesPageProps = {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
archiveLabel?: string;
|
||||
featuredTitle?: string;
|
||||
listTitle?: string;
|
||||
listDescription: string;
|
||||
articles: readonly FrontendArticle[];
|
||||
};
|
||||
|
||||
const articleVisuals: Record<
|
||||
string,
|
||||
{
|
||||
accent: string;
|
||||
glyph: string;
|
||||
track: string;
|
||||
Icon: typeof Code2;
|
||||
}
|
||||
> = {
|
||||
html: {
|
||||
accent: "from-orange-300 via-rose-300 to-fuchsia-300",
|
||||
glyph: "HTML",
|
||||
track: "Markup",
|
||||
Icon: Layers3,
|
||||
},
|
||||
css: {
|
||||
accent: "from-sky-300 via-cyan-300 to-lime-300",
|
||||
glyph: "CSS",
|
||||
track: "Visual system",
|
||||
Icon: Sparkles,
|
||||
},
|
||||
"javascript-part-1": {
|
||||
accent: "from-yellow-200 via-cyan-300 to-blue-400",
|
||||
glyph: "JS-I",
|
||||
track: "Core language",
|
||||
Icon: Braces,
|
||||
},
|
||||
"javascript-part-2": {
|
||||
accent: "from-cyan-300 via-violet-300 to-fuchsia-300",
|
||||
glyph: "JS-II",
|
||||
track: "Runtime",
|
||||
Icon: Code2,
|
||||
},
|
||||
"vue-part-1": {
|
||||
accent: "from-emerald-300 via-teal-300 to-cyan-300",
|
||||
glyph: "Vue I",
|
||||
track: "Framework",
|
||||
Icon: MonitorCog,
|
||||
},
|
||||
"vue-part-2": {
|
||||
accent: "from-green-300 via-cyan-300 to-blue-300",
|
||||
glyph: "Vue II",
|
||||
track: "Ecosystem",
|
||||
Icon: MonitorCog,
|
||||
},
|
||||
"react-part-1": {
|
||||
accent: "from-cyan-200 via-blue-300 to-indigo-300",
|
||||
glyph: "React I",
|
||||
track: "UI model",
|
||||
Icon: RadioTower,
|
||||
},
|
||||
"react-part-2": {
|
||||
accent: "from-blue-300 via-fuchsia-300 to-rose-300",
|
||||
glyph: "React II",
|
||||
track: "Architecture",
|
||||
Icon: RadioTower,
|
||||
},
|
||||
network: {
|
||||
accent: "from-lime-200 via-cyan-300 to-blue-400",
|
||||
glyph: "NET",
|
||||
track: "Protocol",
|
||||
Icon: Globe2,
|
||||
},
|
||||
browser: {
|
||||
accent: "from-purple-300 via-cyan-300 to-emerald-300",
|
||||
glyph: "BOM",
|
||||
track: "Browser",
|
||||
Icon: MonitorCog,
|
||||
},
|
||||
performance: {
|
||||
accent: "from-lime-200 via-yellow-200 to-cyan-300",
|
||||
glyph: "Perf",
|
||||
track: "Optimization",
|
||||
Icon: Gauge,
|
||||
},
|
||||
"code-output": {
|
||||
accent: "from-fuchsia-300 via-rose-300 to-orange-200",
|
||||
glyph: "Quiz",
|
||||
track: "Execution",
|
||||
Icon: Braces,
|
||||
},
|
||||
};
|
||||
|
||||
const featuredSlugs = ["javascript-part-1", "css", "browser"] as const;
|
||||
|
||||
function getArticleVisual(slug: string) {
|
||||
return (
|
||||
articleVisuals[slug] ?? {
|
||||
accent: "from-cyan-300 via-fuchsia-300 to-lime-200",
|
||||
glyph: "Soon",
|
||||
track: "Coming soon",
|
||||
Icon: Code2,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function FrontendNotesPage({
|
||||
eyebrow,
|
||||
title,
|
||||
description,
|
||||
archiveLabel = "ARCHIVE",
|
||||
featuredTitle = "精选入口",
|
||||
listTitle = "全部文章",
|
||||
listDescription,
|
||||
articles,
|
||||
}: FrontendNotesPageProps) {
|
||||
const featuredArticles =
|
||||
featuredSlugs
|
||||
.map((slug) => articles.find((article) => article.slug === slug))
|
||||
.filter((article): article is FrontendArticle => Boolean(article)).length > 0
|
||||
? featuredSlugs
|
||||
.map((slug) => articles.find((article) => article.slug === slug))
|
||||
.filter((article): article is FrontendArticle => Boolean(article))
|
||||
: articles.slice(0, 3);
|
||||
|
||||
const renderArticleContent = (article: FrontendArticle, index: number, compact = false) => {
|
||||
const visual = getArticleVisual(article.slug);
|
||||
const Icon = visual.Icon;
|
||||
const isSoon = article.status === "soon";
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`flex aspect-square items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-sm font-black text-[#05050b] shadow-lg shadow-cyan-500/15`}
|
||||
>
|
||||
{isSoon ? "..." : String(index + 1).padStart(2, "0")}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-cyan-100/65">
|
||||
<Icon className="h-4 w-4" />
|
||||
{visual.track}
|
||||
</div>
|
||||
<h3 className="mt-2 text-xl font-black text-white">{article.title}</h3>
|
||||
<p className="mt-2 line-clamp-2 text-sm leading-6 text-white/54">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
<ArrowUpRight className="h-5 w-5 text-white/42 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-cyan-100" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${visual.accent}`} />
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div
|
||||
className={`inline-flex h-14 w-14 items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-xs font-black text-[#05050b]`}
|
||||
>
|
||||
{visual.glyph}
|
||||
</div>
|
||||
<span className="font-mono text-sm text-fuchsia-200/70">
|
||||
{isSoon ? "SOON" : String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-[0.16em] text-cyan-100/60">
|
||||
<Icon className="h-4 w-4" />
|
||||
{visual.track}
|
||||
</div>
|
||||
<h3 className="mt-4 text-2xl font-black leading-tight text-white">{article.title}</h3>
|
||||
<p className="mt-4 line-clamp-3 text-sm leading-7 text-white/55">{article.description}</p>
|
||||
|
||||
<div className="absolute inset-x-5 bottom-5 flex items-center justify-between border-t border-white/10 pt-4">
|
||||
<span className="font-mono text-xs uppercase tracking-[0.16em] text-white/42">
|
||||
{isSoon ? "敬请期待" : "Read article"}
|
||||
</span>
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-cyan-300/24 bg-cyan-300/[0.08] text-cyan-100 transition group-hover:border-fuchsia-300/70 group-hover:text-fuchsia-100">
|
||||
<ArrowUpRight className="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="relative min-h-dvh overflow-hidden bg-[#05050b] px-5 py-6 text-white sm:px-8 lg:px-10">
|
||||
<div className="neon-aurora" />
|
||||
<div className="cyber-grid" />
|
||||
<div className="scanline" />
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-7xl">
|
||||
<header className="flex items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 text-sm font-semibold text-white/80 outline-none transition hover:border-cyan-300/70 hover:text-cyan-100 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
首页
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-full bg-white px-4 py-2 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
fly
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="grid min-h-[calc(100dvh-92px)] gap-10 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-14">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 font-mono text-xs uppercase text-cyan-100 shadow-lg shadow-cyan-500/10">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
{eyebrow}
|
||||
</div>
|
||||
<h1 className="mt-7 font-display text-5xl font-black leading-tight sm:text-7xl lg:text-8xl">
|
||||
{title}
|
||||
<span className="block bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-lime-200 bg-clip-text text-transparent">
|
||||
{archiveLabel}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-7 max-w-2xl text-base leading-8 text-white/62 sm:text-lg">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="mt-9 h-px max-w-xl bg-gradient-to-r from-cyan-300 via-fuchsia-300 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-6 bg-[radial-gradient(circle_at_20%_12%,rgba(34,211,238,0.25),transparent_30%),radial-gradient(circle_at_84%_80%,rgba(217,70,239,0.2),transparent_32%)] blur-2xl" />
|
||||
<div className="relative overflow-hidden border border-white/10 bg-[#090915]/90 p-5 shadow-2xl shadow-black/40 sm:p-6">
|
||||
<div className="flex items-center justify-between border-b border-white/10 pb-4">
|
||||
<div>
|
||||
<p className="font-mono text-xs uppercase tracking-[0.2em] text-fuchsia-200/70">
|
||||
launch sequence
|
||||
</p>
|
||||
<h2 className="mt-2 text-2xl font-black">{featuredTitle}</h2>
|
||||
</div>
|
||||
<div className="h-3 w-3 rounded-full bg-lime-300 shadow-[0_0_24px_rgba(190,242,100,0.85)]" />
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3">
|
||||
{featuredArticles.map((article, index) => {
|
||||
const className =
|
||||
"group grid gap-4 border border-white/10 bg-white/[0.045] p-4 outline-none transition hover:-translate-y-0.5 hover:border-cyan-300/50 hover:bg-cyan-300/[0.07] focus-visible:ring-2 focus-visible:ring-cyan-300 sm:grid-cols-[4.8rem_1fr_auto] sm:items-center";
|
||||
|
||||
return article.href ? (
|
||||
<Link key={article.slug} href={article.href} className={className}>
|
||||
{renderArticleContent(article, index, true)}
|
||||
</Link>
|
||||
) : (
|
||||
<div key={article.slug} className={className}>
|
||||
{renderArticleContent(article, index, true)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-16">
|
||||
<div className="flex flex-col justify-between gap-4 border-y border-white/10 py-7 sm:flex-row sm:items-end">
|
||||
<div>
|
||||
<p className="font-mono text-xs uppercase tracking-[0.2em] text-cyan-200/70">
|
||||
all dossiers
|
||||
</p>
|
||||
<h2 className="mt-3 text-3xl font-black text-white sm:text-4xl">{listTitle}</h2>
|
||||
</div>
|
||||
<p className="max-w-xl text-sm leading-7 text-white/52">
|
||||
{listDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{articles.map((article, index) => {
|
||||
const className =
|
||||
"group relative min-h-72 overflow-hidden border border-white/10 bg-white/[0.04] p-5 outline-none transition hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.065] focus-visible:ring-2 focus-visible:ring-cyan-300";
|
||||
|
||||
return article.href ? (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={article.href}
|
||||
className={className}
|
||||
>
|
||||
{renderArticleContent(article, index)}
|
||||
</Link>
|
||||
) : (
|
||||
<div key={article.slug} className={className}>
|
||||
{renderArticleContent(article, index)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+303
-174
@@ -1,217 +1,346 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
Bot,
|
||||
Braces,
|
||||
Database,
|
||||
GitBranch,
|
||||
LifeBuoy,
|
||||
Mail,
|
||||
Sparkles,
|
||||
TerminalSquare,
|
||||
} from "lucide-react";
|
||||
|
||||
const highlights = [
|
||||
{ label: "Frontend", value: "React / Vue / Next.js" },
|
||||
{ label: "Notes", value: "HTML, CSS, JS, Git" },
|
||||
{ label: "Current", value: "Rebuilding a personal web identity" },
|
||||
const navItems = [
|
||||
{ label: "技术文章", href: "#articles" },
|
||||
{ label: "生活分享", href: "#life" },
|
||||
{ label: "联系我", href: "mailto:3505891631@qq.com" },
|
||||
{ label: "Gitea", href: "http://124.221.147.173:3000/fly/fly-personal-site" },
|
||||
];
|
||||
|
||||
const chapters = [
|
||||
const portals = [
|
||||
{
|
||||
title: "Engineering Notes",
|
||||
eyebrow: "01",
|
||||
body: "把前端知识拆成可复用的笔记，不追求堆砌，追求每次回看都能拿来解决问题。",
|
||||
href: "http://124.221.147.173:3000/fly/flys_blog",
|
||||
title: "技术文章",
|
||||
href: "#articles",
|
||||
eyebrow: "Knowledge archive",
|
||||
description: "围绕前端工程、服务端基础和 AI Agent 的技术内容索引。",
|
||||
icon: TerminalSquare,
|
||||
gradient: "from-cyan-300 via-blue-500 to-violet-500",
|
||||
},
|
||||
{
|
||||
title: "Personal Experiments",
|
||||
eyebrow: "02",
|
||||
body: "记录一些页面、工具、交互和生活灵感，把学习过程变成能被看见的作品。",
|
||||
href: "http://124.221.147.173:3000/fly/fly-personal-site",
|
||||
},
|
||||
{
|
||||
title: "Quiet Systems",
|
||||
eyebrow: "03",
|
||||
body: "偏爱清晰、克制、有质感的界面。让复杂内容保持秩序，让细节自己发光。",
|
||||
href: "#signal",
|
||||
title: "生活分享",
|
||||
href: "#life",
|
||||
eyebrow: "Life stream",
|
||||
description: "技术之外的日常片段，呈现更完整的个人侧面。",
|
||||
icon: LifeBuoy,
|
||||
gradient: "from-lime-300 via-emerald-400 to-cyan-400",
|
||||
},
|
||||
];
|
||||
|
||||
const stack = [
|
||||
"Next.js",
|
||||
"Tailwind CSS",
|
||||
"Motion",
|
||||
"TypeScript",
|
||||
"Vue",
|
||||
"React",
|
||||
"Git",
|
||||
"VitePress",
|
||||
const noteModules = [
|
||||
{
|
||||
name: "前端",
|
||||
href: "/notes/frontend",
|
||||
icon: Braces,
|
||||
description: "React、Vue、Next.js、CSS、动画、工程化。",
|
||||
},
|
||||
{
|
||||
name: "后端",
|
||||
href: "/notes/backend",
|
||||
icon: Database,
|
||||
description: "API、数据库、部署、鉴权、缓存、服务基础。",
|
||||
},
|
||||
{
|
||||
name: "AI Agent",
|
||||
href: "/notes/ai-agent",
|
||||
icon: Bot,
|
||||
description: "Agent 工作流、工具调用、提示词和自动化实践。",
|
||||
},
|
||||
];
|
||||
|
||||
const lifeTopics = ["Daily", "Reading", "Music", "Photo", "Travel", "Thoughts"];
|
||||
|
||||
export function HomePage() {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const distance = reduceMotion ? 0 : 28;
|
||||
const duration = reduceMotion ? 0 : 0.58;
|
||||
const easeOut = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const container = {
|
||||
hidden: {},
|
||||
show: {
|
||||
transition: {
|
||||
staggerChildren: reduceMotion ? 0 : 0.075,
|
||||
delayChildren: reduceMotion ? 0 : 0.08,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const reveal = {
|
||||
hidden: { opacity: 0, y: reduceMotion ? 0 : 24 },
|
||||
show: { opacity: 1, y: 0 },
|
||||
hidden: { opacity: 0, y: distance, filter: reduceMotion ? "none" : "blur(10px)" },
|
||||
show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration, ease: easeOut } },
|
||||
};
|
||||
|
||||
const scaleReveal = {
|
||||
hidden: { opacity: 0, y: distance, scale: reduceMotion ? 1 : 0.96 },
|
||||
show: { opacity: 1, y: 0, scale: 1, transition: { duration, ease: easeOut } },
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-dvh overflow-hidden bg-[#101411] text-[#f4efe4]">
|
||||
<section className="relative isolate flex min-h-dvh items-center px-5 py-6 sm:px-8 lg:px-12">
|
||||
<div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgba(244,239,228,0.08)_1px,transparent_1px),linear-gradient(180deg,rgba(244,239,228,0.08)_1px,transparent_1px)] bg-[size:72px_72px]" />
|
||||
<div className="absolute inset-x-0 top-0 -z-10 h-80 bg-[radial-gradient(circle_at_18%_18%,rgba(211,255,48,0.18),transparent_34%),radial-gradient(circle_at_82%_4%,rgba(242,124,74,0.22),transparent_28%)]" />
|
||||
<div className="noise-layer" />
|
||||
<main className="min-h-dvh overflow-hidden bg-[#05050b] text-white">
|
||||
<section className="relative isolate min-h-dvh px-5 py-5 sm:px-8 lg:px-10">
|
||||
<motion.div
|
||||
className="neon-aurora"
|
||||
initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.92 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: reduceMotion ? 0 : 1.2, ease: "easeOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="cyber-grid"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: reduceMotion ? 0 : 0.9, delay: reduceMotion ? 0 : 0.18 }}
|
||||
/>
|
||||
<motion.div
|
||||
className="scanline"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 0.18 }}
|
||||
transition={{ duration: reduceMotion ? 0 : 0.8, delay: reduceMotion ? 0 : 0.28 }}
|
||||
/>
|
||||
|
||||
<div className="mx-auto grid w-full max-w-7xl gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:items-center">
|
||||
<motion.header
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
variants={container}
|
||||
className="relative z-10 mx-auto flex max-w-7xl items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10 backdrop-blur-2xl"
|
||||
>
|
||||
<motion.div variants={scaleReveal}>
|
||||
<Link
|
||||
href="/"
|
||||
className="group inline-flex h-11 items-center gap-3 rounded-full bg-white px-4 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<Sparkles className="h-4 w-4 transition group-hover:rotate-12" />
|
||||
fly
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<nav aria-label="主导航" className="hidden items-center gap-1 md:flex">
|
||||
{navItems.map((item) => (
|
||||
<motion.a
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
variants={reveal}
|
||||
className="rounded-full px-4 py-2 text-sm text-white/68 outline-none transition hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-fuchsia-300"
|
||||
>
|
||||
{item.label}
|
||||
</motion.a>
|
||||
))}
|
||||
</nav>
|
||||
</motion.header>
|
||||
|
||||
<div className="relative z-10 mx-auto grid min-h-[calc(100dvh-88px)] max-w-7xl gap-8 py-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
transition={{ staggerChildren: reduceMotion ? 0 : 0.08 }}
|
||||
className="flex min-h-[calc(100dvh-48px)] flex-col justify-between gap-10 py-2 lg:min-h-[calc(100dvh-64px)]"
|
||||
variants={container}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<motion.header variants={reveal} className="flex items-center justify-between gap-4">
|
||||
<a
|
||||
href="#top"
|
||||
aria-label="fly homepage"
|
||||
className="group inline-flex h-11 items-center gap-3 rounded-full border border-[#f4efe4]/18 bg-[#f4efe4]/8 px-4 text-sm font-medium text-[#f4efe4] outline-none transition hover:border-[#d3ff30]/70 hover:bg-[#d3ff30] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
|
||||
>
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-[#d3ff30] transition group-hover:bg-[#101411]" />
|
||||
fly
|
||||
</a>
|
||||
<nav aria-label="Primary navigation" className="hidden items-center gap-2 sm:flex">
|
||||
{["notes", "work", "signal"].map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`#${item}`}
|
||||
className="rounded-full px-4 py-2 text-sm text-[#f4efe4]/68 outline-none transition hover:bg-[#f4efe4]/10 hover:text-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</motion.header>
|
||||
|
||||
<div id="top" className="max-w-4xl">
|
||||
<motion.p variants={reveal} className="mb-6 text-sm font-medium text-[#d3ff30]">
|
||||
Personal website / frontend notes / visual experiments
|
||||
</motion.p>
|
||||
<motion.h1
|
||||
variants={reveal}
|
||||
className="max-w-4xl font-display text-7xl font-semibold leading-none text-[#f8f4ea] sm:text-8xl lg:text-9xl"
|
||||
>
|
||||
fly
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={reveal}
|
||||
className="mt-8 max-w-2xl text-lg leading-8 text-[#d8d0bf] sm:text-xl sm:leading-9"
|
||||
>
|
||||
前端开发者，正在把技术笔记、页面实验和个人审美重新整理成一个更自由、更有质感的个人网站。
|
||||
</motion.p>
|
||||
<motion.div variants={reveal} className="mt-9 flex flex-col gap-3 sm:flex-row">
|
||||
<a
|
||||
href="#work"
|
||||
className="inline-flex h-12 items-center justify-center rounded-full bg-[#d3ff30] px-6 text-sm font-semibold text-[#101411] outline-none transition hover:bg-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#f4efe4]"
|
||||
>
|
||||
查看主页结构
|
||||
</a>
|
||||
<a
|
||||
href="http://124.221.147.173:3000/fly/flys_blog"
|
||||
className="inline-flex h-12 items-center justify-center rounded-full border border-[#f4efe4]/22 px-6 text-sm font-semibold text-[#f4efe4] outline-none transition hover:border-[#f27c4a] hover:bg-[#f27c4a] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#f27c4a]"
|
||||
>
|
||||
打开旧博客仓库
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
<motion.p
|
||||
variants={reveal}
|
||||
className="grid gap-3 border-y border-[#f4efe4]/14 py-5 sm:grid-cols-3"
|
||||
className="mb-6 inline-flex rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 font-mono text-xs uppercase text-cyan-100 shadow-lg shadow-cyan-500/10"
|
||||
>
|
||||
{highlights.map((item) => (
|
||||
<div key={item.label} className="min-h-24">
|
||||
<p className="text-xs font-semibold uppercase text-[#f27c4a]">{item.label}</p>
|
||||
<p className="mt-3 max-w-[18rem] text-sm leading-6 text-[#f4efe4]/72">{item.value}</p>
|
||||
</div>
|
||||
))}
|
||||
frontend engineer / web experience / creative code
|
||||
</motion.p>
|
||||
<motion.h1
|
||||
variants={reveal}
|
||||
className="font-display text-7xl font-semibold leading-none tracking-normal text-white sm:text-8xl lg:text-[10rem]"
|
||||
>
|
||||
fly
|
||||
</motion.h1>
|
||||
<motion.p variants={reveal} className="mt-7 max-w-2xl text-xl leading-9 text-white/72">
|
||||
我是 fly，前端开发工程师。专注现代 Web 界面、工程化体验和 AI Agent 方向的探索。
|
||||
</motion.p>
|
||||
<motion.div variants={container} className="mt-9 flex flex-col gap-3 sm:flex-row">
|
||||
<motion.a
|
||||
variants={scaleReveal}
|
||||
href="#articles"
|
||||
className="group inline-flex h-12 items-center justify-center gap-2 rounded-full bg-gradient-to-r from-cyan-300 via-blue-400 to-fuchsia-400 px-6 text-sm font-black text-[#05050b] shadow-xl shadow-cyan-500/25 outline-none transition hover:scale-[1.02] focus-visible:ring-2 focus-visible:ring-cyan-200"
|
||||
>
|
||||
进入内容矩阵
|
||||
<ArrowUpRight className="h-4 w-4 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
|
||||
</motion.a>
|
||||
<motion.a
|
||||
variants={scaleReveal}
|
||||
href="http://124.221.147.173:3000/fly/fly-personal-site"
|
||||
className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-white/14 bg-white/[0.04] px-6 text-sm font-semibold text-white shadow-xl shadow-fuchsia-500/10 outline-none backdrop-blur transition hover:border-fuchsia-300/70 hover:bg-fuchsia-300/10 focus-visible:ring-2 focus-visible:ring-fuchsia-300"
|
||||
>
|
||||
<GitBranch className="h-4 w-4" />
|
||||
Gitea 仓库
|
||||
</motion.a>
|
||||
<motion.a
|
||||
variants={scaleReveal}
|
||||
href="mailto:3505891631@qq.com"
|
||||
className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-cyan-300/24 bg-cyan-300/[0.08] px-6 text-sm font-semibold text-cyan-100 shadow-xl shadow-cyan-500/10 outline-none backdrop-blur transition hover:border-cyan-200/80 hover:bg-cyan-300/14 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
3505891631@qq.com
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.aside
|
||||
id="signal"
|
||||
initial={{ opacity: 0, y: reduceMotion ? 0 : 28, rotate: reduceMotion ? 0 : 1.5 }}
|
||||
animate={{ opacity: 1, y: 0, rotate: 0 }}
|
||||
transition={{ duration: reduceMotion ? 0 : 0.7, ease: "easeOut" }}
|
||||
className="relative mx-auto w-full max-w-[520px] lg:ml-auto"
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
variants={container}
|
||||
className="grid gap-4"
|
||||
>
|
||||
<div className="absolute -inset-4 rounded-[2rem] border border-[#f4efe4]/10 bg-[#f4efe4]/6" />
|
||||
<div className="relative overflow-hidden rounded-[1.5rem] border border-[#f4efe4]/16 bg-[#f4efe4]/8 p-3 shadow-2xl shadow-black/40">
|
||||
<Image
|
||||
src="/fly-signal.png"
|
||||
alt="Abstract fly personal field notes artwork"
|
||||
width={1200}
|
||||
height={1400}
|
||||
priority
|
||||
className="aspect-[6/7] w-full rounded-[1rem] object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-[#101411]/12 bg-[#f8f4ea]/88 p-4 text-[#101411] shadow-xl shadow-black/20 backdrop-blur">
|
||||
<p className="text-xs font-semibold uppercase text-[#6e6a5e]">signal</p>
|
||||
<p className="mt-2 text-sm leading-6">
|
||||
A new home for notes, projects, experiments, and the quiet parts of making things.
|
||||
</p>
|
||||
</div>
|
||||
</motion.aside>
|
||||
</div>
|
||||
</section>
|
||||
{portals.map((portal, index) => {
|
||||
const Icon = portal.icon;
|
||||
|
||||
<section id="work" className="bg-[#f4efe4] px-5 py-20 text-[#101411] sm:px-8 lg:px-12">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="grid gap-8 border-t border-[#101411]/16 pt-8 lg:grid-cols-[0.72fr_1.28fr]">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-[#a24325]">What this site becomes</p>
|
||||
<h2 className="mt-5 max-w-md font-display text-5xl font-semibold leading-tight sm:text-6xl">
|
||||
一个更像 fly 的个人主页。
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{chapters.map((chapter) => (
|
||||
<a
|
||||
key={chapter.title}
|
||||
href={chapter.href}
|
||||
className="group flex min-h-72 flex-col justify-between rounded-[1.25rem] border border-[#101411]/14 bg-white/55 p-5 outline-none transition hover:-translate-y-1 hover:border-[#101411]/35 hover:bg-white focus-visible:ring-2 focus-visible:ring-[#101411]"
|
||||
return (
|
||||
<motion.a
|
||||
key={portal.title}
|
||||
href={portal.href}
|
||||
variants={scaleReveal}
|
||||
className="group relative overflow-hidden rounded-[1.5rem] border border-white/12 bg-white/[0.055] p-5 shadow-2xl shadow-black/40 outline-none backdrop-blur-2xl transition hover:-translate-y-1 hover:border-white/28 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-[#a24325]">{chapter.eyebrow}</p>
|
||||
<h3 className="mt-8 text-2xl font-semibold">{chapter.title}</h3>
|
||||
<p className="mt-5 text-sm leading-7 text-[#4d493f]">{chapter.body}</p>
|
||||
<div className={`absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r ${portal.gradient} opacity-20 blur-3xl transition group-hover:opacity-40`} />
|
||||
<div className="relative flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<p className="font-mono text-xs uppercase text-white/48">0{index + 1} / {portal.eyebrow}</p>
|
||||
<h2 className="mt-5 text-3xl font-black text-white sm:text-4xl">{portal.title}</h2>
|
||||
<p className="mt-3 max-w-md text-sm leading-7 text-white/62">{portal.description}</p>
|
||||
</div>
|
||||
<span className={`inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${portal.gradient} text-[#05050b] shadow-lg shadow-cyan-500/20`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</span>
|
||||
</div>
|
||||
<span className="mt-8 inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#101411]/18 text-lg transition group-hover:bg-[#d3ff30]">
|
||||
/
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.a>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="notes" className="bg-[#101411] px-5 py-20 text-[#f4efe4] sm:px-8 lg:px-12">
|
||||
<div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1fr_1fr] lg:items-end">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-[#d3ff30]">Stack and rhythm</p>
|
||||
<h2 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-6xl">
|
||||
写代码，也整理判断。
|
||||
</h2>
|
||||
<p className="mt-6 max-w-xl text-base leading-8 text-[#d8d0bf]">
|
||||
首页先完成品牌感和结构感。后续可以接入 MDX 博客、项目详情页、关于页和部署流程，把旧 VitePress 的内容慢慢迁过来。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{stack.map((item) => (
|
||||
<span
|
||||
key={item}
|
||||
className="rounded-full border border-[#f4efe4]/16 bg-[#f4efe4]/8 px-4 py-3 text-sm text-[#f4efe4]/78"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
<motion.section
|
||||
id="articles"
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={{ once: true, amount: 0.18 }}
|
||||
variants={container}
|
||||
className="relative px-5 py-24 sm:px-8 lg:px-10"
|
||||
>
|
||||
<motion.div variants={reveal} className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-300/70 to-transparent" />
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
||||
<motion.div variants={container}>
|
||||
<motion.p variants={reveal} className="font-mono text-xs uppercase text-cyan-200">
|
||||
technical archive
|
||||
</motion.p>
|
||||
<motion.h2 variants={reveal} className="mt-4 font-display text-5xl font-semibold sm:text-7xl">
|
||||
技术文章
|
||||
</motion.h2>
|
||||
</motion.div>
|
||||
<motion.p variants={reveal} className="max-w-xl text-base leading-8 text-white/58">
|
||||
以「前端」为主线，同时延展到后端基础和 AI Agent。这里展示我的技术内容入口、实践路径和能力边界。
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<motion.div variants={container} className="grid gap-4 lg:grid-cols-3">
|
||||
{noteModules.map((module) => {
|
||||
const Icon = module.icon;
|
||||
|
||||
return (
|
||||
<motion.div key={module.name} variants={scaleReveal}>
|
||||
<Link
|
||||
href={module.href}
|
||||
className="group flex min-h-80 rounded-[1.75rem] border border-white/10 bg-gradient-to-b from-white/[0.08] to-white/[0.025] p-6 shadow-2xl shadow-black/30 outline-none backdrop-blur-xl transition hover:-translate-y-1 hover:border-cyan-300/45 hover:shadow-cyan-500/15 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<span className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-300/12 text-cyan-100 ring-1 ring-cyan-300/25">
|
||||
<Icon className="h-6 w-6" />
|
||||
</span>
|
||||
<h3 className="mt-8 text-4xl font-black">{module.name}</h3>
|
||||
<p className="mt-5 text-sm leading-7 text-white/58">{module.description}</p>
|
||||
</div>
|
||||
<span className="mt-10 inline-flex items-center gap-2 text-sm font-semibold text-cyan-100">
|
||||
打开模块
|
||||
<ArrowUpRight className="h-4 w-4 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
id="life"
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={{ once: true, amount: 0.18 }}
|
||||
variants={container}
|
||||
className="px-5 py-24 sm:px-8 lg:px-10"
|
||||
>
|
||||
<motion.div
|
||||
variants={scaleReveal}
|
||||
className="mx-auto overflow-hidden rounded-[2rem] border border-white/10 bg-[radial-gradient(circle_at_18%_12%,rgba(217,70,239,0.28),transparent_32%),radial-gradient(circle_at_78%_80%,rgba(34,211,238,0.24),transparent_30%),rgba(255,255,255,0.05)] p-6 shadow-2xl shadow-fuchsia-500/10 backdrop-blur-xl sm:p-10 lg:max-w-7xl"
|
||||
>
|
||||
<div className="grid gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-end">
|
||||
<motion.div variants={container}>
|
||||
<motion.p variants={reveal} className="font-mono text-xs uppercase text-lime-200">
|
||||
life channel
|
||||
</motion.p>
|
||||
<motion.h2 variants={reveal} className="mt-4 font-display text-5xl font-semibold sm:text-7xl">
|
||||
生活分享
|
||||
</motion.h2>
|
||||
<motion.p variants={reveal} className="mt-6 max-w-xl text-base leading-8 text-white/66">
|
||||
技术之外的日常切面。阅读、音乐、照片、旅行和一些阶段性的想法，让这个网站不只是一份技术档案。
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
<motion.div variants={container} className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{lifeTopics.map((topic) => (
|
||||
<motion.div key={topic} variants={scaleReveal}>
|
||||
<Link
|
||||
href="/life"
|
||||
className="block rounded-2xl border border-white/12 bg-black/20 px-5 py-5 text-sm font-bold text-white/82 shadow-lg shadow-black/10 outline-none transition hover:-translate-y-0.5 hover:border-cyan-200/55 hover:bg-cyan-300/[0.08] hover:text-cyan-50 hover:shadow-[0_0_28px_rgba(34,211,238,0.18)] focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
{topic}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
<motion.footer
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={{ once: true, amount: 0.4 }}
|
||||
variants={container}
|
||||
className="px-5 py-10 text-white/46 sm:px-8 lg:px-10"
|
||||
>
|
||||
<motion.div
|
||||
variants={reveal}
|
||||
className="mx-auto flex max-w-7xl flex-col justify-between gap-4 border-t border-white/10 pt-6 text-sm md:flex-row"
|
||||
>
|
||||
<p>© 2026 fly. Built with Next.js, Tailwind CSS and Motion.</p>
|
||||
<a
|
||||
href="http://124.221.147.173:3000/fly/fly-personal-site"
|
||||
className="inline-flex items-center gap-2 text-cyan-100 outline-none transition hover:text-fuchsia-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
Gitea repository
|
||||
<ArrowUpRight className="h-4 w-4" />
|
||||
</a>
|
||||
</motion.div>
|
||||
</motion.footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type PlaceholderPageProps = {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
items: readonly (
|
||||
| string
|
||||
| {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
)[];
|
||||
};
|
||||
|
||||
export function PlaceholderPage({
|
||||
eyebrow,
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
}: PlaceholderPageProps) {
|
||||
return (
|
||||
<main className="min-h-dvh bg-[#080807] px-5 py-6 text-[#f7f1e3] sm:px-8 lg:px-12">
|
||||
<div className="mx-auto flex min-h-[calc(100dvh-48px)] max-w-6xl flex-col">
|
||||
<header className="flex items-center justify-between border-b border-[#d6b56d]/20 pb-5">
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-full border border-[#d6b56d]/28 px-4 py-2 font-display text-xl outline-none transition hover:bg-[#d6b56d] hover:text-[#080807] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
|
||||
>
|
||||
fly
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-[#d6b56d] outline-none transition hover:text-[#f7f1e3] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
|
||||
>
|
||||
返回首页
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="grid flex-1 gap-10 py-16 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
|
||||
<div>
|
||||
<p className="font-mono text-xs uppercase text-[#d6b56d]">{eyebrow}</p>
|
||||
<h1 className="mt-5 font-display text-5xl font-medium leading-tight sm:text-7xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-7 max-w-2xl text-lg leading-9 text-[#b9ad91]">{description}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{items.map((item, index) => {
|
||||
const label = typeof item === "string" ? item : item.label;
|
||||
const content = (
|
||||
<div
|
||||
key={label}
|
||||
className="rounded-[1rem] border border-[#d6b56d]/16 bg-[#f7f1e3]/[0.035] p-5 transition hover:border-cyan-300/45 hover:bg-cyan-300/[0.06]"
|
||||
>
|
||||
<p className="font-mono text-xs text-[#d6b56d]">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</p>
|
||||
<p className="mt-3 text-base text-[#f7f1e3]">{label}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (typeof item === "string") {
|
||||
return content;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={label}
|
||||
href={item.href}
|
||||
className="block outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
type TechDocArticleProps = {
|
||||
contentHtml: string;
|
||||
};
|
||||
|
||||
export function TechDocArticle({ contentHtml }: TechDocArticleProps) {
|
||||
const articleRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const article = articleRef.current;
|
||||
if (!article) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeouts: ReturnType<typeof setTimeout>[] = [];
|
||||
const buttons: HTMLButtonElement[] = [];
|
||||
const copyText = async (text: string) => {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.setAttribute("readonly", "");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.opacity = "0";
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand("copy");
|
||||
textarea.remove();
|
||||
};
|
||||
|
||||
article.querySelectorAll("pre").forEach((pre) => {
|
||||
const code = pre.querySelector("code");
|
||||
pre.setAttribute("data-language", code?.getAttribute("lang")?.toUpperCase() || "CODE");
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className = "tech-doc-code-copy";
|
||||
button.textContent = "复制";
|
||||
|
||||
button.addEventListener("click", async () => {
|
||||
const text = code?.textContent?.trimEnd();
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await copyText(text);
|
||||
button.textContent = "已复制";
|
||||
button.dataset.copied = "true";
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
button.textContent = "复制";
|
||||
delete button.dataset.copied;
|
||||
}, 1400);
|
||||
timeouts.push(timeout);
|
||||
} catch {
|
||||
button.textContent = "复制失败";
|
||||
}
|
||||
});
|
||||
|
||||
pre.appendChild(button);
|
||||
buttons.push(button);
|
||||
});
|
||||
|
||||
return () => {
|
||||
timeouts.forEach(clearTimeout);
|
||||
buttons.forEach((button) => button.remove());
|
||||
};
|
||||
}, [contentHtml]);
|
||||
|
||||
return (
|
||||
<article
|
||||
ref={articleRef}
|
||||
className="tech-doc-content min-w-0 max-w-full rounded-[1.75rem] border border-white/10 bg-[#090915]/95 p-5 shadow-2xl shadow-cyan-500/10 sm:p-8 lg:p-10"
|
||||
dangerouslySetInnerHTML={{ __html: contentHtml }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, ExternalLink } from "lucide-react";
|
||||
import { BackToTopButton } from "@/components/back-to-top-button";
|
||||
import { TechDocArticle } from "@/components/tech-doc-article";
|
||||
import { TechDocToc } from "@/components/tech-doc-toc";
|
||||
|
||||
type KnowledgePoint = {
|
||||
title: string;
|
||||
note?: string;
|
||||
children?: readonly string[];
|
||||
};
|
||||
|
||||
type TechDocPageProps = {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
points?: readonly KnowledgePoint[];
|
||||
contentHtml?: string;
|
||||
toc?: readonly {
|
||||
title: string;
|
||||
href: string;
|
||||
}[];
|
||||
source?: {
|
||||
label: string;
|
||||
href?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function TechDocPage({
|
||||
eyebrow,
|
||||
title,
|
||||
description,
|
||||
points = [],
|
||||
contentHtml,
|
||||
toc = [],
|
||||
source,
|
||||
}: TechDocPageProps) {
|
||||
return (
|
||||
<main className="relative min-h-dvh overflow-x-clip bg-[#05050b] px-5 py-6 text-white sm:px-8 lg:px-10">
|
||||
<div className="neon-aurora" />
|
||||
<div className="cyber-grid" />
|
||||
<div className="scanline" />
|
||||
|
||||
<div className="relative z-10 mx-auto w-full max-w-[96rem]">
|
||||
<header className="flex items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10 backdrop-blur-2xl">
|
||||
<Link
|
||||
href="/notes/frontend"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 text-sm font-semibold text-white/80 outline-none transition hover:border-cyan-300/70 hover:text-cyan-100 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
前端笔记
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-full bg-white px-4 py-2 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
|
||||
>
|
||||
fly
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-10 py-14 lg:grid-cols-[20rem_minmax(0,64rem)] lg:justify-center lg:py-20">
|
||||
<aside className="min-w-0 lg:w-80">
|
||||
<p className="font-mono text-xs uppercase text-cyan-200">{eyebrow}</p>
|
||||
<h1 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-7xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-6 max-w-xl text-base leading-8 text-white/62">{description}</p>
|
||||
{source ? (
|
||||
source.href ? (
|
||||
<a
|
||||
href={source.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="mt-8 inline-flex h-11 items-center gap-2 rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100 outline-none transition hover:border-fuchsia-200/80 hover:bg-fuchsia-300/14 focus-visible:ring-2 focus-visible:ring-fuchsia-300"
|
||||
>
|
||||
{source.label}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="mt-8 inline-flex h-11 items-center rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100">
|
||||
{source.label}
|
||||
</span>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{toc.length ? <TechDocToc toc={toc} /> : null}
|
||||
</aside>
|
||||
|
||||
{contentHtml ? (
|
||||
<TechDocArticle contentHtml={contentHtml} />
|
||||
) : (
|
||||
<div className="min-w-0 space-y-4">
|
||||
{points.map((point, index) => (
|
||||
<article
|
||||
key={point.title}
|
||||
className="rounded-[1.5rem] border border-white/10 bg-white/[0.045] p-5 shadow-xl shadow-black/20 backdrop-blur transition hover:border-cyan-300/40 hover:bg-cyan-300/[0.06] sm:p-6"
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
<span className="mt-1 font-mono text-sm text-cyan-200">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-xl font-black text-white sm:text-2xl">{point.title}</h2>
|
||||
{point.note ? (
|
||||
<p className="mt-3 text-sm leading-7 text-white/58">{point.note}</p>
|
||||
) : null}
|
||||
{point.children?.length ? (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{point.children.map((child) => (
|
||||
<span
|
||||
key={child}
|
||||
className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold text-white/70"
|
||||
>
|
||||
{child}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<BackToTopButton />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user