Skip to content

Commit cb46d89

Browse files
Llewellyn500Llewellyn500
committed
refactor: enhance markdown rendering with hashtag removal in headings and improve global styles
1 parent 6828a7d commit cb46d89

File tree

3 files changed

+173
-54
lines changed

3 files changed

+173
-54
lines changed

‎app/globals.css

+145-46
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
}
7575
html {
7676
font-family: General Sans, system-ui, sans-serif;
77+
scroll-behavior: smooth;
7778
}
7879
body {
7980
@apply bg-background text-foreground;
@@ -124,10 +125,6 @@
124125
}
125126
}
126127

127-
/* * {
128-
outline: 1px solid red;
129-
} */
130-
131128
@font-face {
132129
font-family: "General Sans";
133130
font-weight: 400;
@@ -154,77 +151,78 @@
154151

155152
/* Text selection */
156153
::selection {
157-
background: #892be280;
158-
color: white;
154+
background: #892be280;
155+
color: white;
159156
}
160157

161158
::-moz-selection {
162159
background: #8a2be280;
163160
color: white;
164161
}
165162

166-
*{
163+
* {
167164
scrollbar-width: 4px;
168165
scrollbar-color: #8a2be2 #121212;
169166
}
170167

168+
169+
/* Markdown Styles */
171170
.markdown-body {
172-
color: #c9d1d9 !important;
173-
/* padding: 20px !important; */
171+
color: #fff !important;
174172
}
175173

176-
/* Add specific styling for markdown elements */
174+
/* Heading */
177175
.markdown-body h1 {
178-
font-size: 2em !important;
176+
font-weight: 600;
177+
font-size: clamp(3rem, 2.7857rem + 1.0714vw, 4.5rem);
179178
margin-bottom: 0.5em !important;
180-
color: #fff !important;
181-
border-bottom: 1px solid #30363d !important;
182-
padding-bottom: 0.3em !important;
183-
font-weight: 600 !important;
179+
border-bottom: 1px solid #ffffff5b !important;
180+
padding-bottom: 0.1em !important;
184181
}
185182

186183
.markdown-body h2 {
187-
font-size: 1.5em !important;
184+
font-size: clamp(2.2rem, 2.0857rem + 0.6714vw, 3.3rem);
185+
font-weight: 600;
188186
margin-bottom: 0.5em !important;
189-
color: #fff !important;
190-
border-bottom: 1px solid #30363d !important;
187+
border-bottom: 1px solid #ffffff5b !important;
191188
padding-bottom: 0.3em !important;
192189
}
193190

194191
.markdown-body h3 {
195-
font-size: 1.25em !important;
196-
margin-bottom: 0.5em !important;
197-
color: #fff !important;
198-
}
199-
200-
.markdown-body h4 {
201-
font-size: 1em !important;
192+
font-size: clamp(1.9rem, 1.8857rem + 0.4714vw, 2.8rem);
193+
font-weight: 600;
202194
margin-bottom: 0.5em !important;
203-
color: #fff !important;
204195
}
205196

206-
.markdown-body ul,
207-
.markdown-body ol {
208-
padding-left: 2em !important;
209-
margin-bottom: 1em !important;
197+
/* Bold Text */
198+
.markdown-body strong,
199+
.markdown-body b {
200+
font-weight: 700;
210201
}
211202

212-
.markdown-body li {
213-
margin: 0.25em 0 !important;
214-
list-style-type: disc !important;
203+
/* Italic Text */
204+
.markdown-body em,
205+
.markdown-body i {
206+
font-style: italic;
215207
}
216208

217-
.markdown-body ol li {
218-
list-style-type: decimal !important;
209+
/* Horizontal Rule */
210+
.markdown-body hr {
211+
border: 0;
212+
height: 1px;
213+
background: #ffffff5b;
214+
margin: 1.5em 0;
219215
}
220216

221-
.markdown-body code {
222-
background-color: #161b22 !important;
223-
padding: 0.2em 0.4em !important;
224-
border-radius: 3px !important;
225-
font-family: monospace !important;
217+
/* Blockquote */
218+
.markdown-body blockquote {
219+
padding: 0 1em !important;
220+
color: #eeeeee !important;
221+
border-left: 0.25em solid #30363d !important;
222+
margin-bottom: 1em !important;
226223
}
227224

225+
/* Code Block */
228226
.markdown-body pre {
229227
background-color: #161b22 !important;
230228
padding: 16px !important;
@@ -238,15 +236,117 @@
238236
padding: 0 !important;
239237
}
240238

241-
.markdown-body blockquote {
242-
padding: 0 1em !important;
243-
color: #8b949e !important;
244-
border-left: 0.25em solid #30363d !important;
239+
/* Inline Code */
240+
.markdown-body code {
241+
background-color: #161b22 !important;
242+
padding: 0.2em 0.4em !important;
243+
border-radius: 3px !important;
244+
font-family: monospace !important;
245+
}
246+
247+
/* Ordered and Unordered Lists */
248+
.markdown-body ul,
249+
.markdown-body ol {
250+
padding-left: 2em !important;
245251
margin-bottom: 1em !important;
246252
}
247253

254+
.markdown-body li {
255+
margin: 0.25em 0 !important;
256+
list-style-type: disc !important;
257+
}
258+
259+
.markdown-body ol li {
260+
list-style-type: decimal !important;
261+
}
262+
263+
/* Paragraph */
248264
.markdown-body p {
249-
margin-bottom: 1em !important;
265+
font-weight: 300;
266+
font-size: 1.15rem;
267+
margin-bottom: 1rem;
268+
}
269+
270+
/* Links */
271+
.markdown-body a {
272+
color: #fff;
273+
font-weight: 500;
274+
text-decoration: none;
275+
border-bottom: #fff 1px solid;
276+
transition: all 0.3s;
277+
}
278+
279+
.markdown-body a:hover {
280+
color: #8a2be2;
281+
text-decoration: none;
282+
}
283+
284+
/* Checkbox (for task lists) */
285+
.markdown-body input[type="checkbox"] {
286+
margin: 0 0.5em 0 0;
287+
vertical-align: middle;
288+
}
289+
290+
/* Table */
291+
.markdown-body table {
292+
width: 100%;
293+
border-collapse: collapse;
294+
margin-bottom: 1em;
295+
}
296+
297+
.markdown-body th,
298+
.markdown-body td {
299+
border: 1px solid #ffffff5b;
300+
padding: 0.5em;
301+
text-align: left;
302+
}
303+
304+
.markdown-body th {
305+
font-weight: 600;
306+
background-color: #161b22;
307+
}
308+
309+
/* Custom ID Headings */
310+
.markdown-body h1[id],
311+
.markdown-body h2[id],
312+
.markdown-body h3[id] {
313+
position: relative;
314+
}
315+
316+
.markdown-body h1[id]::after,
317+
.markdown-body h2[id]::after,
318+
.markdown-body h3[id]::after {
319+
content: "#" attr(id);
320+
font-size: 0.8em;
321+
color: #ffffff5b;
322+
margin-left: 0.5em;
323+
text-decoration: none;
324+
}
325+
326+
/* Footnote */
327+
.markdown-body .footnote {
328+
font-size: 0.9em;
329+
color: #bbb;
330+
margin-top: 1em;
331+
}
332+
333+
/* Highlight */
334+
.markdown-body mark {
335+
background-color: #892be280;
336+
color: #fff;
337+
padding: 0.2em;
338+
}
339+
340+
/* Subscript */
341+
.markdown-body sub {
342+
vertical-align: sub;
343+
font-size: smaller;
344+
}
345+
346+
/* Superscript */
347+
.markdown-body sup {
348+
vertical-align: super;
349+
font-size: smaller;
250350
}
251351

252352
iframe {
@@ -258,7 +358,6 @@ iframe {
258358
}
259359
@media (max-width: 768px) {
260360
iframe {
261-
262361
height: 14rem !important;
263362
}
264363
}

‎components/ArticleContent.tsx

+26-8
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,37 @@ const ArticleContent: React.FC<ArticleContentProps> = ({ content }) => {
1212
const [sanitizedContent, setSanitizedContent] = useState<string>("");
1313

1414
useEffect(() => {
15-
async function sanitizeContent() {
16-
// Convert markdown to HTML
17-
const rawContent = await marked.parse(content);
18-
19-
// Configure DOMPurify to allow iframes
20-
const cleanContent = DOMPurify.sanitize(rawContent, {
15+
async function processContent() {
16+
// Convert markdown to HTML with Marked and await the result
17+
const rawHtml = await marked.parse(content);
18+
19+
// Remove #hashtags specifically from heading text using a regex on <hN> blocks
20+
const htmlNoHashtagsInHeadings = rawHtml.replace(
21+
/(<h[1-6][^>]*>)([^<]+)(<\/h[1-6]>)/g,
22+
(match, openTag, headingText, closeTag) => {
23+
// Remove all occurrences of #something
24+
const textWithoutHashtags = headingText.replace(/#[^\s]+/g, "");
25+
return `${openTag}${textWithoutHashtags}${closeTag}`;
26+
}
27+
);
28+
29+
// Sanitize final HTML
30+
const cleanContent = DOMPurify.sanitize(htmlNoHashtagsInHeadings, {
2131
ADD_TAGS: ["iframe"],
22-
ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "height", "scrolling", "src", "width"],
32+
ADD_ATTR: [
33+
"allow",
34+
"allowfullscreen",
35+
"frameborder",
36+
"height",
37+
"scrolling",
38+
"src",
39+
"width",
40+
],
2341
});
2442

2543
setSanitizedContent(cleanContent);
2644
}
27-
sanitizeContent();
45+
processContent();
2846
}, [content]);
2947

3048
return (

‎components/AuthorCard.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
RiFacebookFill,
1111
RiLinkedinFill,
1212
RiDiscordFill,
13+
RiLink,
1314
} from "react-icons/ri";
1415

1516
// Define the social icons mapping
@@ -23,6 +24,7 @@ const SOCIAL_ICONS = {
2324
facebook: RiFacebookFill,
2425
linkedin: RiLinkedinFill,
2526
discord: RiDiscordFill,
27+
link: RiLink,
2628
};
2729

2830
// AuthorCard component

0 commit comments

Comments
 (0)