upgrade the project
This commit is contained in:
PrinOrange
10
components/readerpage/BottomCard.tsx
Normal file
10
components/readerpage/BottomCard.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { Config } from "@/data/config";
|
||||
|
||||
export const BottomCard = () => {
|
||||
return (
|
||||
<div className="p-8 w-full flex flex-col justify-center">
|
||||
<img alt={Config.AuthorName} className="h-24 w-24 rounded-full mx-auto" src={Config.AvatarURL} />
|
||||
<p className="mx-auto mt-5 font-source-serif-screen">{Config.Sentence}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -11,12 +11,12 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
|
||||
const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
|
||||
const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
|
||||
return (
|
||||
<Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
|
||||
<Sheet onOpenChange={setIsTOCOpen} open={isTOCOpen}>
|
||||
<SheetTrigger
|
||||
title="Open the table of contents"
|
||||
className="bottom-16 right-5 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
|
||||
title="Open the table of contents"
|
||||
>
|
||||
<div title="Open the table of contents" onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-1 font-bold">
|
||||
<div className="p-1 font-bold" onClick={() => setIsTOCOpen(!isTOCOpen)} title="Open the table of contents">
|
||||
<MdMenuBook className="text-3xl" />
|
||||
</div>
|
||||
</SheetTrigger>
|
||||
@@ -31,11 +31,11 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
|
||||
"border-t border-b py-1 px-2 border-dashed hover:bg-gray-100 hover:dark:bg-gray-900",
|
||||
activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
|
||||
)}
|
||||
href={`#${item.anchorId}`}
|
||||
key={`drawer-toc-${item.anchorId}`}
|
||||
onClick={() => {
|
||||
setIsTOCOpen(false);
|
||||
}}
|
||||
key={`drawer-toc-${item.anchorId}`}
|
||||
href={`#${item.anchorId}`}
|
||||
>
|
||||
<li className={"p-2"} style={{ paddingLeft: `${item.level - 2}em` }}>{`${item.title}`}</li>
|
||||
</Link>
|
||||
|
||||
@@ -8,19 +8,19 @@ export const PostComments = (props: { postId: string }) => {
|
||||
Config.Giscus && (
|
||||
<div className="mt-10 mb-5">
|
||||
<Giscus
|
||||
id={props.postId}
|
||||
repo={Config.Giscus.repo as `${string}/${string}`}
|
||||
repoId={Config.Giscus.repoId}
|
||||
category={Config.Giscus.category}
|
||||
categoryId={Config.Giscus.categoryId}
|
||||
mapping="pathname"
|
||||
term={props.postId}
|
||||
reactionsEnabled="1"
|
||||
emitMetadata="0"
|
||||
theme={theme === "light" ? "light_tritanopia" : "dark_tritanopia"}
|
||||
id={props.postId}
|
||||
inputPosition="top"
|
||||
loading="eager"
|
||||
lang="en"
|
||||
loading="eager"
|
||||
mapping="pathname"
|
||||
reactionsEnabled="1"
|
||||
repo={Config.Giscus.repo as `${string}/${string}`}
|
||||
repoId={Config.Giscus.repoId}
|
||||
term={props.postId}
|
||||
theme={theme === "light" ? "light_tritanopia" : "dark_tritanopia"}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export const PostCover = (props: { coverURL: string }) => {
|
||||
return (
|
||||
<div
|
||||
className="mb-8 mt-0 flex w-full justify-center rounded-xl"
|
||||
className="mb-8 mt-0 flex w-full justify-center rounded-md"
|
||||
style={{
|
||||
aspectRatio: "5/2",
|
||||
background: `url(${props.coverURL})`,
|
||||
|
||||
@@ -11,27 +11,26 @@ export const ShareButtons = (props: {
|
||||
title: string;
|
||||
quote?: string | null;
|
||||
}) => {
|
||||
const postURL = `https://${Config.SiteDomain}/blog/${props.postId}`;
|
||||
const postURL = encodeURI(`https://${Config.SiteDomain}/blog/${props.postId}`);
|
||||
const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
|
||||
Config.Nickname
|
||||
}'s Blog ${postURL}`;
|
||||
const { toast } = useToast();
|
||||
return (
|
||||
<div className="my-3 flex space-x-4 text-2xl">
|
||||
<div className="py-3 flex justify-center space-x-4 text-2xl">
|
||||
{props.allowShare != false ? (
|
||||
<>
|
||||
<div className="my-auto text-sm font-bold">{"SHARE :"}</div>
|
||||
<FacebookShareButton className="mx-2" url={postURL} quote={props.quote ?? props.title}>
|
||||
<FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
|
||||
<FacebookShareButton className="mx-2" quote={props.quote ?? props.title} url={postURL}>
|
||||
<FaFacebook className="hover:text-blue-500" title="Share to Facebook" />
|
||||
</FacebookShareButton>
|
||||
<TwitterShareButton className="mx-2" url={postURL} title={props.title}>
|
||||
<FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
|
||||
<TwitterShareButton className="mx-2" title={props.title} url={postURL}>
|
||||
<FaTwitter className="hover:text-sky-500" title="Share to Twitter" />
|
||||
</TwitterShareButton>
|
||||
<LinkedinShareButton className="mx-2" url={postURL} title={props.title}>
|
||||
<FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
|
||||
<LinkedinShareButton className="mx-2" title={props.title} url={postURL}>
|
||||
<FaLinkedin className="hover:text-blue-500" title="Share to Linkedin" />
|
||||
</LinkedinShareButton>
|
||||
<RedditShareButton className="mx-2" url={postURL} title={props.title}>
|
||||
<FaReddit title="Share to Reddit" className="hover:text-orange-500" />
|
||||
<RedditShareButton className="mx-2" title={props.title} url={postURL}>
|
||||
<FaReddit className="hover:text-orange-500" title="Share to Reddit" />
|
||||
</RedditShareButton>
|
||||
<CopyToClipboard
|
||||
onCopy={() => {
|
||||
@@ -40,8 +39,8 @@ export const ShareButtons = (props: {
|
||||
text={copyShareText}
|
||||
>
|
||||
<FaLink
|
||||
title="Share with the post url and description"
|
||||
className="hover:text-gray-500 mx-2 cursor-pointer"
|
||||
title="Share with the post url and description"
|
||||
/>
|
||||
</CopyToClipboard>
|
||||
</>
|
||||
|
||||
@@ -1,34 +1,31 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useActiveHeading } from "@/hooks/useActiveHeading";
|
||||
import { TTOCItem } from "@/types/toc.type";
|
||||
import Link from "next/link";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Separator } from "../ui/separator";
|
||||
|
||||
export const TOC = (props: { data: TTOCItem[] }) => {
|
||||
const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
|
||||
|
||||
return (
|
||||
<Card className="sticky top-[5em] mx-5">
|
||||
<CardHeader className="p-3">
|
||||
<CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
|
||||
</CardHeader>
|
||||
<Separator />
|
||||
<CardContent className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
|
||||
<ul>
|
||||
<div className="mx-5">
|
||||
<div className="text-lg text-center p-2 font-bold border-t-2 border-b-2 border-gray-500">
|
||||
{"TABLE OF CONTENTS"}
|
||||
</div>
|
||||
<div className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
|
||||
<div>
|
||||
{props.data?.map((item) => (
|
||||
<Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
|
||||
<li
|
||||
<Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
|
||||
<div
|
||||
className={twMerge(
|
||||
`py-2 text-sm rounded-lg hover:bg-gray-100 hover:dark:bg-gray-900`,
|
||||
activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
|
||||
`py-2 text-sm rounded-lg hover:text-sky-700 dark:hover:text-sky-400`,
|
||||
activeId === `#${item.anchorId}` ? "text-sky-700 dark:text-sky-400" : "",
|
||||
)}
|
||||
style={{ paddingLeft: `${item.level - 1}em` }}
|
||||
>{`${item.title}`}</li>
|
||||
>{`${item.title}`}</div>
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user