flake.nix

@@ -35,8 +35,6 @@
               http-server
               prettier
               vscode-langservers-extracted
-              typescript-language-server
-              typescript
             ];
           };
         };

gear/gear.html

@@ -0,0 +1 @@
+<!-- Gear list fragment -->

gear/gear.js

@@ -0,0 +1 @@
+// Gear list JS

gear/gear.json

@@ -1,13 +0,0 @@
-{
-    "bondage": {
-        "name": "Bondage",
-        "id": "bondage",
-        "values": [
-            {
-                "name": "Rope",
-                "id": "rope",
-                "desc": "10m pink, black, or purple"
-            }
-        ]
-    }
-}

gear/gear.mjs

@@ -1,115 +0,0 @@
-// Gear list JS
-// @ts-check
-
-/**
- * @typedef {{name: string, id: string, desc: string}} GearListItem
- *
- * @typedef {{name: string, id: string, values: GearListItem[]}} GearListSection
- *
- * @typedef {{bondage: GearListSection}} GearList
- */
-
-/**
- * Fetches the gear.json to be parsed seperately
- * @returns {Promise<GearList>}
- */
-async function getGearList() {
-    try {
-        const response = await fetch("/gear/gear.json");
-        const data = await response.json();
-        return data;
-    } catch (error) {
-        console.error("Error fetching JSON:", error);
-        throw "Could not load gear.json";
-    }
-}
-
-/**
- * @param {GearListItem} gear
- * @param {string} group
- * @returns {HTMLLIElement}
- */
-function gearToElement(gear, group) {
-    let li = document.createElement("li");
-    li.setAttribute("id", `gl-${group}-${gear.id}`);
-    let heading = document.createElement("h3");
-    heading.setAttribute("class", "gl-item-name");
-    heading.textContent = gear.name;
-    li.appendChild(heading);
-    let description = document.createElement("p");
-    description.setAttribute("class", "gl-item-desc");
-    li.appendChild(description);
-    return li;
-}
-
-/**
- * @param {GearListSection} gear
- * @returns {HTMLLIElement[]}
- */
-function gearListToList(gear) {
-    let lis = [];
-    for (const item of gear.values) {
-        lis.push(gearToElement(item, gear.id));
-    }
-    return lis;
-}
-
-/**
- * @param {GearListSection} items
- * @returns {HTMLUListElement}
- */
-function bondageItemsToUl(items) {
-    let ul = document.createElement("ul");
-    ul.setAttribute("id", `gl-${items.id}-list`);
-    for (const i of gearListToList(items)) {
-        ul.appendChild(i);
-    }
-    return ul;
-}
-
-/**
- * @returns {Promise<HTMLElement>}
- */
-async function generateGearListArticle() {
-    let list = await getGearList();
-
-    let bondageItems = document.createElement("article");
-    bondageItems.setAttribute("id", "gl-body");
-    let heading = document.createElement("h2");
-    heading.textContent = "Gear List";
-    bondageItems.appendChild(heading);
-
-    for (const section of Object.values(list)) {
-        let listSection = buildSection(section);
-        bondageItems.appendChild(listSection);
-    }
-
-    return bondageItems;
-}
-
-/**
- * @param {GearListSection} items
- * @returns {HTMLElement}
- */
-function buildSection(items) {
-    let section = document.createElement("article");
-    section.setAttribute("id", `gl-${items.id}-body`);
-    let heading = document.createElement("h3");
-    heading.textContent = items.name;
-    section.appendChild(heading);
-
-    let ul = bondageItemsToUl(items);
-
-    section.appendChild(ul);
-    return section;
-}
-
-/**
- * @param {string} position
- * @returns void
- */
-export async function attachGearList(position) {
-    document
-        .getElementById(position)
-        .replaceWith(await generateGearListArticle());
-}

gear/index.html

@@ -7,19 +7,17 @@
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Truculenta:opsz,wght@12..72,100..900&display=swap"
+    <!-- Place favicon.ico in the root directory -->
-      rel="stylesheet"
-    />
-    <link href="/global/global.css" rel="stylesheet" />
-
-    <script type="module" src="/global/loadin.mjs"></script>
-    <script type="module" src="/gear/page.mjs"></script>
-    <script type="module" src="/gear/gear.mjs"></script>
   </head>
   <body>
-    <header id="hd-box"></header>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
     This will be my gear
-    <article id="gl-body"></article>
   </body>
 </html>

gear/page.mjs

@@ -1,9 +0,0 @@
-import { attachGearList } from "/gear/gear.mjs";
-import { loadHTML } from "/global/loadin.mjs";
-
-export function loadDependencies() {
-    loadHTML("hd-box", "/header/header.html");
-    attachGearList("gl-body");
-}
-
-loadDependencies();

global/global.css

@@ -1,10 +1 @@
 /* Global CSS options */
-
-body {
-    font-family: "Truculenta", sans-serif;
-    font-optical-sizing: auto;
-    font-weight: 500;
-    font-style: normal;
-    font-variation-settings: "wdth" 100;
-    font-size: 16pt;
-}

global/loadin.js

@@ -1,4 +1,4 @@
-export function loadHTML(elementId, url) {
+function loadHTML(elementId, url) {
     fetch(url)
         .then((response) => response.text())
         .then((data) => {

header/header.css

@@ -1,44 +1 @@
 /* Header CSS */
-header {
-    font-family: "Roboto Mono", monospace;
-    font-optical-sizing: auto;
-    font-weight: 600;
-    font-style: normal;
-    font-size: 14pt;
-
-    height: 1.5rem;
-    width: calc(100% - 1.5rem);
-
-    margin-bottom: 0.25rem;
-    padding: 0.5rem;
-    border-width: 3px;
-    border-style: solid;
-
-    position: sticky;
-    top: 0;
-
-    display: flex;
-
-    #hd-left {
-        width: min-width;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-        font-style: italic;
-    }
-
-    #hd-mid {
-        width: 100%;
-    }
-
-    #hd-right {
-        display: flex;
-        width: fit-content;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-    }
-
-    .spacer {
-        width: 2rem;
-        display: block;
-    }
-}

header/header.html

@@ -1,16 +1 @@
 <!-- Site header -->
-<link
-  rel="stylesheet"
-  href="/header/header.css"
-  type="text/css"
-  media="screen"
-/>
-<div id="hd-left">nekoapril.blog</div>
-<div id="hd-mid"></div>
-<div id="hd-right">
-  <a href="/">Home</a>
-  <span class="spacer"></span>
-  <span>Kinks</span>
-  <span class="spacer"></span>
-  <a href="/gear">Gear</a>
-</div>

index.html

@@ -6,16 +6,8 @@
     <title>Kinklist</title>
     <meta name="description" content="Personal kinklist and gearlist" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Truculenta:opsz,wght@12..72,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link href="/global/global.css" rel="stylesheet" />
 
-    <script type="module" src="/global/loadin.mjs"></script>
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <script type="module" src="/index.mjs"></script>
     <!-- Place favicon.ico in the root directory -->
   </head>
   <body>
@@ -26,7 +18,6 @@
         your experience.
       </p>
     <![endif]-->
-    <header id="hd-box"></header>
     Look ma, I'm horny!
   </body>
 </html>

index.js

@@ -0,0 +1 @@
+// Landing page JS

index.mjs

@@ -1,8 +0,0 @@
-// Landing page JS
-import { loadHTML } from "/global/loadin.mjs";
-
-function loadDependencies() {
-    loadHTML("hd-box", "/header/header.html");
-}
-
-loadDependencies();