dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor some code to make it looks cleaner

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
components/readerpage/ShareButtons.tsx
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

2
components/readerpage/TOC.tsx
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">

10
components/utils/Footer.tsx
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"

4
components/utils/NavBar.tsx
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}

5
components/utils/PostList.tsx
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>
)}

19
components/utils/SEO.tsx
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",
}}
/>

8
components/utils/SocialIcons.tsx
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>
)}
<Link target="_blank" href={`mailto:${Config.SocialLinks.email}`} title="EMail Address">
<FiMail className="hover:text-gray-500" />
</Link>
</div>
);
};

11
components/utils/TagBadge.tsx Normal file
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>
);
};