suyono/blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: suyono:cbcf6a731bf30a89508c99c2c776cef06d5695ed
Branches Tags
suyono:main
suyono:payload
suyono:next15
suyono:restart
suyono:remark
suyono:bright
suyono:use-yarn
..
compare: suyono:15b7b30b088688b726379e4c49ff62e0f5b0ff7b
Branches Tags
suyono:payload
suyono:next15
suyono:restart
suyono:remark
suyono:bright
suyono:use-yarn
suyono:main

3 Commits
cbcf6a731b ... 15b7b30b08

Author SHA1 Message Date
Suyono
15b7b30b08 reconfirmed library versions and jsx running 2024-05-10 09:22:44 +10:00
Suyono
d709f6657a replaced tsx with jsx due to issue in @types/react for jsx-runtime 2024-05-09 23:30:57 +10:00
Suyono
0ca7a97d26 wip: testing remark; trying to downgrade some libs 2024-05-09 22:31:01 +10:00
8 changed files with 1444 additions and 8 deletions
Show Stats Expand all files Collapse all files

1
.env Normal file
View File

@ -0,0 +1 @@
DUMMY_HTML_DIR=./development-test-data-dir/

3
.gitignore vendored
View File

@ -27,7 +27,8 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
# local env files # local env files
.env.development .env.local
.env.development.local
# vercel # vercel
.vercel .vercel

37
app/mark/page.jsx Normal file
View File

@ -0,0 +1,37 @@
import { unified } from 'unified';
import remarkGfm from "remark-gfm";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeSanitize from "rehype-sanitize";
import rehypeHighlight from "rehype-highlight";
import rehypeReact from "rehype-react";
import * as prod from 'react/jsx-runtime';
import { readFile } from 'node:fs/promises';
async function markPostString() {
let path = ""
if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
path = process.env.DUMMY_HTML_DIR + "test1.md";
}
return await readFile(path, "utf-8")
}
export default async function Mark() {
let content = await markPostString();
let result = unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeHighlight)
.use(rehypeReact, {
Fragment: prod.Fragment,
jsx: prod.jsx,
jsxs: prod.jsxs,
})
.processSync(content)
return result.result;
}

4
app/post/[slug]/page.tsx
View File

@ -25,16 +25,14 @@ const options: HTMLReactParserOptions = {
export default async function Post({ params }: { params: { slug: string } }) { export default async function Post({ params }: { params: { slug: string } }) {
let content; let content;
const dummySlug = await DummyPostSlug(); const dummySlug = DummyPostSlug();
if (dummySlug === params.slug) { if (dummySlug === params.slug) {
content = await DummyPostString(); content = await DummyPostString();
// console.log(content);
} else { } else {
content = await getPost(params.slug); content = await getPost(params.slug);
} }
content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content); content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
// console.log(content)
const elem = parse(content, options); const elem = parse(content, options);
return ( return (

14
components/dummyPost.tsx
View File

@ -1,13 +1,21 @@
import { promises as fsp } from 'fs' import { readFile } from 'node:fs/promises';
export async function MarkPostString() {
let path = ""
if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
path = process.env.DUMMY_HTML_DIR + "test1.md";
}
return await readFile(path, "utf-8")
}
export async function DummyPostString() { export async function DummyPostString() {
let path = "" let path = ""
if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") { if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
path = process.env.DUMMY_HTML_DIR + "test1.html"; path = process.env.DUMMY_HTML_DIR + "test1.html";
} }
return await fsp.readFile(path, "utf-8") return await readFile(path, "utf-8")
} }
export async function DummyPostSlug() { export function DummyPostSlug() {
return "dummy-post" return "dummy-post"
} }

15
dummies/test1.md Normal file
View File

@ -0,0 +1,15 @@
# Post Title
## Introduction
Hi there! Do you see me?
```go
import "fmt"
func main() {
fmt.Println("hello world")
}
```
That's the `hello world` code!

11
package.json
View File

@ -26,10 +26,19 @@
"postcss": "8.4.30", "postcss": "8.4.30",
"react": "18.3.1", "react": "18.3.1",
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-remark": "^2.1.0",
"redis": "^4.6.13", "redis": "^4.6.13",
"rehype-highlight": "^7.0.0",
"rehype-react": "^8.0.0",
"rehype-sanitize": "^6.0.0",
"rehype-stringify": "^10.0.0",
"remark-gfm": "^4.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"sharp": "^0.33.3", "sharp": "^0.33.3",
"tailwindcss": "3.3.3", "tailwindcss": "3.3.3",
"typescript": "5.2.2" "typescript": "5.2.2",
"unified": "^11.0.4"
}, },
"devDependencies": { "devDependencies": {
"prettier": "3.0.3" "prettier": "3.0.3"

1367
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff