lumither/nocturne
1
0 Fork 0
mirror of https://github.com/Lumither/nocturne.git synced 2026-10-17 10:26:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(global) containerize

Browse Source
This commit is contained in:
lumither committed 2024-08-01 01:39:24 +08:00
1 parent 36f686c563
commit fbc9736831
20 files changed
+180 -91
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/app/blog/post/[id]/Footer.tsx
-1
View File
@@ -10,7 +10,6 @@ type Props = {
const Footer = (props: Props) => {
const { post } = props;
const header_img = post['header_img'];
const adjacent_posts = post['adj'];
const prev_post = adjacent_posts['prev'];
const next_post = adjacent_posts['next'];
frontend/app/blog/post/[id]/PostCard.tsx
+50 -52
View File
@@ -4,60 +4,48 @@ import { Card, CardBody } from '@nextui-org/card';
import remarkGfm from 'remark-gfm';
import remarkToc from 'remark-toc';
import remarkFrontmatter from 'remark-frontmatter';
import axios from 'axios';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import Headers from '@/app/blog/post/[id]/Headers';
import Footer from '@/app/blog/post/[id]/Footer';
import { fetchNocturneApi } from '@/app/blog/api';
type Props = {
id: string
}
async function PostCard(props: Props) {
const { code, ret } = await fetchNocturneApi(`/get_post/${ props.id }`);
if (code == 200) {
let response: any;
try {
response = await axios(`${ process.env.BACKEND_URL }/get_post/${ props.id }`);
} catch (e) {
return (
<Card className={ `w-full` }>
<CardBody>
Fatal: Failed to load the post.
</CardBody>
</Card>
);
}
<div>
<Card className={ `max-w-full relative` }>
{/* card headers */ }
<Headers post={ ret } />
let post_data = response.data;
return (
<div>
<Card className={ `max-w-full relative` }>
{/* card headers */ }
<Headers post={ post_data } />
{/* card body */ }
<CardBody>
<Markdown
// className={ `p-5 max-w-full text-justify text-pretty prose prose-neutral prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
className={ `p-5 max-w-full text-justify text-pretty prose prose-sm prose-neutral dark:prose-invert md:prose-md lg:prose-lg
{/* card body */ }
<CardBody>
<Markdown
// className={ `p-5 max-w-full text-justify text-pretty prose prose-neutral prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
className={ `p-5 max-w-full text-justify text-pretty prose prose-sm prose-neutral dark:prose-invert md:prose-md lg:prose-lg
prose-code:overflow-x-scroll
` }
remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
rehypePlugins={ [ rehypeRaw, rehypeSanitize ] }
components={ {
pre(props) {
const { node, className, children, ...rest } = props;
if ((children as any)['type'] === 'code') {
const match = /language-(\w+)/.exec((children as any)['props']['className'] || '');
let lang = match ? match[1] : 'text';
return (
<pre className={ `not-prose` }>
remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
rehypePlugins={ [ rehypeRaw, rehypeSanitize ] }
components={ {
pre(props) {
const { node, className, children, ...rest } = props;
if ((children as any)['type'] === 'code') {
const match = /language-(\w+)/.exec((children as any)['props']['className'] || '');
let lang = match ? match[1] : 'text';
return (
<pre className={ `not-prose` }>
<SyntaxHighlighter
// @ts-ignore
style={ oneDark }
@@ -74,29 +62,39 @@ async function PostCard(props: Props) {
}
</SyntaxHighlighter>
</pre>
);
} else {
return (
<pre className={ `not-prose` }>
);
} else {
return (
<pre className={ `not-prose` }>
<code className={ className } { ...props }>
{ children }
</code>
</pre>
);
);
}
}
}
} }
>{ (post_data as any)['content'] }</Markdown>
} }
>{ ret['content'] }</Markdown>
</CardBody>
{/* card footer */ }
<Footer post={ ret } />
</Card>
</div>
);
} else {
return <div>
<Card className={ `w-full` }>
<CardBody>
Fatal: { ret }
</CardBody>
{/* card footer */ }
<Footer post={ post_data } />
</Card>
</div>
);
</div>;
}
}
export default PostCard;