Skip to content

Commit 0983368

Browse files
pomberpomber
authored
Merge pull request #47 from code-hike/use-new-sandpack
Use new sandpack
2 parents d0d38f0 + 52daf46 commit 0983368

File tree

11 files changed

+409
-129
lines changed

11 files changed

+409
-129
lines changed

‎external/new-react-website

‎packages/scrollycoding/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
"@code-hike/mini-browser": "^0.3.0-next.0",
2323
"@code-hike/mini-editor": "^0.3.0-next.0",
2424
"@code-hike/scroller": "^0.3.0-next.0",
25+
"@codesandbox/sandpack-react": "^0.0.1",
2526
"object-hash": "^2.1.1",
26-
"react-smooshpack": "1.0.0-alpha-31",
2727
"server-side-media-queries-for-react": "^0.0.5"
2828
},
2929
"peerDependencies": {

‎packages/scrollycoding/src/code.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react"
22
import { MiniEditorWithState } from "@code-hike/mini-editor"
33
import { CodeProps } from "./hike-context"
4-
import { useCodeSandboxLink } from "react-smooshpack"
4+
import { useCodeSandboxLink } from "@codesandbox/sandpack-react"
55

66
export { Code }
77

‎packages/scrollycoding/src/demo-context.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useContext } from "react"
22
import {
33
SandpackFiles,
44
SandpackProvider,
5-
} from "react-smooshpack"
5+
} from "@codesandbox/sandpack-react"
66
import {
77
CodeFiles,
88
CodeProps,

‎packages/scrollycoding/src/hike-context.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StatefulEditorProps } from "@code-hike/mini-editor"
44
import {
55
SandpackPredefinedTemplate,
66
SandpackSetup,
7-
} from "react-smooshpack"
7+
} from "@codesandbox/sandpack-react"
88
import React from "react"
99

1010
export interface Preset {

‎packages/scrollycoding/src/index.scss

+43-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@
66
--sp-colors-fg-default: #999999;
77
}
88

9-
.ch-hike .sp-preview-frame {
10-
height: 100%;
11-
display: flex;
12-
}
13-
149
.ch-hike-fluid {
1510
display: flex;
1611
--sticker-height: 650px;
@@ -110,3 +105,46 @@
110105
}
111106

112107
@import "focus.scss";
108+
@import "preview-loader.scss";
109+
110+
// sandpack
111+
112+
.ch-hike .sp-preview-frame {
113+
height: 100%;
114+
display: flex;
115+
}
116+
117+
.ch-hike .sp-overlay {
118+
position: absolute;
119+
bottom: 0;
120+
left: 0;
121+
right: 0;
122+
top: 0;
123+
margin: 0;
124+
overflow: auto;
125+
height: 100%;
126+
z-index: 3;
127+
}
128+
129+
.ch-hike .sp-loading {
130+
display: none;
131+
}
132+
133+
.ch-hike .sp-error {
134+
box-sizing: border-box;
135+
padding: 16px;
136+
white-space: pre-wrap;
137+
font-family: "Fira Mono", "DejaVu Sans Mono", Menlo,
138+
Consolas, "Liberation Mono", Monaco, "Lucida Console",
139+
monospace;
140+
background-color: rgb(255, 205, 202);
141+
}
142+
143+
.ch-hike .sp-error-message {
144+
color: #811e18;
145+
font-size: 0.75em;
146+
}
147+
148+
.ch-hike .sp-preview-iframe {
149+
min-height: unset;
150+
}

‎packages/scrollycoding/src/preview-loader.scss

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.ch-hike-loading {
2+
position: absolute;
3+
bottom: 0;
4+
left: 0;
5+
right: 0;
6+
top: 0;
7+
margin: 0;
8+
overflow: auto;
9+
height: 100%;
10+
11+
background-color: #f8f9fb;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
z-index: 15;
16+
}
17+
18+
.ch-hike-loading-cubes {
19+
display: inline-block;
20+
position: relative;
21+
width: 80px;
22+
height: 80px;
23+
}
24+
25+
.ch-hike-loading-cubes div {
26+
position: absolute;
27+
top: 32px;
28+
width: 12px;
29+
height: 12px;
30+
background: #757678;
31+
-webkit-animation-timing-function: cubic-bezier(
32+
0,
33+
1,
34+
1,
35+
0
36+
);
37+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
38+
}
39+
40+
.ch-hike-loading-cubes div:first-child {
41+
left: 8px;
42+
-webkit-animation: ch-hike-grow 0.6s infinite;
43+
animation: ch-hike-grow 0.6s infinite;
44+
}
45+
46+
.ch-hike-loading-cubes div:nth-child(2) {
47+
left: 8px;
48+
}
49+
50+
.ch-hike-loading-cubes div:nth-child(2),
51+
.ch-hike-loading-cubes div:nth-child(3) {
52+
-webkit-animation: ch-hike-move 0.6s infinite;
53+
animation: ch-hike-move 0.6s infinite;
54+
}
55+
56+
.ch-hike-loading-cubes div:nth-child(3) {
57+
left: 32px;
58+
}
59+
60+
.ch-hike-loading-cubes div:nth-child(4) {
61+
left: 56px;
62+
-webkit-animation: ch-hike-shrink 0.6s infinite;
63+
animation: ch-hike-shrink 0.6s infinite;
64+
}
65+
66+
@keyframes ch-hike-grow {
67+
0% {
68+
transform: scale(0);
69+
}
70+
71+
to {
72+
transform: scale(1);
73+
}
74+
}
75+
76+
@keyframes ch-hike-shrink {
77+
0% {
78+
transform: scale(1);
79+
}
80+
81+
to {
82+
transform: scale(0);
83+
}
84+
}
85+
86+
@keyframes ch-hike-move {
87+
0% {
88+
transform: translate(0);
89+
}
90+
91+
to {
92+
transform: translate(24px);
93+
}
94+
}

‎packages/scrollycoding/src/preview-loader.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react"
2+
import { useLoadingOverlayState } from "@codesandbox/sandpack-react"
3+
import { useClasser } from "@code-hike/classer"
4+
5+
export function LoadingOverlay() {
6+
const c = useClasser("ch-hike")
7+
const loadingOverlayState = useLoadingOverlayState()
8+
return loadingOverlayState === "visible" ? (
9+
<div className={c("loading")}>
10+
<div className={c("loading-cubes")}>
11+
<div></div>
12+
<div></div>
13+
<div></div>
14+
<div></div>
15+
</div>
16+
</div>
17+
) : null
18+
}

‎packages/scrollycoding/src/preview.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,31 @@ import * as React from "react"
22
import {
33
SandpackPreview,
44
useCodeSandboxLink,
5-
} from "react-smooshpack"
5+
} from "@codesandbox/sandpack-react"
66
import { MiniBrowser } from "@code-hike/mini-browser"
77
import { PreviewProps } from "./hike-context"
8+
import { LoadingOverlay } from "./preview-loader"
89

910
export { Preview, PreviewProps }
1011

1112
function Preview({ filesHash, ...props }: PreviewProps) {
1213
const link = useCodeSandboxLink()
1314
const preview = React.useMemo(() => {
1415
return (
15-
<SandpackPreview
16-
showNavigator={false}
17-
showRefreshButton={false}
18-
showOpenInCodeSandbox={false}
19-
customStyle={{
20-
minHeight: "unset",
21-
height: "100%",
22-
border: 0,
23-
margin: 0,
24-
}}
25-
/>
16+
<>
17+
<LoadingOverlay />
18+
<SandpackPreview
19+
showNavigator={false}
20+
showRefreshButton={false}
21+
showOpenInCodeSandbox={false}
22+
customStyle={{
23+
minHeight: "unset",
24+
height: "100%",
25+
border: 0,
26+
margin: 0,
27+
}}
28+
/>
29+
</>
2630
)
2731
}, [link])
2832

‎packages/storybook/src/assets/scrollycoding.basic.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,18 @@ export default function App() {
6060

6161
Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. <Focus on="2" >Integer aliquet</Focus> lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. <Focus on="3" >Aenean `sollicitudin`</Focus> tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
6262

63+
<StepHead focus="1[16:29]">
64+
65+
```jsx
66+
export default function App() {
67+
return thisShouldFail
68+
}
69+
```
70+
71+
</StepHead>
72+
73+
Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. <Focus on="2" >Integer aliquet</Focus> lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. <Focus on="3" >Aenean `sollicitudin`</Focus> tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
74+
6375
</Hike>
6476

6577
# Goodbye

0 commit comments

Comments
 (0)