Add new meetup, and meetup component

Author: haglobah

index.html.pm

@@ -3,96 +3,118 @@
 ◊(require string-interpolation)
 
 ◊`(div ([class ,"flex bg-[@{raisin-black}]"])
-    (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around ml-6 lg:ml-12 xl:ml-36"])
-        ,(badge "Locality of Behavior")
-        (a ([href "https://nixos.org"]) 
-            (img ([src "assets/logos/nix.png"] [class "aspect-auto w-16 lg:w-24"])))
-        ,(badge "Simplicity")
-        (a ([href "https://clojure.org"]) 
-            (img ([src "assets/logos/clojure.svg"] [class "aspect-auto w-16 lg:w-24"])))
-        ,(badge "Functional Optics")
-        (a ([href "https://rust-lang.org"]) 
-            (img ([src "assets/logos/ferris.svg"] [class "aspect-auto w-16 lg:w-24"])))
-        ,(badge "Reproducibility")
+  (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around ml-6 lg:ml-12 xl:ml-36"])
+    ,(badge "Locality of Behavior")
+    (a ([href "https://nixos.org"]) 
+      (img ([src "assets/logos/nix.png"] [class "aspect-auto w-16 lg:w-24"])))
+    ,(badge "Simplicity")
+    (a ([href "https://clojure.org"]) 
+      (img ([src "assets/logos/clojure.svg"] [class "aspect-auto w-16 lg:w-24"])))
+    ,(badge "Functional Optics")
+    (a ([href "https://rust-lang.org"]) 
+      (img ([src "assets/logos/ferris.svg"] [class "aspect-auto w-16 lg:w-24"])))
+    ,(badge "Reproducibility")
+  )
+  (div ([class ,"flex flex-col justify-between mx-auto min-h-screen max-w-screen-xl px-4 pt-12 md:px-8 md:pt-20 lg:px-16 text-zinc-300"])
+    (div ([class "my-6"])
+      (h1 ([class ,"my-4 text-4xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug text-center"])
+        "Coding is hard —")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "Many tools and languages make it easy to add accidental complexity.")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "Accidental complexity creates unnecessary cognitive load.")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "If we constantly battle cognitive load, we get exhausted, unhappy and frustrated.")
     )
-    (div ([class ,"flex flex-col justify-between mx-auto min-h-screen max-w-screen-xl px-4 pt-12 md:px-8 md:pt-20 lg:px-16 text-zinc-300"])
-        (div ([class "my-6"])
-            (h1 ([class ,"my-4 text-4xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug text-center"])
-                "Coding is hard —")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "Many tools and languages make it easy to add accidental complexity.")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "Accidental complexity creates unnecessary cognitive load.")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "If we constantly battle cognitive load, we get exhausted, unhappy and frustrated.")
-        )
-        (div ([class "my-6"])
-            (h1 ([class ,"my-4 text-4xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug text-center"])
-                "but does it have to be " (span ([class "italic"]) "that") " hard?")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "There are tools and techniques that manage complexity well.")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "Using those tools and techniques " (span ([class "italic"]) "reduces") " cognitive load.")
-            (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
-                "So that you can be energetic, happy and joyful while coding.")
-        )
-        (div ([class "mx-auto"])
-            (a ([href "#meetup"]
-                [class ,"mb-4 flex flex-col gap-2 items-center hover:text-[@{jordy}] focus-visible:text-[@{jordy}] duration-300"])
-                (span ([class "text-xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug"])"Interested?")
-                (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1"] [stroke "currentColor"] [class "size-16"])
-                    (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m19.5 8.25-7.5 7.5-7.5-7.5"]))))
-        )
+    (div ([class "my-6"])
+      (h1 ([class ,"my-4 text-4xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug text-center"])
+        "but does it have to be " (span ([class "italic"]) "that") " hard?")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "There are tools and techniques that manage complexity well.")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "Using those tools and techniques " (span ([class "italic"]) "reduces") " cognitive load.")
+      (p ([class "my-2 sm:text-lg leading-relaxed text-center"])
+        "So that you can be energetic, happy and joyful while coding.")
     )
-    (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around mr-6 lg:mr-12 xl:mr-36"])
-        ,(badge "Functional Data Structures")
-        (a ([href "https://www.haskell.org/"]) 
-            (img ([src "assets/logos/haskell.svg"] [class "aspect-auto w-16 lg:w-28"])))
-        ,(badge "Category Theory")
-        (a ([href "https://elixir-lang.org"]) 
-            (img ([src "assets/logos/elixir.svg"] [class "aspect-auto w-16 lg:w-24"])))
-        ,(badge "Distributed Systems")
-        (a ([href "https://racket-lang.org"]) 
-            (img ([src "assets/logos/racket.svg"] [class "aspect-auto w-16 lg:w-24"])))
-        ,(badge "Low Coupling")
+    (div ([class "mx-auto"])
+      (a ([href "#meetup"]
+          [class ,"mb-4 flex flex-col gap-2 items-center hover:text-[@{jordy}] focus-visible:text-[@{jordy}] duration-300"])
+        (span ([class "text-xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug"])"Interested?")
+        (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1"] [stroke "currentColor"] [class "size-16"])
+          (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m19.5 8.25-7.5 7.5-7.5-7.5"]))))
     )
+  )
+  (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around mr-6 lg:mr-12 xl:mr-36"])
+    ,(badge "Functional Data Structures")
+    (a ([href "https://www.haskell.org/"]) 
+      (img ([src "assets/logos/haskell.svg"] [class "aspect-auto w-16 lg:w-28"])))
+    ,(badge "Category Theory")
+    (a ([href "https://elixir-lang.org"]) 
+      (img ([src "assets/logos/elixir.svg"] [class "aspect-auto w-16 lg:w-24"])))
+    ,(badge "Distributed Systems")
+    (a ([href "https://racket-lang.org"]) 
+      (img ([src "assets/logos/racket.svg"] [class "aspect-auto w-16 lg:w-24"])))
+    ,(badge "Low Coupling")
+  )
 )
 
 ◊div[#:class "bg-white"]{
   ◊div[#:id "meetup" #:class "min-h-[94vh] text-zinc-700 mx-auto h-full max-w-screen-md px-6 pt-12 md:px-12 md:pt-20 lg:px-24"]{
-        ◊heading["About"]
-        ◊par{Hi 👋}
-        ◊par{
-          We're ◊(link "Dirk" "https://www.linkedin.com/in/dirk-hüsken-414b8b101"), ◊(link "Thomas" "https://www.linkedin.com/in/thomas-graf-253629ba"), ◊(link "David" "https://binderdavid.github.io") and ◊(link "Beat" "https://me.beathagenlocher.com") and we thought it would be nice if the wonderful city of Tübingen had a functional programming meetup (again!).
-        }
-        ◊par{
-          We want to create a space where people interested in functional programming can meet and learn from each other. To achieve this, we will start off with talks, followed by food and an open exchange between the participants.
-        } 
+    ◊heading["About"]
+    ◊par{Hi 👋}
+    ◊par{
+      We're ◊(link "Dirk" "https://www.linkedin.com/in/dirk-hüsken-414b8b101"), ◊(link "Thomas" "https://www.linkedin.com/in/thomas-graf-253629ba"), ◊(link "David" "https://binderdavid.github.io") and ◊(link "Beat" "https://me.beathagenlocher.com") and we thought it would be nice if the wonderful city of Tübingen had a functional programming meetup (again!).
+    }
+    ◊par{
+      We want to create a space where people interested in functional programming can meet and learn from each other. To achieve this, we will start off with talks, followed by food and an open exchange between the participants.
+    } 
+    ◊par{
+      Looking forward to see you at the next edition of ◊(link "Tü.λ—Functional Programming Night Tübingen" "https://www.meetup.com/tu-lambda/")!
+    }
+    ◊meetups{
+      ◊meetup[#:title "06.11.24"]{
         ◊par{
-          Looking forward to see you at the next edition of ◊(link "Tü.λ—Functional Programming Night Tübingen" "https://www.meetup.com/tu-lambda/")!
+          The next meetup will take place at the 06.11.24 at the ◊link["itdesign office" "https://itdesign.de/"], Friedrichstraße 12.
         }
+        ◊ul[#:class "list-disc list-inside mx-2 my-4 sm:text-lg leading-relaxed"]{
+          ◊li{18.45 Doors open & Welcome}
+          ◊li{Talk 1 (maybe you?)}
+          ◊; ◊p[#:class "ml-10 my-2 italic text-base"]{
 
-        ◊heading["Schedule"]
+          ◊; }
+          ◊li{Short break}
+          ◊li{Talk 2 (maybe you?)}
+          ◊; ◊p[#:class "ml-10 my-2 italic text-base"]{
+
+          ◊; }
+          ◊li{Food, talking, coding, whatever}
+          ◊li{22.00 End}
+        }
+      }
+      ◊meetup[#:title "28.08.24"]{
         ◊par{
-          The next event will take place at the 28.08.24 at the ◊link["itdesign office" "https://itdesign.de/"], Friedrichstraße 12.
+          This meetup took place at the 28.08.24 at the ◊link["itdesign office" "https://itdesign.de/"], Friedrichstraße 12.
         }
         ◊ul[#:class "list-disc list-inside mx-2 my-4 sm:text-lg leading-relaxed"]{
-            ◊li{18.45 Doors open & Welcome}
-            ◊li{Simple development environments with Nix (Beat)}
-            ◊p[#:class "ml-10 my-2 italic text-base"]{
-              Setting up development environments is more complex than it should be. Nix makes entering development environments as easy as running nix develop, making them simple and reproducible. This talk explores what an ideal workflow could look like and walks through a project setup with Nix, outlining its benefits and deficiencies.
-            }
-            ◊li{Short break}
-            ◊li{Persistent Data Structures: From Lists to Hashmaps (David)}
-            ◊p[#:class "ml-10 my-2 italic text-base"]{
-              Functional programmers cannot use the same data structures and algorithms that imperative programmers are used to. Functional data structures make it easier to reason about what our code does, but have different performance characteristics. This talk will introduce some of the basic and advanced techniques we use when we implement functional data structures efficiently.
-            }
-            ◊li{Food, talking, coding, whatever}
-            ◊li{22.00 End}
-        }
-        ◊par{
-          If you want to attend the meetup, please ◊(link "tell us about it" "https://www.meetup.com/tu-lambda/") so that we can plan accordingly 😊
+          ◊li{18.45 Doors open & Welcome}
+          ◊li{Simple development environments with Nix (Beat)}
+          ◊p[#:class "ml-10 my-2 italic text-base"]{
+            Setting up development environments is more complex than it should be. Nix makes entering development environments as easy as running nix develop, making them simple and reproducible. This talk explores what an ideal workflow could look like and walks through a project setup with Nix, outlining its benefits and deficiencies.
+          }
+          ◊li{Short break}
+          ◊li{Persistent Data Structures: From Lists to Hashmaps (David)}
+          ◊p[#:class "ml-10 my-2 italic text-base"]{
+            Functional programmers cannot use the same data structures and algorithms that imperative programmers are used to. Functional data structures make it easier to reason about what our code does, but have different performance characteristics. This talk will introduce some of the basic and advanced techniques we use when we implement functional data structures efficiently.
+          }
+          ◊li{Food, talking, coding, whatever}
+          ◊li{22.00 End}
         }
+      }
+    }
+
+    ◊par{
+      If you want to attend the meetup, please ◊(link "tell us about it" "https://www.meetup.com/tu-lambda/") so that we can plan accordingly 😊
+    }
 
     ◊heading["Contact"]
     ◊div[#:class "pb-6"]{

main.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const meetupContainer = document.getElementById('meetups-container');
+  const scrollLeftBtn = document.getElementById('meetups-scroll-left');
+  const scrollRightBtn = document.getElementById('meetups-scroll-right');
+
+  if (scrollLeftBtn && scrollRightBtn && meetupContainer) {
+      scrollLeftBtn.addEventListener('click', () => {
+          const containerWidth = meetupContainer.clientWidth;
+          const scrollAmount = containerWidth * 1.0;
+          meetupContainer.scrollBy({
+              left: -scrollAmount,
+              behavior: 'smooth'
+          });
+      });
+
+      scrollRightBtn.addEventListener('click', () => {
+          const containerWidth = meetupContainer.clientWidth;
+          const scrollAmount = containerWidth * 1.0;
+          meetupContainer.scrollBy({
+              left: scrollAmount,
+              behavior: 'smooth'
+          });
+      });
+  } else {
+      console.error('One or more required elements are missing from the DOM');
+  }
+});

pollen.rkt

@@ -37,3 +37,32 @@
 (define (heading text)
   `(h1 ([id ,(id-ify text)] [class ,"text-3xl font-fira-code text-[@{jordy}] tracking-tighter leading-snug"])
        ,text))
+
+(define (meetup #:title title #:img [img ""] . body)
+  `(div ([class "overflow-hidden my-4 snap-center flex w-[90%] shrink-0 mx-8 sm:mx-16 shadow-lg rounded-lg"])
+      ,(if (string=? img "")
+           ""
+           `(img ([class "w-full"] [src ,img])))
+      (div ([class "px-6 py-4"])
+        ,(heading title)
+        ,@body)))
+
+(define (meetups . body)
+  `(div ([class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8"])
+    (div ([class "flex justify-between"])
+      (button ([id "meetups-scroll-left"] [class "text-zinc-500 hover:cursor-pointer hover:scale-125 duration-200 ease-out transition"])
+        (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
+            (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "M15.75 19.5 8.25 12l7.5-7.5"]))
+        )
+      )
+      (div ([id "meetups-container"] [class "relative flex items-center flex-grow snap-x overflow-x-auto"])
+        ,@body
+      )
+      (button ([id "meetups-scroll-right"] [class "text-zinc-500 hover:cursor-pointer hover:scale-125 duration-200 ease-out transition"]) 
+        (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
+            (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m8.25 4.5 7.5 7.5-7.5 7.5"]))
+        )
+      )
+    )
+  )
+)

template.html.p

@@ -36,10 +36,11 @@
 
 	<link rel="stylesheet" href="fonts.css"> 
 	<script src="https://cdn.tailwindcss.com"></script>
+	<script src="main.js"></script>
   </head>
 	<body class="antialiased scroll-smooth font-fira-sans selection:bg-[◊|jordy-light|] selection:text-[◊|raisin-black|]">
 		◊(->html `(div ([class ""])
-										,doc))
+									,doc))
 		<footer class="p-6 sm:p-8 md:p-12">
 			<div class="flex flex-wrap justify-center items-center gap-4 sm:gap-6 md:gap-8 text-sm text-zinc-400">
 				<div class="flex flex-wrap gap-x-2 justify-center">