- cover slide

- rename stuff
- make things more round

iclc2023/slides/src/Highlight.jsx

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

iclc2023/slides/src/SlideRepl.jsx

@@ -30,9 +30,8 @@ export function SlideRepl({
   fontSize = 32,
   disabled = false,
 }) {
-  // const { theme } = useSettings();
   return (
-    <div className="mb-4">
+    <div className="mb-4 not-prose rounded-xl overflow-hidden">
       <_MiniRepl
         hideHeader={hideHeader}
         tune={tune}

iclc2023/slides/src/Slides.jsx

@@ -16,7 +16,7 @@ const loadedMDXFiles = await Promise.all(
   }),
 );
 
-const order = ['01', '02-0', '02-1', '02-2', '03-0', '03-1', '04'];
+const order = ['01', '02-0', '02-1', '02-2', 'mini-comparison', 'patterns-events', '04'];
 
 const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name));
 
@@ -54,12 +54,12 @@ function Slides() {
         <div
           key={i}
           className={cx(
-            `bg-slate-900 w-full h-full flex justify-center p-12 absolute top-0 transition-all ease-in-out duration-500`,
+            `bg-slate-900 w-full h-full flex justify-center absolute top-0 transition-all ease-in-out duration-500 overflow-auto`,
             i < activeIndex && '-translate-x-full',
             i > activeIndex && 'translate-x-full',
           )}
         >
-          <div className="prose prose-invert w-[1400px] max-w-full overflow-auto" style={{ fontSize: '2em' }}>
+          <div className="prose prose-invert w-[1400px] p-12 max-w-full" style={{ fontSize: '2em' }}>
             {Math.abs(i - activeIndex) < 2 && <Slide />}
           </div>
         </div>

iclc2023/slides/src/index.css

@@ -15,3 +15,7 @@
 .cm-gutters {
   display: none !important;
 }
+
+img {
+  @apply rounded-xl overflow-hidden;
+}

iclc2023/slides/src/slides/01.mdx

@@ -1,2 +1,7 @@
-# Strudel
-
+<div className="flex flex-col justify-between h-full overflow-hidden max-h-screen space-y-8">
+  <h2 className="m-0">Strudel: live coding patterns on the Web</h2>
+  <div className="justify-center flex overflow-hidden not-prose">
+    <img src="./img/strudel_icon.png" className="h-full animate-[spin_4s_linear_infinite]" />
+  </div>
+  <span>Felix Roos, Alex McLean</span>
+</div>

iclc2023/slides/src/slides/02-2.mdx

@@ -1,5 +1,5 @@
 import SyntaxComparison from '../SyntaxComparison.jsx';
 
-# Syntax Comparison: Haskell / JavaScript
+# From Haskell to JavaScript
 
 <SyntaxComparison />

iclc2023/slides/src/slides/patterns-events.mdx

@@ -1,9 +1,9 @@
 import { SlideRepl } from '../SlideRepl.jsx';
 import Highlight from '../Highlight.jsx';
 
-# Patterns
+# From Patterns to Events
 
-<SlideRepl tune={`sound("bd [hh sd]")`} hideHeader punchcard />
+<SlideRepl tune={`sound("bd [hh sd]").log()`} hideHeader punchcard />
 
 query = get events within time arc: