wip: moved the content loader

This commit is contained in:
Suyono 2024-05-30 11:51:21 +10:00
parent ff6886e309
commit 1340f2029a
5 changed files with 139 additions and 120 deletions

View File

@ -1,121 +1,7 @@
import { unified } from 'unified';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import rehypeHighlight, { Options as RehypeHighlightOptions } from 'rehype-highlight';
import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
import { all } from 'lowlight';
import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
import { MarkPostString } from '@/components/dummyPost';
import { raleway, roboto, nunito } from "@/app/fonts";
import rehypeRaw from "rehype-raw";
import Image from "next/image";
import { content } from '@/components/post';
export default async function Mark() {
let content = await MarkPostString();
let result = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype, { allowDangerousHtml: true } as RemarkRehypeOptions)
.use(rehypeRaw)
.use(rehypeSanitize, {
...defaultSchema,
tagNames: [
...(defaultSchema.tagNames || []),
'figure',
'figcaption',
]
})
.use(rehypeHighlight, {
languages: all,
} as RehypeHighlightOptions)
.use(rehypeReact, {
Fragment: Fragment,
jsx: jsx,
jsxs: jsxs,
passNode: true,
components: {
h1: (props) => (
<h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
{props.children}
</h1>
),
h2: (props) => (
<h2 className={`${raleway.className} mx-auto mt-6 w-224 text-3xl`}>
{props.children}
</h2>
),
h3: (props) => (
<h3 className={`${raleway.className} mx-auto mt-4 w-224 text-2xl`}>
{props.children}
</h3>
),
h4: (props) => (
<h4 className={`${raleway.className} mx-auto mt-3 w-224 text-xl`}>
{props.children}
</h4>
),
p: (props) => (
<p className={`${nunito.className} mx-auto mt-2 w-224`}>
{props.children}
</p>
),
pre: (props) => (
<div className={`w-224 mx-auto mt-2`}>
<pre>{props.children}</pre>
</div>
),
hr: (props) => <hr className={`mx-auto w-224 mt-6`} />,
img: (props) => {
let src: string = "";
let alt: string = "";
if (typeof props.src === "undefined") {
src = `https://${process.env.ASSETS_DOMAIN}/broken-image.svg`;
} else {
src = props.src;
}
if (typeof props.alt === "string") {
alt = props.alt;
}
if (
typeof props.width === "undefined" ||
typeof props.height === "undefined"
) {
return (
<Image src={src} alt={alt} className={`mx-auto`} />
);
} else {
return (
<Image
src={src}
alt={alt}
className={`mx-auto`}
width={
typeof props.width === "string"
? parseInt(props.width, 10)
: props.width
}
height={
typeof props.height === "string"
? parseInt(props.height, 10)
: props.height
}
/>
);
}
},
figcaption: (props) => (
<figcaption className={`${nunito.className} text-center mb-6`}>
{props.children}
</figcaption>
),
},
} as RehypeReactOptions)
.process(content);
return result.result;
let postContent = await MarkPostString();
return content(postContent);
}

View File

@ -1,5 +1,6 @@
import Image from "next/image";
import Link from "next/link";
import { getAssetsDomain } from "@/backend/env"
import { raleway, syne, questrial } from "@/app/fonts";
export default function Home() {
@ -7,7 +8,7 @@ export default function Home() {
<div className={`flex flex-col`}>
<div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
<Image
src={`https://${process.env.ASSETS_DOMAIN}/placeholder.webp`}
src={`https://${getAssetsDomain()}/placeholder.webp`}
alt={`blog cover`}
className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
width={1581}
@ -31,7 +32,7 @@ export default function Home() {
className={`flex flex-row max-w-4xl items-center`}
>
<Image
src={`https://${process.env.ASSETS_DOMAIN}/pthumb.webp`}
src={`https://${getAssetsDomain()}/pthumb.webp`}
alt="post thumbnail"
width={454}
height={341}

View File

@ -1,3 +1,6 @@
import { getPost } from '@/backend/post';
import { content } from '@/components/post'
export default async function Post({ params }: { params: { slug: string } }) {
// let content;
//
@ -17,5 +20,6 @@ export default async function Post({ params }: { params: { slug: string } }) {
// </div>
// );
return(<></>);
let postContent :string = await getPost(params.slug);
return(content(postContent));
}

View File

@ -1,3 +1,11 @@
export function getAssetsDomain(): string {
if (typeof process.env.ASSETS_DOMAIN === 'undefined') {
throw new Error("missing env ASSETS_DOMAIN");
}
return process.env.ASSETS_DOMAIN;
}
export function getMysqlHost(): string {
if (typeof process.env.MYSQL_HOST === 'undefined') {
throw new Error("missing env MYSQL_HOST")

120
components/post.tsx Normal file
View File

@ -0,0 +1,120 @@
import { unified } from 'unified';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import rehypeHighlight, { Options as RehypeHighlightOptions } from 'rehype-highlight';
import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
import { all } from 'lowlight';
import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
import { raleway, roboto, nunito } from "@/app/fonts";
import rehypeRaw from "rehype-raw";
import Image from "next/image";
import { getAssetsDomain } from "@/backend/env";
export async function content(content: string) {
let result = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype, { allowDangerousHtml: true } as RemarkRehypeOptions)
.use(rehypeRaw)
.use(rehypeSanitize, {
...defaultSchema,
tagNames: [
...(defaultSchema.tagNames || []),
'figure',
'figcaption',
]
})
.use(rehypeHighlight, {
languages: all,
} as RehypeHighlightOptions)
.use(rehypeReact, {
Fragment: Fragment,
jsx: jsx,
jsxs: jsxs,
passNode: true,
components: {
h1: (props) => (
<h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
{props.children}
</h1>
),
h2: (props) => (
<h2 className={`${raleway.className} mx-auto mt-6 w-224 text-3xl`}>
{props.children}
</h2>
),
h3: (props) => (
<h3 className={`${raleway.className} mx-auto mt-4 w-224 text-2xl`}>
{props.children}
</h3>
),
h4: (props) => (
<h4 className={`${raleway.className} mx-auto mt-3 w-224 text-xl`}>
{props.children}
</h4>
),
p: (props) => (
<p className={`${nunito.className} mx-auto mt-2 w-224`}>
{props.children}
</p>
),
pre: (props) => (
<div className={`w-224 mx-auto mt-2`}>
<pre>{props.children}</pre>
</div>
),
hr: (props) => <hr className={`mx-auto w-224 mt-6`} />,
img: (props) => {
let src: string = "";
let alt: string = "";
if (typeof props.src === "undefined") {
src = `https://${getAssetsDomain()}/broken-image.svg`;
} else {
src = props.src;
}
if (typeof props.alt === "string") {
alt = props.alt;
}
if (
typeof props.width === "undefined" ||
typeof props.height === "undefined"
) {
return (
<Image src={src} alt={alt} className={`mx-auto`} />
);
} else {
return (
<Image
src={src}
alt={alt}
className={`mx-auto`}
width={
typeof props.width === "string"
? parseInt(props.width, 10)
: props.width
}
height={
typeof props.height === "string"
? parseInt(props.height, 10)
: props.height
}
/>
);
}
},
figcaption: (props) => (
<figcaption className={`${nunito.className} text-center mb-6`}>
{props.children}
</figcaption>
),
},
} as RehypeReactOptions)
.process(content);
return result.result;
}