",
95 | " $0",
96 | "
",
97 | " nextjs-tailwind-blog
2 | 3 |4 | The most beautiful minimalist blog in modern built with Nextjs and tailwindcss. 5 |
6 | 7 |
8 | 
16 | 🧑💻👩💻👨💻 17 |
18 | 19 | ## 🚀 Features 20 | 21 | - 📝 MDX support 22 | - 🦾 TypeScript, of course 23 | - 🗂 File based routing 24 | - 🌍 I18n ready 25 | - ⚙️ Eslint + Prettier 26 | - 🌓 Dark mode support 27 | - 🧑💻 Continuous renovation 28 | 29 | ## 🦄 Tech Stack 30 | 31 | - [Next.js 13](https://nextjs.org/) - The React Framework. 32 | - [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom user interfaces. 33 | - [mdx-bundler](https://github.com/kentcdodds/mdx-bundler) - Compile and bundle your MDX files and their dependencies. FAST. 34 | - [React 18.x](https://reactjs.org/) - A JavaScript library for building user interfaces. 35 | - [react-use](https://streamich.github.io/react-use/) - Collection of essential React Hooks. 36 | - [giscus](https://giscus.app/zh-CN) - A comment system powered by GitHub Discussions 37 | - [SWR](https://swr.vercel.app/) - React Hooks for data fetching. 38 | 39 | ## 🪴 Project Activity 40 | 41 |  42 | 43 | ## 🧑💻 Contribution 44 | 45 | Thank you to all the people who already contributed to my project! 46 | 47 | ## ☀️ Thanks 48 | 49 | - [theodorusclarence.com](https://github.com/theodorusclarence/theodorusclarence.com) 50 | - [ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter) 51 | - [antfu.me](https://github.com/antfu/antfu.me) 52 | 53 | ## 📄 License 54 | 55 | [MIT License](https://github.com/Chocolate1999/nextjs-tailwind-blog/blob/main/LICENSE) © 2022-PRESENT [Chocolate](https://github.com/Chocolate1999) 56 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | // TODO Add Scope Enum Here 5 | // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']], 6 | 'type-enum': [ 7 | 2, 8 | 'always', 9 | [ 10 | 'feat', 11 | 'fix', 12 | 'docs', 13 | 'chore', 14 | 'style', 15 | 'refactor', 16 | 'ci', 17 | 'test', 18 | 'perf', 19 | 'revert', 20 | 'vercel', 21 | ], 22 | ], 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-var-requires 2 | const nextJest = require('next/jest'); 3 | 4 | const createJestConfig = nextJest({ 5 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment 6 | dir: './', 7 | }); 8 | 9 | // Add any custom config to be passed to Jest 10 | const customJestConfig = { 11 | // Add more setup options before each test is run 12 | setupFilesAfterEnv: ['
26 |
27 |
98 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/TechIcons.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 | import { IoLogoVercel } from 'react-icons/io5';
4 | import {
5 | SiFirebase,
6 | SiGit,
7 | SiGoogleanalytics,
8 | SiJavascript,
9 | SiMarkdown,
10 | SiMongodb,
11 | SiNextdotjs,
12 | SiNodedotjs,
13 | SiNotion,
14 | SiPrettier,
15 | SiReact,
16 | SiRedux,
17 | SiSass,
18 | SiSwift,
19 | SiTailwindcss,
20 | SiTypescript,
21 | } from 'react-icons/si';
22 |
23 | import Tooltip from '@/components/Tooltip';
24 |
25 | export type TechListType = keyof typeof techList;
26 |
27 | export type TechIconsProps = {
28 | techs: Array
28 |
38 |
39 |
40 |
51 |
57 |
58 | {options.map((opt) => (
59 |
62 | clsx(
63 | 'relative select-none py-2 pl-10 pr-4',
64 | active
65 | ? 'bg-primary-300/10 dark:bg-primary-300/25'
66 | : 'text-gray-700 dark:text-gray-300'
67 | )
68 | }
69 | value={opt}
70 | >
71 | {({ selected }) => (
72 | <>
73 |
79 | {opt.name}
80 |
81 | {selected ? (
82 |
87 |
88 |
89 | ) : null}
90 |
91 | )}
92 |
93 | ))}
94 |
95 |
96 |
97 | -
34 | {techs.map((tech) => {
35 | if (!techList[tech]) return;
36 |
37 | const current = techList[tech];
38 |
39 | return (
40 |
-
42 |
43 |
44 |
Sorry, not found :
; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/content/CustomCode.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 3 | import { HiCheckCircle, HiClipboard } from 'react-icons/hi'; 4 | 5 | export function Pre(props: React.ComponentPropsWithRef<'pre'>) { 6 | return ( 7 |
8 | {props.children}
9 |
15 |
16 | );
17 | }
18 |
19 | export default function CustomCode(props: React.ComponentPropsWithRef<'code'>) {
20 | const textRef = React.useRef
29 | {language ? (
30 |
31 | {props.children}
32 |
33 | ) : (
34 | {props.children}
35 | )}
36 |
37 | {language && (
38 |
39 |
40 | {language}
41 |
42 |
43 | )}
44 | {language && (
45 | {
48 | setIsCopied(true);
49 | setTimeout(() => setIsCopied(false), 1500);
50 | }}
51 | >
52 |
59 |
60 | )}
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/content/MDXComponents.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import LiteYouTubeEmbed from 'react-lite-youtube-embed';
3 |
4 | import Quiz from '@/components/content/blog/Quiz';
5 | import GithubCard from '@/components/content/card/GithubCard';
6 | import CustomCode, { Pre } from '@/components/content/CustomCode';
7 | import SplitImage, { Split } from '@/components/content/SplitImage';
8 | import TweetCard from '@/components/content/TweetCard';
9 | import CloudinaryImg from '@/components/images/CloudinaryImg';
10 | import MDXCustomLink from '@/components/links/MDXCustomLink';
11 | import TechIcons from '@/components/TechIcons';
12 |
13 | const MDXComponents = {
14 | a: MDXCustomLink,
15 | Image,
16 | pre: Pre,
17 | code: CustomCode,
18 | CloudinaryImg,
19 | LiteYouTubeEmbed,
20 | SplitImage,
21 | Split,
22 | TechIcons,
23 | TweetCard,
24 | GithubCard,
25 | Quiz,
26 | };
27 |
28 | export default MDXComponents;
29 |
--------------------------------------------------------------------------------
/src/components/content/ReloadDevtool.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import * as React from 'react';
3 | import { HiRefresh } from 'react-icons/hi';
4 |
5 | import ButtonLink from '@/components/links/ButtonLink';
6 |
7 | import { isProd } from '@/constants/env';
8 |
9 | export default function ReloadDevtool() {
10 | const router = useRouter();
11 |
12 | return !isProd ? (
13 | {children}
;
9 | }
10 |
11 | export function Split({ children }: { children: React.ReactNode }) {
12 | return {children}
;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/content/TableOfContents.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import TOCLink from '@/components/links/TOCLink';
4 |
5 | export type HeadingScrollSpy = Array<{
6 | id: string;
7 | level: number;
8 | text: string;
9 | }>;
10 |
11 | type TableOfContentsProps = {
12 | toc?: HeadingScrollSpy;
13 | activeSection: string | null;
14 | minLevel: number;
15 | };
16 |
17 | export default function TableOfContents({
18 | toc,
19 | activeSection,
20 | minLevel,
21 | }: TableOfContentsProps) {
22 | //#region //*=========== Scroll into view ===========
23 | const lastPosition = React.useRef
62 |
80 | );
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/content/Tag.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 |
4 | export default function Tag({
5 | children,
6 | className,
7 | ...rest
8 | }: React.ComponentPropsWithoutRef<'button'>) {
9 | return (
10 |
22 | );
23 | }
24 |
25 | export function SkipNavTag({
26 | children,
27 | ...rest
28 | }: React.ComponentPropsWithoutRef<'a'>) {
29 | return (
30 | <>
31 |
42 | Skip tag
43 |
44 | {children}
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/content/TweetCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 | import { Tweet, TweetProps } from 'react-twitter-widgets';
4 |
5 | type TweetCardProps = {
6 | className?: string;
7 | } & TweetProps;
8 |
9 | export default function TweetCard({ tweetId, className }: TweetCardProps) {
10 | return (
11 | /** Adding width 99% because iframe cuts border
12 | * @see https://stackoverflow.com/questions/20039576/show-right-border-on-inner-iframe-which-is-being-cut-off-on-100-width/20039683
13 | */
14 | 63 | Table of Contents 64 |
65 |
66 | {toc
67 | ? toc.map(({ id, level, text }) => (
68 |
79 |
15 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/content/blog/ArchiveCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { format } from 'date-fns';
3 | import { HiOutlineClock, HiOutlineEye } from 'react-icons/hi';
4 |
5 | import Accent from '@/components/Accent';
6 | import Tag from '@/components/content/Tag';
7 | import UnstyledLink from '@/components/links/UnstyledLink';
8 |
9 | import { BlogFrontmatter, InjectedMeta } from '@/types/frontmatters';
10 |
11 | type BlogCardProps = {
12 | post: BlogFrontmatter & InjectedMeta;
13 | checkTagged?: (tag: string) => boolean;
14 | } & React.ComponentPropsWithoutRef<'li'>;
15 |
16 | export default function ArchiveCard({
17 | post,
18 | className,
19 | checkTagged,
20 | onClick,
21 | }: BlogCardProps) {
22 | return (
23 |
39 | {/* blog_info */}
40 |
82 |
41 |
64 | {/* tags */}
65 | {post.title}
42 |43 | 44 | {format( 45 | new Date(post.publishedAt ?? post.lastUpdated), 46 | 'MMMM dd, yyyy' 47 | )} 48 | 49 |
50 |51 | {post.description} 52 |
53 |
54 |
63 |
55 |
58 |
59 |
62 |
71 | {post.tags.split(',').map((tag) => (
72 |
77 | {checkTagged?.(tag) ? {tag} : tag}
78 |
79 | ))}
80 |
81 |
41 |
68 |
57 | {post.tags.split(',').map((tag) => (
58 |
63 | {checkTagged?.(tag) ? {tag} : tag}
64 |
65 | ))}
66 |
67 |
69 |
92 | {post.title}
70 |
71 |
80 |
72 | {post.readingTime.text}
74 |
75 |
76 | {post?.views?.toLocaleString() ?? '–––'} views
78 |
79 | 81 | 82 | {format( 83 | new Date(post.lastUpdated ?? post.publishedAt), 84 | 'MMMM dd, yyyy' 85 | )} 86 | 87 |
88 |89 | {post.description} 90 |
91 |
18 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/content/blog/SubscribeCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 |
4 | import Accent from '@/components/Accent';
5 | import ButtonLink from '@/components/links/ButtonLink';
6 |
7 | type SubscribeCardProps = {
8 | className?: string;
9 | title?: string;
10 | description?: string;
11 | };
12 | export default function SubscribeCard({
13 | className,
14 | title,
15 | description,
16 | }: SubscribeCardProps) {
17 | return (
18 |
19 |
25 | {props.question}
20 | {props.description && ( 21 |{props.description}
22 | )} 23 | {/* */} 24 |
26 | {props.answers.map((answer, i) => {
27 | const answerIndex = i + 1;
28 |
29 | const optionStatus = answer.correct ? 'correct' : 'wrong';
30 | const selectedOption = selected;
31 |
32 | return (
33 |
58 | );
59 | })}
60 |
61 | {!selected ? (
62 | Go ahead and pick one!
63 | ) : ( 64 |65 | Explanation: 66 | {props.explanation} 67 |
68 | )} 69 |
75 | pop quiz!
76 |
77 |
19 |
20 |
22 |
27 | Subscribe Now
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/content/card/GithubCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 | import { BiGitRepoForked } from 'react-icons/bi';
4 | import { HiOutlineStar } from 'react-icons/hi';
5 | import { SiGithub } from 'react-icons/si';
6 | import useSWR from 'swr';
7 |
8 | import Accent from '@/components/Accent';
9 | import UnstyledLink from '@/components/links/UnstyledLink';
10 |
11 | interface GithubRepo {
12 | full_name: string;
13 | description: string;
14 | forks: number;
15 | stargazers_count: number;
16 | html_url: string;
17 | owner: {
18 | avatar_url: string;
19 | login: string;
20 | html_url: string;
21 | };
22 | }
23 |
24 | type GithubCardProps = {
25 | repo: string;
26 | } & React.ComponentPropsWithoutRef<'div'>;
27 |
28 | export default function GithubCard({ repo, className }: GithubCardProps) {
29 | const { data: repository, error } = useSWR
20 | {title ?? 'Join to the newsletter list'}
21 |
22 | 23 | {description ?? 24 | "Don't miss out 😉. Get an email whenever I post, no spam."} 25 |
26 |
35 |
47 |
67 |
68 | ) : (
69 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/content/collections/CollectionCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 |
4 | import UnstyledLink from '@/components/links/UnstyledLink';
5 | import TechIcons, { TechListType } from '@/components/TechIcons';
6 |
7 | import { CollectionsType } from '@/types/frontmatters';
8 |
9 | type CollectionCardProps = {
10 | collection: CollectionsType;
11 | } & React.ComponentPropsWithoutRef<'li'>;
12 |
13 | export default function CollectionCard({
14 | collection,
15 | className,
16 | }: CollectionCardProps) {
17 | return (
18 |
48 |
50 | {repository.full_name}
51 |
52 |
53 | 54 | {repository.description} 55 |
56 |
57 |
66 |
58 |
61 |
62 |
65 | -
19 | {collection.child.map((collectionItem) => (
20 |
-
32 |
36 | 50 |{collectionItem.title}
37 |38 | {collectionItem.description} 39 |
40 |41 |45 | 46 |} 43 | /> 44 | 47 | See On My Github → 48 |
49 |
51 | ))}
52 |
32 |
47 | {snippet.title}
33 | 34 |
35 | } />
41 |
42 |
43 |
36 | {snippet?.likes ?? '–––'} likes
38 |
39 | •
40 | 44 | {snippet.description} 45 |
46 |
33 | {banner ? (
34 |
64 |
53 | {tags.split(',').map((tag) => (
54 |
59 | {tag}
60 |
61 | ))}
62 |
63 |
65 | {avatar ? (
66 |
84 |
80 |
83 | {name}
81 |{desc}
82 |-
14 | {project.child.map((projectItem) => (
15 |
22 | {projectItem.icon}
23 |
24 |
25 |
32 | 26 | {projectItem.title} 27 |
28 |29 | {projectItem.description} 30 |
31 | setIsOpen(true) : undefined}
91 | >
92 |
104 |
114 | {isOpen && (
115 |
105 |
113 |
41 | {footerLinks.map(({ href, text, tooltip }) => (
42 |
43 | {
47 | trackEvent(`Footer Link: ${text}`, { type: 'link' });
48 | }}
49 | >
50 | {text}
51 |
52 |
53 | ))}
54 |
55 | );
56 | }
57 |
58 | function SocialLinks() {
59 | const [copyStatus, setCopyStatus] = React.useState<'idle' | 'copied'>('idle');
60 |
61 | const [copy] = useCopyToClipboard();
62 |
63 | return (
64 |
65 |
94 | {socials.map((social) => (
95 |
66 |
72 | {copyStatus === 'idle'
73 | ? 'Click the mail logo to copy'
74 | : 'Copied to clipboard 🥳'}
75 |
76 | ycychocolate@163.com
77 |
78 |
79 | }
80 | >
81 |
92 |
93 |
35 |
66 |
68 |
10 |
15 |
17 |
22 |
24 |
26 | );
27 | };
28 |
29 | export default Icon;
30 |
--------------------------------------------------------------------------------
/src/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import Footer from '@/components/layout/Footer';
4 | import Header from '@/components/layout/Header';
5 | import Plum from '@/components/layout/Plum';
6 |
7 | export default function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 | <>
10 |
12 |
17 |
13 | {children}
14 |
15 |
16 |
149 |
150 |
151 | );
152 | };
153 |
154 | export default Plum;
155 |
--------------------------------------------------------------------------------
/src/components/layout/Spotify.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import * as React from 'react';
3 | import { SiSpotify } from 'react-icons/si';
4 | import { Tooltip } from 'react-tippy';
5 | import useSWR from 'swr';
6 |
7 | import NextImage from '@/components/images/NextImage';
8 | import UnstyledLink, {
9 | UnstyledLinkProps,
10 | } from '@/components/links/UnstyledLink';
11 |
12 | import { SpotifyData } from '@/types/spotify';
13 |
14 | export default function Spotify({
15 | className,
16 | ...rest
17 | }: OmitCurrently playing on my Spotify
28 | 29 | } 30 | > 31 |
51 |
56 | {data.title}
52 |53 | {data.artist} 54 |
55 |
57 |
59 | -
48 |
- aaa 49 |
- bbb 50 |
- ccc 51 |
- ........
- ........
- ........
-
108 |
- 1 109 |
- 2 110 |
- 3 111 |
- 4 112 |
- 5 113 |
-
115 |
- 1 116 |
- 2 117 |
- 3 118 |
- 4 119 |
- 5 120 |
16 |
27 | Back to Home
28 |
29 |
30 | 21 | Page Not Found 22 |
23 |
33 |
53 | -
34 | {posts.length > 0 ? (
35 | posts.map((post, index) => (
36 |
37 | {!isSameYear(
38 | post.publishedAt,
39 | posts[index - 1]?.publishedAt
40 | ) && (
41 |
42 | {getYear(post.publishedAt)}
43 |
44 | )}
45 |
47 | ))
48 | ) : (
49 |
130 |
131 |
133 |
199 |
131 | Blog {!isEnglish && 'Chinese'}
132 |
133 | 134 | Thoughts, mental models, and tutorials about front-end 135 | development. 136 |
137 |
149 | Choose topic:
150 |
151 | {tags.map((tag) => (
152 | toggleTag(tag)}
155 | disabled={!filteredTags.includes(tag)}
156 | >
157 | {checkTagged(tag) ? {tag} : tag}
158 |
159 | ))}
160 |
161 |
162 |
166 |
175 |
181 | -
185 | {currentPosts.length > 0 ? (
186 | currentPosts.map((post) => (
187 |
20 |
21 |
23 |
31 |
33 |
34 |
21 | Guestbook
22 |
23 |
24 | Leave whatever you like to say—message, appreciation, suggestions.
25 | If you got some questions, you can leave them on the{' '}
26 |
25 |
36 |
62 |
26 |
35 | Links
27 |31 | Thoughts, mental models, and tutorials about front-end 32 | development. 33 |
34 |36 |
37 | 过去（大概 20-21 38 | 年）的时候，添加了许多友链，最近迁移到此站点。目前旧的 hexo 39 | 博客已不再使用，在做迁移的时候快速看了一下过去的友链，原来的一些伙伴们许多网站都打不开了，或者也很久没有更新了，因此迁移的时候没有添加各位了，如若您还留有我的友链，也欢迎来本页提交，我会重新添加进来。 40 |
41 |-
45 | {LINKS_ATOM.length > 0 ? (
46 | LINKS_ATOM.map((info: ILinkProps, index) => (
47 |
63 |
69 | 以下是我的博客信息，欢迎添加友链：
64 |博客名称：超逸の博客
65 |网站地址：https://yangchaoyi.vip/
66 |描述： 学如逆水行舟，不进则退
67 |头像：https://www.github.com/Chocolate1999.png
68 |
23 |
42 |
24 |
41 | Projects
25 |26 | Showcase of my projects on front-end development that I'm proud 27 | of. 28 |
29 | {PROJECTS_ATOM?.map((project, index) => ( 30 |
31 |
39 | ))}
40 | 35 | {project.category} 36 |
37 |
19 |
20 | Subscribe to
22 |
24 |
20 | Subscribe to yangchaoyi.vip
21 |
22 |
29 |
30 |
31 |
32 |