diff --git a/flake.nix b/flake.nix index 1d4e865..6f5fdca 100644 --- a/flake.nix +++ b/flake.nix @@ -35,6 +35,8 @@ http-server prettier vscode-langservers-extracted + typescript-language-server + typescript ]; }; }; diff --git a/gear/gear.html b/gear/gear.html deleted file mode 100644 index 0b8015b..0000000 --- a/gear/gear.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/gear/gear.js b/gear/gear.js deleted file mode 100644 index aa6ff23..0000000 --- a/gear/gear.js +++ /dev/null @@ -1 +0,0 @@ -// Gear list JS diff --git a/gear/gear.json b/gear/gear.json new file mode 100644 index 0000000..4e36d13 --- /dev/null +++ b/gear/gear.json @@ -0,0 +1,13 @@ +{ + "bondage": { + "name": "Bondage", + "id": "bondage", + "values": [ + { + "name": "Rope", + "id": "rope", + "desc": "10m pink, black, or purple" + } + ] + } +} diff --git a/gear/gear.mjs b/gear/gear.mjs new file mode 100644 index 0000000..43247c6 --- /dev/null +++ b/gear/gear.mjs @@ -0,0 +1,115 @@ +// 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} + */ +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} + */ +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()); +} diff --git a/gear/index.html b/gear/index.html index 5b5f35d..78eb770 100644 --- a/gear/index.html +++ b/gear/index.html @@ -7,17 +7,19 @@ - - + + + + + + - +
This will be my gear +
diff --git a/gear/page.mjs b/gear/page.mjs new file mode 100644 index 0000000..8ea2f57 --- /dev/null +++ b/gear/page.mjs @@ -0,0 +1,9 @@ +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(); diff --git a/global/global.css b/global/global.css index 85a1601..c900fc9 100644 --- a/global/global.css +++ b/global/global.css @@ -1 +1,10 @@ /* 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; +} diff --git a/global/loadin.js b/global/loadin.mjs similarity index 84% rename from global/loadin.js rename to global/loadin.mjs index 45d2695..9b30f3a 100644 --- a/global/loadin.js +++ b/global/loadin.mjs @@ -1,4 +1,4 @@ -function loadHTML(elementId, url) { +export function loadHTML(elementId, url) { fetch(url) .then((response) => response.text()) .then((data) => { diff --git a/header/header.css b/header/header.css index ff722bc..923edf7 100644 --- a/header/header.css +++ b/header/header.css @@ -1 +1,44 @@ /* 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; + } +} diff --git a/header/header.html b/header/header.html index 9f531db..da676fc 100644 --- a/header/header.html +++ b/header/header.html @@ -1 +1,16 @@ + +
nekoapril.blog
+
+
+ Home + + Kinks + + Gear +
diff --git a/index.html b/index.html index 8e5b19c..fd449cc 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,16 @@ Kinklist + + + + - + + @@ -18,6 +26,7 @@ your experience.

+
Look ma, I'm horny! diff --git a/index.js b/index.js deleted file mode 100644 index 2d9ed3a..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -// Landing page JS diff --git a/index.mjs b/index.mjs new file mode 100644 index 0000000..9928c16 --- /dev/null +++ b/index.mjs @@ -0,0 +1,8 @@ +// Landing page JS +import { loadHTML } from "/global/loadin.mjs"; + +function loadDependencies() { + loadHTML("hd-box", "/header/header.html"); +} + +loadDependencies(); diff --git a/kinks/kinks.js b/kinks/kinks.mjs similarity index 100% rename from kinks/kinks.js rename to kinks/kinks.mjs