cdransf/coryd.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(*.liquid): apply prettier to liquid templates

Browse source 
- offer to create tag when none is found while adding a link from cli
- fix tag display in search
This commit is contained in:
Cory Dransfeldt 2025-06-16 14:40:54 -07:00
parent 49e21d574e
commit efe701f939
No known key found for this signature in database
112 changed files with 1319 additions and 1134 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/assets/scripts/components/select-pagination.js
View file

@ -1,31 +1,31 @@
class SelectPagination extends HTMLElement {
static register(tagName = 'select-pagination') {
if ('customElements' in window) customElements.define(tagName, this);
static register(tagName = "select-pagination") {
if ("customElements" in window) customElements.define(tagName, this);
}
static get observedAttributes() {
return ['data-base-index'];
return ["data-base-index"];
}
get baseIndex() {
return parseInt(this.getAttribute('data-base-index') || '0', 10);
return parseInt(this.getAttribute("data-base-index") || "0", 10);
}
connectedCallback() {
if (this.shadowRoot) return;
this.attachShadow({ mode: 'open' }).appendChild(document.createElement('slot'));
this.attachShadow({ mode: "open" }).appendChild(document.createElement("slot"));
const uriSegments = window.location.pathname.split('/').filter(Boolean);
const uriSegments = window.location.pathname.split("/").filter(Boolean);
let pageNumber = this.extractPageNumber(uriSegments);
if (pageNumber === null) pageNumber = this.baseIndex;
this.control = this.querySelector('select');
this.control = this.querySelector("select");
this.control.value = pageNumber.toString();
this.control.addEventListener('change', (event) => {
this.control.addEventListener("change", (event) => {
pageNumber = parseInt(event.target.value);
const updatedUrlSegments = this.updateUrlSegments(uriSegments, pageNumber);
window.location.href = `${window.location.origin}/${updatedUrlSegments.join('/')}`;
window.location.href = `${window.location.origin}/${updatedUrlSegments.join("/")}`;
});
}

66
src/assets/scripts/index.js
View file

@ -1,66 +1,66 @@
window.addEventListener('load', () => {
window.addEventListener("load", () => {
// service worker
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/assets/scripts/sw.js');
if ("serviceWorker" in navigator) navigator.serviceWorker.register("/assets/scripts/sw.js");
// dialog controls
(() => {
const dialogButtons = document.querySelectorAll('.dialog-open');
const dialogButtons = document.querySelectorAll(".dialog-open");
if (!dialogButtons.length) return;
dialogButtons.forEach((button) => {
const dialogId = button.getAttribute('data-dialog-trigger');
const dialogId = button.getAttribute("data-dialog-trigger");
const dialog = document.getElementById(`dialog-${dialogId}`);
if (!dialog) return;
const closeButton = dialog.querySelector('.dialog-close');
const closeButton = dialog.querySelector(".dialog-close");
button.addEventListener('click', async () => {
button.addEventListener("click", async () => {
const isDynamic = dialog.dataset.dynamic;
const isLoaded = dialog.dataset.loaded;
if (isDynamic && !isLoaded) {
const markdownFields = dialog.dataset.markdown || '';
const markdownFields = dialog.dataset.markdown || "";
try {
const res = await fetch(
`/api/query.php?data=${isDynamic}&id=${dialogId}&markdown=${encodeURIComponent(markdownFields)}`
);
const [data] = await res.json();
const firstField = markdownFields.split(',')[0]?.trim();
const html = data?.[`${firstField}_html`] || '<p>No notes available.</p>';
const firstField = markdownFields.split(",")[0]?.trim();
const html = data?.[`${firstField}_html`] || "<p>No notes available.</p>";
dialog.querySelectorAll('.dialog-dynamic').forEach((el) => el.remove());
dialog.querySelectorAll(".dialog-dynamic").forEach((el) => el.remove());
const container = document.createElement('div');
const container = document.createElement("div");
container.classList.add('dialog-dynamic');
container.classList.add("dialog-dynamic");
container.innerHTML = html;
dialog.appendChild(container);
dialog.dataset.loaded = 'true';
dialog.dataset.loaded = "true";
} catch (err) {
dialog.querySelectorAll('.dialog-dynamic').forEach((el) => el.remove());
dialog.querySelectorAll(".dialog-dynamic").forEach((el) => el.remove());
const errorNode = document.createElement('div');
const errorNode = document.createElement("div");
errorNode.classList.add('dialog-dynamic');
errorNode.textContent = 'Failed to load content.';
errorNode.classList.add("dialog-dynamic");
errorNode.textContent = "Failed to load content.";
dialog.appendChild(errorNode);
console.warn('Dialog content load error:', err);
console.warn("Dialog content load error:", err);
}
}
dialog.showModal();
dialog.classList.remove('closing');
dialog.classList.remove("closing");
});
if (closeButton) {
closeButton.addEventListener('click', () => {
dialog.classList.add('closing');
closeButton.addEventListener("click", () => {
dialog.classList.add("closing");
setTimeout(() => dialog.close(), 200);
});
}
dialog.addEventListener('click', (event) => {
dialog.addEventListener("click", (event) => {
const rect = dialog.getBoundingClientRect();
const outsideClick =
event.clientX < rect.left ||
@ -69,14 +69,14 @@ window.addEventListener('load', () => {
event.clientY > rect.bottom;
if (outsideClick) {
dialog.classList.add('closing');
dialog.classList.add("closing");
setTimeout(() => dialog.close(), 200);
}
});
dialog.addEventListener('cancel', (event) => {
dialog.addEventListener("cancel", (event) => {
event.preventDefault();
dialog.classList.add('closing');
dialog.classList.add("closing");
setTimeout(() => dialog.close(), 200);
});
});
@ -84,23 +84,23 @@ window.addEventListener('load', () => {
// text toggle for media pages
(() => {
const button = document.querySelector('[data-toggle-button]');
const content = document.querySelector('[data-toggle-content]');
const text = document.querySelectorAll('[data-toggle-content] p');
const button = document.querySelector("[data-toggle-button]");
const content = document.querySelector("[data-toggle-content]");
const text = document.querySelectorAll("[data-toggle-content] p");
const minHeight = 500; // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0);
if (!button || !content || !text.length) return;
if (interiorHeight < minHeight) {
content.classList.remove('text-toggle-hidden');
button.style.display = 'none';
content.classList.remove("text-toggle-hidden");
button.style.display = "none";
return;
}
button.addEventListener('click', () => {
const isHidden = content.classList.toggle('text-toggle-hidden');
button.textContent = isHidden ? 'Show more' : 'Show less';
button.addEventListener("click", () => {
const isHidden = content.classList.toggle("text-toggle-hidden");
button.textContent = isHidden ? "Show more" : "Show less";
});
})();
});

28
src/assets/scripts/sw.js
View file

@ -1,16 +1,16 @@
const cacheName = 'coryd.dev-static-assets';
const cacheName = "coryd.dev-static-assets";
const staticAssets = [
'/assets/styles/index.css',
'/assets/styles/noscript.css',
'/assets/fonts/sg.woff2',
'/assets/fonts/dm.woff2',
'/assets/fonts/dmi.woff2',
'/assets/fonts/ml.woff2',
'/assets/scripts/index.js',
'/assets/scripts/components/select-pagination.js'
"/assets/styles/index.css",
"/assets/styles/noscript.css",
"/assets/fonts/sg.woff2",
"/assets/fonts/dm.woff2",
"/assets/fonts/dmi.woff2",
"/assets/fonts/ml.woff2",
"/assets/scripts/index.js",
"/assets/scripts/components/select-pagination.js"
];
self.addEventListener('install', (event) => {
self.addEventListener("install", (event) => {
event.waitUntil(
caches
.open(cacheName)
@ -19,7 +19,7 @@ self.addEventListener('install', (event) => {
);
});
self.addEventListener('activate', (event) => {
self.addEventListener("activate", (event) => {
event.waitUntil(
(async () => {
const keys = await caches.keys();
@ -32,11 +32,11 @@ self.addEventListener('activate', (event) => {
);
});
self.addEventListener('fetch', (event) => {
self.addEventListener("fetch", (event) => {
const request = event.request;
if (request.method !== 'GET') return;
if (request.headers.get('Accept').includes('text/html')) {
if (request.method !== "GET") return;
if (request.headers.get("Accept").includes("text/html")) {
event.respondWith(
(async () => {
try {

24
src/assets/styles/base/fonts.css
View file

@ -1,46 +1,46 @@
@font-face {
font-family: 'Space Grotesk';
src: url('/assets/fonts/sg.woff2') format('woff2');
font-family: "Space Grotesk";
src: url("/assets/fonts/sg.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/dm-regular.woff2') format('woff2');
font-family: "DM Sans";
src: url("/assets/fonts/dm-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/dm-bold.woff2') format('woff2');
font-family: "DM Sans";
src: url("/assets/fonts/dm-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/dm-regular-italic.woff2') format('woff2');
font-family: "DM Sans";
src: url("/assets/fonts/dm-regular-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: optional;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/dm-bold-italic.woff2') format('woff2');
font-family: "DM Sans";
src: url("/assets/fonts/dm-bold-italic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: optional;
}
@font-face {
font-family: 'MonoLisa';
src: url('/assets/fonts/ml.woff2') format('woff2');
font-family: "MonoLisa";
src: url("/assets/fonts/ml.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;

2
src/assets/styles/base/index.css
View file

@ -443,7 +443,7 @@ td {
text-overflow: ellipsis;
&::after {
content: '';
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;

4
src/assets/styles/base/reset.css
View file

@ -6,7 +6,7 @@
box-sizing: border-box;
}
:where([hidden]:not([hidden='until-found'])) {
:where([hidden]:not([hidden="until-found"])) {
display: none !important;
}
@ -49,7 +49,7 @@
resize: block;
}
:where(button, label, select, summary, [role='button'], [role='option']) {
:where(button, label, select, summary, [role="button"], [role="option"]) {
cursor: pointer;
}

6
src/assets/styles/base/vars.css
View file

@ -71,10 +71,10 @@
--border-gray: 1px solid var(--gray-light);
/* fonts */
--font-body: 'DM Sans', Helvetica Neue, Helvetica, Arial, system-ui, sans-serif;
--font-heading: 'Space Grotesk', 'Arial Black', 'Arial Bold', Gadget, sans-serif;
--font-body: "DM Sans", Helvetica Neue, Helvetica, Arial, system-ui, sans-serif;
--font-heading: "Space Grotesk", "Arial Black", "Arial Bold", Gadget, sans-serif;
--font-code:
'MonoLisa', SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
"MonoLisa", SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
/* text */
--font-size-xs: 0.7rem;

2
src/assets/styles/components/buttons.css
View file

@ -1,4 +1,4 @@
@import url('./text-toggle.css');
@import url("./text-toggle.css");
button:not([data-dialog-button]),
.button {

8
src/assets/styles/components/forms.css
View file

@ -7,12 +7,12 @@ input {
accent-color: var(--section-color, var(--accent-color));
}
input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']),
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
textarea {
width: var(--sizing-full);
}
input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']),
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
textarea,
select {
color: var(--text-color);
@ -23,7 +23,7 @@ select {
}
form,
input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']),
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
textarea {
margin-bottom: var(--spacing-base);
}
@ -50,7 +50,7 @@ label svg {
cursor: pointer;
}
detail label:has(input[type='checkbox']) {
detail label:has(input[type="checkbox"]) {
display: inline-flex;
gap: var(--spacing-xs);
}

2
src/assets/styles/components/text-toggle.css
View file

@ -11,7 +11,7 @@
&::after {
position: absolute;
z-index: 1;
content: '';
content: "";
box-shadow: var(--box-shadow-text-toggle);
width: var(--sizing-full);
height: calc(var(--sizing-full) * 0.2);

46
src/assets/styles/index.css
View file

@ -1,36 +1,36 @@
@layer reset, defaults, base, page, components, plugins;
/* style resets */
@import url('./base/reset.css') layer(reset);
@import url("./base/reset.css") layer(reset);
/* core defaults */
@import url('./base/fonts.css') layer(defaults);
@import url('./base/vars.css') layer(defaults);
@import url("./base/fonts.css") layer(defaults);
@import url("./base/vars.css") layer(defaults);
/* base styles */
@import url('./base/index.css') layer(base);
@import url("./base/index.css") layer(base);
/* page styles */
@import url('./pages/contact.css') layer(page);
@import url('./pages/links.css') layer(page);
@import url('./pages/media.css') layer(page);
@import url('./pages/music.css') layer(page);
@import url('./pages/reading.css') layer(page);
@import url('./pages/watching.css') layer(page);
@import url('./pages/webrings.css') layer(page);
@import url("./pages/contact.css") layer(page);
@import url("./pages/links.css") layer(page);
@import url("./pages/media.css") layer(page);
@import url("./pages/music.css") layer(page);
@import url("./pages/reading.css") layer(page);
@import url("./pages/watching.css") layer(page);
@import url("./pages/webrings.css") layer(page);
/* plugins */
@import url('./plugins/prism.css') layer(plugins);
@import url("./plugins/prism.css") layer(plugins);
/* component styles */
@import url('./components/banners.css') layer(components);
@import url('./components/buttons.css') layer(components);
@import url('./components/forms.css') layer(components);
@import url('./components/header.css') layer(components);
@import url('./components/media-grid.css') layer(components);
@import url('./components/nav.css') layer(components);
@import url('./components/dialog.css') layer(components);
@import url('./components/music-chart.css') layer(components);
@import url('./components/paginator.css') layer(components);
@import url('./components/progress-bar.css') layer(components);
@import url('./components/youtube-player.css') layer(components);
@import url("./components/banners.css") layer(components);
@import url("./components/buttons.css") layer(components);
@import url("./components/forms.css") layer(components);
@import url("./components/header.css") layer(components);
@import url("./components/media-grid.css") layer(components);
@import url("./components/nav.css") layer(components);
@import url("./components/dialog.css") layer(components);
@import url("./components/music-chart.css") layer(components);
@import url("./components/paginator.css") layer(components);
@import url("./components/progress-bar.css") layer(components);
@import url("./components/youtube-player.css") layer(components);