Content update

- Adds in some missing speakers
- Under construction meetups
- Fixes links in media descriptions
- Adds hover indicators to img_grid
- Adds esc key in modals

assets/js/main.js

@@ -36,7 +36,12 @@
 
 
   // modals 
-  // openers
+  function toggle_modal(target, show) {
+    target.classList.toggle("hidden", !show);
+    body.classList.toggle("overflow-hidden", show);
+    body.setAttribute("modal", show ? target.id : "");
+  }
+
   const body = document.querySelector("body");
   const show_modal_buttons = document.querySelectorAll("[data-modal-show]");
   show_modal_buttons.forEach((btn) => {
@@ -44,8 +49,7 @@
     const modal = document.querySelector(`#${target}`);
     if (modal) {
       btn.addEventListener("click", (e) => {
-        modal.classList.toggle("hidden", false);
-        body.classList.toggle("overflow-hidden", true);
+        toggle_modal(modal, true);
       });
     }
   });
@@ -56,8 +60,7 @@
     const modal = document.querySelector(`#${target}`);
     if (modal) {
       btn.addEventListener("click", (e) => {
-        modal.classList.toggle("hidden", true);
-        body.classList.toggle("overflow-hidden", false);
+        toggle_modal(modal, false);
       });
     }
   });
@@ -65,13 +68,19 @@
   const modal_bg = document.querySelectorAll(".modal-bg");
   modal_bg.forEach((bg) => {
     bg.addEventListener("click", (e) => {
-      if(e.target === bg) {
-        bg.classList.toggle("hidden", true);
-        body.classList.toggle("overflow-hidden", false);
+      if (e.target === bg) {
+        toggle_modal(bg, false);
       }
     });
   });
 
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      var modal_id = body.getAttribute("modal");
+      if(modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
+    }
+  });
+
   // Swipers
   // ----------------------------------------
   const swipers = document.querySelectorAll(".swiper-slider");
@@ -100,3 +109,5 @@
     });
   });
 })();
+
+// c > js -devon

assets/scss/custom.scss

@@ -29,12 +29,14 @@
     background-color: #7A5DF9;
 }
 
-.about-content a {
+.about-content a,
+.content-container a {
     color: var(--meetups-color) !important;
     text-decoration: none;
 }
 
-.about-content a:hover {
+.about-content a:hover,
+.content-container a:hover {
     text-decoration: underline !important;
 }
 

content/english/meetups/index.md

@@ -4,6 +4,7 @@ meta_title: "About"
 description: "this is meta description"
 image: "/images/avatar.png"
 draft: false
+layout: under_construction
 ---
 
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis illum nesciunt commodi vel nisi ut alias excepturi ipsum, totam, labore tempora, odit ex iste tempore sed. Fugit voluptatibus perspiciatis assumenda nulla ad nihil, omnis vel, doloremque sit quam autem optio maiores, illum eius facilis et quo consectetur provident dolor similique! Enim voluptatem dicta expedita veritatis repellat dolorum impedit, provident quasi at.

content/english/seattle/index.md

@@ -60,9 +60,9 @@ features:
       title: ""
       title_class: "text-center"
       section_class: "mb-12"
-      img_title_class: "text-center text-2xl"
+      img_title_class: "text-center text-2xl no-underline hover:underline hover:color-[#150e31]"
       img_subtitle_class: "text-center"
-      img_class: ""
+      img_class: "hover:cursor-pointer devon_was_here"
       imgs:
         - title: "Abner Coimbre"
           title_class: "text-center text-2xl mt-2"
@@ -94,6 +94,18 @@ features:
           subtitle: "Co-Founder of [Hundred Rabbits](https://100r.co)"
           img: "/images/people/devine_square.webp"
           modal_target: "devine"
+        - title: "Andrew Kelley"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg mb-4"
+          subtitle: "Present of [Zig](https://ziglang.org/) Software Foundation"
+          img: "/images/people/andrew-kelley.jpg"
+          modal_target: "andrew"
+        - title: "Wryl"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg mb-4"
+          subtitle: "Computational artisan, author of [Modal](https://wiki.xxiivv.com/site/modal)"
+          img: "/images/people/wryl_sq.webp"
+          modal_target: "wyrl"
         - title: "Kagi Search"
           title_class: "text-center text-2xl mt-2"
           subtitle_class: "text-center text-lg mb-2"
@@ -222,6 +234,21 @@ modals:
     content: "We’ll wander through a corridors of a very special library, in which every book is one of the permutations of 64kb of ram."
     content_class: "text-white"
     img: "/images/modals/100r.png"
+  - active: true
+    id: "andrew"
+    title: "In Defense of the Free Software Movement"
+    img: ""
+    title_class: "text-white"
+    content: "**A candid and thorough examination of the societal forces that shape software**<br>Does open source software make your eyes roll so hard you can see your prefrontal cortex? Do you pray to Richard Stallman every night before you go to bed? Either way, prepare to have your assumptions checked, your values questioned, and the Handmade [Manifesto](https://handmade.network/manifesto) itself scrutinized.<br><br>You can come with an open mind, or you can hate-watch this talk. Either way, pay attention, because it’s what everyone’s going to be talking about in the halls and at lunch."
+    content_class: "text-white"
+  - active: true
+    id: "wyrl"
+    title: "Democratizing Software"
+    img: "/images/modals/simplex.png"
+    img_class: "bg-white rounded-lg"
+    title_class: "text-white"
+    content: "**Building ladders for the curious.**<br><br>Software is intimidating by virtue of its scale and scope.We build mountains upon mountains, and claim they are easy to climb because we’re the architects.<br><br>How did we get here? _How can we fix this?_<br><br>Join me for a tour through the software crisis and learn how to enable individuals, from all walks of life, to partake in the joy of crafting software."
+    content_class: "text-white"
   - active: true
     id: "kagi"
     title: "High quality search results with no ads or tracking."

layouts/media/single.html

@@ -3,7 +3,7 @@
     <div class="container flex flex-col gap-5">
       <div>
         <h2>{{ .Params.Title }}</h2>
-        <div>
+        <div class="content-container">
           {{ if eq .Params.Mediatype "talk" }}
             Presented by
           {{ else if eq .Params.Mediatype "demo" }}
@@ -54,7 +54,7 @@
           {{ end }}
         </div>
         <div class="flex flex-col gap-5 lg:w-1/3">
-          <div class="dark:text-white">
+          <div class="dark:text-white content-container">
             {{ .Content }}
           </div>
 

layouts/partials/components/img_grid.html

@@ -2,9 +2,12 @@
 <div class="container relative mx-auto px-4 {{ .img_grid.section_class }} img_grid_container">
   <p class="{{ .img_grid.title_class }}">{{ .img_grid.title }}</p>
   <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
+    {{ $img_title_class := .img_grid.img_title_class }}
+    {{ $img_subtitle_class := .img_grid.img_subtitle_class }}
+    {{ $option_class := .img_grid.img_class }}
     {{ range $i, $option := .img_grid.imgs }}
     <div class="w-1/2 md:w-1/3 p-2">
-      <div class="flex justify-center align-items-center items-center w-full justify-items-center row"
+      <div class="flex justify-center align-items-center items-center w-full justify-items-center row {{ $option_class }}"
       {{ if .modal_target }} data-modal-show="{{ .modal_target }}" {{ end }}>
       {{ $imgres := .resources.Get $option.img }}
       {{ if $option.link}}
@@ -12,10 +15,10 @@
       {{ end }}
         <img class="w-10/12 rounded-lg mx-auto col-12" src="{{ $option.img }}" alt="{{ $option.title }}">
         {{ if $option.title }}
-        <p class="{{ $option.title_class }} {{ .img_grid.img_title_class }} col-12">{{ $option.title | markdownify }}</p>
+        <p class="{{ $option.title_class }} {{ $img_title_class }} col-12">{{ $option.title | markdownify }}</p>
         {{ end }}
         {{ if $option.subtitle }}
-        <p class="{{ $option.subtitle_class }} {{ .img_grid.img_subtitle_class }} col-12">{{ $option.subtitle | markdownify }}</p>
+        <p class="{{ $option.subtitle_class }} {{ $img_subtitle_class }} col-12">{{ $option.subtitle | markdownify }}</p>
         {{ end }}
       {{ if $option.link}}
         </a>

layouts/partials/components/modals.html

@@ -24,10 +24,10 @@
         <!-- Modal body -->
         <div class="p-4 md:p-6 pb-8 md:pb-12 space-y-4">
           {{ if $option.img }}
-            <img src="{{ $option.img }}" class="w-full max-h-48 object-contain {{ if $option.img_dark }}dark:hidden {{ end }}" />
+            <img src="{{ $option.img }}" class="w-full max-h-48 object-contain {{ if $option.img_dark }}dark:hidden {{ end }}{{ $option.img_class }}" />
           {{ end }}
           {{ if $option.img_dark }}
-          <img src="{{ $option.img_dark }}" class="w-full max-h-48 object-contain hidden dark:block" />
+          <img src="{{ $option.img_dark }}" class="w-full max-h-48 object-contain hidden dark:block {{ $option.img_class }}" />
           {{ end }}
           <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
             {{ $option.title | markdownify }}