diff --git a/packages/mdx/src/client/scrollycoding.scss b/packages/mdx/src/client/scrollycoding.scss index 2ed7c0f0..b0bd845f 100644 --- a/packages/mdx/src/client/scrollycoding.scss +++ b/packages/mdx/src/client/scrollycoding.scss @@ -5,9 +5,9 @@ } .ch-scrollycoding-content { - width: 50%; box-sizing: border-box; padding-right: 16px; + flex: 1; } .ch-scrollycoding-step-content { @@ -39,7 +39,7 @@ align-self: start; flex-flow: column; justify-content: center; - width: 420px; + width: var(--ch-scrollycoding-sticker-width, 420px); // capitalized Min to avoid usint the sass min // min-height: Min(100%, 80vh); max-height: 80vh; @@ -66,7 +66,10 @@ .ch-codegroup { width: 100%; min-width: 100%; - min-height: 200px; + min-height: var( + --ch-scrollycoding-code-min-height, + 200px + ); max-height: 80vh; margin-top: 0; margin-bottom: 0; diff --git a/packages/mdx/src/index.scss b/packages/mdx/src/index.scss index e39998f8..24a15305 100644 --- a/packages/mdx/src/index.scss +++ b/packages/mdx/src/index.scss @@ -15,6 +15,8 @@ & > * { height: 100%; + max-height: inherit; + min-height: inherit; } } diff --git a/packages/mdx/src/plugin.ts b/packages/mdx/src/plugin.ts index 6ac83e91..cf452852 100644 --- a/packages/mdx/src/plugin.ts +++ b/packages/mdx/src/plugin.ts @@ -16,7 +16,9 @@ type CodeHikeConfig = { lineNumbers?: boolean } -export function remarkCodeHike(config: CodeHikeConfig) { +export function remarkCodeHike( + unsafeConfig: CodeHikeConfig +) { return async (tree: Node) => { // TODO add opt-in config let hasCodeHikeImport = false @@ -30,6 +32,8 @@ export function remarkCodeHike(config: CodeHikeConfig) { } }) + const config = addConfigDefaults(unsafeConfig) + addConfig(tree as Parent, config) if (!hasCodeHikeImport) { @@ -52,6 +56,12 @@ export function remarkCodeHike(config: CodeHikeConfig) { } } +function addConfigDefaults( + config: Partial | undefined +): CodeHikeConfig { + return { ...config, theme: config?.theme || {} } +} + function addConfig(tree: Parent, config: CodeHikeConfig) { tree.children.unshift({ type: "mdxjsEsm", diff --git a/packages/mini-editor/src/editor-frame.tsx b/packages/mini-editor/src/editor-frame.tsx index 3ce9edb8..2dfa3f95 100644 --- a/packages/mini-editor/src/editor-frame.tsx +++ b/packages/mini-editor/src/editor-frame.tsx @@ -57,8 +57,6 @@ export const EditorFrame = React.forwardRef< }, ref ) { - const c = useClasser("ch-editor") - return (
onTabClick(title))} > -
{title}
+
))}
@@ -194,6 +192,23 @@ function TabsContainer({ ) } +function TabTitle({ title }: { title: string }) { + if (!title) { + return
+ } + + const separatorIndex = title.lastIndexOf("/") + 1 + const filename = title.substring(separatorIndex) + const folder = title.substring(0, separatorIndex) + + return ( +
+ {folder} + {filename} +
+ ) +} + type TabsSnapshot = Record< string, { left: number; active: boolean; width: number } diff --git a/packages/mini-editor/src/editor-tween.tsx b/packages/mini-editor/src/editor-tween.tsx index 71e9e31a..288bf5e9 100644 --- a/packages/mini-editor/src/editor-tween.tsx +++ b/packages/mini-editor/src/editor-tween.tsx @@ -6,6 +6,7 @@ import { import { TerminalPanel } from "./terminal-panel" import { useTransition, EditorStep } from "./editor-shift" import { CodeConfig } from "@code-hike/smooth-code" +import { useLayoutEffect } from "@code-hike/utils" export { EditorTransition, @@ -14,11 +15,6 @@ export { EditorTweenProps, } -const useLayoutEffect = - typeof window !== "undefined" - ? React.useLayoutEffect - : React.useEffect - type EditorTransitionProps = { prev?: EditorStep next?: EditorStep diff --git a/packages/playground/styles.css b/packages/playground/styles.css index bc903504..0fa895db 100644 --- a/packages/playground/styles.css +++ b/packages/playground/styles.css @@ -10,6 +10,8 @@ div#__next > div { flex-direction: column; font-family: sans-serif; background-color: #444; + /* --ch-scrollycoding-code-min-height: 500px; + --ch-scrollycoding-sticker-width: 500px; */ } nav { diff --git a/packages/smooth-code/src/code-tween.tsx b/packages/smooth-code/src/code-tween.tsx index ceb31a05..6b9f67ce 100644 --- a/packages/smooth-code/src/code-tween.tsx +++ b/packages/smooth-code/src/code-tween.tsx @@ -147,7 +147,7 @@ function AfterDimensions({ opacity: 1, backgroundColor: bg, color: fg, - ["color-scheme" as any]: getColorScheme(theme), + ["colorScheme" as any]: getColorScheme(theme), ["--ch-selection-background" as any]: getColor( theme, ColorName.SelectionBackground diff --git a/packages/smooth-code/src/use-dimensions.tsx b/packages/smooth-code/src/use-dimensions.tsx index 489042bc..02d7f26b 100644 --- a/packages/smooth-code/src/use-dimensions.tsx +++ b/packages/smooth-code/src/use-dimensions.tsx @@ -3,6 +3,7 @@ import { FocusString, getFocusIndexes, Tween, + useLayoutEffect, } from "@code-hike/utils" type Dimensions = { @@ -16,11 +17,6 @@ type Dimensions = { lineNumberWidth: number } | null -const useLayoutEffect = - typeof window !== "undefined" - ? React.useLayoutEffect - : React.useEffect - export { useDimensions, Dimensions } const DEFAULT_WIDTH = 200 diff --git a/packages/utils/src/hooks.ts b/packages/utils/src/hooks.ts new file mode 100644 index 00000000..32e92996 --- /dev/null +++ b/packages/utils/src/hooks.ts @@ -0,0 +1,12 @@ +import React from "react" + +export const useLayoutEffect = + typeof window !== "undefined" + ? React.useLayoutEffect + : React.useEffect + +// for debugging: +// export const useLayoutEffect = ( +// effect: any, +// deps?: any +// ) => {} diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx index 36ba169c..e96bd902 100644 --- a/packages/utils/src/index.tsx +++ b/packages/utils/src/index.tsx @@ -2,3 +2,4 @@ export * from "./tween" export * from "./code" export * from "./focus" export * from "./theme" +export * from "./hooks"