remove padding from stepper

iclc2023/slides/src/EventsDemo.jsx

@@ -27,10 +27,10 @@ function EventsDemo() {
   return (
     <Stepper
       steps={snippets.map(([code, label]) => (
-        <>
-          <h3 className="pb-4">{label}</h3>
+        <div className="py-4 space-y-4">
+          <h3>{label}</h3>
           <EventEditor code={code} />
-        </>
+        </div>
       ))}
     />
   );

iclc2023/slides/src/Highlight.jsx

@@ -10,7 +10,7 @@ SyntaxHighlighter.registerLanguage('haskell', hs);
 
 function Highlight({ code, language }) {
   return (
-    <div className="mb-4 text-[32px] leading-10 rounded-xl overflow-hidden">
+    <div className="text-[32px] leading-10 rounded-xl overflow-hidden">
       <SyntaxHighlighter language={language} style={atomOneDark} customStyle={{ padding: '8px 10px' }}>
         {code}
       </SyntaxHighlighter>

iclc2023/slides/src/MiniComparison.jsx

@@ -20,17 +20,19 @@ function MiniComparison() {
       </h1>
       <Stepper
         steps={snippets.map(([a, b, label]) => (
-          <>
+          <div className="py-4">
             <h3 className="pb-4">{label}</h3>
-            <div className="flex space-x-2">
-              <img src="./img/tidalcycles.svg" className={`h-10 mt-2`} />
-              <SlideRepl tune={a} hideHeader />
+            <div className="space-y-2">
+              <div className="flex space-x-2">
+                <img src="./img/tidalcycles.svg" className={`h-10 mt-2`} />
+                <SlideRepl tune={a} hideHeader />
+              </div>
+              <div className="flex space-x-2">
+                <img src="./img/js.jpg" className={`h-10 mt-2`} />
+                <SlideRepl tune={b} hideHeader />
+              </div>
             </div>
-            <div className="flex space-x-2">
-              <img src="./img/js.jpg" className={`h-10 mt-2`} />
-              <SlideRepl tune={b} hideHeader />
-            </div>
-          </>
+          </div>
         ))}
       />
     </>

iclc2023/slides/src/QueryDemo.jsx

@@ -29,10 +29,10 @@ function QueryDemo() {
   return (
     <Stepper
       steps={snippets.map(([snippet, label]) => (
-        <>
-          <h3 className="pb-4">{label}</h3>
+        <div className="py-4 space-y-4">
+          <h3>{label}</h3>
           {snippet}
-        </>
+        </div>
       ))}
     />
   );

iclc2023/slides/src/SlideRepl.jsx

@@ -31,7 +31,7 @@ export function SlideRepl({
   disabled = false,
 }) {
   return (
-    <div className="mb-4 not-prose rounded-xl overflow-hidden">
+    <div className="not-prose rounded-xl overflow-hidden">
       <_MiniRepl
         hideHeader={hideHeader}
         tune={tune}

iclc2023/slides/src/Stepper.jsx

@@ -7,7 +7,7 @@ function Stepper({ steps }) {
       {steps.slice(0, step).map((snippet, i) => {
         const isActive = i === step - 1;
         return (
-          <div key={i} className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}>
+          <div key={i} className={`border-l-4 pl-8 border-gray-500 ${isActive ? 'border-yellow-500' : ''}`}>
             {snippet}
           </div>
         );

iclc2023/slides/src/SyntaxComparison.jsx

@@ -49,9 +49,9 @@ function SyntaxComparison() {
       </h1>
       <Stepper
         steps={snippets.map(([hs, js, label]) => (
-          <>
-            <h3 className="pb-4">{label}</h3>
-            <div>
+          <div className="py-4 space-y-4">
+            <h3>{label}</h3>
+            <div className="space-y-2">
               <div className="flex space-x-4">
                 <img src="./img/haskell.png" className="h-10 mt-2" />
                 <Highlight language="haskell" code={hs} />
@@ -65,7 +65,7 @@ function SyntaxComparison() {
                 ))}
               </div>
             </div>
-          </>
+          </div>
         ))}
       />
     </>

iclc2023/slides/src/TranspilationDemo.jsx

@@ -45,7 +45,7 @@ function TranspilationEditor({ code: initialCode }) {
     ),
   );
   return (
-    <>
+    <div className="space-y-2 py-2">
       <CodeMirror
         value={code}
         onChange={(v) => {
@@ -55,11 +55,9 @@ function TranspilationEditor({ code: initialCode }) {
         onViewChanged={(v) => setView(v)}
         fontSize={32}
       />
-      <span>
-        ⬇️ transpiles to ⬇️ <small>via acorn / estree-walker / escodegen</small>
-      </span>
+      <span>⬇️ transpiles to</span>
       <Highlight language="javascript" code={transpiled} />
-    </>
+    </div>
   );
 }
 
@@ -68,9 +66,17 @@ function TranspilationDemo() {
     <div className="not-prose space-y-8">
       <Stepper
         steps={[
-          <TranspilationEditor code={`"bd [hh sd]".s()`} />,
           <>
-            <span>⬇️ calls ⬇️</span> <small>via peggy</small>
+            <ul className="list-decimal pl-8">
+              <li>Enter JS Code</li>
+              <li>Parse JS Code with acorn to get AST</li>
+              <li>Modify AST with estree-walker</li>
+              <li>Convert modified AST back to JS with escodegen</li>
+            </ul>
+          </>,
+          <TranspilationEditor code={`"bd [hh sd]"`} />,
+          <div className="space-y-2 py-2">
+            <span>⬇️ calls</span>
             <Highlight
               code={`seq(
   reify('bd').withLocation([1,1,1], [1,4,4]),
@@ -78,10 +84,10 @@ function TranspilationDemo() {
     reify('hh').withLocation([1,5,5], [1,8,8]),
     reify('sd').withLocation([1,8,8], [1,10,10]),
   )
-).withMiniLocation([1,0,0],[1,12,12]).s()`}
+).withMiniLocation([1,0,0],[1,12,12])`}
             />
             <span>➡️ location can be used for highlighting</span>
-          </>,
+          </div>,
         ]}
       />
     </div>