Skip to content

Commit 746f79c

Browse files
pomberpomber
committed
Update remix
1 parent 341cc00 commit 746f79c

File tree

9 files changed

+247
-75
lines changed

9 files changed

+247
-75
lines changed

‎examples/nextjs/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Next.js + Code Hike
22

3-
See [this guide](https://codehike.org/docs/installation/nextjs) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/nextjs).
3+
See [this guide](https://codehike.org/docs/installation/nextjs) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/nextjs?file=pages/index.mdx).

‎examples/nextjs/pages/scrollycoding.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
44

55
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.
66

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+
79
<CH.Scrollycoding>
810

911
## Step 1
@@ -142,3 +144,5 @@ Morbi quis commodo.
142144
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.
143145

144146
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+
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.

‎examples/nextra/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Nextra + Code Hike
22

3-
See [this guide](https://codehike.org/docs/installation/nextra) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/nextra).
3+
See [this guide](https://codehike.org/docs/installation/nextra) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/nextra?file=pages/index.mdx).

‎examples/remix/README.md‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,3 @@
1-
# Welcome to Remix!
1+
# Remix + Code Hike
22

3-
- [Remix Docs](https://remix.run/docs)
4-
5-
## Development
6-
7-
From your terminal:
8-
9-
```sh
10-
npm run dev
11-
```
12-
13-
This starts your app in development mode, rebuilding assets on file changes.
14-
15-
## Deployment
16-
17-
First, build your app for production:
18-
19-
```sh
20-
npm run build
21-
```
22-
23-
Then run the app in production mode:
24-
25-
```sh
26-
npm start
27-
```
28-
29-
Now you'll need to pick a host to deploy it to.
30-
31-
### DIY
32-
33-
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
34-
35-
Make sure to deploy the output of `remix build`
36-
37-
- `build/`
38-
- `public/build/`
39-
40-
### Using a Template
41-
42-
When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
43-
44-
```sh
45-
cd ..
46-
# create a new project, and pick a pre-configured host
47-
npx create-remix@latest
48-
cd my-new-remix-app
49-
# remove the new project's app (not the old one!)
50-
rm -rf app
51-
# copy your app over
52-
cp -R ../my-old-remix-app/app app
53-
```
3+
See [this guide](https://codehike.org/docs/installation/remix) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/remix?file=app/routes/index.mdx).

‎examples/remix/app/root.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import {
44
Meta,
55
Outlet,
66
Scripts,
7-
ScrollRestoration
8-
} from "remix";
9-
import codeHikeStyles from "@code-hike/mdx/styles.css";
7+
ScrollRestoration,
8+
} from "remix"
9+
import codeHikeStyles from "@code-hike/mdx/styles.css"
1010

1111
export function meta() {
12-
return { title: "New Remix App" };
12+
return { title: "New Remix App" }
1313
}
1414

1515
export function links() {
16-
return [{ rel: "stylesheet", href: codeHikeStyles }];
16+
return [{ rel: "stylesheet", href: codeHikeStyles }]
1717
}
1818

1919
export default function App() {
@@ -25,12 +25,14 @@ export default function App() {
2525
<Meta />
2626
<Links />
2727
</head>
28-
<body>
28+
<body
29+
style={{ maxWidth: 768, margin: "0 auto", fontFamily: "sans-serif" }}
30+
>
2931
<Outlet />
3032
<ScrollRestoration />
3133
<Scripts />
3234
<LiveReload />
3335
</body>
3436
</html>
35-
);
37+
)
3638
}

‎examples/remix/app/routes/index.jsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎examples/remix/app/routes/my.mdx‎ renamed to ‎examples/remix/app/routes/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ print("Rendered with Code Hike")
77
```
88

99
Lorem ipsum dolor sit amet.
10+
11+
See also [Scrollycoding](/scrollycoding) and [Spotlight](/spotlight).

‎examples/remix/app/routes/scrollycoding.mdx‎

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

‎examples/remix/app/routes/spotlight.mdx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Spotlight
2+
3+
This is how to use the `<CH.Spotlight>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
4+
5+
<CH.Spotlight>
6+
7+
```js app.js
8+
function lorem(ipsum, dolor = 1) {
9+
const sit = ipsum == null && 0
10+
dolor = sit - amet(dolor)
11+
return sit ? consectetur(ipsum) : []
12+
}
13+
```
14+
15+
---
16+
17+
Change focus
18+
19+
```js app.js focus=2:4
20+
21+
```
22+
23+
---
24+
25+
Or change the code
26+
27+
```js app.js focus=6:10
28+
function lorem(ipsum, dolor = 1) {
29+
const sit = ipsum == null && 0
30+
dolor = sit - amet(dolor)
31+
return sit ? consectetur(ipsum) : []
32+
}
33+
34+
function adipiscing(...elit) {
35+
console.log(elit)
36+
return elit.map((ipsum) => ipsum.sit)
37+
}
38+
```
39+
40+
---
41+
42+
Or change the file
43+
44+
<CH.Code>
45+
46+
```js app.js focus=1:4
47+
function adipiscing(...elit) {
48+
console.log(elit)
49+
return elit.map((ipsum) => ipsum.sit)
50+
}
51+
```
52+
53+
---
54+
55+
```css styles.css
56+
.lorem {
57+
color: #fff;
58+
padding: 10px;
59+
background: #000;
60+
}
61+
```
62+
63+
</CH.Code>
64+
65+
---
66+
67+
### By the way
68+
69+
- you can
70+
- put any
71+
- markdown
72+
- here
73+
74+
👍
75+
76+
```js app.js
77+
78+
```
79+
80+
</CH.Spotlight>

0 commit comments

Comments
 (0)