Modals + Img Grid

assets/js/main.js

@@ -35,6 +35,43 @@
   });
 
 
+  // modals 
+  // openers
+  const body = document.querySelector("body");
+  const show_modal_buttons = document.querySelectorAll("[data-modal-show]");
+  show_modal_buttons.forEach((btn) => {
+    const target = btn.getAttribute('data-modal-show');
+    const modal = document.querySelector(`#${target}`);
+    if (modal) {
+      btn.addEventListener("click", (e) => {
+        modal.classList.toggle("hidden", false);
+        body.classList.toggle("overflow-hidden", true);
+      });
+    }
+  });
+
+  const hide_modal_buttons = document.querySelectorAll("[data-modal-hide]");
+  hide_modal_buttons.forEach((btn) => {
+    const target = btn.getAttribute('data-modal-hide');
+    const modal = document.querySelector(`#${target}`);
+    if (modal) {
+      btn.addEventListener("click", (e) => {
+        modal.classList.toggle("hidden", true);
+        body.classList.toggle("overflow-hidden", false);
+      });
+    }
+  });
+
+  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);
+      }
+    });
+  });
+
   // Swipers
   // ----------------------------------------
   const swipers = document.querySelectorAll(".swiper-slider");

assets/scss/custom.scss

@@ -47,15 +47,27 @@
     text-decoration: underline;
 }
 
-.testimonial a {
+.testimonial a,
+.img_grid_container a {
     color: var(--meetups-color) !important;
     text-decoration: none;
 }
 
-.testimonial a:hover {
+.testimonial a:hover,
+.img_grid_container a:hover {
     text-decoration: underline;
 }
 
+.modal-bg a {
+    color: var(--meetups-color) !important;
+    text-decoration: none;
+}
+
+.modal-bg a:hover {
+    text-decoration: underline;
+}
+
+
 .video-container {
   aspect-ratio: 16 / 9;
   width: 100%;

content/english/_index.md

@@ -71,26 +71,27 @@ features:
     content: "<span class='block mx-auto mt-24 text-black dark:text-white w-1/2'>**Hiring Handmade people.** These brands have attended our job fairs. Companies may rent a job booth but cannot influence nor sponsor the event.</span>"
     content_class: "mt-12"
     img_grid:
+      imgs:
         - name: "JangaFX"
-          icon: "/images/companies/jangafx.png"
+          img: "/images/companies/jangafx.png"
           link: "https://jangafx.com/"
         - name: "Pontoco"
-          icon: "/images/companies/pontoco.png"
+          img: "/images/companies/pontoco.png"
           link: "https://pontoco.com/"
         - name: "Mozilla"
-          icon: "/images/companies/mozilla.png"
+          img: "/images/companies/mozilla.png"
           link: "https://www.mozilla.org/en-US/"
         - name: "TestFit"
-          icon: "/images/companies/tf.png"
+          img: "/images/companies/tf.png"
           link: "https://www.testfit.io/"
         - name: "Magic Poser"
-          icon: "/images/companies/magic_poser.png"
+          img: "/images/companies/magic_poser.png"
           link: "https://magicposer.com/"
         - name: "System Era"
-          icon: "/images/companies/systemera.png"
+          img: "/images/companies/systemera.png"
           link: "https://systemera.net/"
         - name: "KCSE"
-          icon: "/images/companies/kcse.png"
+          img: "/images/companies/kcse.png"
           link: "https://www.kcse.com/"
     button:
       enable: false

content/english/news/_index.md

@@ -9,8 +9,14 @@ newsletter_signup:
   action_url: "https://newsletter.handmadecities.com/id/submit"
   form_class: "container row gap-2"
   input_placeholder: "Email Address"
-  input_class: "col-8"
+  input_class: "col-8 text-black"
   button_text: "Join"
   button_class: "btn text-white meetups-bg col-3"
   section_class: ""
+text_sidepanel:
+    active: true
+    title: ""
+    title_class: ""
+    text_class: ""
+    text: "[RSS](/news/index.xml)"
 ---

content/english/seattle/index.md

@@ -51,18 +51,63 @@ features:
       start_dark: "/images/transition2.svg"
       start_dark_color: "#150e31"
       end: "/images/transition.svg"
-      end_class: "mt-20 transform -scale-y-100 -scale-x-100"
+      end_class: "mt-20 transform -scale-x-100"
       end_color: "#fff"
-      end_dark: "/images/transition2.svg"
+      end_style: "mask-size: cover;height:150px;"
+      end_dark: "/images/transition3.svg"
       end_dark_color: "#150e31"
-    people_grid:
+    img_grid:
       title: ""
-      name_class: ""
+      title_class: "text-center"
-      subtitle_class: ""
+      section_class: "mb-12"
-      people:
+      img_title_class: "text-center text-2xl"
-        - name: ""
+      img_subtitle_class: "text-center"
-          subtitle: ""
+      img_class: ""
-          img: ""
+      imgs:
+        - title: "Abner Coimbre"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "Host"
+          img: "/images/people/abner_2022.png"
+          modal_target: "abner"
+        - title: "Billy Basso"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "Creator of [Animal Well](https://www.youtube.com/watch?v=ygL8eqX12MQ)"
+          img: "/images/people/billy-basso.jpg"
+          modal_target: "billy"
+        - title: "Anniversary Special"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "The Next Ten Years"
+          img: "/images/people/abner_bvisness-scaled.jpg"
+          modal_target: "anniversary"
+        - title: "Allen Webster"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "Founder of [Mr. 4th](https://mr4th.com/) Lab"
+          img: "/images/people/allen_square.webp"
+          modal_target: "allen"
+        - title: "Devine Lu Linvega"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "Co-Founder of [Hundred Rabbits](https://100r.co)"
+          img: "/images/people/devine_square.webp"
+          modal_target: "devine"
+        - title: "Kagi Search"
+          title_class: "text-center text-2xl mt-2"
+          subtitle_class: "text-center text-lg"
+          subtitle: "Humanize the Web"
+          img: "/images/people/kagi_square.webp"
+          modal_target: "kagi"
+        - title: "Job Booth"
+          title_class: "text-center text-white text-2xl mt-2"
+          subtitle_class: "text-center text-lg text-white"
+          subtitle: "Open Slots"
+          img: "/images/people/resume.png"
+          link: "/jobs"
+
+
     bg_color: "#0a0a0a"
     content: "**More On The Way**<br>Join the [newsletter](/news) or check out last year's speakers below."
     content_class: "text-white mt-12 px-12 pb-12 pt-12 bg-[rgba(0,0,0,0.5)] rounded-lg"
@@ -72,38 +117,6 @@ features:
       label: "Register"
       link: "/tickets"
 
-  - title: "Companies Value Handmade"
-    title_class: "text-center mt-16 mb-12"
-    image: ""
-    section_class: "pb-24"
-    side: "center"
-    content: "<span class='block mx-auto mt-24 text-black dark:text-white w-1/2'>**Hiring Handmade people.** These brands have attended our job fairs. Companies may rent a job booth but cannot influence nor sponsor the event.</span>"
-    content_class: "mt-12"
-    img_grid:
-        - name: "JangaFX"
-          icon: "/images/companies/jangafx.png"
-          link: "https://jangafx.com/"
-        - name: "Pontoco"
-          icon: "/images/companies/pontoco.png"
-          link: "https://pontoco.com/"
-        - name: "Mozilla"
-          icon: "/images/companies/mozilla.png"
-          link: "https://www.mozilla.org/en-US/"
-        - name: "TestFit"
-          icon: "/images/companies/tf.png"
-          link: "https://www.testfit.io/"
-        - name: "Magic Poser"
-          icon: "/images/companies/magic_poser.png"
-          link: "https://magicposer.com/"
-        - name: "System Era"
-          icon: "/images/companies/systemera.png"
-          link: "https://systemera.net/"
-        - name: "KCSE"
-          icon: "/images/companies/kcse.png"
-          link: "https://www.kcse.com/"
-    button:
-      enable: false
-
   - title: "Hundreds in person,<br> Thousands online"
     title_class: "text-white"
     transition:
@@ -132,5 +145,54 @@ features:
       label: "Register"
       link: "/tickets"
       button_class: "bg-white text-black"
-
+modals:
+  - active: true
+    id: "abner"
+    title: "Founder of Handmade Cities"
+    title_class: "text-white"
+    content: "… and organizer of Handmade Seattle since 2019<br><br>Abner is hyper-social, having started the Handmade [Network](https://handmade.network/) when Casey Muratori needed a community for the viral Handmade Hero series. He then took charge of the conferences when Casey passed him the baton.<br><br>A programmer in his own right, Abner’s worked for NASA, Jonathan Blow, the creators of Myst, and is [rethinking](https://terminal.click) terminal emulators from scratch."
+    content_class: "text-white"
+    img: "/images/cities-light-mode.png"
+    img_dark: "/images/cities-dark-mode-row.png" 
+  - active: true
+    id: "billy"
+    title: "Creator of [Animal Well](https://www.youtube.com/watch?v=ygL8eqX12MQ)"
+    title_class: "text-white"
+    content: ""
+    content_class: "text-white"
+    img: "/images/cities-light-mode.png"
+    img_dark: "/images/cities-dark-mode-row.png" 
+  - active: true
+    id: "other"
+    title: "devon was here"
+    title_class: "text-white"
+    content: "devon2 was here"
+    content_class: "text-white"
+  - active: true
+    id: "anniversary"
+    title: "The Next Ten Years"
+    title_class: "text-white"
+    content: ""
+    content_class: "text-white"
+  - active: true
+    id: "allen"
+    title: "Creative Exercises at the Low Level"
+    title_class: "text-white"
+    img: "/images/modals/mr4th_lab.jpg"
+    content: "**An exploration of untapped potential.**<br>Starting off we’ll map out the toolchains we use for creating and running executables on desktops. Then we’ll flesh out that picture with some low level details. And finally we’ll see how we can play with the pieces that exist to see new possibilities."
+    content_class: "text-white"
+  - active: true
+    id: "devine"
+    title: "The Library Of Babel in which every book is a program"
+    title_class: "text-white"
+    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: "kagi"
+    title: "High quality search results with no ads or tracking."
+    img: "/images/modals/kagi_pbc.png"
+    title_class: "text-white"
+    content: "At [Kagi](https://kagi.com/welcome), we envision a **friendly version of the internet** where users can explore, learn, and interact with confidence and ease. Our mission is to **humanize the web**, making it more accessible, ethical, and centered around the needs of individuals. We are driven by our core purpose: to **inform and educate**, empowering users with knowledge and understanding as they navigate the online world."
+    content_class: "text-white"
 ---

layouts/_default/year_page.html

@@ -97,68 +97,9 @@
   {{ partial "components/features.html" . }}
   <!-- /Features -->
 
-  <!-- Testimonials -->
+  <!-- Modals -->
-  {{ with site.GetPage "sections/testimonial" }}
+  {{ partial "components/modals.html" . }}
-    {{ if .Params.enable }}
+  <!-- /Modals -->
-      <section class="section">
+
-        <div class="container">
+  
-          <div class="row">
-            <div class="md:col-10 lg:col-8 xl:col-6 mx-auto mb-12 text-center">
-              <h2 class="mb-4">
-                {{ .Title | markdownify }}
-              </h2>
-              <p>
-                {{ .Params.description | markdownify }}
-              </p>
-            </div>
-            <div class="col-12">
-              <div class="swiper testimonial-slider">
-                <div class="swiper-wrapper">
-                  {{ range .Params.testimonials }}
-                    <div class="swiper-slide">
-                      <div
-                        class="bg-theme-light dark:bg-darkmode-theme-light rounded-lg px-7 py-10">
-                        <div class="text-dark dark:text-white">
-                          <svg
-                            width="33"
-                            height="20"
-                            viewBox="0 0 33 20"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              d="M1.28375 19.41L0.79375 18.64C1.21375 17.0067 1.75042 15.07 2.40375 12.83C3.05708 10.5433 3.75708 8.28 4.50375 6.04C5.29708 3.75333 6.06708 1.77 6.81375 0.0899959H15.3538C14.9338 2.09666 14.4904 4.26667 14.0238 6.6C13.5571 8.88666 13.1371 11.15 12.7638 13.39C12.4371 15.5833 12.1571 17.59 11.9238 19.41H1.28375ZM31.69 0.0899959L32.18 0.859998C31.76 2.54 31.2233 4.5 30.57 6.74C29.9167 8.98 29.2167 11.2433 28.47 13.53C27.7233 15.77 26.9533 17.73 26.16 19.41H17.69C18.0167 17.9167 18.3433 16.33 18.67 14.65C18.9967 12.9233 19.3 11.22 19.58 9.54C19.9067 7.81333 20.1867 6.15667 20.42 4.57C20.7 2.93666 20.91 1.44333 21.05 0.0899959H31.69Z"
-                              fill="currentColor" />
-                          </svg>
-                        </div>
-                        <blockquote class="mt-8">
-                          {{ .content | markdownify }}
-                        </blockquote>
-                        <div class="mt-11 flex items-center">
-                          <div class="text-dark dark:text-white">
-                            {{ partial "image" (dict "Src" .avatar "Size" "50x50" "Class" "rounded-full" "Alt" .name) }}
-                          </div>
-                          <div class="ml-4">
-                            <a href="{{ .link }}">
-                              <h3 class="h5 font-primary font-semibold">
-                                {{ .name }}
-                              </h3>
-                            </a>
-                            <p class="text-dark dark:text-white">
-                              {{ .designation | markdownify }}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  {{ end }}
-                </div>
-                <div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    {{ end }}
-  {{ end }}
-  <!-- /Testimonials -->
 {{ end }}

layouts/news/list.html

@@ -24,6 +24,10 @@
           <!-- widget -->
           {{ $widget:= site.Params.widgets.sidebar }}
           {{ partialCached "widgets/widget-wrapper" ( dict "Widgets" $widget "Scope" . ) }}
+
+          {{ if .Params.text_sidepanel }}
+          {{ partial "components/text_sidepanel.html" .}}
+          {{ end }}
         </div>
       </div>
     </div>

layouts/partials/components/features.html

@@ -6,12 +6,12 @@
   {{ with .transition }}
   {{ if .start }}
   <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .start_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
   </div>
   {{ end }}
   {{ if .start_dark }}
   <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .start_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
   </div>
   {{ end }}
   {{ end }}
@@ -27,7 +27,7 @@
   {{ end }}
   {{ end }}
 
-  <div class="container relative mx-auto" style="z-index: 12;">
+  <div class="container relative mx-auto" style="z-index: 5;">
     <div class="row items-center justify-between">
       {{ if eq .side "center" }}
       <div class="mx-auto md:col-10 lg:col-10 {{ .content_class }}">
@@ -69,11 +69,6 @@
         {{ partial "components/testimonials.html" . }}
         {{ end }}
         <!-- testimonials -->
-        <!-- people_grid  -->
-        {{ if .img_grid }}
-        {{ partial "components/people_grid.html" . }}
-        {{ end }}
-        <!-- people_grid -->
         <!-- img_grid  -->
         {{ if .img_grid }}
         {{ partial "components/img_grid.html" . }}
@@ -174,12 +169,12 @@
   {{ with .transition }}
   {{ if .end }}
   <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .end_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
   </div>
   {{ end }}
   {{ if .end_dark }}
   <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .end_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
   </div>
   {{ end }}
   {{ end }}

layouts/partials/components/img_grid.html

@@ -1,14 +1,25 @@
 {{ if .img_grid }}
-<div class="container relative mx-auto px-4">
+<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">
-    {{ range $i, $option := .img_grid }}
+    {{ range $i, $option := .img_grid.imgs }}
     <div class="w-1/2 md:w-1/3 p-2">
-      <div class="flex justify-center items-center w-full">
+      <div class="flex justify-center align-items-center items-center w-full justify-items-center row"
-        <a href="{{ $option.link }}" class="relative align-center" target="_blank" rel="noopener noreferrer"
+      {{ if .modal_target }} data-modal-show="{{ .modal_target }}" {{ end }}>
-          title="{{ $option.name }}">
+      {{ $imgres := .resources.Get $option.img }}
-          {{ $imgres := .resources.Get $option.icon }}
+      {{ if $option.link}}
-          <img class="max-w-24 align-center" src="{{ $option.icon }}" alt="{{ .Item.Name }}">
+        <a href="{{ $option.link }}">
+      {{ 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>
+        {{ end }}
+        {{ if $option.subtitle }}
+        <p class="{{ $option.subtitle_class }} {{ .img_grid.img_subtitle_class }} col-12">{{ $option.subtitle | markdownify }}</p>
+        {{ end }}
+      {{ if $option.link}}
         </a>
+      {{ end }}
       </div>
     </div>
     {{ end }}

layouts/partials/components/modals.html

@@ -0,0 +1,47 @@
+<!-- modal container -->
+{{ if .Params.modals }}
+<div class="modal_container z-100">
+  {{ range $i, $option := .Params.modals }}
+  {{ if .active }}
+  <!-- modal -->
+  <div id="{{ .id }}" tabindex="-1" aria-hidden="true"
+    class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full flex bg-[rgba(0,0,0,0.5)] modal-bg">
+    <div class="relative p-4 w-full max-w-2xl max-h-full">
+      <!-- Modal content -->
+      <div class="relative bg-white rounded-lg shadow dark:bg-[#150e31]">
+        <!-- Modal header -->
+        <div class="flex items-center justify-between p-4 md:p-5 rounded-t">
+          <button type="button"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            data-modal-hide="{{ .id }}">
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- 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 }}" />
+          {{ end }}
+          {{ if $option.img_dark }}
+          <img src="{{ $option.img_dark }}" class="w-full max-h-48 object-contain hidden dark:block" />
+          {{ end }}
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ $option.title | markdownify }}
+          </h3>
+          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ $option.content | markdownify }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /modal -->
+  {{ end }}
+  {{ end }}
+</div>
+<!-- /modal container -->
+{{ end }}

layouts/partials/components/people_grid.html

@@ -1,17 +0,0 @@
-{{ if .people_grid }}
-<div class="container relative mx-auto px-4">
-  <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
-    {{ range $i, $option := .people_grid.people }}
-    <div class="w-1/2 md:w-1/3 p-2">
-      <div class="flex justify-center items-center w-full">
-        <a href="{{ $option.link }}" class="relative align-center" target="_blank" rel="noopener noreferrer"
-          title="{{ $option.name }}">
-          {{ $imgres := .resources.Get $option.icon }}
-          <img class="max-w-24 align-center" src="{{ $option.icon }}" alt="{{ .Item.Name }}">
-        </a>
-      </div>
-    </div>
-    {{ end }}
-  </div>
-</div>
-{{ end }}

layouts/partials/components/text_sidepanel.html

@@ -0,0 +1,8 @@
+{{ with .Params.text_sidepanel }}
+{{ if .active }}
+<div class="mb-8 {{ .section_class }}">
+  <h5 class="{{ .title_class }}">{{ .title }}</h5>
+  <p class="{{ .text_class }}">{{ .text | markdownify }}</p>
+</div>
+{{ end }}
+{{ end }}