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

chore(*): use prettier for formatting

Browse source
This commit is contained in:
Cory Dransfeldt 2025-06-14 16:43:12 -07:00
parent 6c659fe1d0
commit 029caaaa9e
No known key found for this signature in database
73 changed files with 1390 additions and 794 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,52 +1,52 @@
class SelectPagination extends HTMLElement {
static register(tagName = 'select-pagination') {
if ("customElements" in window) customElements.define(tagName, this)
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
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)
let pageNumber = this.extractPageNumber(uriSegments)
if (pageNumber === null) pageNumber = this.baseIndex
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.value = pageNumber.toString()
this.control = this.querySelector('select');
this.control.value = pageNumber.toString();
this.control.addEventListener('change', (event) => {
pageNumber = parseInt(event.target.value)
const updatedUrlSegments = this.updateUrlSegments(uriSegments, pageNumber)
window.location.href = `${window.location.origin}/${updatedUrlSegments.join('/')}`
})
pageNumber = parseInt(event.target.value);
const updatedUrlSegments = this.updateUrlSegments(uriSegments, pageNumber);
window.location.href = `${window.location.origin}/${updatedUrlSegments.join('/')}`;
});
}
extractPageNumber(segments) {
const lastSegment = segments[segments.length - 1]
return !isNaN(lastSegment) ? parseInt(lastSegment) : null
const lastSegment = segments[segments.length - 1];
return !isNaN(lastSegment) ? parseInt(lastSegment) : null;
}
updateUrlSegments(segments, pageNumber) {
const lastIsPage = !isNaN(segments[segments.length - 1])
const lastIsPage = !isNaN(segments[segments.length - 1]);
if (lastIsPage) {
segments[segments.length - 1] = pageNumber.toString()
segments[segments.length - 1] = pageNumber.toString();
} else {
segments.push(pageNumber.toString())
segments.push(pageNumber.toString());
}
if (pageNumber === this.baseIndex) segments.pop()
if (pageNumber === this.baseIndex) segments.pop();
return segments
return segments;
}
}
SelectPagination.register()
SelectPagination.register();

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

@ -21,7 +21,9 @@ window.addEventListener('load', () => {
if (isDynamic && !isLoaded) {
const markdownFields = dialog.dataset.markdown || '';
try {
const res = await fetch(`/api/query.php?data=${isDynamic}&id=${dialogId}&markdown=${encodeURIComponent(markdownFields)}`);
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>';

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

@ -7,22 +7,23 @@ const staticAssets = [
'/assets/fonts/dmi.woff2',
'/assets/fonts/ml.woff2',
'/assets/scripts/index.js',
'/assets/scripts/components/select-pagination.js',
'/assets/scripts/components/select-pagination.js'
];
self.addEventListener('install', event => {
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(staticAssets))
caches
.open(cacheName)
.then((cache) => cache.addAll(staticAssets))
.then(() => self.skipWaiting())
);
});
self.addEventListener('activate', event => {
self.addEventListener('activate', (event) => {
event.waitUntil(
(async () => {
const keys = await caches.keys();
await Promise.all(keys.filter(key => key !== cacheName).map(key => caches.delete(key)));
await Promise.all(keys.filter((key) => key !== cacheName).map((key) => caches.delete(key)));
if (self.registration.navigationPreload) await self.registration.navigationPreload.enable();
@ -31,7 +32,7 @@ self.addEventListener('activate', event => {
);
});
self.addEventListener('fetch', event => {
self.addEventListener('fetch', (event) => {
const request = event.request;
if (request.method !== 'GET') return;
@ -51,6 +52,5 @@ self.addEventListener('fetch', event => {
return;
}
event.respondWith(caches.match(request).then(response => response || fetch(request))
);
event.respondWith(caches.match(request).then((response) => response || fetch(request)));
});

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;

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

@ -82,7 +82,7 @@ img {
border-radius: var(--border-radius-slight);
&.image-banner {
border: var(--border-gray);
border: var(--border-gray);
height: auto;
width: var(--sizing-full);
margin: var(--margin-vertical-base-horizontal-zero);
@ -302,7 +302,9 @@ a {
}
/* headers */
h1, h2, h3 {
h1,
h2,
h3 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-md);
@ -440,7 +442,7 @@ td {
text-overflow: ellipsis;
&::after {
content: "";
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
@ -492,7 +494,7 @@ main {
main,
footer {
width: calc(var(--sizing-full) * .8);
width: calc(var(--sizing-full) * 0.8);
@media screen and (min-width: 768px) {
max-width: 768px;

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

@ -71,9 +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-code: "MonoLisa", SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--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;
/* text */
--font-size-xs: 0.7rem;
@ -152,7 +153,7 @@
}
/* transitions */
--transition-ease-in-out: cubic-bezier(.4, 0, .2, 1);
--transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--transition-duration-default: 300ms;
/* transforms */
@ -165,10 +166,10 @@
--button-offset-hover: 0;
}
/* filters */
--filter-image-default: contrast(1) saturate(1) brightness(1);
--filter-image-light: contrast(1.2) saturate(1.2) brightness(0.9);
--filter-image-dark: contrast(1.1) saturate(1.1) brightness(1.1);
/* filters */
--filter-image-default: contrast(1) saturate(1) brightness(1);
--filter-image-light: contrast(1.2) saturate(1.2) brightness(0.9);
--filter-image-dark: contrast(1.1) saturate(1.1) brightness(1.1);
/* svgs */
--stroke-width-default: 1.3;

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 {

29
src/assets/styles/components/dialog.css
View file

@ -1,11 +1,23 @@
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
.dialog-open,
@ -14,7 +26,8 @@
vertical-align: middle;
color: var(--section-color, var(--accent-color));
transform: var(--transform-icon-default);
transition: color var(--transition-duration-default) var(--transition-ease-in-out),
transition:
color var(--transition-duration-default) var(--transition-ease-in-out),
transform var(--transition-duration-default) var(--transition-ease-in-out);
&:is(:hover, :focus, :active) {
@ -61,9 +74,9 @@ dialog {
}
@media (min-width: 768px) {
max-width: calc(var(--sizing-full) * .6);
max-height: calc(var(--sizing-full) * .75);
inset: calc(var(--sizing-full) * .125) calc(var(--sizing-full) * .2);
max-width: calc(var(--sizing-full) * 0.6);
max-height: calc(var(--sizing-full) * 0.75);
inset: calc(var(--sizing-full) * 0.125) calc(var(--sizing-full) * 0.2);
border: var(--border-gray);
}

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

@ -1,18 +1,18 @@
::placeholder {
color: var(--text-color);
opacity: .5;
opacity: 0.5;
}
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/music-chart.css
View file

@ -50,7 +50,7 @@
progress {
@media screen and (min-width: 768px) {
max-width: calc(var(--sizing-full) * .8);
max-width: calc(var(--sizing-full) * 0.8);
}
}
}

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

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

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);

2
src/assets/styles/noscript.css
View file

@ -1,6 +1,6 @@
/* generic helper to hide client side content */
.client-side {
display:none
display: none;
}
/* unset text toggle implementation on artist + genre pages */