From 6e42a3ff20837ea561434e988ed3a177eb6b017c Mon Sep 17 00:00:00 2001
From: Marley <marley@punkfairie.net>
Date: Sun, 10 Dec 2023 14:51:44 -0800
Subject: [PATCH] menu switchin

---
 .eleventy.js                    |  84 ++++++++++++++++----------------
 node_modules/.package-lock.json |  21 ++++++++
 package-lock.json               |  24 ++++++++-
 package.json                    |   3 +-
 src/_includes/layout.liquid     |  20 ++++++--
 src/img/petz/siren-2.png        | Bin 0 -> 5262 bytes
 src/js/main.js                  |   5 ++
 src/style/layout.css            |  11 +++--
 8 files changed, 115 insertions(+), 53 deletions(-)
 create mode 100644 src/img/petz/siren-2.png
 create mode 100644 src/js/main.js

diff --git a/.eleventy.js b/.eleventy.js
index 0c9b376..a5e004d 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,50 +1,50 @@
-const fs = require('fs')
-const postcss = require('postcss')
-const postcssImportExtGlob = require('postcss-import-ext-glob')
-const postcssImport = require('postcss-import')
-const postcssPresetEnv = require('postcss-preset-env')
-const cssnano = require('cssnano')
-// const esbuild = require('esbuild')
-const automaticNoopener = require('eleventy-plugin-automatic-noopener')
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssImportExtGlob = require("postcss-import-ext-glob");
+const postcssImport = require("postcss-import");
+const postcssPresetEnv = require("postcss-preset-env");
+const cssnano = require("cssnano");
+const esbuild = require("esbuild");
+const automaticNoopener = require("eleventy-plugin-automatic-noopener");
 
-module.exports = function (eleventyConfig) {
-    eleventyConfig.on('eleventy.before', async () => {
-        const cssSrc = './src/style/style.css'
-        const cssDest = './dist/style.css'
+module.exports = function(eleventyConfig) {
+  eleventyConfig.on("eleventy.before", async () => {
+    const cssSrc = "./src/style/style.css";
+    const cssDest = "./dist/style.css";
 
-        fs.readFile(cssSrc, (err, css) => {
-            // noinspection JSCheckFunctionSignatures
-            postcss([
-                postcssImportExtGlob,
-                postcssImport,
-                postcssPresetEnv,
-                cssnano
-            ])
-                .process(css, {from: cssSrc, to: cssDest})
-                .then(res => {
-                    fs.writeFile(cssDest, res.css, () => true)
-                })
-        })
+    fs.readFile(cssSrc, (err, css) => {
+      // noinspection JSCheckFunctionSignatures
+      postcss([
+        postcssImportExtGlob,
+        postcssImport,
+        postcssPresetEnv,
+        cssnano
+      ])
+        .process(css, { from: cssSrc, to: cssDest })
+        .then(res => {
+          fs.writeFile(cssDest, res.css, () => true);
+        });
+    });
 
-        // await esbuild.build({
-        //     entryPoints: ['src/js/main.js'],
-        //     bundle: true,
-        //     minify: true,
-        //     target: 'es2020',
-        //     outfile: 'dist/main.js',
-        // })
-        //     .then(() => console.log('🧳 esbuild done'))
-        //     .catch(() => process.exit(1))
+    await esbuild.build({
+      entryPoints: ["src/js/main.js"],
+      bundle: true,
+      minify: true,
+      target: "es2020",
+      outfile: "dist/main.js"
     })
+      .then(() => console.log("🧳 esbuild done"))
+      .catch(() => process.exit(1));
+  });
 
-    eleventyConfig.addWatchTarget('./src/style/')
-    eleventyConfig.addWatchTarget('./src/js/')
+  eleventyConfig.addWatchTarget("./src/style/");
+  eleventyConfig.addWatchTarget("./src/js/");
 
-    eleventyConfig.addPlugin(automaticNoopener, {
-        noreferrer: true,
-    })
+  eleventyConfig.addPlugin(automaticNoopener, {
+    noreferrer: true
+  });
 
-    eleventyConfig.addPassthroughCopy('./src/img/')
+  eleventyConfig.addPassthroughCopy("./src/img/");
 
-    return {dir: {input: 'src', output: 'dist'}}
-}
\ No newline at end of file
+  return { dir: { input: "src", output: "dist" } };
+};
\ No newline at end of file
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 6814621..b957013 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1392,6 +1392,19 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -1426,6 +1439,14 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.13.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
+      "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
diff --git a/package-lock.json b/package-lock.json
index 426158f..51f212d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@punkfairie/modern-css-reset": "^1.0.1"
+        "@punkfairie/modern-css-reset": "^1.0.1",
+        "alpinejs": "^3.13.3"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -1749,6 +1750,19 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -1783,6 +1797,14 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.13.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
+      "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
diff --git a/package.json b/package.json
index 5c66bf0..f8b6364 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "stylelint": "^15.11.0"
   },
   "dependencies": {
-    "@punkfairie/modern-css-reset": "^1.0.1"
+    "@punkfairie/modern-css-reset": "^1.0.1",
+    "alpinejs": "^3.13.3"
   }
 }
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
index 79524fb..b3273bd 100644
--- a/src/_includes/layout.liquid
+++ b/src/_includes/layout.liquid
@@ -8,16 +8,18 @@
   <title>... Epiphany ... baby, it's cold outsite ...</title>
   <!--suppress HtmlUnknownTarget -->
   <link rel="stylesheet" href="/style.css">
+  <!--suppress HtmlUnknownTarget -->
+  <script src="/main.js" type="module"></script>
 </head>
 <body>
-<div class="site">
+<div class="site" x-data="{menu: 'index'}">
   <header>
     <h1>Epiphany</h1>
 
     <nav class="main-nav">
       <a href="/">index</a>
-      <a href="#">adoptions</a>
-      <a href="#">about</a>
+      <a href="#" x-on:click="menu = 'adoptions'">adoptions</a>
+      <a href="#" x-on:click="menu = 'about'">about</a>
     </nav>
   </header>
 
@@ -25,7 +27,17 @@
     {{ content }}
   </main>
 
-  <nav class="secondary-nav"></nav>
+  <nav class="secondary-nav" id="index" x-show="menu === 'index'">
+    <img src="/img/petz/siren-2.png" alt="Siren">
+  </nav>
+
+  <nav class="secondary-nav" id="adoptions" x-show="menu === 'adoptions'">
+    adoptions menu
+  </nav>
+
+  <nav class="secondary-nav" id="about" x-show="menu === 'about'">
+    about menu
+  </nav>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/img/petz/siren-2.png b/src/img/petz/siren-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1ed46cd2276a5c9dc1d05ca34976746038eaff0
GIT binary patch
literal 5262
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
UnL)XQfB*mh07*qoM6N<$f@{y%GXMYp

literal 0
HcmV?d00001

diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..48e85f9
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,5 @@
+import Alpine from "alpinejs";
+
+window.Alpine = Alpine;
+
+Alpine.start();
\ No newline at end of file
diff --git a/src/style/layout.css b/src/style/layout.css
index 1118162..f06e7f7 100644
--- a/src/style/layout.css
+++ b/src/style/layout.css
@@ -11,6 +11,8 @@
             '.      .'      1.5fr
             'header header' 0.5fr
             's-nav  main'   2.5fr / 1fr 5fr;
+        grid-column-gap: var(--space-s);
+
         width: 1024px;
         height: 768px;
         padding: var(--space-xs);
@@ -31,15 +33,15 @@
         column-gap: var(--space-m);
     }
 
-    h1 {
-
-    }
-
     .main-nav {
         display: flex;
         column-gap: var(--space-xs);
     }
 
+    main, .secondary-nav {
+        background-color: rgba(255, 255, 255, 0.49);
+    }
+
     main {
         --flow-space: var(--space-xs);
 
@@ -47,7 +49,6 @@
         padding: var(--space-s);
         overflow: auto;
         text-align: center;
-        background-color: rgba(255, 255, 255, 0.49);
     }
 
     .secondary-nav {