From 688021538afb132bb4bf5c114d239f9d73b736fb Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Tue, 4 Jul 2023 09:18:17 +0000
Subject: [PATCH 1/2] Add static toggle

---
 packages/mdx/dev/content/static-toggle.mdx    |  11 +
 packages/mdx/src/components.tsx               |   7 +
 packages/mdx/src/highlighter/index.tsx        |   1 +
 packages/mdx/src/mdx-client/scrollycoding.tsx |  13 +-
 packages/mdx/src/mdx-client/ssmq.tsx          | 199 ++++++++++--------
 5 files changed, 134 insertions(+), 97 deletions(-)
 create mode 100644 packages/mdx/dev/content/static-toggle.mdx

diff --git a/packages/mdx/dev/content/static-toggle.mdx b/packages/mdx/dev/content/static-toggle.mdx
new file mode 100644
index 00000000..ece11f00
--- /dev/null
+++ b/packages/mdx/dev/content/static-toggle.mdx
@@ -0,0 +1,11 @@
+<CH.StaticToggle />
+
+<CH.Scrollycoding>
+
+Hello
+
+```js
+1
+```
+
+</CH.Scrollycoding>
diff --git a/packages/mdx/src/components.tsx b/packages/mdx/src/components.tsx
index 2032ebc4..2c7f63f4 100644
--- a/packages/mdx/src/components.tsx
+++ b/packages/mdx/src/components.tsx
@@ -15,6 +15,10 @@ import {
 import { Preview } from "./mdx-client/preview"
 import { InlineCode } from "./mdx-client/inline-code"
 import type { MDXComponents } from "mdx/types"
+import {
+  useStaticToggle,
+  StaticToggle,
+} from "./mdx-client/ssmq"
 
 export {
   Code,
@@ -30,6 +34,8 @@ export {
   InlineCode,
   CodeSlot,
   PreviewSlot,
+  useStaticToggle,
+  StaticToggle,
 }
 
 export const CH: MDXComponents = {
@@ -46,6 +52,7 @@ export const CH: MDXComponents = {
   InlineCode,
   CodeSlot,
   PreviewSlot,
+  StaticToggle,
 }
 
 import { MiniBrowser } from "./mini-browser"
diff --git a/packages/mdx/src/highlighter/index.tsx b/packages/mdx/src/highlighter/index.tsx
index 6cad3d76..90123a75 100644
--- a/packages/mdx/src/highlighter/index.tsx
+++ b/packages/mdx/src/highlighter/index.tsx
@@ -44,6 +44,7 @@ export async function highlight({
       )
       warnings.add(lang)
     }
+    // potential endless loop
     return highlight({ code, lang: "text", theme })
   }
 }
diff --git a/packages/mdx/src/mdx-client/scrollycoding.tsx b/packages/mdx/src/mdx-client/scrollycoding.tsx
index a385b908..bce5c0b6 100644
--- a/packages/mdx/src/mdx-client/scrollycoding.tsx
+++ b/packages/mdx/src/mdx-client/scrollycoding.tsx
@@ -22,14 +22,11 @@ type ScrollycodingProps = {
 export function Scrollycoding(props) {
   return (
     <Swap
-      match={[
-        [
-          props.codeConfig.staticMediaQuery,
-          <StaticScrollycoding {...props} />,
-        ],
-        ["default", <DynamicScrollycoding {...props} />],
-      ]}
-    />
+      query={props.codeConfig.staticMediaQuery}
+      staticElement={<StaticScrollycoding {...props} />}
+    >
+      <DynamicScrollycoding {...props} />
+    </Swap>
   )
 }
 
diff --git a/packages/mdx/src/mdx-client/ssmq.tsx b/packages/mdx/src/mdx-client/ssmq.tsx
index f3f2c17c..fea21a5f 100644
--- a/packages/mdx/src/mdx-client/ssmq.tsx
+++ b/packages/mdx/src/mdx-client/ssmq.tsx
@@ -3,6 +3,56 @@
 import React from "react"
 
 let suffixCounter = 0
+const PREFERS_STATIC_KEY = "ch-prefers-static"
+
+export function toggleStatic() {
+  localStorage.setItem(
+    "ch-prefers-static",
+    localStorage.getItem("ch-prefers-static") === "true"
+      ? "false"
+      : "true"
+  )
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key: "ch-prefers-static",
+    })
+  )
+}
+
+export function StaticToggle({
+  viewDynamicText = "View dynamic version",
+  viewStaticText = "View static version",
+}) {
+  const [forceStatic, toggleStatic] = useStaticToggle()
+  return (
+    <button
+      onClick={toggleStatic}
+      className="ch-static-toggle"
+      data-ch-static={forceStatic}
+    >
+      {forceStatic ? viewDynamicText : viewStaticText}
+    </button>
+  )
+}
+
+export function useStaticToggle() {
+  const { showStatic: forceStatic } = useMedia(
+    "screen and (max-width: 0px)"
+  )
+
+  const [firstRender, setFirstRender] = React.useState(true)
+
+  React.useLayoutEffect(() => {
+    if (forceStatic) {
+      setFirstRender(false)
+    }
+  }, [])
+
+  return [
+    firstRender ? false : forceStatic,
+    toggleStatic,
+  ] as const
+}
 
 /**
  * @typedef SwapProps
@@ -14,139 +64,110 @@ let suffixCounter = 0
  * @param {SwapProps} props
  */
 
-export function Swap({ match }) {
-  const queries = match.map(([q]) => q)
-  const { isServer, matchedIndex } = useMedia(queries)
+export function Swap({ query, staticElement, children }) {
+  const dynamicElement = children
+
+  const { isServer, showStatic } = useMedia(query)
   const mainClassName = isServer
     ? "ssmq-" + suffixCounter++
     : ""
-
   return isServer ? (
     <React.Fragment>
       <style
         className={mainClassName}
         dangerouslySetInnerHTML={{
-          __html: getStyle(queries, mainClassName),
+          __html: getStyle(query, mainClassName),
         }}
       />
-      {match.map(([query, element]) => (
-        <div
-          key={query}
-          className={`${mainClassName} ${getClassName(
-            query
-          )}`}
-        >
-          {element}
-        </div>
-      ))}
+      <div className={`${mainClassName} ssmq-static`}>
+        {staticElement}
+      </div>
+      <div className={`${mainClassName} ssmq-dynamic`}>
+        {dynamicElement}
+      </div>
       <script
         className={mainClassName}
         dangerouslySetInnerHTML={{
-          __html: getScript(match, mainClassName),
+          __html: getScript(query, mainClassName),
         }}
       />
     </React.Fragment>
   ) : (
     <React.Fragment>
-      <div>{match[matchedIndex][1]}</div>
+      <div>
+        {showStatic ? staticElement : dynamicElement}
+      </div>
     </React.Fragment>
   )
 }
 
-function getStyle(queries, mainClass) {
-  const reversedQueries = queries.slice().reverse()
-  const style = reversedQueries
-    .map(query => {
-      const currentStyle = `.${mainClass}.${getClassName(
-        query
-      )}{display:block}`
-      const otherStyle = `.${mainClass}:not(.${getClassName(
-        query
-      )}){display: none;}`
-
-      if (query === "default") {
-        return `${currentStyle}${otherStyle}`
-      } else {
-        return `@media ${query}{${currentStyle}${otherStyle}}`
-      }
-    })
-    .join("\n")
-  return style
+function getStyle(query, mainClass) {
+  return `.${mainClass}.ssmq-dynamic { display: block; }
+.${mainClass}.ssmq-static { display: none; }
+@media ${query} {
+  .${mainClass}.ssmq-dynamic { display: none; }
+  .${mainClass}.ssmq-static { display: block; }
+}
+`
 }
 
-function getScript(match, mainClass) {
-  const queries = match.map(([query]) => query)
-  const classes = queries.map(getClassName)
+function getScript(query, mainClass) {
   return `(function() {
-  var qs = ${JSON.stringify(queries)};
-  var clss = ${JSON.stringify(classes)};
+  var q = ${JSON.stringify(query)};
   var mainCls = "${mainClass}";
 
-  var scrEls = document.getElementsByTagName("script");
-  var scrEl = scrEls[scrEls.length - 1];
-  var parent = scrEl.parentNode;
+  var dynamicEl = document.querySelector(
+    "." + mainCls + ".ssmq-dynamic"
+  )
+  var staticEl = document.querySelector(
+    "." + mainCls + ".ssmq-static"
+  )
+  var parent = dynamicEl.parentNode
 
-  var el = null;
-  for (var i = 0; i < qs.length - 1; i++) {
-    if (window.matchMedia(qs[i]).matches) {
-      el = parent.querySelector(":scope > ." + mainCls + "." + clss[i]);
-      break;
-    }
+  if (window.matchMedia(q).matches || localStorage.getItem("${PREFERS_STATIC_KEY}") === 'true') {
+    staticEl.removeAttribute("class")
+  } else {
+    dynamicEl.removeAttribute("class")
   }
-  if (!el) {
-    var defaultClass = clss.pop();
-    el = parent.querySelector(":scope > ." + mainCls + "." + defaultClass);
-  }
-  el.removeAttribute("class");
 
-  parent.querySelectorAll(":scope > ." + mainCls).forEach(function (e) {
-    parent.removeChild(e);
-  });
+  parent
+    .querySelectorAll(":scope > ." + mainCls)
+    .forEach(function (e) {
+      parent.removeChild(e)
+    })
 })();`
 }
 
-function getClassName(string) {
-  return (
-    "ssmq-" +
-    string
-      .replace(
-        /[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~\s]/g,
-        ""
-      )
-      .toLowerCase()
-  )
-}
-
-function useMedia(queries) {
+function useMedia(query) {
   const isServer = typeof window === "undefined"
 
-  const allQueries = queries.slice(0, -1)
-
-  if (queries[queries.length - 1] !== "default") {
-    console.warn("last media query should be 'default'")
+  if (isServer) {
+    return { isServer, showStatic: false }
   }
 
   const [, setValue] = React.useState(0)
 
-  const mediaQueryLists = isServer
-    ? []
-    : allQueries.map(q => window.matchMedia(q))
-
+  const mql = window.matchMedia(query)
   React.useEffect(() => {
     const handler = () => setValue(x => x + 1)
-    mediaQueryLists.forEach(mql => mql.addListener(handler))
-    return () =>
-      mediaQueryLists.forEach(mql =>
-        mql.removeListener(handler)
-      )
+    mql.addEventListener("change", handler)
+    window.addEventListener("storage", event => {
+      if (event.key === PREFERS_STATIC_KEY) {
+        handler()
+      }
+    })
+    return () => {
+      mql.removeEventListener("change", handler)
+      window.removeEventListener("storage", handler)
+    }
   }, [])
 
-  const matchedIndex = mediaQueryLists.findIndex(
-    mql => mql.matches
-  )
+  const showStatic =
+    mql.matches ||
+    localStorage.getItem(PREFERS_STATIC_KEY) === "true"
+
   return {
     isServer,
-    matchedIndex:
-      matchedIndex < 0 ? queries.length - 1 : matchedIndex,
+    showStatic,
   }
 }

From 984614e952c2875f66eaa703deafc6176ca3fc0f Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Tue, 4 Jul 2023 09:39:44 +0000
Subject: [PATCH 2/2] Ignore rows in scrollycoding code

---
 .../mdx/dev/content/scrollycoding-demo.mdx     | 18 ++++++------------
 packages/mdx/src/mdx-client/scrollycoding.tsx  |  1 +
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/mdx/dev/content/scrollycoding-demo.mdx b/packages/mdx/dev/content/scrollycoding-demo.mdx
index 0ef58add..a10c1db8 100644
--- a/packages/mdx/dev/content/scrollycoding-demo.mdx
+++ b/packages/mdx/dev/content/scrollycoding-demo.mdx
@@ -4,7 +4,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 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.
 
-<CH.Scrollycoding>
+<CH.Scrollycoding  showCopyButton={false} rows="focus" showExpandButton={true}>
 
 ## Step 1
 
@@ -18,7 +18,7 @@ Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdie
 
 <CH.Code>
 
-```js app.js focus=3:10
+```js focus=3:10
 const { lorem, ipsum } = dolor({
   sit: {
     amet: 1,
@@ -55,12 +55,6 @@ const { lorem, ipsum } = dolor({
 })
 ```
 
-```css styles.css
-.lorem {
-  color: red;
-}
-```
-
 </CH.Code>
 
 ---
@@ -75,7 +69,7 @@ Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volu
 
 Morbi quis commodo.
 
-```js app.js focus=11:17
+```js focus=11:17
 
 ```
 
@@ -91,7 +85,7 @@ Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volu
 
 Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
 
-```js app.js focus=11:14
+```js focus=11:14
 const { lorem, ipsum } = dolor({
   sit: {
     amet: 1,
@@ -138,7 +132,7 @@ Sed blandit libero volutpat sed cras.
 
 Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
 
-```js app.js focus=19:29
+```js focus=19:29
 
 ```
 
@@ -159,7 +153,7 @@ Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed vi
 
 Morbi quis commodo.
 
-```js app.js
+```js
 
 ```
 
diff --git a/packages/mdx/src/mdx-client/scrollycoding.tsx b/packages/mdx/src/mdx-client/scrollycoding.tsx
index bce5c0b6..2a5a5c3a 100644
--- a/packages/mdx/src/mdx-client/scrollycoding.tsx
+++ b/packages/mdx/src/mdx-client/scrollycoding.tsx
@@ -210,6 +210,7 @@ function DynamicScrollycoding({
           {...rest}
           {...(tab as any)}
           codeConfig={codeConfig}
+          rows={undefined}
           onTabClick={onTabClick}
         />
         {presetConfig ? (