Merge branch 'main' of ssh://git.myco.systems:2200/mycosystems/gallowelds.com

.forgejo/workflows/deploy-test.yaml

@@ -1,38 +0,0 @@
-name: Hugo
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  build:
-    runs-on: hugo-latest
-    steps:
-      - name: Temp fix to update hugo
-        run: wget "https://github.com/gohugoio/hugo/releases/download/v0.126.3/hugo_extended_0.126.3_Linux-64bit.tar.gz" && tar xf "hugo_extended_0.126.3_Linux-64bit.tar.gz" && mv ./hugo /usr/bin/hugo && rm -f hugo_extended_0.126.3_Linux-64bit.tar.gz  LICENSE  README.md
-      - name: Grab packages
-        run: apt install -y rsync openssh-client
-      - uses: actions/checkout@v4
-        with:
-          submodules: 'true'
-      - name: Run build task
-        run: hugo --minify
-      - name: Test static page
-        run: bash ${{ gitea.workspace }}/bin/test_static_page.sh
-      - name: Deploy to Server
-        uses: https://git.myco.systems/mirrors/ssh-deploy@main
-        env:
-          SSH_PRIVATE_KEY: ${{ secrets.RUNNER_SSH_PRIVATE_KEY }}
-          ARGS: "-rlgoDzvc -i --delete"
-          SOURCE: "public/"
-          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
-          REMOTE_USER: ${{ secrets.REMOTE_USER }}
-          TARGET: ${{ secrets.REMOTE_TARGET }}
-      # - name: Running Page Speed Insights
-      #   uses: https://github.com/JakePartusch/psi-action@v1.3
-      #   id: drafting
-      #   with:
-      #     url: "https://midtowndrafting.com"
-      #     threshold: 70
-      #     strategy: desktop

.forgejo/workflows/deploy.yaml

@@ -0,0 +1,25 @@
+name: Hugo
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: hugo-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+      - name: Run build task
+        run: hugo --minify
+      - name: Deploy to Server
+        uses: https://git.myco.systems/mirrors/ssh-deploy@main
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.RUNNER_SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i --delete"
+          SOURCE: "public/"
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: ${{ secrets.REMOTE_TARGET }}

bin/test_static_page.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-PORT=8080
-python3 -m http.server $PORT --directory public/ &
-
-SERVER_PID=$!
-
-# Give it a moment to start
-sleep 1
-
-# Check if the server is running
-if ! ps -p $SERVER_PID > /dev/null; then
-    echo "HTTP server failed to start."
-    exit 1
-fi
-
-# Check HTTP status
-status_code=$(curl -o /dev/null -s -w "%{http_code}" http://localhost:$PORT)
-
-# Kill the http server
-kill $SERVER_PID
-
-# Check if status code is 200
-if [ "$status_code" -ne 200 ]; then
-    echo "Website returned a non-200 status code: $status_code"
-    exit 1
-fi

config.yaml

@@ -12,6 +12,21 @@ params:
     industries. With over a decade of experience, Ian Gallo specializes in
     hand-welded, durable structures at affordable prices while prioritizing
     professionalism and inclusivity.
+  catalogButtons:
+    home:
+      - categoryName: 'Backdrops'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Arches'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Canopies'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Chandeliers'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Signature Pieces'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Centerpieces'
+        img: https://placehold.co/300x200/
+
   social:
     main:
       - url: 'mailto:iangalloart@gmail.com'

content/catalog/index.md

@@ -17,7 +17,30 @@
         "deliveryPickup": "",
         "installBreakdown": "$200",
         "purchaseCost": "",
-        "cat": "Backdrops"
+        "cat": "Backdrops",
+        "gallery": [
+            {
+            "image": "https://placehold.co/300x200/"
+            },
+            {
+            "image": "https://placehold.co/200x200/"
+            },
+            {
+            "image": "https://placehold.co/400x200/"
+            },
+            {
+            "image": "https://placehold.co/300x200/"
+            },
+            {
+            "image": "https://placehold.co/200x200/"
+            },
+            {
+            "image": "https://placehold.co/400x200/"
+            },
+            {
+            "image": "https://placehold.co/400x600/"
+            }
+        ]
     },
     {
         "item": "12ft Round Arch",
@@ -72,7 +95,7 @@
     {
         "item": "5ft Half Circle Arch ",
         "quant": "1",
-        "dimensions": "60\" wide, custom height",
+        "dimensions": "60\" wide, (custom height)",
         "baseCost": "$350",
         "deliveryPickup": "",
         "installBreakdown": "",

themes/gallo/layouts/index.html

@@ -1,3 +1,4 @@
 {{ define "main" }} 
 {{ partial "header.html" . }} 
+{{ partial "categories.html" . }} 
 {{ end }}

themes/gallo/layouts/partials/categories.html

@@ -0,0 +1,21 @@
+<div class="grid grid-cols-3 gap-3 m-5 my-8">
+  {{ range .Site.Params.catalogButtons.home }}
+  <a
+    class="rounded-xl aspect-[3/2] overflow-hidden"
+    href="/catalog/#{{ .categoryName }}"
+  >
+    <div class="relative h-full max-w-full">
+      <p
+        class="w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white font-bold text-4xl"
+      >
+        {{ .categoryName }}
+      </p>
+      <img
+        class="h-full max-w-full opacity-50"
+        src="{{ .img }}"
+        alt="Category {{ .categoryName }}"
+      />
+    </div>
+  </a>
+  {{ end }}
+</div>

themes/gallo/layouts/partials/rental-catalog.html

@@ -1,42 +1,51 @@
-<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
-    {{ range .Params.catalog }}
-      {{ if ne .item "" }}
+<div
+  class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
+>
+  {{ range .Params.catalog }} {{ if ne .item "" }}
   <div class="flex flex-col bg-white rounded-lg border p-4 relative">
-          <img src="https://placehold.co/300x200/" alt="Placeholder Image" class="w-full h-48 rounded-md object-cover" />
+    <img
+      src="https://placehold.co/300x200/"
+      alt="Placeholder Image"
+      class="w-full h-48 rounded-md object-cover"
+    />
     <div class="px-1 pt-4">
-            <div class="font-bold text-xl mb-2">{{ .item }}</div>
+      <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
+        {{ .item }} {{ if ne .cat "" }}
+        <div>
+          <span
+            class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300"
+            >{{ .cat }}</span
+          >
+        </div>
+        {{ end }}
+      </div>
       <div class="text-gray-800 text-base">
         {{ if ne .quant "" }}
         <div class="flex flex-row justify-between">
           <strong>Quantity:</strong>
           <span>{{ .quant }}</span>
         </div>
-              {{ end }}
-              {{ if ne .dimensions "" }}
-                <div class="text-right flex flex-row justify-between">
+        {{ end }} {{ if ne .dimensions "" }}
+        <div class="gap-1 text-right flex flex-row justify-between">
           <strong>Dimensions:</strong>
           <span>{{ .dimensions }}</span>
         </div>
-              {{ end }}
-              {{ if ne .baseCost "" }}
+        {{ end }} {{ if ne .baseCost "" }}
         <div class="flex flex-row justify-between">
           <strong>Base Cost:</strong>
           <span>{{ .baseCost }}</span>
         </div>
-              {{ end }}
-              {{ if ne .deliveryPickup "" }}
+        {{ end }} {{ if ne .deliveryPickup "" }}
         <div class="flex flex-row justify-between">
           <strong>+ Delivery/Pickup:</strong>
           <span>{{ .deliveryPickup }}</span>
         </div>
-              {{ end }}
-              {{ if ne .installBreakdown "" }}
+        {{ end }} {{ if ne .installBreakdown "" }}
         <div class="flex flex-row justify-between">
           <strong>+ Install/Breakdown:</strong>
           <span>{{ .installBreakdown }}</span>
         </div>
-              {{ end }}
-              {{ if ne .purchaseCost "" }}
+        {{ end }} {{ if ne .purchaseCost "" }}
         <div class="flex flex-row justify-between">
           <strong>Purchase Cost:</strong>
           <span>{{ .purchaseCost }}</span>
@@ -44,27 +53,74 @@
         {{ end }}
       </div>
     </div>
-          <div class="h-full grid grid-cols-1 place-items-end">
+    <div class="h-full grid grid-cols-1 place-items-end pt-5">
       <a class="w-full" href="#modal-{{ .item | urlize }}">
-              <button type="button" class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200">
+        <button
+          type="button"
+          class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
+        >
           Expand
         </button>
       </a>
     </div>
-          <div id="modal-{{ .item | urlize }}" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-              <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
-              <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-              <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+    <div
+      id="modal-{{ .item | urlize }}"
+      class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0"
+      >
+        <div class="fixed inset-0" aria-hidden="true"></div>
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
+        >
+        <div
+          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full"
+        >
           <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
-                    <div class="w-full mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black sm:mx-0 sm:h-10 sm:w-10">
-                      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div
+                class="w-full mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black sm:mx-0 sm:h-10 sm:w-10"
+              >
+                <svg
+                  class="h-6 w-6 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </div>
               <div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <h3 class="text-xl mb-2" id="modal-title"><strong>{{ .item }}</strong> details</h3>
+                <h3 class="text-xl mb-2" id="modal-title">
+                  <strong>{{ .item }}</strong>
+                </h3>
+                {{ if .gallery }}
+                <div
+                  class="mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-3 lg:columns-4 [&>img:not(:first-child)]:mt-4"
+                >
+                  {{ range .gallery }}
+                  <img
+                    loading="lazy"
+                    class="rounded-lg hover:scale-110 ease-in-out duration-300 transition-all shadow-xl hover:shadow-2xl"
+                    src="{{ .image }}"
+                  />
+                  {{ end }}
+                </div>
+                {{ end }}
+
                 <div class="px-1 pt-4 w-full">
                   <div class="text-gray-800 text-base">
                     {{ if ne .quant "" }}
@@ -72,50 +128,43 @@
                       <strong>Quantity:</strong>
                       <span>{{ .quant }}</span>
                     </div>
-                          {{ end }}
-                          {{ if ne .dimensions "" }}
+                    {{ end }} {{ if ne .dimensions "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Dimensions:</strong>
                       <span>{{ .dimensions }}</span>
                     </div>
-                          {{ end }}
-                          {{ if ne .baseCost "" }}
+                    {{ end }} {{ if ne .baseCost "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Base Cost:</strong>
                       <span>{{ .baseCost }}</span>
                     </div>
-                          {{ end }}
-                          {{ if ne .deliveryPickup "" }}
+                    {{ end }} {{ if ne .deliveryPickup "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Delivery/Pickup:</strong>
                       <span>{{ .deliveryPickup }}</span>
                     </div>
-                          {{ end }}
-                          {{ if ne .installBreakdown "" }}
+                    {{ end }} {{ if ne .installBreakdown "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Install/Breakdown:</strong>
                       <span>{{ .installBreakdown }}</span>
                     </div>
-                          {{ end }}
-                          {{ if ne .purchaseCost "" }}
+                    {{ end }} {{ if ne .purchaseCost "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
                     {{ end }}
-                          {{ if ne .cat "" }}
-                            <div class="flex flex-row justify-between">
-                              <strong>Category:</strong>
-                              <span>{{ .cat }}</span>
-                            </div>
-                          {{ end }}
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                  <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
+            <button
+              id="close-modal"
+              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
+              @click="open = false"
+            >
               Close
             </button>
           </div>
@@ -123,25 +172,59 @@
       </div>
     </div>
   </div>
-      {{ end }}
-    {{ end }}
+  {{ end }} {{ end }}
 </div>
-  
 <script>
-    const buttons = document.querySelectorAll('button[type="button"]');
-    buttons.forEach(button => {
-      button.addEventListener('click', event => {
-        const modalId = event.target.parentElement.getAttribute('href');
-        const modal = document.querySelector(modalId);
-        modal.classList.remove('hidden');
+  document.addEventListener("DOMContentLoaded", function () {
+    const modalButtons = document.querySelectorAll(".grid-cols-1 a");
+    const closeButtons = document.querySelectorAll("#close-modal");
+    const modals = document.querySelectorAll(".fixed");
+
+    function filterItems(category) {
+      console.log("Filtering items for category:", category);
+      const items = document.querySelectorAll(".grid > div");
+
+      items.forEach((item) => {
+        const itemCategory = item.querySelector(".bg-blue-100");
+        if (!itemCategory) return; // Skip if category not found
+
+        if (category === "" || itemCategory.textContent === category) {
+          item.classList.remove("hidden");
+        } else {
+          item.classList.add("hidden");
+          // Hide modal if it's open for an item that's now hidden
+          const modalId = item.id.replace("modal-", "");
+          const modal = document.getElementById(modalId);
+          if (modal) modal.classList.add("hidden");
+        }
+      });
+    }
+
+    const category = window.location.hash.substring(1);
+    console.log("Initial category:", category);
+    filterItems(category);
+
+    window.addEventListener("hashchange", function () {
+      const newCategory = window.location.hash.substring(1);
+      console.log("New category:", newCategory);
+      filterItems(newCategory);
+    });
+
+    modalButtons.forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        const modalId = this.getAttribute("href").substring(1);
+        const modal = document.getElementById(modalId);
+        modal.classList.remove("hidden");
       });
     });
 
-    const closeButtons = document.querySelectorAll('button[type="button"].close-modal');
-    closeButtons.forEach(button => {
-      button.addEventListener('click', event => {
-        const modal = event.target.closest('.modal');
-        modal.classList.add('hidden');
+    closeButtons.forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        const modal = this.closest(".fixed");
+        modal.classList.add("hidden");
+      });
     });
   });
 </script>