Add some css vars

Author: pomber

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;

packages/mdx/src/index.scss

@@ -15,6 +15,8 @@
 
   & > * {
     height: 100%;
+    max-height: inherit;
+    min-height: inherit;
   }
 }
 

packages/mini-editor/src/editor-frame.tsx

@@ -57,8 +57,6 @@ export const EditorFrame = React.forwardRef<
   },
   ref
 ) {
-  const c = useClasser("ch-editor")
-
   return (
     <div
       ref={ref}

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

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 {

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

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
+// ) => {}

packages/utils/src/index.tsx

@@ -2,3 +2,4 @@ export * from "./tween"
 export * from "./code"
 export * from "./focus"
 export * from "./theme"
+export * from "./hooks"