Skip to content

Commit 93f285d

Browse files
JoshuaKGoldbergJosh-Cenabradzacher
authored
chore(website): allow markdown in titles (typescript-eslint#9839)
* chore(website): allow markdown in titles * Update packages/website/src/theme/BlogSidebar/Content/index.tsx Co-authored-by: Brad Zacher <brad.zacher@gmail.com> * fix stylelint * Fix knip * Back to the type assertion --------- Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Brad Zacher <brad.zacher@gmail.com>
1 parent 57e4120 commit 93f285d

File tree

7 files changed

+145
-1
lines changed

7 files changed

+145
-1
lines changed

‎knip.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export default {
8787
'@docusaurus/mdx-loader',
8888
'@docusaurus/types',
8989
'@docusaurus/plugin-content-docs',
90+
'@docusaurus/plugin-content-blog/client',
9091
'@docusaurus/theme-search-algolia',
9192
'@docusaurus/ExecutionEnvironment',
9293
'@docusaurus/Link',
@@ -99,7 +100,6 @@ export default {
99100
'^@theme/.*',
100101
'^@theme-original/.*',
101102
'docusaurus-plugin-typedoc',
102-
'typedoc',
103103
'typedoc-plugin-markdown',
104104
],
105105
},

‎packages/website/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"prism-react-renderer": "^2.3.1",
3636
"react": "^18.2.0",
3737
"react-dom": "^18.2.0",
38+
"react-markdown": "^9.0.1",
3839
"react-resizable-panels": "^0.0.63",
3940
"semver": "^7.6.0",
4041
"typedoc": "^0.25.13",

‎packages/website/src/theme/BlogPostItem/Header/Title/index.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Link from '@docusaurus/Link';
2+
import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
3+
import type { Props } from '@theme/BlogPostItem/Header/Title';
4+
import clsx from 'clsx';
5+
import React from 'react';
6+
import Markdown from 'react-markdown';
7+
8+
import styles from './styles.module.css';
9+
10+
export default function BlogPostItemHeaderTitle({
11+
className,
12+
}: Props): React.JSX.Element {
13+
const { metadata, isBlogPostPage } = useBlogPost();
14+
const { permalink, title: titleRaw } = metadata;
15+
const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
16+
const title = <Markdown>{titleRaw}</Markdown>;
17+
return (
18+
<TitleHeading className={clsx(styles.title, className)}>
19+
{isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
20+
</TitleHeading>
21+
);
22+
}

‎packages/website/src/theme/BlogPostItem/Header/Title/styles.module.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.title {
2+
font-size: 3rem;
3+
}
4+
5+
.title code {
6+
background: none;
7+
border: none;
8+
display: inline;
9+
}
10+
11+
/**
12+
Blog post title should be smaller on smaller devices
13+
**/
14+
@media screen and (width <= 576px) {
15+
.title {
16+
font-size: 2rem;
17+
}
18+
}

‎packages/website/src/theme/BlogSidebar/Content/index.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { groupBlogSidebarItemsByYear } from '@docusaurus/plugin-content-blog/client';
2+
import { useThemeConfig } from '@docusaurus/theme-common';
3+
import type { Props } from '@theme/BlogSidebar/Content';
4+
import Heading from '@theme/Heading';
5+
import type { ReactNode } from 'react';
6+
import React, { memo } from 'react';
7+
import Markdown from 'react-markdown';
8+
9+
import styles from './styles.module.css';
10+
11+
function BlogSidebarYearGroup({
12+
year,
13+
yearGroupHeadingClassName,
14+
children,
15+
}: {
16+
year: string;
17+
yearGroupHeadingClassName?: string;
18+
children: ReactNode;
19+
}): React.JSX.Element {
20+
return (
21+
<div className={styles.blogSidebarContent} role="group">
22+
<Heading as="h3" className={yearGroupHeadingClassName}>
23+
{year}
24+
</Heading>
25+
{children}
26+
</div>
27+
);
28+
}
29+
30+
function BlogSidebarContent({
31+
items: itemsRaw,
32+
yearGroupHeadingClassName,
33+
ListComponent,
34+
}: Props): ReactNode {
35+
const items = itemsRaw.map(item => ({
36+
...item,
37+
title: (<Markdown>{item.title}</Markdown>) as unknown as string,
38+
}));
39+
40+
const themeConfig = useThemeConfig();
41+
42+
if (themeConfig.blog.sidebar.groupByYear) {
43+
const itemsByYear = groupBlogSidebarItemsByYear(items);
44+
return (
45+
<>
46+
{itemsByYear.map(([year, yearItems]) => (
47+
<BlogSidebarYearGroup
48+
key={year}
49+
year={year}
50+
yearGroupHeadingClassName={yearGroupHeadingClassName}
51+
>
52+
<ListComponent items={yearItems} />
53+
</BlogSidebarYearGroup>
54+
))}
55+
</>
56+
);
57+
}
58+
59+
return (
60+
<div className={styles.blogSidebarContent}>
61+
<ListComponent items={items} />
62+
</div>
63+
);
64+
}
65+
66+
export default memo(BlogSidebarContent);

‎packages/website/src/theme/BlogSidebar/Content/styles.module.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.blogSidebarContent code {
2+
background: none;
3+
border: none;
4+
}
5+
6+
.blogSidebarContent p {
7+
margin: 0;
8+
}

‎yarn.lock

+29
Original file line numberDiff line numberDiff line change
@@ -11606,6 +11606,13 @@ __metadata:
1160611606
languageName: node
1160711607
linkType: hard
1160811608

11609+
"html-url-attributes@npm:^3.0.0":
11610+
version: 3.0.0
11611+
resolution: "html-url-attributes@npm:3.0.0"
11612+
checksum: 9f499d33e6ddff6c2d2766fd73d2f22f3c370b4e485a92b0b2938303665b306dc7f36b2724c9466764e8f702351c01f342f5ec933be41a31c1fa40b72087b91d
11613+
languageName: node
11614+
linkType: hard
11615+
1160911616
"html-void-elements@npm:^3.0.0":
1161011617
version: 3.0.0
1161111618
resolution: "html-void-elements@npm:3.0.0"
@@ -16977,6 +16984,27 @@ __metadata:
1697716984
languageName: node
1697816985
linkType: hard
1697916986

16987+
"react-markdown@npm:^9.0.1":
16988+
version: 9.0.1
16989+
resolution: "react-markdown@npm:9.0.1"
16990+
dependencies:
16991+
"@types/hast": ^3.0.0
16992+
devlop: ^1.0.0
16993+
hast-util-to-jsx-runtime: ^2.0.0
16994+
html-url-attributes: ^3.0.0
16995+
mdast-util-to-hast: ^13.0.0
16996+
remark-parse: ^11.0.0
16997+
remark-rehype: ^11.0.0
16998+
unified: ^11.0.0
16999+
unist-util-visit: ^5.0.0
17000+
vfile: ^6.0.0
17001+
peerDependencies:
17002+
"@types/react": ">=18"
17003+
react: ">=18"
17004+
checksum: ca1daa650d48b84a5a9771683cdb3f3d2d418247ce0faf73ede3207c65f2a21cdebb9df37afda67f6fc8f0f0a7b9ce00eb239781954a4d6c7ad88ea4df068add
17005+
languageName: node
17006+
linkType: hard
17007+
1698017008
"react-resizable-panels@npm:^0.0.63":
1698117009
version: 0.0.63
1698217010
resolution: "react-resizable-panels@npm:0.0.63"
@@ -20171,6 +20199,7 @@ __metadata:
2017120199
raw-loader: ^4.0.2
2017220200
react: ^18.2.0
2017320201
react-dom: ^18.2.0
20202+
react-markdown: ^9.0.1
2017420203
react-resizable-panels: ^0.0.63
2017520204
rimraf: "*"
2017620205
semver: ^7.6.0

0 commit comments

Comments
 (0)