progress on a properly working sidebar

_config.ts

@@ -16,28 +16,46 @@ import source_maps from "lume/plugins/source_maps.ts";
 import tailwindcss from "lume/plugins/tailwindcss.ts";
 import postcss from "lume/plugins/postcss.ts";
 import terser from "lume/plugins/terser.ts";
+import remark from "lume/plugins/remark.ts";
+import sass from "lume/plugins/sass.ts";
+import minify from "lume/plugins/minify_html.ts";
 
+// Custom Plugins
+import emojis from "./_src/lib/plugins/mutant.ts";
 
 // Components
 // import Link from "./_src/_components/Link.vento";
 
 const site = lume({
     src: "_src",
-
+    location: new URL(Deno.env.get("LOCATION") || "http://localhost:3000"),
+    components: {
+        variable: "comp",
+        cssFile: "/components.css",
+        jsFile: "/components.js",
+    },
 });
 
-
-site.data("greeting", () => {
-    const hellos = ["Ahoy!", "Ahoy there!", "Hey there!", "Howdy howdy!", "Howdy, friend!", "Howdy!", "Hey!", "Hey there!", "Hi!", "Hello!", "Hello there!", "Hi there!"];
-    return hellos[Math.floor(Math.random() * hellos.length)];
-})
-
 site.data("getYear", () => {
     return new Date().getFullYear();
 });
 
+// CSS and Engine Stuffs
+site.use(emojis())
+site.data("basename", "css", "./files/styles");
+site.use(sass());
+site.use(tailwindcss({
+    options: {
+        attributes: {
+            darkMode: 'class'
+        }
+    }
+}));
+site.use(postcss());
 site.use(pug());
 site.use(jsx());
+site.use(remark());
+// Plugin Things
 site.use(attributes());
 site.use(code_highlight());
 // site.use(favicon());
@@ -51,25 +69,15 @@ site.use(nav());
 // site.use(pagefind());
 site.use(reading_info());
 site.use(source_maps());
-site.use(tailwindcss({
-    options: {
-        attributes: {
-            darkMode: 'class'
-        }
-    }
-}));
-site.use(postcss());
 site.use(terser());
+// site.use(minify({
+//     extensions: [".html"],
+// }));
 
-site.ignore('wk')
-site.copy("files");
 
-// Manually define the included WK Files to prevent it from copying the .git folder
+site.ignore('wk/.git', 'wk/README.md')
-site.copy("wk/fursona", ".well-known/fursona");
+site.copy("wk", ".well-known");
+// site.copy("files/emojis/nature_effects/effects/sparkles.svg");
 
-// site.script("cleanup",
-//     // "echo pwd"
-//     ["sudo rm -rf .well-known/.git"]
-// )
 
 export default site;

_src/_components/Icon.vento

@@ -0,0 +1 @@
+<img src="{{emojiPath}}" class="o-emoji"/>

_src/_components/Link.vento

@@ -1,3 +1,3 @@
-<a href="{{url}}">
+<a class="content_link" href="{{url}}">
   {{ name }}
 </a>

_src/_components/Sidebar.vento

@@ -0,0 +1,37 @@
+<nav class="sm:hidden fixed top-0 z-50 w-full border-b border-red-200 bg-red-200 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
+  <div class="px-3 py-3 lg:px-5 lg:pl-3">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center justify-start rtl:justify-end">
+        <button 
+               data-drawer-target="funnySidebar" 
+               data-drawer-toggle="funnySidebar" 
+               aria-controls="funnySidebar" 
+               type="button" class="inline-flex items-center p-2 text-sm text-red-500 rounded-lg sm:hidden hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+            <span class="sr-only">Open Sidebar</span>
+            <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+               <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+            </svg>
+         </button>
+      </div>
+  </div>
+</nav>
+
+<aside id="funnySidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full border-r sm:translate-x-0 border-red-200 bg-red-200 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" aria-label="Sidebar">
+   <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-zinc-900">
+      <ul class="space-y-2 font-medium">
+         {{ for item of [
+            {url: "/", content: "Home"},
+            {url: "/", content: "Projects"},
+            {url: "/", content: "Posts"}] 
+         }}
+         <li>
+            {{comp.SidebarButton({content: item.content,url: item.url})}}
+         </li>
+         {{/for}}
+      </ul>
+   </div>
+</aside>
+
+<div class="p-4 pt-10 sm:pt-0 sm:ml-64">
+  {{content}}
+</div>

_src/_components/SidebarButton.vento

@@ -0,0 +1,6 @@
+<a href="{{url}}" class="flex items-center p-2 text-gray-900 rounded-lg bg-red-200 hover:bg-zinc-800 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white group">
+    <span class="flex-1 ms-3 whitespace-nowrap">{{content}}</span>
+    {{# {{if active}}
+        <span class="flex-1 ms-3 whitespace-nowrap">{{content}}</span>
+    {{/if}} #}}
+</a>

_src/_includes/layouts/base.vento

@@ -2,8 +2,6 @@
 title: Lio
 description: "Lio's personal site"
 ---
-<!doctype html>
-
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -11,21 +9,21 @@ description: "Lio's personal site"
     <title>{{ title }} - Lio</title>
     <meta name="description" content="{{ description }}">
     <meta name="supported-color-schemes" content="light dark" />
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="/files/styles/main.css">
     <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ title }}">
     <link rel="alternate" href="/feed.json" type="application/json" title="{{ title }}">
   </head>
-  <body class="ccontainer bg-red-200 dark:bg-zinc-900 dark:text-white">
+  <body class="bg-red-200 dark:bg-zinc-900 dark:text-white">
     {{ if includeSocials }}
       {{ include "partials/socials.vento" }}
     {{ /if}}
-
+          {{ comp Sidebar}}
-    <main class="">
+          <div class="">
-      {{ content }}
+              {{content}}
-    </main>
+          </div>
-  
           {{ if includeFooter }}
             {{ include "partials/footer.vento" }}
           {{ /if}}
+      {{ /comp }}
   </body>
 </html>

_src/about.md

@@ -0,0 +1,11 @@
+---
+layout: layouts/landing.vento
+title: Home
+includeSocials: false
+templateEngine: [vento, md]
+# url: /about
+---
+
+furry :lion_with_mane:
+
+i like :crow:s

_src/index.md

@@ -5,13 +5,15 @@ includeSocials: false
 templateEngine: [vento, md]
 ---
 
-# hi, i'm lio
+# hi, i'm lio :tiger: :eagle: :fox:
 
 _(they/them)_
 
 **welcome to my corner of the internet** \
 **21y/o digital sorcerer and pixel wizard from germany**
 
+this is a very long text about me
+
 ### projects
 
 - [urlfest](https://urlfe.st)

_src/styles.css

@@ -1,101 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.ccontainer {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-/*
-.fancy-container {
-  text-align: center;
-} */
-
-a {
-  color: black;
-  transition: color 0.1s, background-color 0.1s;
-  background-color: rgb(206, 150, 45);
-  text-decoration: none;
-  border-radius: 4px;
-  padding: 0.01rem 0.5rem;
-  margin: 0 0.3rem;
-  line-height: 1.7;
-  white-space: nowrap;
-}
-a:hover {
-  color: rgb(255, 200, 99);
-  background-color: rgba(152, 109, 29, 0.506);
-}
-
-a img {
-  border: none;
-}
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.25;
-  margin: 1.5rem 0 1rem;
-}
-
-h1 {
-  /* font-family: Playfair, serif; */
-  font-weight: 900;
-  font-size: 5em;
-  font-feature-settings: "lnum" 1;
-  font-variation-settings: "opsz" 35;
-  line-height: 1;
-  margin: 1.5rem 0 1rem;
-}
-
-h2 {
-  /* font-family: Playfair, serif; */
-  font-weight: 900;
-  font-size: 2.5em;
-  font-feature-settings: "lnum" 1;
-  font-variation-settings: "opsz" 20;
-}
-
-h3 {
-  font-weight: 700;
-  font-size: 1.5em;
-}
-
-h4 {
-  font-weight: 600;
-  font-size: 1em;
-}
-
-h5 {
-  font-weight: 600;
-  font-size: 0.875em;
-}
-
-h6 {
-  font-weight: 600;
-  font-size: 0.85em;
-}
-
-p {
-  margin: 0 0 16px;
-}
-
-code {
-  font-family: "IBM Plex Mono", monospace;
-}
-
-li,
-ul {
-  margin-bottom: 0.25rem;
-}
-
-.margin-even {
-  margin: 1rem 0;
-}
-
-.margin-none {
-  margin: 0;
-}

deno.lock

@@ -2838,6 +2838,7 @@
     "https://deno.land/x/lume@v2.0.2/deps/log.ts": "6248b5f92f7b7a71986af0eb7372f03fb696404f69012331c6f0924605888be2",
     "https://deno.land/x/lume@v2.0.2/deps/markdown_it.ts": "626e2f6fbc080e46d98e9ac3e53fcb9be355f2907ba309b57e8d20540fdeca41",
     "https://deno.land/x/lume@v2.0.2/deps/mdx.ts": "ad37edae409a47b621cc1ac808f59b0b5fd5da2ea3b3fb87a64aeb4d16ff99de",
+    "https://deno.land/x/lume@v2.0.2/deps/minify_html.ts": "a42184735d1e2ecf429bde8581eeba29cb7d9803cab940509463af6925ff64c0",
     "https://deno.land/x/lume@v2.0.2/deps/pagefind.ts": "9c0fbe6c284c523beac36e7f419a724e3d9bd0d9cdf4e401d56f2c2c1e1daa60",
     "https://deno.land/x/lume@v2.0.2/deps/path.ts": "b448066394dfaa2c3583695a23b5a506fde9bd3c0c68fe198bf63faeefadf937",
     "https://deno.land/x/lume@v2.0.2/deps/postcss.ts": "a7e3b30672201fa37b631fea203307a9b0aceb8bca35c98f8fa90b874993f73e",
@@ -2870,6 +2871,7 @@
     "https://deno.land/x/lume@v2.0.2/plugins/markdown.ts": "7f4f2cff511d81ea39fcea3d3b39dc34c79a952f911398eac919ced25a5e4365",
     "https://deno.land/x/lume@v2.0.2/plugins/mdx.ts": "902c5584bcae84088e43e2a54848a9d6665442a90e46f851e88697e6e943490a",
     "https://deno.land/x/lume@v2.0.2/plugins/metas.ts": "4a67828d5760d7e408350026e68821211e3a90c4381459bd91b91bac35fd52f3",
+    "https://deno.land/x/lume@v2.0.2/plugins/minify_html.ts": "fe1bd66912400635f184758749a8962b21e8fae8b94fa47888cb515ffa07a7df",
     "https://deno.land/x/lume@v2.0.2/plugins/modules.ts": "19a66398a5494f506458e48b8443a7c4700b7577e8fcc0818c39b1d0530c8950",
     "https://deno.land/x/lume@v2.0.2/plugins/nav.ts": "d57c98b4519a19bea8bdd517abe0ecb4766b31f42f6686c0b0a4cf1edb442692",
     "https://deno.land/x/lume@v2.0.2/plugins/pagefind.ts": "30edd81605176271d9ddac312fae7c4c0deee803f606304675b1c82572903aa9",
@@ -2877,6 +2879,7 @@
     "https://deno.land/x/lume@v2.0.2/plugins/postcss.ts": "11236b7d9078601728ce1236fc77b4c89881aab0d3bbe1a30ff862784f30f37e",
     "https://deno.land/x/lume@v2.0.2/plugins/pug.ts": "8ec3c28776bef4b8501d9565c605a21e1bbee06b42f77a6c63624a60a57a6038",
     "https://deno.land/x/lume@v2.0.2/plugins/reading_info.ts": "74fd91be32099c8f9af2822731ef9036554bcd31a164c99c084de0300b468c8c",
+    "https://deno.land/x/lume@v2.0.2/plugins/remark.ts": "1125ef3055ba59f2dd670ca0ceda587d19e452d0807c9a7c3ed3e7f31e5f90a2",
     "https://deno.land/x/lume@v2.0.2/plugins/sass.ts": "18f581816c99f6b187535f9cf069ce7a716c7114be422bdbc124c133bc71512b",
     "https://deno.land/x/lume@v2.0.2/plugins/search.ts": "8ec3a8f082b8ff1532bbe8f8bf76dfaa2d0feab7c2ec5c824d0ccc044c26f640",
     "https://deno.land/x/lume@v2.0.2/plugins/source_maps.ts": "2fb5a23d22768a92e04c6feefe2c704dd8d970780a90d0e069f784353f5c545f",
@@ -2911,6 +2914,7 @@
     "https://deno.land/x/xml@2.1.3/utils/stream.ts": "056e2f368d47932d77e431bbc4a8292359171cc9ce881ea31ce0aae30d763e68",
     "https://deno.land/x/xml@2.1.3/utils/streamable.ts": "1603a5f10c859b95d4e9502365a0fba0b19d5d068356e20d5a6813cd37fee780",
     "https://deno.land/x/xml@2.1.3/utils/stringifier.ts": "c701b506835237c0c6c0a08fd94e0a012b644def3f4c819c64788daf2e649ea3",
-    "https://deno.land/x/xml@2.1.3/utils/types.ts": "ecaf7785e54a6f1da6f8e56da2bce9853407ceb7d5b3b70f0a60a0890151fe4c"
+    "https://deno.land/x/xml@2.1.3/utils/types.ts": "ecaf7785e54a6f1da6f8e56da2bce9853407ceb7d5b3b70f0a60a0890151fe4c",
+    "https://wilsonl.in/minify-html/deno/0.15.0/index.js": "8e7ee5067ca84fb5d5a1f33118cac4998de0b7d80b3f56cc5c6728b84e6bfb70"
   }
 }