Refactor some code to make it looks cleaner

This commit is contained in:
PrinOrange
2023-12-29 19:55:54 +08:00
parent 643d528816
commit aa94563763
22 changed files with 87 additions and 106 deletions

View File

@@ -3,8 +3,7 @@ name: Bug report
about: Create a report to help us improve
title: "[BUG] "
labels: bug
assignees: ''
assignees: ""
---
**Describe the bug**

View File

@@ -2,9 +2,8 @@
name: Feature request
about: Suggest an idea for this project
title: "[Feature Request]"
labels: ''
assignees: ''
labels: ""
assignees: ""
---
**Is your feature request related to a problem? Please describe.**

View File

@@ -3,8 +3,7 @@ name: Question And Answer
about: Ask questions that are unclear or unclear about this project.
title: "[Q & A]"
labels: question
assignees: ''
assignees: ""
---
Describe your problems here.

View File

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities

View File

@@ -11,26 +11,26 @@ export const ShareButtons = (props: {
title: string;
quote?: string | null;
}) => {
const url = `https://${Config.SiteDomain}/blog/${props.postId}`;
const postURL = `https://${Config.SiteDomain}/blog/${props.postId}`;
const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
Config.Nickname
}'s Blog ${url}`;
}'s Blog ${postURL}`;
const { toast } = useToast();
return (
<div className="my-3 flex space-x-4 text-2xl">
{props.allowShare != false ? (
<>
<div className="my-auto text-sm font-bold">{"SHARE :"}</div>
<FacebookShareButton className="mx-2" url={url} quote={props.quote ?? props.title}>
<FacebookShareButton className="mx-2" url={postURL} quote={props.quote ?? props.title}>
<FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
</FacebookShareButton>
<TwitterShareButton className="mx-2" url={url} title={props.title}>
<TwitterShareButton className="mx-2" url={postURL} title={props.title}>
<FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
</TwitterShareButton>
<LinkedinShareButton className="mx-2" url={url} title={props.title}>
<LinkedinShareButton className="mx-2" url={postURL} title={props.title}>
<FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
</LinkedinShareButton>
<RedditShareButton className="mx-2" url={url} title={props.title}>
<RedditShareButton className="mx-2" url={postURL} title={props.title}>
<FaReddit title="Share to Reddit" className="hover:text-orange-500" />
</RedditShareButton>
<CopyToClipboard

View File

@@ -3,7 +3,7 @@ import Link from "next/link";
export const TOC = (props: { data: TTOCItem[] }) => {
return (
<div className="sticky top-[5em] m-5 p-2 rounded-md border-2">
<div className="sticky top-[5em] mx-5 p-2 rounded-md border-2">
<div className="p-2 text-center font-bold">{"TABLE OF CONTENTS"}</div>
<hr />
<ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">

View File

@@ -1,5 +1,5 @@
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { RSSFeedLink } from "@/consts/consts";
import { CopyrightAnnouncement, RSSFeedURL } from "@/consts/consts";
import { Config } from "@/data/config";
import Link from "next/link";
import { useState } from "react";
@@ -37,9 +37,7 @@ export const Footer = () => {
</DialogTrigger>
)}
</div>
<div className="mx-auto px-3 text-center font-bold">{`COPYRIGHT © ${
Config.YearStart
}-${new Date().getFullYear()} ${Config.AuthorName} ALL RIGHTS RESERVED`}</div>
<div className="mx-auto px-3 text-center font-bold">{CopyrightAnnouncement}</div>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex">
@@ -57,12 +55,12 @@ export const Footer = () => {
</div>
<Separator />
<div className="w-full flex my-3">
<Input defaultValue={RSSFeedLink} readOnly />
<Input defaultValue={RSSFeedURL} readOnly />
<CopyToClipboard
onCopy={() => {
setIsCopied(true);
}}
text={RSSFeedLink}
text={RSSFeedURL}
>
<Button
type="submit"

View File

@@ -37,7 +37,7 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<nav className="responsive-width sticky top-0 z-50 flex justify-between bg-inherit py-3 backdrop-blur">
<nav className="responsive-width sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<Link href="/" className="cursor-pointer">
<h1
className={`${fontFzxbs.className} my-auto border-b-4 border-b-black text-2xl font-bold dark:border-b-white`}
@@ -50,7 +50,7 @@ export const NavBar = () => {
<Link
href={menuItem.href}
key={nanoid()}
className="nav-link mx-2 my-auto px-2"
className="border-b-sky-600 font-bold hover:text-sky-600 dark:hover:border-b-sky-500 dark:hover:text-sky-500 mx-2 my-auto px-2"
onClick={() => setIsSideNavOpen(false)}
>
{menuItem.title}

View File

@@ -3,6 +3,7 @@ import { fontSypxzs } from "@/styles/font";
import { TPostListItem } from "@/types/post-list";
import { nanoid } from "nanoid";
import Link from "next/link";
import { TagBadge } from "./TagBadge";
export const PostList = (props: { data: TPostListItem[] }) => {
return (
@@ -31,9 +32,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
{postListItem.frontMatter.tags && (
<div className="my-2 flex justify-center">
{postListItem.frontMatter.tags.map((tagName) => (
<Link href={`/tags/${tagName}`} className="tag-link mx-1 text-sm" key={`tags-${nanoid()}`}>
{tagName}
</Link>
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
))}
</div>
)}

View File

@@ -1,4 +1,4 @@
import { RSSFeedLink } from "@/consts/consts";
import { RSSFeedURL, WebsiteURL } from "@/consts/consts";
import { Config } from "@/data/config";
import { NextSeo } from "next-seo";
@@ -6,13 +6,13 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
return (
<>
<title>{props.title}</title>
<link rel="alternate" type="application/rss+xml" href={RSSFeedLink} />
<link rel="alternate" type="application/rss+xml" href={RSSFeedURL} />
<NextSeo
title={props.title}
description={props.description ?? undefined}
description={props.description ?? Config.Sentence}
openGraph={{
title: props.title,
description: props.description ?? undefined,
description: props.description ?? Config.Sentence,
images: props.coverURL
? [
{
@@ -22,11 +22,18 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
alt: props.title,
},
]
: [],
: [
{
url: Config.PageCovers.websiteCoverURL,
width: 850,
height: 650,
alt: props.title,
},
],
}}
twitter={{
handle: `@${Config.SocialLinks.twitter}`,
site: Config.SiteDomain,
site: WebsiteURL,
cardType: "summary_large_image",
}}
/>

View File

@@ -36,11 +36,9 @@ export const SocialIcons = () => {
<FiGithub className="hover:text-gray-500" />
</Link>
)}
{Config.SocialLinks.email && (
<Link target="_blank" href={`mailto:${Config.SocialLinks.email}`} title="EMail Address">
<FiMail className="hover:text-gray-500" />
</Link>
)}
</div>
);
};

View File

@@ -0,0 +1,11 @@
import Link from "next/link";
export const TagBadge = (props: { name: string; size: "sm" | "md"; count?: number }) => {
return (
<Link href={`/tags/${props.name}`} className={`mx-1 my-auto ${props.size === "sm" ? "text-sm" : "text-base"}`}>
<div className="border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white dark:text-white dark:hover:border-gray-200">
{`${props.name}${props.count ? ` (${props.count})` : ""}`}
</div>
</Link>
);
};

View File

@@ -6,4 +6,9 @@ export const LatestPostCountInHomePage = 5;
export const PostCountPerPagination = 5;
export const PostsRootDirectory = path.join(process.cwd(), "./data/posts");
export const RSSFeedLink = `https://${Config.SiteDomain}/rss.xml`;
export const RSSFeedURL = `https://${Config.SiteDomain}/rss.xml`;
export const WebsiteURL = `https://${Config.SiteDomain}/`;
export const CopyrightAnnouncement = `COPYRIGHT © ${Config.YearStart}-${new Date().getFullYear()} ${
Config.AuthorName
} ALL RIGHTS RESERVED`;

View File

@@ -1,4 +1,4 @@
import { LatestPostCountInHomePage } from "@/consts/consts";
import { CopyrightAnnouncement, LatestPostCountInHomePage, WebsiteURL } from "@/consts/consts";
import { Config } from "@/data/config";
import { Feed } from "feed";
import fs from "fs";
@@ -15,6 +15,8 @@ import remarkMath from "remark-math";
import remarkPrism from "remark-prism";
import { getPostFileContent, sortedPosts } from "./post-process";
const NoticeForRSSReaders = `\n---\n**NOTE:** Different RSS reader may have deficient even no support for svg formulations rendering. If it happens, please read the origin page to have better experience.`;
/**
* Generate the RSS Feed File in `./public` so it could be visited by https://domain/rss.xml
*/
@@ -23,23 +25,21 @@ export const generateRSSFeed = async () => {
title: Config.SiteTitle,
description: Config.Sentence,
id: Config.SiteDomain,
link: `https://${Config.SiteDomain}/`,
link: WebsiteURL,
image: Config.PageCovers.websiteCoverURL,
favicon: `https://${Config.SiteDomain}/favcion.ico`,
copyright: `COPYRIGHT © ${Config.YearStart}-${new Date().getFullYear()} ${Config.AuthorName} ALL RIGHTS RESERVED`,
copyright: CopyrightAnnouncement,
generator: "Node.js Feed",
author: {
name: Config.AuthorName,
email: Config.SocialLinks.email,
link: `https://${Config.SiteDomain}/`,
link: WebsiteURL,
},
});
for (let i = 0; i < LatestPostCountInHomePage; i++) {
const post = sortedPosts.allPostList[i];
const postContent = `${getPostFileContent(
post.id,
)}\n---\n**NOTE:** Different RSS reader may have deficient even no support for svg formulations rendering. If it happens, please read the origin page to have better experience.`;
const postContent = `${getPostFileContent(post.id)}${NoticeForRSSReaders}}`;
const dateNumber = post.frontMatter.time.split("-").map((num) => parseInt(num));
const mdxSource = await serialize(postContent ?? "", {
parseFrontmatter: true,

View File

@@ -5,7 +5,8 @@ import { fontSypxzs } from "@/styles/font";
import { TfiFaceSad } from "react-icons/tfi";
export default function NotFoundPage() {
const goBack = () => {
const handleGoBack = () => {
if (window == null) return;
window.history.back();
};
return (
@@ -19,7 +20,7 @@ export default function NotFoundPage() {
{"This page does not exist for it might be removed or closed."}
</p>
<div className="my-5 flex justify-center">
<button onClick={goBack} className="link text-xl font-bold">
<button onClick={handleGoBack} className="link text-xl font-bold">
{"GO BACK"}
</button>
</div>

View File

@@ -48,17 +48,17 @@ export default function AboutPage() {
</Link>
</li>
)}
<li className="my-2">🖥 Programming stack: XXXX</li>
<li className="my-2">🤝 I am looking to XXXXX</li>
<li className="my-2">🖥 Programming stack: TypeScript, JavaScript, C++, C, Rust, Go and so on.</li>
<li className="my-2">🤝 I am looking for friends who are fund of XXXX</li>
{Config.SocialLinks.twitter && (
<li className="my-2">
{"📫 How to reach me on Twitter: "}
<Link target="_blank" className="link" href={`https://x.com/${Config.SocialLinks.twitter}`}>
<Link target="_blank" className="link" href={`https://twitter.com/${Config.SocialLinks.twitter}`}>
{Config.SocialLinks.twitter}
</Link>
</li>
)}
<li className="my-2">Language : 汉语普通话First Language / English / / </li>
<li className="my-2">Language : 汉语 / English / / </li>
<li className="my-2">Gender Identity : Male / Female / MTF / FTM / And Others </li>
<li className="my-2">From : Your Country, State / Province</li>
</ul>

View File

@@ -9,6 +9,7 @@ import { Toaster } from "@/components/ui/toaster";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO";
import { TagBadge } from "@/components/utils/TagBadge";
import { Config } from "@/data/config";
import { normalizeDate } from "@/lib/date";
import { getPostFileContent, sortedPosts } from "@/lib/post-process";
@@ -78,13 +79,7 @@ const ReaderPage = (props: ReaderPageProps) => {
<div className={`py-3 flex flex-wrap justify-start border-t border-b`}>
<div className="font-bold mr-2 my-1">{"TAGS : "}</div>
{props.frontMatter.tags.map((tagName) => (
<Link
href={`/tags/${tagName}`}
className={`tag-link m-1 text-sm ${fontSypxzs.className}`}
key={`tags-${nanoid()}`}
>
{tagName}
</Link>
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
))}
</div>
)}

View File

@@ -16,7 +16,7 @@ export default function FriendsPage() {
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFzxbs.className}`}>{"FRIENDS"}</h2>
<hr />
<div className={`my-5 flex flex-wrap justify-center text-2xl ${fontSypxzs.className}`}>
<div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSypxzs.className}`}>
{FriendsList.map((item) => (
<Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
{item.title}
@@ -24,7 +24,7 @@ export default function FriendsPage() {
))}
</div>
<hr />
<div className="my-2 text-base flex-col flex justify-start">
<div className="my-3 text-base flex-col flex justify-start">
<div className="mx-auto">
{"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "}
<Link className="underline" href={`mailto:${Config.SocialLinks.email}`}>

View File

@@ -100,9 +100,8 @@ export const getStaticProps: GetStaticProps<PostsPageProps> = async (context) =>
const params = (context.params?.slug as string[]) ?? [];
const pageNumber = params[0] ? parseInt(params[0]) : 1;
let postList: TPostListItem[] = [];
postList = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
let postList: TPostListItem[] = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);

View File

@@ -2,12 +2,12 @@ import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO";
import { TagBadge } from "@/components/utils/TagBadge";
import { Config } from "@/data/config";
import { sortedPosts } from "@/lib/post-process";
import { fontFzxbs, fontSypxzs } from "@/styles/font";
import { nanoid } from "nanoid";
import { GetStaticProps } from "next";
import Link from "next/link";
import { AiOutlineTags } from "react-icons/ai";
type TagsIndexPageProps = {
@@ -30,9 +30,7 @@ export default function TagsIndexPage(props: TagsIndexPageProps) {
</h2>
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSypxzs.className}`}>
{props.tagList.map((item) => (
<Link key={`tag-link-${nanoid()}`} href={`/tags/${item.name}`} className="tag-link m-2 text-base">
{`${item.name} (${item.count})`}
</Link>
<TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
))}
</div>
</ContentContainer>

View File

@@ -1,4 +1,3 @@
/* 滚动槽 */
.flat-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -8,14 +7,12 @@
background: rgba(0, 0, 0, 0.06);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
/* 滚动条滑块 */
.flat-scrollbar::-webkit-scrollbar-thumb {
border-radius: 3px;
background: gray;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
/* 滚动槽 */
.flat-scrollbar-thin::-webkit-scrollbar {
width: 3px;
height: 3px;
@@ -25,7 +22,6 @@
background: rgba(0, 0, 0, 0.06);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
/* 滚动条滑块 */
.flat-scrollbar-thin::-webkit-scrollbar-thumb {
border-radius: 3px;
background: gray;

View File

@@ -1,35 +1,12 @@
.text-selection {
.selection-style {
@apply selection:bg-black
selection:text-white
dark:selection:bg-white
dark:selection:text-black;
}
.list-title {
@apply text-3xl
font-bold
text-sky-600
dark:text-sky-500;
}
.nav-link {
@apply border-b-sky-600
font-bold
hover:text-sky-600
dark:hover:border-b-sky-500
dark:hover:text-sky-500;
}
.tag-link {
@apply border-2
border-black
px-2
hover:border-gray-600
hover:text-gray-600
dark:border-white
dark:text-white
dark:hover:border-gray-200
dark:hover:text-gray-200;
@apply border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white dark:text-white dark:hover:border-gray-200 dark:hover:text-gray-200;
}
.link-button {
@@ -45,5 +22,5 @@
}
* {
@apply text-selection;
@apply selection-style;
}