Skip to content

Commit 099ea14

Browse files
pomberpomber
authored
Merge pull request #116 from code-hike/pre-padding-0
Better default styles
2 parents f752074 + 056ec02 commit 099ea14

30 files changed

+399
-55
lines changed

‎packages/mdx/src/client/annotations.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React from "react"
22
import { CodeAnnotation } from "@code-hike/smooth-code"
3+
import {
4+
getColor,
5+
transparent,
6+
ColorName,
7+
} from "@code-hike/utils"
38

49
export function Annotation() {
510
return "error: code hike remark plugin not running or annotation isn't at the right place"
@@ -13,6 +18,62 @@ export const annotationsMap: Record<
1318
bg: Background,
1419
label: Label,
1520
link: CodeLink,
21+
mark: Mark,
22+
}
23+
24+
function Mark({
25+
children,
26+
data,
27+
theme,
28+
}: {
29+
data: any
30+
children: React.ReactNode
31+
theme: any
32+
}) {
33+
const bg =
34+
data && typeof data === "string"
35+
? data
36+
: tryGuessColor(children) ||
37+
transparent(
38+
getColor(theme, ColorName.CodeForeground),
39+
0.2
40+
)
41+
42+
return (
43+
<span
44+
className="ch-code-mark-annotation"
45+
style={{
46+
background: bg,
47+
borderRadius: "0.25rem",
48+
padding: "0.2rem 0.15rem 0.1rem",
49+
margin: "0 -0.15rem",
50+
}}
51+
>
52+
{children}
53+
</span>
54+
)
55+
}
56+
57+
function tryGuessColor(
58+
children: React.ReactNode
59+
): string | undefined {
60+
const child = React.Children.toArray(children)[0] as any
61+
62+
const grandChild = React.Children.toArray(
63+
child?.props?.children || []
64+
)[0] as any
65+
66+
const grandGrandChild = React.Children.toArray(
67+
grandChild?.props?.children || []
68+
)[0] as any
69+
70+
const { color } = grandGrandChild?.props?.style
71+
72+
if (color) {
73+
return transparent(color as string, 0.2)
74+
}
75+
76+
return undefined
1677
}
1778

1879
function Box({

‎packages/mdx/src/client/code.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,23 @@ export function InnerCode({
2929
!props.files[0].name
3030
) {
3131
return (
32-
<CodeSpring
33-
className="ch-code"
34-
config={props.codeConfig}
35-
step={props.files[0]}
36-
/>
32+
<div className="ch-codeblock not-prose">
33+
<CodeSpring
34+
className="ch-code"
35+
config={props.codeConfig}
36+
step={props.files[0]}
37+
/>
38+
</div>
3739
)
3840
} else {
3941
const frameProps = {
4042
...props?.frameProps,
4143
onTabClick,
4244
}
4345
return (
44-
<EditorSpring {...props} frameProps={frameProps} />
46+
<div className="ch-codegroup not-prose">
47+
<EditorSpring {...props} frameProps={frameProps} />
48+
</div>
4549
)
4650
}
4751
}

‎packages/mdx/src/client/inline-code.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react"
2+
import {
3+
EditorTheme,
4+
getColor,
5+
transparent,
6+
ColorName,
7+
} from "@code-hike/utils"
8+
9+
export function InlineCode({
10+
className,
11+
codeConfig,
12+
children,
13+
...rest
14+
}: {
15+
className: string
16+
children?: React.ReactNode
17+
codeConfig: { theme: EditorTheme }
18+
}) {
19+
const { theme } = codeConfig
20+
return (
21+
<span
22+
className={
23+
"ch-inline-code not-prose" +
24+
(className ? " " + className : "")
25+
}
26+
{...rest}
27+
>
28+
<code
29+
style={{
30+
background: transparent(
31+
getColor(theme, ColorName.CodeBackground),
32+
0.9
33+
),
34+
color: getColor(theme, ColorName.CodeForeground),
35+
}}
36+
>
37+
{children}
38+
</code>
39+
</span>
40+
)
41+
}

‎packages/mdx/src/client/preview.tsx

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,57 @@ import {
66
SandboxInfo,
77
} from "@codesandbox/sandpack-client"
88
import { EditorStep } from "@code-hike/mini-editor"
9+
import { EditorTheme } from "@code-hike/utils"
910

1011
export type PresetConfig = SandboxInfo
11-
1212
export function Preview({
1313
className,
1414
files,
1515
presetConfig,
16+
show,
17+
children,
18+
codeConfig,
19+
style,
20+
...rest
1621
}: {
1722
className: string
23+
files: EditorStep["files"]
24+
presetConfig?: PresetConfig
25+
show?: string
26+
style?: React.CSSProperties
27+
children?: React.ReactNode
28+
codeConfig: { theme: EditorTheme }
29+
}) {
30+
return (
31+
<div
32+
className={
33+
"ch-preview" + (className ? " " + className : "")
34+
}
35+
style={style}
36+
>
37+
<MiniBrowser
38+
loadUrl={show}
39+
theme={codeConfig.theme}
40+
{...rest}
41+
children={
42+
presetConfig ? (
43+
<SandpackPreview
44+
files={files}
45+
presetConfig={presetConfig}
46+
/>
47+
) : (
48+
children
49+
)
50+
}
51+
/>
52+
</div>
53+
)
54+
}
55+
56+
function SandpackPreview({
57+
files,
58+
presetConfig,
59+
}: {
1860
files: EditorStep["files"]
1961
presetConfig: PresetConfig
2062
}) {
@@ -45,11 +87,7 @@ export function Preview({
4587
}
4688
}, [files])
4789

48-
return (
49-
<MiniBrowser className={className}>
50-
<iframe ref={iframeRef} />
51-
</MiniBrowser>
52-
)
90+
return <iframe ref={iframeRef} />
5391
}
5492

5593
function mergeFiles(

‎packages/mdx/src/client/scrollycoding.scss

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,26 @@
4949
.ch-scrollycoding-sticker {
5050
height: 80vh;
5151
gap: 0.5rem;
52-
}
5352

54-
.ch-scrollycoding-sticker .ch-editor-frame,
55-
.ch-scrollycoding-sticker .ch-code {
56-
flex: 1;
53+
.ch-codeblock,
54+
.ch-codegroup {
55+
flex: 1;
56+
}
5757
}
5858

5959
.ch-scrollycoding-preview {
6060
height: 280px;
6161
}
6262
}
6363

64-
.ch-scrollycoding-sticker .ch-editor-frame,
65-
.ch-scrollycoding-sticker .ch-code {
66-
width: 100%;
67-
min-width: 100%;
68-
min-height: 200px;
69-
max-height: 80vh;
64+
.ch-scrollycoding-sticker {
65+
.ch-codeblock,
66+
.ch-codegroup {
67+
width: 100%;
68+
min-width: 100%;
69+
min-height: 200px;
70+
max-height: 80vh;
71+
margin-top: 0;
72+
margin-bottom: 0;
73+
}
7074
}

‎packages/mdx/src/client/scrollycoding.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export function Scrollycoding({
8080
className="ch-scrollycoding-preview"
8181
files={tab.files}
8282
presetConfig={presetConfig}
83+
codeConfig={codeConfig}
8384
/>
8485
)}
8586
</div>

‎packages/mdx/src/client/slideshow.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010
aspect-ratio: 16 / 9;
1111
}
1212

13-
.ch-slideshow-slide .ch-editor-frame,
14-
.ch-slideshow-slide .ch-code {
13+
.ch-slideshow-slide .ch-codegroup,
14+
.ch-slideshow-slide .ch-codeblock {
1515
flex: 2;
16+
margin-top: 0;
17+
margin-bottom: 0;
1618
}
1719

1820
.ch-slideshow-preview {

‎packages/mdx/src/client/slideshow.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export function Slideshow({
6060
className="ch-slideshow-preview"
6161
files={tab.files}
6262
presetConfig={presetConfig}
63+
codeConfig={codeConfig}
6364
/>
6465
)}
6566
</div>

‎packages/mdx/src/client/spotlight.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,14 @@
4141
max-height: 80vh;
4242
}
4343

44-
.ch-spotlight-sticker .ch-editor-frame,
45-
.ch-spotlight-sticker .ch-code {
44+
.ch-spotlight-sticker .ch-codegroup,
45+
.ch-spotlight-sticker .ch-codeblock {
4646
width: 100%;
4747
min-width: 100%;
4848
min-height: Min(100%, 80vh);
4949
max-height: 80vh;
50+
margin-top: 0;
51+
margin-bottom: 0;
5052
flex: 1;
5153
}
5254

@@ -56,8 +58,8 @@
5658
gap: 0.5rem;
5759
}
5860

59-
.ch-spotlight-sticker .ch-editor-frame,
60-
.ch-spotlight-sticker .ch-code {
61+
.ch-spotlight-sticker .ch-codegroup,
62+
.ch-spotlight-sticker .ch-codeblock {
6163
min-height: 0;
6264
flex: 1;
6365
}

‎packages/mdx/src/client/spotlight.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export function Spotlight({
7979
className="ch-spotlight-preview"
8080
files={tab.files}
8181
presetConfig={presetConfig}
82+
codeConfig={codeConfig}
8283
/>
8384
)}
8485
</div>

‎packages/mdx/src/components.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
annotationsMap,
1212
Annotation,
1313
} from "./client/annotations"
14+
import { Preview } from "./client/preview"
15+
import { InlineCode } from "./client/inline-code"
1416

1517
export const CH = {
1618
Code,
@@ -19,7 +21,9 @@ export const CH = {
1921
SectionCode,
2022
Spotlight,
2123
Scrollycoding,
24+
Preview,
2225
annotations: annotationsMap,
2326
Annotation,
2427
Slideshow,
28+
InlineCode,
2529
}

‎packages/mdx/src/index.scss

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,29 @@
44
@import "./client/scrollycoding.scss";
55
@import "./client/slideshow.scss";
66

7-
.ch-code {
7+
.ch-codeblock,
8+
.ch-codegroup,
9+
.ch-preview {
810
border-radius: 6px;
11+
overflow: hidden;
12+
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
13+
0 8px 16px -8px rgba(0, 0, 0, 0.3),
14+
0 -6px 16px -6px rgba(0, 0, 0, 0.025);
15+
16+
& > * {
17+
height: 100%;
18+
}
19+
}
20+
21+
.ch-codeblock,
22+
.ch-codegroup {
23+
margin-top: 1.25em;
24+
margin-bottom: 1.25em;
25+
}
26+
27+
.ch-inline-code > code {
28+
padding: 0.2em 0.4em;
29+
margin: 0.1em -0.1em;
30+
border-radius: 0.25em;
31+
font-size: 0.9em;
932
}

‎packages/mdx/src/plugin.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import visit from "unist-util-visit"
88
import { transformSlideshows } from "./plugin/slideshow"
99
import { valueToEstree } from "./plugin/to-estree"
1010
import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
11+
import { transformPreviews } from "./plugin/preview"
12+
import { transformInlineCodes } from "./plugin/inline-code"
1113

1214
type CodeHikeConfig = {
1315
theme: any
@@ -35,6 +37,8 @@ export function remarkCodeHike(config: CodeHikeConfig) {
3537
}
3638

3739
try {
40+
await transformInlineCodes(tree)
41+
await transformPreviews(tree)
3842
await transformScrollycodings(tree, config)
3943
await transformSpotlights(tree, config)
4044
await transformSlideshows(tree, config)

0 commit comments

Comments
 (0)