Mostly audio stuff

archetypes/default.md

@@ -1,6 +1,6 @@
 ---
 title: "{{ replace .TranslationBaseName "-" " " | title }}"
-date: {{ .Date.Format "2006-01-02" }}
+date: {{ .Date }}
 tags: []
 description: ""
 ---

assets/js/commands/navigation.js

@@ -45,17 +45,16 @@ if (window.terminal) {
 
   // PAGE NAVIGATION
 
-  window.terminal.registerCommand(
-    "latest",
-    "View the latest post, regardles of section",
-    () => {
-      let latestPostLink = document.getElementById("latest-post-link");
-      window.location.href = latestPostLink.textContent;
-    },
-  );
-
   // About command
   window.terminal.registerCommand("about", "About this site", () => {
     window.location.href = "/about/";
   });
+
+  window.terminal.registerCommand(
+    "music",
+    "My music interests and audio gear",
+    () => {
+      window.location.href = "/audio/";
+    },
+  );
 }

assets/js/pages/audio.js

@@ -19,3 +19,61 @@ if (document.getElementById("starfield")) {
     starfield.appendChild(star);
   }
 }
+
+(function () {
+  const container = document.querySelector(".record-shelf-container");
+
+  // Exit if the record shelf doesn't exist on this page
+  if (!container) {
+    return;
+  }
+
+  const recordSlots = container.querySelectorAll(".record-slot");
+  const albumContents = container.querySelectorAll(".album-content");
+
+  // Exit if we don't have the necessary elements
+  if (!recordSlots.length || !albumContents.length) {
+    return;
+  }
+
+  // Set first album as active by default
+  const firstSlot = recordSlots[0];
+  if (firstSlot) {
+    const firstSleeve = firstSlot.querySelector(".record-sleeve");
+    if (firstSleeve) {
+      firstSleeve.classList.add("active");
+    }
+  }
+
+  recordSlots.forEach((slot) => {
+    slot.addEventListener("click", function (e) {
+      e.preventDefault();
+      const index = this.getAttribute("data-album-index");
+
+      // Hide all content
+      albumContents.forEach((content) => (content.style.display = "none"));
+
+      // Show selected content
+      const selectedContent = container.querySelector(
+        `[data-content-index="${index}"]`,
+      );
+      if (selectedContent) {
+        selectedContent.style.display = "block";
+      }
+
+      // Remove active class from all sleeves
+      recordSlots.forEach((s) => {
+        const sleeve = s.querySelector(".record-sleeve");
+        if (sleeve) {
+          sleeve.classList.remove("active");
+        }
+      });
+
+      // Add active class to clicked sleeve
+      const clickedSleeve = this.querySelector(".record-sleeve");
+      if (clickedSleeve) {
+        clickedSleeve.classList.add("active");
+      }
+    });
+  });
+})();

assets/js/terminal.js

@@ -61,9 +61,9 @@ class TerminalShell {
         latestPostDate.innerText +
         ")",
     );
-    this.printHTML(
-      "<span class='info'>&nbsp;- Type \"latest\" to view it.</span>",
-    );
+    // this.printHTML(
+    //   "<span class='info'>&nbsp;- Type \"latest\" to view it.</span>",
+    // );
     this.printHTML("&nbsp;");
 
     this.printHTML(
@@ -71,7 +71,7 @@ class TerminalShell {
     );
 
     this.printHTML(
-      '<span class="warning">This site is under construction. There\'s nothing of interest here yet.</span>',
+      '<span class="warning">This site is under construction. There\'s not much of interest here yet.</span>',
     );
 
     this.inputContainer.classList.remove("hidden");

assets/sass/_mixins.scss

@@ -62,3 +62,34 @@ $breakpoints: (
     }
   }
 }
+
+@mixin scrollbar-custom(
+  $color: greenyellow,
+  $width: 8px,
+  $track-bg: transparent
+) {
+  scrollbar-color: $color $track-bg;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $track-bg;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: calc($width / 2);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: darken($color, 10%);
+  }
+}
+
+// Usage
+.scrollable-child {
+  @include scrollbar-custom(greenyellow, 10px);
+}

assets/sass/_normalize.scss

@@ -7,249 +7,283 @@
  * Use a better box model (opinionated).
  */
 
- html {
-    box-sizing: border-box;
-  }
-  
-  * {
+html {
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
+  &::before,
+  &::after {
     box-sizing: inherit;
-    &::before, &::after {
-      box-sizing: inherit;
-    }
   }
-  
-  /**
+}
+
+/**
    * Use a more readable tab size (opinionated).
    */
-  
-  :root {
-    -moz-tab-size: 4;
-    tab-size: 4;
-  }
-  
-  /**
+
+:root {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+/**
    * 1. Correct the line height in all browsers.
    * 2. Prevent adjustments of font size after orientation changes in iOS.
    */
-  
-  html {
-    line-height: 1.15;
-    /* 1 */
-    -webkit-text-size-adjust: 100%;
-    /* 2 */
-  }
-  
-  /* Sections
+
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/* Sections
      ========================================================================== */
-  
-  /**
+
+/**
    * Remove the margin in all browsers.
    */
-  
-  body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  }
-  
-  /**
+
+body {
+  margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+/**
    * Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
    */
-  
-  /* Grouping content
+
+/* Grouping content
      ========================================================================== */
-  
-  /**
+
+/**
    * Add the correct height in Firefox.
    */
-  
-  hr {
-    height: 0;
-  }
-  
-  /* Text-level semantics
+
+hr {
+  height: 0;
+}
+
+/* Text-level semantics
      ========================================================================== */
-  
-  /**
+
+/**
    * Add the correct text decoration in Chrome, Edge, and Safari.
    */
-  
-  abbr[title] {
-    text-decoration: underline dotted;
-  }
-  
-  /**
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+/**
    * Add the correct font weight in Chrome, Edge, and Safari.
    */
-  
-  b, strong {
-    font-weight: bolder;
-  }
-  
-  /**
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
    * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
    * 2. Correct the odd `em` font sizing in all browsers.
    */
-  
-  code, kbd, samp, pre {
-    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-    /* 1 */
-    font-size: 1em;
-    /* 2 */
-  }
-  
-  /**
+
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
    * Add the correct font size in all browsers.
    */
-  
-  small {
-    font-size: 80%;
-  }
-  
-  /**
+
+small {
+  font-size: 80%;
+}
+
+/**
    * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
    */
-  
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  
-  sub {
-    bottom: -0.25em;
-  }
-  
-  sup {
-    top: -0.5em;
-  }
-  
-  /* Forms
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Forms
      ========================================================================== */
-  
-  /**
+
+/**
    * 1. Change the font styles in all browsers.
    * 2. Remove the margin in Firefox and Safari.
    */
-  
-  button, input, optgroup, select, textarea {
-    font-family: inherit;
-    /* 1 */
-    font-size: 100%;
-    /* 1 */
-    line-height: 1.15;
-    /* 1 */
-    margin: 0;
-    /* 2 */
-  }
-  
-  /**
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
    * Remove the inheritance of text transform in Edge and Firefox.
    * 1. Remove the inheritance of text transform in Firefox.
    */
-  
-  button, select {
-    /* 1 */
-    text-transform: none;
-  }
-  
-  /**
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
    * Correct the inability to style clickable types in iOS and Safari.
    */
-  
-  button, [type='button'], [type='reset'], [type='submit'] {
-    -webkit-appearance: button;
-  }
-  
-  /**
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
    * Remove the inner border and padding in Firefox.
    */
-  
-  button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-  
-  /**
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
    * Restore the focus styles unset by the previous rule.
    */
-  
-  button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-  
-  /**
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
    * Correct the padding in Firefox.
    */
-  
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-  
-  /**
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
    * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
    */
-  
-  legend {
-    padding: 0;
-  }
-  
-  /**
+
+legend {
+  padding: 0;
+}
+
+/**
    * Add the correct vertical alignment in Chrome and Firefox.
    */
-  
-  progress {
-    vertical-align: baseline;
-  }
-  
-  /**
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
    * Correct the cursor style of increment and decrement buttons in Safari.
    */
-  
-  [type='number'] {
-    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-      height: auto;
-    }
+
+[type="number"] {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    height: auto;
   }
-  
-  /**
+}
+
+/**
    * 1. Correct the odd appearance in Chrome and Safari.
    * 2. Correct the outline style in Safari.
    */
-  
-  [type='search'] {
-    -webkit-appearance: textfield;
-    /* 1 */
-    outline-offset: -2px;
-    /* 2 */
-    &::-webkit-search-decoration {
-      -webkit-appearance: none;
-    }
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
   }
-  
-  /**
+}
+
+/**
    * Remove the inner padding in Chrome and Safari on macOS.
    */
-  
-  /**
+
+/**
    * 1. Correct the inability to style clickable types in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
-  
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    /* 1 */
-    font: inherit;
-    /* 2 */
-  }
-  
-  /* Interactive
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
      ========================================================================== */
-  
-  /*
+
+/*
    * Add the correct display in Chrome and Safari.
    */
-  
-  summary {
-    display: list-item;
-  }
+
+summary {
+  display: list-item;
+}
+
+p {
+  line-height: 1.5em;
+  letter-spacing: 0.01em;
+  word-spacing: normal;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}

assets/sass/pages/audio.scss

@@ -6,6 +6,10 @@
   color: #fff;
   text-align: center;
 
+  a {
+    color: #fff;
+  }
+
   > .page-content {
     position: absolute;
     left: 50%;
@@ -20,7 +24,77 @@
       padding-top: 400px;
     }
 
-    .neon-sign {
+    .audio-intro {
+      width: 100%;
+      margin: auto;
+      text-align: left;
+      margin-bottom: 30px;
+
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      gap: 2rem;
+
+      > div > .neon-sign {
+        position: relative;
+        top: auto;
+        left: auto;
+        right: auto;
+        bottom: auto;
+        transform: none;
+        margin-bottom: 40px;
+
+        > .neon-text {
+          font-size: 3rem;
+          animation-delay: 2.5s;
+          line-height: 1rem;
+
+          > span {
+            display: block;
+            position: absolute;
+            top: 50px;
+            left: 50%;
+            transform: rotate(110deg);
+            letter-spacing: -20%;
+            animation-delay: 2.3s;
+          }
+        }
+      }
+
+      > *:nth-child(3n + 2) {
+        align-self: center;
+        font-size: 3rem;
+      }
+
+      @include media-down(xl) {
+        width: 100%;
+        grid-template-columns: 1fr;
+
+        > *:nth-child(3n + 2) {
+          display: none;
+        }
+      }
+
+      ul {
+        margin-bottom: 2rem;
+
+        li {
+          margin-left: 2rem;
+        }
+      }
+
+      .intro-ipod {
+        float: left;
+        @include media-down(lg) {
+          display: none;
+        }
+      }
+
+      p {
+        margin-bottom: 1rem;
+      }
+    }
+
+    > .neon-sign {
       position: absolute;
       top: 0;
       left: 50%;
@@ -39,11 +113,11 @@
   .record-shelf-container {
     .shelf {
       display: flex;
-      gap: 5rem;
+      gap: 5%;
       position: relative;
       overflow: visible;
-      padding-left: 2em;
-      padding-right: 2em;
+      padding-left: 5%;
+      padding-right: 5%;
     }
 
     .shelf::before {
@@ -65,10 +139,9 @@
 
     .record-slot {
       position: relative;
-      width: 200px;
-      min-width: 140px;
-      height: 200px;
-      perspective: 1000px;
+      width: 20%;
+      min-width: 100px;
+      aspect-ratio: 1/1;
     }
 
     .record-sleeve {
@@ -76,11 +149,18 @@
       height: 100%;
       position: relative;
       transition: transform 0.3s ease;
+
+      &.active {
+        .sleeve-front {
+          border: 3px solid white;
+        }
+      }
     }
 
     .sleeve-front {
       width: 100%;
       height: 100%;
+      aspect-ratio: 1/1;
       position: absolute;
       border-radius: 2px;
       box-shadow:
@@ -181,6 +261,134 @@
       transform: translateX(-10%);
     }
   }
+
+  .audio-shelf-text {
+    width: 60%;
+    margin: auto;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    text-align: left;
+    border: 1px solid white;
+
+    padding: 30px;
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.1);
+
+    @include media-down(lg) {
+      width: 100%;
+      padding: 10px;
+    }
+
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .audio-gear {
+    margin: 2rem 0;
+
+    > .neon-sign {
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      bottom: auto;
+      transform: none;
+      margin-bottom: 90px;
+
+      > .neon-text {
+        font-size: 5rem;
+        animation-delay: 2.5s;
+        line-height: 1rem;
+
+        > span {
+          display: block;
+          position: absolute;
+          top: 50px;
+          left: 50%;
+          transform: rotate(80deg);
+          letter-spacing: -20%;
+          animation-delay: 2.3s;
+        }
+      }
+    }
+
+    .gear-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1.5rem;
+      margin-top: 1.5rem;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
+
+      .gear-item {
+        backdrop-filter: blur(10px);
+        background-color: rgba(255, 255, 255, 0.1);
+        border: 1px solid white;
+        border-radius: 4px;
+        padding: 1.5rem;
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        &:hover {
+          transform: translateY(-2px);
+        }
+
+        .gear-icon {
+          font-size: 2rem;
+          text-align: center;
+        }
+
+        .gear-content {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          flex: 1;
+        }
+      }
+    }
+
+    .gear-title {
+      font-size: 1.2rem;
+      margin: 0;
+      color: var(--neon-cyan);
+      font-family: var(--mono-font, monospace);
+    }
+
+    .gear-category {
+      font-size: 0.85rem;
+      color: var(--neon-magenta);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      opacity: 0.8;
+    }
+
+    .gear-summary {
+      font-size: 0.9rem;
+      line-height: 1.5;
+      opacity: 0.85;
+      margin: 0.5rem 0;
+      flex: 1;
+    }
+
+    .gear-link {
+      color: var(--neon-cyan);
+      text-decoration: none;
+      font-size: 0.9rem;
+      margin-top: auto;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: var(--neon-magenta);
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .starfield-full {

assets/sass/style.scss

@@ -1,3 +1,4 @@
+@import "normalize";
 @import "mixins";
 
 @import "partials/global-styles";
@@ -17,7 +18,7 @@
 @import "pages/about";
 @import "pages/audio";
 
-@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Neonderthaw&display=swap");
 
 @font-face {
   font-family: "DSEG7-Classic";
@@ -48,7 +49,7 @@
 body {
   width: 100%;
   height: 100vh;
-  font-family: "Courier New", monospace;
+  font-family: "Lato", sans-serif;
   background: #1a1a1a;
   position: relative;
 }
@@ -291,6 +292,12 @@ body {
   background: black;
   color: greenyellow;
   font-family: monospace;
+
+  > .scroll {
+    overflow: scroll;
+    max-height: 100%;
+    @include scrollbar-custom(#0f0, 3px);
+  }
 }
 
 .crt a {
@@ -1616,9 +1623,6 @@ body {
   border-radius: 50%;
 }
 
-/* Import a nice cursive font */
-@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap");
-
 .navigation {
   position: absolute;
   bottom: 10%;

content/audio/currently.md

@@ -0,0 +1,15 @@
+---
+headless: true
+---
+
+**Albums**
+
+- Ninajirachi - I Love My Computer (2025)
+- Dire Straits - Brothers In Arms (1985)
+- Bespin Moons - A Binding Force (2020)
+
+**Hardware**
+
+- Hiby R4 x EVA
+- Fosi Audio GR70 Tube Amp
+- CVJ Vivan IEM

content/audio/index.md

@@ -1,8 +1,6 @@
 ---
 title: Music & Audio
 author: Dan
-date: 2025-12-10
+date: 2025-12-13
 comments: false
 ---
-
-This page is coming soon.

content/audio/intro.md

@@ -0,0 +1,16 @@
+---
+headless: true
+---
+
+I love music. I'm working on trying to listen to things a bit more
+attentively, so my plan is to write some thoughts about the various
+albums I own, be it on cassette, vinyl, CD or digitally.
+
+As I work through my collection they'll appear on the shelf, click on
+them to see my thoughts.
+
+Further down you can find a selection of the audio hardware I have,
+eventually I want to get around to writing about these too!
+
+If you have anything you think I'd like, or anything you have made -
+please email it to me! dan@ritual.sh

content/gear/cvj-vivian/index.md

@@ -0,0 +1,8 @@
+---
+title: "CVJ Vivian"
+date: 2025-12-11
+tags: ["audio", "headphones"]
+category: ["iem"]
+description: ""
+icon: 🎧
+---

content/gear/fiio-ft-1/index.md

@@ -2,6 +2,7 @@
 title: "Fiio FT-1"
 date: 2025-12-08
 tags: ["audio", "headphones"]
+category: ["headphones"]
 description: ""
 icon: 🎧
 ---

content/gear/hiby-r4-eva/index.md

@@ -1,7 +1,8 @@
 ---
-title: "Hiby R4 EVA"
+title: "Hiby R4 x EVA"
 date: 2025-12-10
 tags: ["audio", "dap"]
+category: ["dap"]
 description: ""
 icon: 🎵
 ---

content/gear/ipod-video-5th-generation-upgraded/index.md

@@ -2,6 +2,7 @@
 title: "iPod Video 5th Generation - Upgraded"
 date: 2025-12-11
 tags: ["audio", "dap"]
+category: ["dap"]
 description: ""
 icon: 🎵
 ---

content/media/neon-odin-allfather/index.md

@@ -1,7 +1,17 @@
 ---
 title: "Neon Odin - Allfather"
-date: 2025-12-12
+date: 2025-01-12
 tags: ["album"]
 description: ""
 cover: "cover.jpg"
 ---
+
+Neon Odin's _Allfather_ feels like mythology filtered through analog circuits and a CRT glow (much like myself). The album merges darksynth with handcrafted Nordic folk instruments - talharpa and nyckelharpa built by the artist himself - creating something that shouldn't work but absolutely does.
+
+Tracks like "Wield The Hammer" and "March Of The Jǫtnar" pulse with vintage synthesizers while maintaining an almost ritualistic weight. There's a devotion here to both the Æsir and 80s electronics, and the combination taps into something primal about storytelling through sound.
+
+This is retrowave that refuses to be purely nostalgic, grounding its neon-soaked atmosphere in actual craftsmanship and ancient narratives that really resonate.
+
+Favourite Track: Wield The Hammer
+
+Rating: 7/10

content/media/ninajirachi-i-love-my-computer/index.md

@@ -5,3 +5,15 @@ tags: ["album"]
 description: ""
 cover: "cover.jpg"
 ---
+
+Ninajirachi's _I Love My Computer_ captures something truthful about growing up shaped by screens and bandwidth. The album explores that strange intimacy we developed with our machines - the late nights, the secret discoveries, the way technology became less of a tool and more of a companion.
+
+Tracks like "Fuck My Computer" and "iPod Touch" aren't just bangers; they're confessions about a relationship that transcends generations. Whether you learned HTML on Geocities or taught yourself production in GarageBand, there's recognition here.
+
+The production has a restless energy, shifting between euphoric and introspective, mirroring how the internet itself feels—chaotic, isolating, and strangely beautiful all at once. It's a debut album that understands what it meant to have your world widened by a glowing rectangle - and I relate deeply to its content despite being at least one generation older than Ninajirachi.
+
+Not my usual genre of listen, but it has been a regular spin since it came into my world.
+
+Favourite Track: iPod Touch
+
+Rating: 8/10

content/updates/2025-12-08-homepage.md

@@ -0,0 +1,8 @@
+---
+title: "2025 12 08 Homepage"
+date: 2025-12-08T14:02:19Z
+tags: []
+description: ""
+---
+
+First version of the homepage created with the interactive terminal.

content/updates/2025-12-09-about.md

@@ -0,0 +1,8 @@
+---
+title: "2025 12 09 About"
+date: 2025-12-09T14:07:59Z
+tags: []
+description: ""
+---
+
+Added initial version of the about page with some approximation of a manifesto.

content/updates/2025-12-13-album-reviews.md

@@ -0,0 +1,8 @@
+---
+title: "2025 12 13 Album Reviews"
+date: 2025-12-13T15:16:18Z
+tags: []
+description: ""
+---
+
+Added some of my thoughts about Allfather by Neon Odin and I Love My Computer by Ninajirachi

content/updates/2025-12-13-music.md

@@ -0,0 +1,8 @@
+---
+title: "2025 12 13 Music"
+date: 2025-12-13T14:09:08Z
+tags: []
+description: ""
+---
+
+Created the music and audio gear section!

layouts/audio/list.html

@@ -1,75 +0,0 @@
-{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
-"main" }}
-<article class="audio-page">
-  <div class="starfield-full" id="starfield">
-    <div class="buildings-bg">
-      <div class="buildings-far" data-count="40"></div>
-      <div class="buildings-mid" data-count="40"></div>
-      <div class="buildings-near" data-count="40"></div>
-      <div class="ambient-light"></div>
-    </div>
-  </div>
-
-  <div class="page-content">
-    <div class="neon-sign">
-      <div class="neon-text purple">music <span>&</span> audio gear</div>
-    </div>
-
-    <div class="record-shelf-container">
-      <div class="shelf">
-        <!-- prettier-ignore -->
-        {{ $posts := where site.RegularPages "Type" "media" }} 
-        {{ $posts = where $posts "Params.tags" "intersect" (slice "album") }}
-    
-        {{ range first 5 $posts }}
-        <a class="record-slot" href="{{ .RelPermalink }}">
-          <div class="record-sleeve">
-            <!-- prettier-ignore -->
-            {{ with .Resources.GetMatch "cover.*" }} 
-            {{ $image := .Resize "500x webp q85" }}
-            <div
-              class="sleeve-front"
-              style="--album-cover: url({{ $image.RelPermalink }})"
-            >
-              {{ end }}
-              <!-- prettier-ignore -->
-              <div class="album-title">
-                {{ .Title }}
-              </div>
-            </div>
-            <div class="vinyl-record"></div>
-          </div>
-        </a>
-        {{ end }}
-
-        <!-- prettier-ignore -->
-        {{ if gt (len $posts) 5 }}
-        <a href="/tags/tutorial/" class="view-all">
-          View all {{ len $posts }} posts →
-        </a>
-        {{ end }}
-      </div>
-    </div>
-
-    <!-- prettier-ignore -->
-    {{ partial "elements/ipod.html" . }} 
-    {{ $posts := where site.RegularPages "Type" "gear" }} 
-    {{ $posts = where $posts "Params.tags" "intersect" (slice "audio") }}
-    
-    {{ range first 5 $posts }}
-    <h2>{{ .Title }}</h2>
-    {{ with .Params.icon }}
-    <p>{{ . }}</p>
-    {{ end }}
-    <a href="{{ .RelPermalink }}">Read more</a>
-    {{ end }}
-
-    <!-- prettier-ignore -->
-    {{ if gt (len $posts) 5 }}
-    <a href="/tags/tutorial/" class="view-all">
-      View all {{ len $posts }} posts →
-    </a>
-    {{ end }}
-  </div>
-</article>
-{{ end }}

layouts/audio/single.html

@@ -1,5 +1,8 @@
 {{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
-"main" }}
+"main" }} {{ $intro := .Resources.GetMatch "intro.md" }} {{ $intro :=
+.Resources.GetMatch "intro.md" }} {{ $currently := .Resources.GetMatch
+"currently.md" }}
+
 <article class="audio-page">
   <div class="starfield-full" id="starfield">
     <div class="buildings-bg">
@@ -11,96 +14,101 @@
   </div>
 
   <div class="page-content">
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
-    <h1>Music &amp; Audio Gear</h1>
+    <div class="neon-sign">
+      <div class="neon-text purple">music <span>&</span> audio gear</div>
+    </div>
+
+    <div class="audio-intro">
+      <div>
+        <div class="intro-ipod">{{ partial "elements/ipod.html" . }}</div>
+
+        {{ with $intro }} {{ .Content }} {{ end }}
+      </div>
+      <div>♫</div>
+      <div>
+        <div class="neon-sign">
+          <div class="neon-text purple">current rotation <span>-></span></div>
+        </div>
+        {{ with $currently }} {{ .Content }} {{end}}
+      </div>
+    </div>
+
+    <div class="record-shelf-container">
+      <div class="shelf">
+        <!-- prettier-ignore -->
+        {{ $posts := where site.RegularPages "Type" "media" }} 
+        {{ $posts = where $posts "Params.tags" "intersect" (slice "album") }}
+        {{ range $index, $post := first 5 $posts }}
+        <a
+          class="record-slot"
+          href="{{ .RelPermalink }}"
+          data-album-index="{{ $index }}"
+        >
+          <div class="record-sleeve">
+            <!-- prettier-ignore -->
+            {{ with .Resources.GetMatch "cover.*" }} 
+              {{ $image := .Resize "500x webp q85" }}
+            <div
+              class="sleeve-front"
+              style="--album-cover: url({{ $image.RelPermalink }})"
+            >
+              {{ end }}
+              <!-- prettier-ignore -->
+              <div class="album-title">
+               {{ .Title }}
+              </div>
+            </div>
+            <div class="vinyl-record"></div>
+          </div>
+        </a>
+        {{ end }}
+        <!-- prettier-ignore -->
+        {{ if gt (len $posts) 5 }}
+        <a href="/tags/album/" class="view-all">
+          View all {{ len $posts }} posts →
+        </a>
+        {{ end }}
+      </div>
+
+      <div class="audio-shelf-text">
+        {{ range $index, $post := first 5 $posts }}
+        <div
+          class="album-content"
+          data-content-index="{{ $index }}"
+          style="{{ if ne $index 0 }}display: none;{{ end }}"
+        >
+          {{ .Content }}
+        </div>
+        {{ end }}
+      </div>
+    </div>
+
+    <div class="audio-gear">
+      <div class="neon-sign">
+        <div class="neon-text purple">gear <span>-></span></div>
+      </div>
+      <div class="gear-grid">
+        {{ $posts := where site.RegularPages "Type" "gear" }} {{ $posts = where
+        $posts "Params.tags" "intersect" (slice "audio") }} {{ range first 5
+        $posts }}
+        <div class="gear-item">
+          {{ with .Params.icon }}
+          <div class="gear-icon">{{ . }}</div>
+          {{ end }}
+          <div class="gear-content">
+            <h3 class="gear-title">{{ .Title }}</h3>
+            {{ with .Params.category }}
+            <span class="gear-category">{{ . }}</span>
+            {{ end }} {{ with .Summary }}
+            <p class="gear-summary">{{ . }}</p>
+            {{ end }} {{/*
+            <a href="{{ .RelPermalink }}" class="gear-link">View details →</a>
+            */}}
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
   </div>
 </article>
 {{ end }}

layouts/index.html

@@ -121,13 +121,18 @@
   <!-- Wall-mounted monitors -->
   <div class="secondary-screen wall-monitor-1 hidden-xl-down">
     <div class="screen-display crt">
-      > updates -lah<br />
-      {{ range first 10 (sort .Site.Pages "Lastmod" "desc") }} [<time
-        >{{ .Lastmod.Format "2006-01-02" }}</time
-      >] - <a href="{{ .Permalink }}">{{ .Title }}</a><br />
-      {{ end }}
+      <div class="scroll">
+        > updates -lah<br />
+        {{ range first 10 (where .Site.RegularPages "Type"
+        "updates").ByLastmod.Reverse }} [<time
+          >{{ .Lastmod.Format "2006-01-02" }}</time
+        >]<br />
+        {{ .Plain }}<br />
+        ---<br />
+        {{ end }}
 
-      <span class="cursor-blink">_</span>
+        <span class="cursor-blink">_</span>
+      </div>
     </div>
   </div>
 
@@ -279,12 +284,11 @@
   </div>
 </div>
 
-{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort
-$pages "Lastmod" "desc") }}
-
+{{ range first 1 (where .Site.RegularPages "Type" "updates").ByLastmod.Reverse
+}}
 <div id="latest-post">
   <div id="latest-post-link">{{ .Permalink }}</div>
-  <div id="latest-post-title">{{ .Title }}</div>
+  <div id="latest-post-title">{{ .Plain }}</div>
   <div id="latest-post-date">{{ .Lastmod.Format "Jan 2, 2006" }}</div>
 </div>
 {{ end }} {{ end }}

layouts/now/single.html

@@ -25,308 +25,13 @@
         width: 100%;
         max-width: 800px;
         padding: 20px;
-        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-        box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
         position: relative;
-      }
-
-      .window-frame {
-        position: relative;
-        width: 100%;
-        aspect-ratio: 16/9;
-        background: #3a3a3a;
-        border: 20px solid #2a2520;
-        box-shadow:
-          inset 0 0 20px rgba(0, 0, 0, 0.8),
-          0 10px 40px rgba(0, 0, 0, 0.9);
-        overflow: hidden;
-      }
-
-      .window-frame::before {
-        content: "";
-        position: absolute;
-        inset: -20px;
-        border: 5px solid #1a1510;
-        pointer-events: none;
-        z-index: 10;
-      }
-
-      /* Cityscape view */
-      .cityscape {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        background: linear-gradient(
-          180deg,
-          #1a2332 0%,
-          #2a3a52 30%,
-          #4a5a72 60%,
-          #6a7a92 100%
-        );
-        overflow: hidden;
-      }
-
-      /* Sky with slight gradient */
-      .sky {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 40%;
-        background: linear-gradient(
-          180deg,
-          #0a0f1a 0%,
-          #1a2a3a 50%,
-          #2a3a52 100%
-        );
-      }
-
-      /* Buildings container */
-      .buildings {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 60%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-around;
-        gap: 20px;
-        padding: 0 40px;
-      }
-
-      .building {
-        position: relative;
-        background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
-        box-shadow:
-          inset -2px 0 10px rgba(0, 0, 0, 0.5),
-          0 0 20px rgba(255, 200, 100, 0.1);
-        animation: buildingGlow 4s ease-in-out infinite;
-      }
-
-      .building:nth-child(1) {
-        width: 80px;
-        height: 280px;
-        animation-delay: 0s;
-      }
-
-      .building:nth-child(2) {
-        width: 60px;
-        height: 200px;
-        animation-delay: 0.5s;
-      }
-
-      .building:nth-child(3) {
-        width: 90px;
-        height: 320px;
-        animation-delay: 1s;
-      }
-
-      .building:nth-child(4) {
-        width: 70px;
-        height: 240px;
-        animation-delay: 1.5s;
-      }
-
-      .building:nth-child(5) {
-        width: 85px;
-        height: 300px;
-        animation-delay: 2s;
-      }
-
-      /* Building windows */
-      .building-windows {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 8px;
-        padding: 15px 10px;
-        height: 100%;
-      }
-
-      .window-light {
-        background: #ffd700;
-        opacity: 0;
-        box-shadow: 0 0 10px #ffd700;
-        animation: windowFlicker 3s ease-in-out infinite;
-      }
-
-      .window-light:nth-child(odd) {
-        animation-delay: 0.5s;
-      }
-
-      .window-light:nth-child(3n) {
-        animation-delay: 1s;
-      }
-
-      .window-light:nth-child(4n) {
-        animation-delay: 1.5s;
-      }
-
-      @keyframes windowFlicker {
-        0%,
-        100% {
-          opacity: 0.3;
-        }
-        50% {
-          opacity: 0.9;
-        }
-      }
-
-      @keyframes buildingGlow {
-        0%,
-        100% {
-          box-shadow:
-            inset -2px 0 10px rgba(0, 0, 0, 0.5),
-            0 0 20px rgba(255, 200, 100, 0.1);
-        }
-        50% {
-          box-shadow:
-            inset -2px 0 10px rgba(0, 0, 0, 0.5),
-            0 0 30px rgba(255, 200, 100, 0.2);
-        }
-      }
-
-      /* Dirt and grime on window */
-      .window-grime {
-        position: absolute;
-        inset: 0;
-        background:
-          radial-gradient(
-            circle at 20% 30%,
-            rgba(50, 40, 30, 0.2) 0%,
-            transparent 40%
-          ),
-          radial-gradient(
-            circle at 80% 60%,
-            rgba(40, 35, 25, 0.15) 0%,
-            transparent 50%
-          ),
-          radial-gradient(
-            circle at 50% 80%,
-            rgba(45, 38, 28, 0.18) 0%,
-            transparent 45%
-          );
-        pointer-events: none;
-        z-index: 6;
-      }
-
-      /* Glass reflection */
-      .glass-reflection {
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          135deg,
-          rgba(255, 255, 255, 0.1) 0%,
-          transparent 30%,
-          transparent 70%,
-          rgba(255, 255, 255, 0.05) 100%
-        );
-        pointer-events: none;
-        z-index: 7;
-      }
-
-      /* Ambient light from city */
-      .ambient-light {
-        position: absolute;
-        bottom: -50px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 200%;
-        height: 200px;
-        background: radial-gradient(
-          ellipse at center,
-          rgba(255, 200, 100, 0.2) 0%,
-          transparent 70%
-        );
-        filter: blur(40px);
-        animation: ambientPulse 3s ease-in-out infinite;
-      }
-
-      @keyframes ambientPulse {
-        0%,
-        100% {
-          opacity: 0.5;
-        }
-        50% {
-          opacity: 0.8;
-        }
+        color: #fff;
+        text-align: center;
       }
     </style>
   </head>
   <body>
-    <div class="basement-wall">
-      <div class="window-frame">
-        <!-- Cityscape -->
-        <div class="cityscape">
-          <div class="sky"></div>
-          <div class="buildings">
-            <div class="building">
-              <div class="building-windows">
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-              </div>
-            </div>
-            <div class="building">
-              <div class="building-windows">
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-              </div>
-            </div>
-            <div class="building">
-              <div class="building-windows">
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-              </div>
-            </div>
-            <div class="building">
-              <div class="building-windows">
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-              </div>
-            </div>
-            <div class="building">
-              <div class="building-windows">
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-                <div class="window-light"></div>
-              </div>
-            </div>
-          </div>
-          <div class="ambient-light"></div>
-        </div>
-
-        <!-- Window effects -->
-        <div class="window-grime"></div>
-        <div class="glass-reflection"></div>
-      </div>
-    </div>
+    <div class="basement-wall">Coming soon...</div>
   </body>
 </html>

layouts/partials/elements/lavalamp.html

@@ -2,7 +2,7 @@
   <svg style="position: absolute; width: 0; height: 0">
     <defs>
       <filter id="goo">
-        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
         <feColorMatrix
           in="blur"
           mode="matrix"

layouts/partials/site-footer.html

@@ -7,10 +7,6 @@
     <a href="https://neocities.org/site/ritualsh" target="_blank"
       >Follow on Neocities</a
     >
-    &nbsp;&bull;&nbsp;
-    <a href="{{ .Site.BaseURL }}">
-      &copy; {{ now.Format "2006" }} {{ .Site.Title }}
-    </a>
     <div>{{ partial "social-follow.html" . }}</div>
   </div>
 </footer>

new.sh

@@ -1,15 +1,40 @@
 #!/bin/bash
-
 # Script to create new Hugo content w/ filename sanitization
-# Usage: ./new.sh <type> <title>
-
+# Usage: ./new.sh [-d] [-s] <type> <title>
+#   -d: Add date prefix (YYYY-MM-DD)
+#   -s: Single page format (.md instead of /)
 set -e
 
+# Initialize flags
+ADD_DATE=false
+SINGLE_PAGE=false
+
+# Parse flags
+while getopts "ds" opt; do
+  case $opt in
+    d)
+      ADD_DATE=true
+      ;;
+    s)
+      SINGLE_PAGE=true
+      ;;
+    \?)
+      echo "Invalid option: -$OPTARG" >&2
+      exit 1
+      ;;
+  esac
+done
+
+# Shift past the options
+shift $((OPTIND-1))
+
 # Check if required arguments are provided
 if [ $# -lt 2 ]; then
-    echo "Usage: $0 <type> <title>"
-    echo "Example: $0 blog 'My Awesome Post'"
-    exit 1
+  echo "Usage: $0 [-d] [-s] <type> <title>"
+  echo "  -d: Add date prefix (YYYY-MM-DD)"
+  echo "  -s: Single page format (.md instead of /)"
+  echo "Example: $0 -d -s blog 'My Awesome Post'"
+  exit 1
 fi
 
 TYPE="$1"
@@ -17,15 +42,25 @@ shift
 TITLE="$*"
 
 SAFE_TITLE=$(echo "$TITLE" | \
-    tr '[:upper:]' '[:lower:]' | \
-    sed 's/ /-/g' | \
-    sed 's/\//-/g' | \
-    sed 's/[^a-z0-9_-]//g' | \
-    sed 's/-\+/-/g' | \
-    sed 's/^-//;s/-$//')
+  tr '[:upper:]' '[:lower:]' | \
+  sed 's/ /-/g' | \
+  sed 's/\//-/g' | \
+  sed 's/[^a-z0-9_-]//g' | \
+  sed 's/-\+/-/g' | \
+  sed 's/^-//;s/-$//')
 
-# Construct the filename with date
-FILENAME="${SAFE_TITLE}/"
+# Add date prefix if flag is set
+if [ "$ADD_DATE" = true ]; then
+  DATE_PREFIX=$(date +%Y-%m-%d)
+  SAFE_TITLE="${DATE_PREFIX}-${SAFE_TITLE}"
+fi
+
+# Construct the filename based on format
+if [ "$SINGLE_PAGE" = true ]; then
+  FILENAME="${SAFE_TITLE}.md"
+else
+  FILENAME="${SAFE_TITLE}/"
+fi
 
 # Construct the full path
 CONTENT_PATH="${TYPE}/${FILENAME}"