Skip to content

Commit 62399d5

Browse files
pomberpomber
committed
Add gatsby example
1 parent 9de00f2 commit 62399d5

File tree

10 files changed

+5795
-428
lines changed

10 files changed

+5795
-428
lines changed

‎examples/gatsby/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules/
2+
.cache/
3+
public
4+
5+
6+
# Contentlayer
7+
.contentlayer

‎examples/gatsby/README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<p align="center">
2+
<a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
3+
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
4+
</a>
5+
</p>
6+
<h1 align="center">
7+
Gatsby minimal starter
8+
</h1>
9+
10+
## 🚀 Quick start
11+
12+
1. **Create a Gatsby site.**
13+
14+
Use the Gatsby CLI to create a new site, specifying the minimal starter.
15+
16+
```shell
17+
# create a new Gatsby site using the minimal starter
18+
npm init gatsby
19+
```
20+
21+
2. **Start developing.**
22+
23+
Navigate into your new site’s directory and start it up.
24+
25+
```shell
26+
cd my-gatsby-site/
27+
npm run develop
28+
```
29+
30+
3. **Open the code and start customizing!**
31+
32+
Your site is now running at http://localhost:8000!
33+
34+
Edit `src/pages/index.js` to see your site update in real-time!
35+
36+
4. **Learn more**
37+
38+
- [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
39+
40+
- [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
41+
42+
- [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
43+
44+
- [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
45+
46+
- [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
47+
48+
- [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
49+
50+
## 🚀 Quick start (Gatsby Cloud)
51+
52+
Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
53+
54+
[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)

‎examples/gatsby/gatsby-browser.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "@code-hike/mdx/styles.css"

‎examples/gatsby/gatsby-config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const { remarkCodeHike } = require("@code-hike/mdx")
2+
const theme = require("shiki/themes/nord.json")
3+
4+
module.exports = {
5+
siteMetadata: {
6+
title: `gatsby`,
7+
siteUrl: `https://www.yourdomain.tld`,
8+
},
9+
plugins: [
10+
{
11+
resolve: `gatsby-plugin-mdx`,
12+
options: {
13+
extensions: [`.mdx`, `.md`],
14+
mdxOptions: {
15+
remarkPlugins: [[remarkCodeHike, { theme }]],
16+
},
17+
},
18+
},
19+
{
20+
resolve: "gatsby-source-filesystem",
21+
options: {
22+
name: "pages",
23+
path: "./src/pages/",
24+
},
25+
__key: "pages",
26+
},
27+
],
28+
}

‎examples/gatsby/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "codehike-gatsby",
3+
"version": "0.7.3",
4+
"private": true,
5+
"scripts": {
6+
"develop": "gatsby develop",
7+
"start": "gatsby develop",
8+
"build": "gatsby build",
9+
"serve": "gatsby serve",
10+
"clean": "gatsby clean"
11+
},
12+
"dependencies": {
13+
"@code-hike/mdx": "^0.7.3",
14+
"@mdx-js/react": "^2.1.3",
15+
"gatsby": "^4.21.1",
16+
"gatsby-plugin-mdx": "^4.0.0",
17+
"gatsby-source-filesystem": "^4.21.1",
18+
"react": "^18.1.0",
19+
"react-dom": "^18.1.0"
20+
}
21+
}

‎examples/gatsby/src/pages/404.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from "react"
2+
import { Link } from "gatsby"
3+
4+
const pageStyles = {
5+
color: "#232129",
6+
padding: "96px",
7+
fontFamily: "-apple-system, Roboto, sans-serif, serif",
8+
}
9+
const headingStyles = {
10+
marginTop: 0,
11+
marginBottom: 64,
12+
maxWidth: 320,
13+
}
14+
15+
const paragraphStyles = {
16+
marginBottom: 48,
17+
}
18+
const codeStyles = {
19+
color: "#8A6534",
20+
padding: 4,
21+
backgroundColor: "#FFF4DB",
22+
fontSize: "1.25rem",
23+
borderRadius: 4,
24+
}
25+
26+
const NotFoundPage = () => {
27+
return (
28+
<main style={pageStyles}>
29+
<h1 style={headingStyles}>Page not found</h1>
30+
<p style={paragraphStyles}>
31+
Sorry 😔, we couldn’t find what you were looking for.
32+
<br />
33+
{process.env.NODE_ENV === "development" ? (
34+
<>
35+
<br />
36+
Try creating a page in <code style={codeStyles}>src/pages/</code>.
37+
<br />
38+
</>
39+
) : null}
40+
<br />
41+
<Link to="/">Go home</Link>.
42+
</p>
43+
</main>
44+
)
45+
}
46+
47+
export default NotFoundPage
48+
49+
export const Head = () => <title>Not found</title>

‎examples/gatsby/src/pages/hello.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
slug: /hello
3+
---
4+
5+
# Hello
6+
7+
Lorem ipsum dolor sit amet.
8+
9+
```python hello.py mark=1[22:30]
10+
print("Rendered with Code Hike")
11+
```
12+
13+
Lorem ipsum dolor sit amet.
14+
15+
See also [Scrollycoding page](/scrollycoding).

‎examples/gatsby/src/pages/index.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
slug: /indexs
3+
---
4+
5+
# Hello
6+
7+
Lorem ipsum dolor sit amet.
8+
9+
```python hello.py mark=1[22:30]
10+
print("Rendered with Code Hike")
11+
```
12+
13+
Lorem ipsum dolor sit amet.
14+
15+
See also [Scrollycoding page](/scrollycoding).

‎examples/gatsby/src/pages/scrollycoding.mdx

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
slug: /scrollycoding
3+
---
4+
5+
# Scrollycoding
6+
7+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
8+
9+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
10+
11+
<CH.Scrollycoding>
12+
13+
## Step 1
14+
15+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16+
17+
> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
18+
> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
19+
> eripuit, qua fistula haec partus; serpens, negat.
20+
21+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
22+
23+
```js app.js focus=3:10
24+
const { lorem, ipsum } = dolor({
25+
sit: {
26+
amet: 1,
27+
consectetur: 2,
28+
adipiscing: (elit) => ({
29+
sed: elit,
30+
}),
31+
eiusmod: (tempor) => ({
32+
incididunt: tempor,
33+
}),
34+
ut: (labore) => ({
35+
et: labore,
36+
dolore: labore + 1,
37+
}),
38+
magna: (aliqua) => ({
39+
ut: aliqua,
40+
}),
41+
nostrud: (elit) => ({
42+
exercitation: elit,
43+
ullamco: elit,
44+
}),
45+
laboris: (elit) => ({
46+
nisi: elit,
47+
}),
48+
},
49+
})
50+
```
51+
52+
---
53+
54+
## Step 2
55+
56+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
57+
58+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
59+
60+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
61+
62+
Morbi quis commodo.
63+
64+
```js app.js focus=11:17
65+
66+
```
67+
68+
---
69+
70+
## Step 3
71+
72+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
73+
74+
- Nisi lacus sed viverra tellus in
75+
- Nibh cras pulvinar mattis nunc sed
76+
- Luctus accumsan tortor posuere ac
77+
78+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
79+
80+
```js app.js focus=11:14
81+
const { lorem, ipsum } = dolor({
82+
sit: {
83+
amet: 1,
84+
consectetur: 2,
85+
adipiscing: (elit) => ({
86+
sed: elit,
87+
}),
88+
eiusmod: (tempor) => ({
89+
incididunt: tempor,
90+
}),
91+
ut: (labore) => ({
92+
et: lorem(labore * ipsum),
93+
dolore: lorem(labore + 1),
94+
}),
95+
nostrud: (elit) => ({
96+
exercitation: elit,
97+
ullamco: elit,
98+
}),
99+
laboris: (elit) => ({
100+
nisi: elit,
101+
}),
102+
},
103+
})
104+
```
105+
106+
---
107+
108+
## Step 4
109+
110+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
111+
112+
Sed blandit libero volutpat sed cras.
113+
114+
- Nisi lacus sed viverra tellus in
115+
- Nibh cras pulvinar mattis nunc sed
116+
117+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
118+
119+
```js app.js focus=15:21
120+
121+
```
122+
123+
---
124+
125+
## Step 5
126+
127+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
128+
129+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
130+
131+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
132+
133+
Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
134+
135+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
136+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
137+
138+
Morbi quis commodo.
139+
140+
```js app.js
141+
142+
```
143+
144+
</CH.Scrollycoding>
145+
146+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
147+
148+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

0 commit comments

Comments
 (0)