Skip to content

Commit 748def8

Browse files
georgezzenggeorgezzeng
authored
Merge pull request #4 from CHTC/nextjs
Nextjs
2 parents da93717 + c1d56d2 commit 748def8

File tree

3 files changed

+124
-100
lines changed

3 files changed

+124
-100
lines changed

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ jobs:
6767
- name: Upload artifact
6868
uses: actions/upload-pages-artifact@v3
6969
with:
70-
path: ./out
70+
path: ./.next
7171

7272
# Deployment job
7373
deploy:

‎src/app/globals.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,6 @@
33
--foreground: #171717;
44
}
55

6-
@media (prefers-color-scheme: dark) {
7-
:root {
8-
--background: #0a0a0a;
9-
--foreground: #ededed;
10-
}
11-
}
12-
136
html,
147
body {
158
max-width: 100vw;
@@ -34,9 +27,3 @@ a {
3427
color: inherit;
3528
text-decoration: none;
3629
}
37-
38-
@media (prefers-color-scheme: dark) {
39-
html {
40-
color-scheme: dark;
41-
}
42-
}

‎src/app/page.tsx‎

Lines changed: 123 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
'use client'
1+
'use client';
22

33
import {Box, Chip, Container, TextField} from "@mui/material";
44
import grayMatter from "gray-matter";
5-
import React, {useEffect, useState} from "react";
5+
import React, {Suspense, useEffect, useState} from "react";
66
import {useSearchParams} from "next/navigation";
77
import {motion} from "motion/react"
88
import Divider from '@mui/material/Divider';
@@ -11,7 +11,16 @@ import {BackendArticle, Article as ArticleType} from "@chtc/web-components/dist/
1111
import {Grid2 as Grid} from "@mui/material";
1212

1313
export default function MarkdownPage() {
14+
return (
15+
<Container>
16+
<Suspense>
17+
<MarkdownContent />
18+
</Suspense>
19+
</Container>
20+
);
21+
}
1422

23+
function MarkdownContent() {
1524
const searchParams = useSearchParams();
1625
const markdownUrl = searchParams.get("url");
1726

@@ -20,140 +29,168 @@ export default function MarkdownPage() {
2029
const [error, setError] = useState<string | undefined>(undefined);
2130

2231
useEffect(() => {
23-
(async () => {
32+
(async () => {
2433

2534
const markdownUrl = searchParams.get("url");
2635

2736
if (!markdownUrl) {
28-
setError("No URL provided");
29-
return
37+
setError("No URL provided");
38+
return;
3039
}
3140

3241
let response;
3342
try {
34-
response = await fetch(markdownUrl);
35-
if (!response.ok) {
36-
setError(`Failed to fetch markdown: ${response.statusText}`);
37-
return
38-
}
43+
response = await fetch(markdownUrl);
44+
if (!response.ok) {
45+
setError(`Failed to fetch markdown: ${response.statusText}`);
46+
return
47+
}
3948
} catch (e) {
40-
setError(`Failed to fetch markdown: ${e}`);
41-
return
49+
setError(`Failed to fetch markdown: ${e}`);
50+
return
4251
}
4352

4453
const markdown = await response.text()
4554

46-
const { data, content } = grayMatter(markdown);
55+
const {data, content} = grayMatter(markdown);
4756

4857
const path = markdownUrl.split("/").slice(-1)[0];
4958
const date = new Date(path.split("-").slice(0, 3).join("-"));
5059

5160
const article = {
52-
slug: [],
53-
date: date,
54-
path: markdownUrl.split("/").slice(-1)[0],
55-
content,
56-
...(data as Omit<ArticleType, "content" | "date">)
61+
slug: [],
62+
date: date,
63+
path: markdownUrl.split("/").slice(-1)[0],
64+
content,
65+
...(data as Omit<ArticleType, "content" | "date">)
5766
}
5867

5968
setArticle(article as BackendArticle)
6069
setError(undefined)
6170
})();
6271
}, [markdownUrl, searchParams]);
6372

64-
if (error) {
65-
return (
66-
<Container>
67-
<h1>{error}</h1>
68-
<TextField onChange={(e) => updateUrl(e.target.value)} label="Enter URL" fullWidth/>
69-
</Container>
70-
)
71-
}
72-
73-
if (!article) {
74-
return (
75-
<Container>
76-
<h1>Loading</h1>
77-
</Container>
78-
)
79-
}
73+
if (error) {
74+
return (
75+
<Container>
76+
<h1>{error}</h1>
77+
<TextField onChange={(e) => updateUrl(e.target.value)} label="Enter URL" fullWidth/>
78+
</Container>
79+
)
80+
}
81+
82+
if (!article) {
83+
return (
84+
<Container>
85+
<h1>Loading</h1>
86+
</Container>
87+
)
88+
}
8089

8190
return (
82-
<Container>
83-
84-
<Box>
85-
<Divider variant="middle"
86-
sx={{backgroundColor: "black", width: "100%", height: "3px", my: '70px',marginLeft: "0",
87-
marginRight: "0"}}>
88-
<Chip label="Frontmatter Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }}/>
89-
</Divider>
90-
<Box
91-
sx={{
92-
backgroundColor: "white",
93-
border: "1px solid #ddd",
94-
borderRadius: "4px",
95-
padding: "16px",
96-
whiteSpace: "pre-wrap",
97-
fontFamily: "monospace",
98-
fontSize: "14px",
99-
}}>
100-
{article ? formatFrontmatter(article) : "No frontmatter"}
101-
</Box>
102-
91+
<Box>
92+
<Divider
93+
variant="middle"
94+
sx={{
95+
backgroundColor: "black",
96+
width: "100%",
97+
height: "3px",
98+
my: "70px",
99+
marginLeft: "0",
100+
marginRight: "0",
101+
}}
102+
>
103+
<Chip label="Frontmatter Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }} />
104+
</Divider>
105+
<Box
106+
sx={{
107+
backgroundColor: "white",
108+
border: "1px solid #ddd",
109+
borderRadius: "4px",
110+
padding: "16px",
111+
whiteSpace: "pre-wrap",
112+
fontFamily: "monospace",
113+
fontSize: "14px",
114+
}}
115+
>
116+
{article ? formatFrontmatter(article) : "No frontmatter"}
117+
</Box>
103118

104-
<Divider variant="middle"
105-
sx={{backgroundColor: "black", width: "100%", height: "3px", my: '70px',marginLeft: "0",
106-
marginRight: "0"}}>
107-
<Chip label="Article Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }}/>
119+
<Divider
120+
variant="middle"
121+
sx={{
122+
backgroundColor: "black",
123+
width: "100%",
124+
height: "3px",
125+
my: "70px",
126+
marginLeft: "0",
127+
marginRight: "0",
128+
}}
129+
>
130+
<Chip label="Article Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }} />
108131
</Divider>
109132
<Box>
110-
<Article article={article}/>
133+
<Article article={article} />
111134
</Box>
112135

113-
<Divider variant="middle"
114-
sx={{backgroundColor: "black", width: "100%", height: "3px", my: '70px',marginLeft: "0",
115-
marginRight: "0"}}>
116-
<Chip label="Card Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }}/>
136+
<Divider
137+
variant="middle"
138+
sx={{
139+
backgroundColor: "black",
140+
width: "100%",
141+
height: "3px",
142+
my: "70px",
143+
marginLeft: "0",
144+
marginRight: "0",
145+
}}
146+
>
147+
<Chip label="Card Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }} />
117148
</Divider>
118-
<Grid container justifyContent={'center'}>
119-
<Grid size={{xs: 12, md: 6, lg: 4}}>
120-
<ArticleCard href={"./"} article={article}/>
121-
</Grid>
149+
<Grid container justifyContent={"center"}>
150+
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
151+
<ArticleCard href={"./"} article={article} />
152+
</Grid>
122153
</Grid>
123154

124-
<Divider variant="middle"
125-
sx={{backgroundColor: "black", width: "100%", height: "3px", my: '70px',marginLeft: "0",
126-
marginRight: "0"}}>
127-
<Chip label="Banner Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }}/>
155+
<Divider
156+
variant="middle"
157+
sx={{
158+
backgroundColor: "black",
159+
width: "100%",
160+
height: "3px",
161+
my: "70px",
162+
marginLeft: "0",
163+
marginRight: "0",
164+
}}
165+
>
166+
<Chip label="Banner Preview" size="medium" sx={{ fontSize: "1.2rem", padding: "8px 16px" }} />
128167
</Divider>
129168
{article.banner_src ? (
130169
<Box>
131170
<motion.img
132171
src={article.banner_src}
133172
alt={article.banner_alt || "Banner"}
134-
style={{width: "100%", aspectRatio: "2/1"}}
135-
whileHover={{scale: 1.02}}
136-
whileTap={{scale: 0.95}}
173+
style={{ width: "100%", aspectRatio: "2/1" }}
174+
whileHover={{ scale: 1.02 }}
175+
whileTap={{ scale: 0.95 }}
137176
/>
138177
</Box>
139178
) : null}
140179
</Box>
141-
142-
</Container>
143180
)
144181
}
145182

146183
const formatFrontmatter = (frontmatter: BackendArticle) => {
147-
const newFrontmatter: Partial<BackendArticle> = {...frontmatter};
148-
delete newFrontmatter.content;
149-
delete newFrontmatter.slug;
150-
delete newFrontmatter.path;
151-
delete newFrontmatter.date;
152-
return JSON.stringify(newFrontmatter, null, 2);
184+
const newFrontmatter: Partial<BackendArticle> = {...frontmatter};
185+
delete newFrontmatter.content;
186+
delete newFrontmatter.slug;
187+
delete newFrontmatter.path;
188+
delete newFrontmatter.date;
189+
return JSON.stringify(newFrontmatter, null, 2);
153190
}
154191

155192
const updateUrl = (url: string) => {
156-
const currentUrl = new URL(window.location.href);
157-
currentUrl.searchParams.set('url', url);
158-
window.history.pushState({}, '', currentUrl.toString());
193+
const currentUrl = new URL(window.location.href);
194+
currentUrl.searchParams.set('url', url);
195+
window.history.pushState({}, '', currentUrl.toString());
159196
}

0 commit comments

Comments
 (0)