Skip to content

Commit a4efdf3

Browse files
985563349985563349
committed
optimize navigation
1 parent 3d82668 commit a4efdf3

File tree

8 files changed

+132
-102
lines changed

8 files changed

+132
-102
lines changed

‎app/(home)/components/latest-posts.tsx‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
1-
import Link from 'next/link';
2-
3-
import ArrowCard from '@/components/arrow-card';
4-
import client from '@/tina/__generated__/client';
5-
6-
const LatestPosts: React.FC = async () => {
7-
const { data } = await client.queries.postConnection({ last: 3, sort: 'date' });
8-
9-
return (
10-
<section className="space-y-6">
11-
<div className="flex justify-between items-center">
12-
<h3 className="font-semibold text-black dark:text-white">最近的文章</h3>
13-
<Link href="/posts" className="link">
14-
查看所有文章
15-
</Link>
16-
</div>
17-
18-
<ul className="flex flex-col gap-4">
19-
{data.postConnection.edges?.map((post) => (
20-
<li key={post?.node?.id}>
21-
<Link href={`/posts/${post?.node?._sys.breadcrumbs.join('/')}`}>
22-
<ArrowCard title={post?.node?.title} />
23-
</Link>
24-
</li>
25-
))}
26-
</ul>
27-
</section>
28-
);
29-
};
30-
31-
export default LatestPosts;
1+
import Link from 'next/link';
2+
3+
import ArrowCard from '@/components/arrow-card';
4+
import NavLink from '@/components/nav-link';
5+
import client from '@/tina/__generated__/client';
6+
7+
const LatestPosts: React.FC = async () => {
8+
const { data } = await client.queries.postConnection({ last: 3, sort: 'date' });
9+
10+
return (
11+
<section className="space-y-6">
12+
<div className="flex justify-between items-center">
13+
<h3 className="font-semibold text-black dark:text-white">最近的文章</h3>
14+
<NavLink href="/posts">查看所有文章</NavLink>
15+
</div>
16+
17+
<ul className="flex flex-col gap-4">
18+
{data.postConnection.edges?.map((post) => (
19+
<li key={post?.node?.id}>
20+
<Link href={`/posts/${post?.node?._sys.breadcrumbs.join('/')}`}>
21+
<ArrowCard title={post?.node?.title} />
22+
</Link>
23+
</li>
24+
))}
25+
</ul>
26+
</section>
27+
);
28+
};
29+
30+
export default LatestPosts;

‎app/(home)/components/summary.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
import { TinaMarkdown } from 'tinacms/dist/rich-text';
2-
3-
import client from '@/tina/__generated__/client';
4-
5-
const Summary: React.FC = async () => {
6-
const { data } = await client.queries.page({ relativePath: 'home.mdx' });
7-
8-
return (
9-
<section>
10-
<h3 className="font-semibold text-black dark:text-white">{data.page.title}</h3>
11-
12-
<article className="space-y-4">
13-
<TinaMarkdown
14-
content={data.page.body}
15-
components={{
16-
p: (props) => <p {...props} />,
17-
bold: (props) => <b className="font-black" {...props} />,
18-
}}
19-
/>
20-
</article>
21-
</section>
22-
);
23-
};
24-
25-
export default Summary;
1+
import { TinaMarkdown } from 'tinacms/dist/rich-text';
2+
3+
import client from '@/tina/__generated__/client';
4+
5+
const Summary: React.FC = async () => {
6+
const { data } = await client.queries.page({ relativePath: 'home.mdx' });
7+
8+
return (
9+
<section>
10+
<h3 className="font-semibold text-black dark:text-white">{data.page.title}</h3>
11+
12+
<article className="space-y-4">
13+
<TinaMarkdown
14+
content={data.page.body}
15+
components={{
16+
p: (props) => <p {...props} />,
17+
}}
18+
/>
19+
</article>
20+
</section>
21+
);
22+
};
23+
24+
export default Summary;

‎app/globals.css‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
article {
6-
@apply max-w-full prose dark:prose-invert prose-img:mx-auto prose-img:my-auto;
7-
@apply prose-headings:font-semibold prose-p:font-serif;
8-
@apply prose-headings:text-black prose-headings:dark:text-white;
9-
}
10-
11-
.link {
12-
@apply text-gray-500 hover:text-gray-950 dark:text-gray-400 dark:hover:text-gray-100 transition-colors;
13-
}
14-
15-
@layer utilities {
16-
article a {
17-
@apply font-sans text-current underline underline-offset-2;
18-
@apply decoration-black/15 dark:decoration-white/30;
19-
@apply transition-colors duration-300 ease-in-out;
20-
}
21-
22-
article a:hover {
23-
@apply text-black dark:text-white;
24-
@apply decoration-black/25 dark:decoration-white/50;
25-
}
26-
}
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
article {
6+
@apply max-w-full prose dark:prose-invert prose-img:mx-auto prose-img:my-auto;
7+
@apply prose-headings:font-semibold prose-p:font-serif;
8+
@apply prose-headings:text-black prose-headings:dark:text-white;
9+
}
10+
11+
@layer utilities {
12+
article a {
13+
@apply font-sans text-current underline underline-offset-2;
14+
@apply decoration-black/15 dark:decoration-white/30;
15+
@apply transition-colors duration-300 ease-in-out;
16+
}
17+
18+
article a:hover {
19+
@apply text-black dark:text-white;
20+
@apply decoration-black/25 dark:decoration-white/50;
21+
}
22+
}

‎app/not-found.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import NavLink from '@/components/nav-link';
2+
3+
export default function NotFound() {
4+
return (
5+
<div className="mx-auto max-w-screen-md px-5">
6+
<p className="mb-4">找不到此页面。</p>
7+
<NavLink href="/">返回首页</NavLink>
8+
</div>
9+
);
10+
}

‎components/header.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1+
'use client';
2+
3+
import { usePathname } from 'next/navigation';
14
import Link from 'next/link';
5+
import { FaGithub } from 'react-icons/fa';
26

7+
import NavLink from '@/components/nav-link';
38
import ThemeToggle from '@/components/theme-toggle';
49

510
const Header: React.FC = () => {
11+
const pathname = usePathname();
12+
613
return (
714
<header className="py-5">
815
<div className="mx-auto max-w-screen-md px-5">
@@ -13,12 +20,8 @@ const Header: React.FC = () => {
1320

1421
<div className="flex items-center gap-4">
1522
<nav className="space-x-4">
16-
<Link href="/posts" className="link">
17-
文章
18-
</Link>
19-
<Link href="/about" className="link">
20-
关于我
21-
</Link>
23+
<NavLink href="/posts" active={/^\/posts(?:\/.*)?$/.test(pathname)}>文章</NavLink>
24+
<NavLink href="/about" active={/^\/about(?:\/.*)?$/.test(pathname)}>关于我</NavLink>
2225
</nav>
2326

2427
<ThemeToggle />

‎components/nav-link.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Link from 'next/link';
2+
3+
import { cn } from '@/lib/utils';
4+
5+
export interface NavLinkProps {
6+
href: string;
7+
active?: boolean;
8+
children?: React.ReactNode;
9+
}
10+
11+
const NavLink: React.FC<NavLinkProps> = ({ href, children, active }) => {
12+
return (
13+
<Link
14+
href={href}
15+
className={cn(
16+
'text-gray-500 hover:text-gray-950 dark:text-gray-400 dark:hover:text-gray-100 transition-colors',
17+
active && 'text-gray-950 dark:text-gray-100'
18+
)}
19+
>
20+
{children}
21+
</Link>
22+
);
23+
};
24+
25+
export default NavLink;

‎content/pages/home.mdx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
---
2-
title: "嗨，我是 Jee \U0001F44B\U0001F3FB"
3-
---
4-
5-
这里是我的数字花园，一个记录思考与成长的个人空间。
6-
7-
在这里，我将分享技术见解、开发心得和学习笔记。你可以找到关于前端开发、React 生态、性能优化等技术主题的深度文章。但这里不仅仅是一个技术博客。
8-
9-
我也会记录一些对生活的思考、读书笔记和有趣的发现。这些内容可能不够系统，像是散落在花园里的种子，但它们都是思考和成长的见证。
10-
11-
**更新频率**
12-
13-
我会尽可能保持每周至少一篇文章的更新节奏。文章可能是一个技术探索，一次实验总结，或是一些零散的思考。
1+
---
2+
title: "嗨，我是 Jee \U0001F44B\U0001F3FB"
3+
---
4+
5+
这里是我的数字花园，一个记录思考与成长的个人空间。
6+
7+
在这里，我将分享技术见解、开发心得和学习笔记。你可以找到关于前端开发、React 生态、性能优化等技术主题的深度文章。
8+
9+
但这里不仅仅是一个技术博客，我也会记录一些对生活的思考、读书笔记和有趣的发现。这些内容可能不够系统，像是散落在花园里的种子，但它们都是思考和成长的见证。
10+
11+
我会尽可能保持每周至少一篇文章的更新节奏。文章可能是一个技术探索，一次实验总结，或是一些零散的思考。

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"license": "MIT",
66
"scripts": {
7-
"dev": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \"next dev --turbo\"",
7+
"dev": "tinacms dev -c \"next dev --turbo\"",
88
"build": "tinacms build && next build",
99
"start": "tinacms build && next start",
1010
"lint": "next lint"

0 commit comments

Comments
 (0)