wip: moved the content loader
This commit is contained in:
parent
ff6886e309
commit
1340f2029a
@ -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);
|
||||
}
|
||||
@ -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}
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
@ -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
120
components/post.tsx
Normal 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user