Skip to content

Commit 8b2228f

Browse files
pomberpomber
authored
Merge pull request #158 from code-hike/docusaurus-example
Docusaurus example
2 parents 16db849 + f346520 commit 8b2228f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+6864
-280
lines changed

‎examples/.prettierrc

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
{
2-
"semi": false
2+
"semi": false,
3+
"overrides": [
4+
{
5+
"files": "*.md",
6+
"options": {
7+
"parser": "mdx"
8+
}
9+
}
10+
]
311
}

‎examples/docusaurus/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎examples/docusaurus/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎examples/docusaurus/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎examples/docusaurus/blog/2019-05-28-first-blog-post.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
slug: first-blog-post
3+
title: First Blog Post
4+
authors:
5+
name: Gao Wei
6+
title: Docusaurus Core Team
7+
url: https://github.com/wgao19
8+
image_url: https://github.com/wgao19.png
9+
tags: [hola, docusaurus]
10+
---
11+
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

‎examples/docusaurus/blog/2019-05-29-long-blog-post.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
slug: long-blog-post
3+
title: Long Blog Post
4+
authors: endi
5+
tags: [hello, docusaurus]
6+
---
7+
8+
This is the summary of a very long blog post,
9+
10+
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
11+
12+
{/* truncate */}
13+
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
15+
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
17+
18+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
19+
20+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
21+
22+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
23+
24+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
25+
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
27+
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
29+
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
31+
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
33+
34+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
35+
36+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
37+
38+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
39+
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
41+
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
43+
44+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

‎examples/docusaurus/blog/2021-08-01-mdx-blog-post.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
slug: mdx-blog-post
3+
title: MDX Blog Post
4+
authors: [slorber]
5+
tags: [docusaurus]
6+
---
7+
8+
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
9+
10+
:::tip
11+
12+
Use the power of React to create interactive blog posts.
13+
14+
```js
15+
<button onClick={() => alert('button clicked!')}>Click me!</button>
16+
```
17+
18+
<button onClick={() => alert('button clicked!')}>Click me!</button>
19+
20+
:::

‎examples/docusaurus/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg

93.9 KB
Loading

‎examples/docusaurus/blog/2021-08-26-welcome/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
slug: welcome
3+
title: Welcome
4+
authors: [slorber, yangshun]
5+
tags: [facebook, hello, docusaurus]
6+
---
7+
8+
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
9+
10+
Simply add Markdown files (or folders) to the `blog` directory.
11+
12+
Regular blog authors can be added to `authors.yml`.
13+
14+
The blog post date can be extracted from filenames, such as:
15+
16+
- `2019-05-30-welcome.md`
17+
- `2019-05-30-welcome/index.md`
18+
19+
A blog post folder can be convenient to co-locate blog post images:
20+
21+
![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
22+
23+
The blog supports tags as well!
24+
25+
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

‎examples/docusaurus/blog/authors.yml

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
endi:
2+
name: Endilie Yacop Sucipto
3+
title: Maintainer of Docusaurus
4+
url: https://github.com/endiliey
5+
image_url: https://github.com/endiliey.png
6+
7+
yangshun:
8+
name: Yangshun Tay
9+
title: Front End Engineer @ Facebook
10+
url: https://github.com/yangshun
11+
image_url: https://github.com/yangshun.png
12+
13+
slorber:
14+
name: Sébastien Lorber
15+
title: Docusaurus maintainer
16+
url: https://sebastienlorber.com
17+
image_url: https://github.com/slorber.png

‎examples/docusaurus/docs/intro.md

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Code Hike + Docusaurus
6+
7+
You can create a new Docusaurus website with:
8+
9+
```
10+
npx create-docusaurus@latest my-website classic
11+
```
12+
13+
To use Code Hike we need to add these dependencies:
14+
15+
```
16+
cd my-website
17+
npm i @mdx-js/react docusaurus-theme-mdx-v2 @code-hike/mdx
18+
```
19+
20+
<CH.Scrollycoding>
21+
22+
```js docusaurus.config.js focus=7
23+
/** @type {import('@docusaurus/types').Config} */
24+
const config = {
25+
presets: [
26+
// ...
27+
],
28+
29+
themes: ["mdx-v2"],
30+
31+
themeConfig:
32+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
33+
({
34+
navbar: {
35+
// ...
36+
},
37+
}),
38+
}
39+
40+
module.exports = config
41+
```
42+
43+
## MDX v2 theme
44+
45+
Code Hike requires MDX v2 but Docusaurus [doesn't support it yet](https://github.com/facebook/docusaurus/issues/4029). That's why we are using the [MDX v2 theme](https://github.com/pomber/docusaurus-mdx-2).
46+
47+
We've already added the dependency, now we need to add the theme to the `docusaurus.config.js` with _`themes: ["mdx-v2"]`_..
48+
49+
> There may be a few docusaurs features that don't work with mdx v2 yet, make sure to check the [known issues](https://github.com/pomber/docusaurus-mdx-2#known-issues).
50+
51+
---
52+
53+
```text blog/2019-05-29-long-blog-post.md focus=12
54+
---
55+
slug: long-blog-post
56+
title: Long Blog Post
57+
authors: endi
58+
tags: [hello, docusaurus]
59+
---
60+
61+
This is the summary of a very long blog post,
62+
63+
Use a comment to limit blog post size in the list view.
64+
65+
<!--truncate-->
66+
67+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
68+
Pellentesque elementum dignissim ultricies. Fusce rhoncus
69+
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
70+
71+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
72+
Pellentesque elementum dignissim ultricies. Fusce rhoncus
73+
ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
74+
75+
```
76+
77+
MDX v2 has some breaking changes in the syntax. So if you already have content using mdx v1 make sure to migrate to the new syntax. You can find [the migration guide on the mdx website](https://mdxjs.com/migrating/v2/).
78+
79+
If you are following this guide with the Docusaurus template the only change we need to make is one comment in the blog post `2019-05-29-long-blog-post.md`.
80+
81+
Change it from `<!--truncate-->` to `{/* truncate */}`.
82+
83+
---
84+
85+
{/* prettier-ignore */}
86+
```js docusaurus.config.js focus=1:4,13:15
87+
const theme = require("shiki/themes/nord.json")
88+
const {
89+
remarkCodeHike,
90+
} = require("@code-hike/mdx")
91+
92+
/** @type {import('@docusaurus/types').Config} */
93+
const config = {
94+
presets: [
95+
[
96+
"classic",
97+
{
98+
docs: {
99+
beforeDefaultRemarkPlugins: [
100+
[remarkCodeHike, { theme }],
101+
],
102+
sidebarPath: require.resolve("./sidebars.js"),
103+
},
104+
},
105+
],
106+
],
107+
108+
themes: ["mdx-v2"],
109+
110+
themeConfig:
111+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
112+
({
113+
navbar: {
114+
// ...
115+
},
116+
}),
117+
};
118+
119+
module.exports = config;
120+
```
121+
122+
Now that Docusaurus can render MDX v2 we can add Code Hike to the `docusaurus.config.js`.
123+
124+
We need to import the `remarkCodeHike` function from the _`@code-hike/mdx`_ package, and add it to the _`beforeDefaultRemarkPlugins`_ array.
125+
126+
Next to the plugin you can pass a [config object](focus://14[30:38]). Almost always you'll want to pass a theme there. You can import one from shiki, or make a custom one.
127+
128+
You can also pass more options, like `lineNumbers` for example. See the [configuration docs](/docs/intro) for more information.
129+
130+
---
131+
132+
{/* prettier-ignore */}
133+
```js docusaurus.config.js focus=19,20,22
134+
const theme = require("shiki/themes/nord.json")
135+
const {
136+
remarkCodeHike,
137+
} = require("@code-hike/mdx")
138+
139+
/** @type {import('@docusaurus/types').Config} */
140+
const config = {
141+
presets: [
142+
[
143+
"classic",
144+
{
145+
docs: {
146+
beforeDefaultRemarkPlugins: [
147+
[remarkCodeHike, { theme }],
148+
],
149+
sidebarPath: require.resolve("./sidebars.js"),
150+
},
151+
theme: {
152+
customCss: [
153+
require.resolve("@code-hike/mdx/styles.css"),
154+
require.resolve("./src/css/custom.css"),
155+
],
156+
},
157+
},
158+
],
159+
],
160+
161+
themes: ["mdx-v2"],
162+
163+
themeConfig:
164+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
165+
({
166+
navbar: {
167+
// ...
168+
},
169+
}),
170+
};
171+
172+
module.exports = config;
173+
```
174+
175+
Then we need to import Code Hike's stylesheet.
176+
177+
There's a `customCSS` property in the theme config. You can replace it with an array and add Code Hike's stylesheet to it.
178+
179+
If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
180+
181+
You can learn more about customizing Code Hike styles in the [styling docs](/docs/intro).
182+
183+
</CH.Scrollycoding>
184+
185+
The code for this tutorial is available on [GitHub](https://github.com/code-hike/codehike/tree/main/examples/docusaurus).
186+
187+
You can also try it out from your browser on Stackblitz.

‎examples/docusaurus/docs/tutorial-basics/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Tutorial - Basics",
3+
"position": 2
4+
}

0 commit comments

Comments
 (0)