Skip to content

Commit e09365f

Browse files
hpwarehpware
committed
Updates
1 parent 75c9027 commit e09365f

File tree

7 files changed

+183
-174
lines changed

7 files changed

+183
-174
lines changed

‎apps/web/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,14 @@
3030
"drizzle-orm": "^0.44.7",
3131
"geist": "^1.5.1",
3232
"lucide-react": "^0.546.0",
33+
"marked-react": "^3.0.2",
3334
"next": "^16.0.2",
3435
"next-themes": "^0.4.6",
36+
"prism-react-renderer": "^2.4.1",
3537
"radix-ui": "^1.4.3",
3638
"react": "19.1.0",
3739
"react-dom": "19.1.0",
3840
"react-image-crop": "^11.0.10",
39-
"react-markdown": "^10.1.0",
4041
"sonner": "^2.0.7",
4142
"tailwind-merge": "^3.4.0",
4243
"tailwind-scrollbar-hide": "^4.0.0",

‎apps/web/src/app/dashboard/settings/about/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ export default async function DashboardPage() {
9393
</TableBody>
9494
</Table>
9595
<PromoBlock />
96-
ma{" "}
9796
</div>
9897
);
9998
}

‎apps/web/src/app/dashboard/settings/about/promoBlock.tsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,43 @@
22

33
import { GithubIcon } from "lucide-react";
44
import Link from "next/link";
5+
import Markdown from "marked-react";
6+
import { useQuery } from "@tanstack/react-query";
7+
import renderer from "@/components/markdownRender";
58

69
export default function PromoBlock() {
10+
const getRoadMap = useQuery({
11+
queryFn: async () => {
12+
const req = await fetch(
13+
"https://raw.githubusercontent.com/hpware/log/refs/heads/master/roadmap.md",
14+
);
15+
const res = await req.text();
16+
return res;
17+
},
18+
queryKey: ["getRoadMap"],
19+
});
720
return (
8-
<div className="bg-gray-100 dark:bg-gray-900 rounded p-5 m-1 flex flex-row justify-center text-center align-middle">
9-
<div className="flex flex-col">
10-
<Link
11-
href="https://github.com/hpware/log"
12-
className="block justiy-center bg-white dark:bg-black border m-auto p-2 rounded hover:bg-amber-100 dark:border-white dark:hover:bg-amber-100/40 transition-all duration-300"
13-
>
14-
<GithubIcon className="w-[100px] h-[100px] p-4" />
15-
</Link>
21+
<div>
22+
<div className="bg-gray-100 dark:bg-gray-900 rounded p-5 m-1 flex flex-row justify-center text-center align-middle">
23+
<div className="flex flex-col">
24+
<Link
25+
href="https://github.com/hpware/log"
26+
className="block justiy-center bg-white dark:bg-black border m-auto p-2 rounded hover:bg-amber-100 dark:border-white dark:hover:bg-amber-100/40 transition-all duration-300"
27+
>
28+
<GithubIcon className="w-[100px] h-[100px] p-4" />
29+
</Link>
30+
</div>
31+
<div className="text-center justify-center flex flex-col p-5 m-5">
32+
<span>
33+
This project is currently at {"**"} of stars on GitHub, if you want
34+
to support the project, consider finding issues & star the project!
35+
</span>
36+
</div>
1637
</div>
17-
<div className="text-center justify-center flex flex-col p-5 m-5">
18-
<span>
19-
This project is currently at {"**"} of stars on GitHub, if you want to
20-
support the project, consider finding issues & star the project!
21-
</span>
38+
<div>
39+
<Markdown renderer={renderer}>
40+
{getRoadMap.data || "Loading..."}
41+
</Markdown>
2242
</div>
2343
</div>
2444
);

‎apps/web/src/components/markdownCodeBlock.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client";
2+
import { Highlight, themes } from "prism-react-renderer";
3+
import { useTheme } from "next-themes";
4+
import { Ubuntu } from "next/font/google";
5+
const ubuntu = Ubuntu({
6+
variable: "--font-ubuntu",
7+
subsets: ["latin"],
8+
weight: ["400"],
9+
});
10+
export default function CodeRender({
11+
code,
12+
type,
13+
}: {
14+
code: string;
15+
type?: string;
16+
}) {
17+
const { theme } = useTheme();
18+
return (
19+
<div className="rounded-lg overflow-hidden my-4 max-h-full max-w-full">
20+
<div className="flex items-center justify-between px-4 py-2 bg-sky-200 dark:bg-gray-800">
21+
<span
22+
className={`text-sm ${ubuntu.variable} text-black text-gray-800 dark:text-gray-200`}
23+
>
24+
{type || "text"}
25+
</span>
26+
</div>
27+
<Highlight
28+
theme={theme === "dark" ? themes.nightOwl : themes.nightOwlLight}
29+
code={code}
30+
language={type || "text"}
31+
>
32+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
33+
<pre className="p-4 overflow-auto bg-gray-900" style={style}>
34+
{tokens.map((line, i) => (
35+
<div key={i} {...getLineProps({ line })}>
36+
<span key={i} className="text-gray-500 select-none mr-4">
37+
{i + 1}
38+
</span>
39+
{line.map((token, key) => (
40+
<span key={key} {...getTokenProps({ token })} />
41+
))}
42+
</div>
43+
))}
44+
</pre>
45+
)}
46+
</Highlight>
47+
</div>
48+
);
49+
}

‎apps/web/src/components/markdownRender.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import Link from "next/link";
2+
import CodeRender from "./markdownCodeBlock";
3+
import type { Route } from "next";
4+
5+
// Slugify function for heading IDs
6+
function slugify(text: string) {
7+
return String(text)
8+
.toLowerCase()
9+
.replace(/[^\w]+/g, "-")
10+
.replace(/(^-|-$)+/g, "");
11+
}
12+
const renderer = {
13+
heading(text: string, level: number) {
14+
const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
15+
const id = slugify(text);
16+
const size =
17+
level === 1
18+
? "text-2xl"
19+
: level === 2
20+
? "text-xl"
21+
: level === 3
22+
? "text-lg"
23+
: level === 4
24+
? "text-md"
25+
: "text-base";
26+
return (
27+
<Tag
28+
id={id}
29+
key={crypto.randomUUID()}
30+
className={`${size} font-bold mt-2 mb-2`}
31+
>
32+
{text}
33+
</Tag>
34+
);
35+
},
36+
strong(text: string) {
37+
return (
38+
<b className="font-bold" key={crypto.randomUUID()}>
39+
{text}
40+
</b>
41+
);
42+
},
43+
image(src: string, alt: string) {
44+
return (
45+
<img
46+
src={src}
47+
alt={alt}
48+
key={crypto.randomUUID()}
49+
className="max-w-full h-auto rounded-lg p-1 m-1"
50+
/>
51+
);
52+
},
53+
link(href: string, text: string) {
54+
return (
55+
<Link
56+
href={href as Route}
57+
className="text-blue-600 dark:text-sky-400 hover:text-blue-600/80 hover:dark:text-sky-400/80 hover:underline transition-all duration-200"
58+
target="_blank"
59+
key={crypto.randomUUID()}
60+
>
61+
{text}
62+
</Link>
63+
);
64+
},
65+
code(code: string, type: string) {
66+
return <CodeRender code={code} type={type} key={crypto.randomUUID()} />;
67+
},
68+
inlineCode(code: string) {
69+
return (
70+
<code
71+
key={crypto.randomUUID()}
72+
className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 font-mono text-sm"
73+
>
74+
{code}
75+
</code>
76+
);
77+
},
78+
};
79+
80+
export default renderer;

0 commit comments

Comments
 (0)