mifi-holdings/armandine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/deploy Pipeline was successful
Details

Browse Source
This commit is contained in:
Mike Fitzpatrick
2026-02-16 10:01:29 -03:00
parent af70682fa8
commit 7870d3b3bd
4 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
scripts/critical-css.js
View File

@@ -5,6 +5,8 @@
import { readFileSync, writeFileSync, readdirSync } from 'fs'; import { readFileSync, writeFileSync, readdirSync } from 'fs';
import { join, dirname } from 'path'; import { join, dirname } from 'path';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { log, error } from 'node:console';
import process from 'node:process';
import Beasties from 'beasties'; import Beasties from 'beasties';
const __dirname = dirname(fileURLToPath(import.meta.url)); const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -23,20 +25,49 @@ const beasties = new Beasties({
path: buildDir, path: buildDir,
preload: 'default', preload: 'default',
logLevel: 'warn', logLevel: 'warn',
inlineThreshold: 50 * 1024, // inline any stylesheet < 50KB inlineThreshold: 50 * 1024,
minimumExternalSize: 50 * 1024 // inline any leftover < 50KB minimumExternalSize: 50 * 1024
}); });
/**
* Remove SvelteKit wrapper div and Svelte SSR fragment comments from HTML.
* With csr = false these add noise and the inline style is unnecessary.
*/
function cleanHtml(html) {
// Remove extra SvelteKit body attribute: data-sveltekit-preload-data="hover"
html = html.replace(/<body\s+data-sveltekit-preload-data\s*=\s*["']hover["']\s*>/i, '<body>');
// Remove SvelteKit's root wrapper: <div style="display: contents"> ... </div>
html = html.replace(/<div\s+style\s*=\s*["']display:\s*contents["']\s*>/i, '');
const bodyEnd = html.indexOf('</body>');
if (bodyEnd !== -1) {
const beforeBody = html.slice(0, bodyEnd);
const lastDiv = beforeBody.lastIndexOf('</div>');
if (lastDiv !== -1) {
html = beforeBody.slice(0, lastDiv) + beforeBody.slice(lastDiv + 6) + html.slice(bodyEnd);
}
}
// Remove Svelte fragment/hydration comments (unused when csr = false)
html = html
.replace(/<!--\[-->/g, '')
.replace(/<!--\]-->/g, '')
.replace(/<!--\[!-->/g, '')
.replace(/<!--\]!-->/g, '')
.replace(/<!---->/g, '');
return html;
}
async function main() { async function main() {
const htmlFiles = getFiles(buildDir, '.html'); const htmlFiles = getFiles(buildDir, '.html');
for (const htmlFile of htmlFiles) { for (const htmlFile of htmlFiles) {
const html = readFileSync(htmlFile, 'utf8'); let html = readFileSync(htmlFile, 'utf8');
const inlined = await beasties.process(html); html = await beasties.process(html);
writeFileSync(htmlFile, inlined); html = cleanHtml(html);
writeFileSync(htmlFile, html);
} }
console.log('Critical CSS inlined:', htmlFiles.length, 'file(s)'); log('Critical CSS inlined:', htmlFiles.length, 'file(s)');
} }
main().catch((err) => { main().catch((err) => {
console.error(err); error(err);
process.exit(1); process.exit(1);
}); });

7
src/lib/components/Lightbox.svelte
View File

@@ -5,7 +5,12 @@
*/ */
</script> </script>
<dialog class="lightbox" aria-hidden="true" aria-describedby="lb-caption" closedby="any"> <dialog
class="lightbox"
aria-hidden="true"
aria-describedby="lb-caption"
closedby="any"
>
<header> <header>
<button type="button" class="lb-close" aria-label="Close" <button type="button" class="lb-close" aria-label="Close"
>&times;</button >&times;</button

3
src/routes/+layout.ts
View File

@@ -1,2 +1,3 @@
export const prerender = true;
export const csr = false; export const csr = false;
export const prerender = true;
export const ssr = true;

10
static/assets/js/script.js
View File

@@ -29,9 +29,11 @@ if (themeToggle) {
const dialog = document.querySelector('dialog.lightbox'); const dialog = document.querySelector('dialog.lightbox');
const lbContent = dialog?.querySelector('.lb-content'); const lbContent = dialog?.querySelector('.lb-content');
const lbCaption = dialog?.querySelector('#lb-caption, .lb-caption'); const lbCaption = dialog?.querySelector('#lb-caption, .lb-caption');
let lightboxOpener = null;
function openLightbox(name, type, caption) { function openLightbox(name, type, caption) {
if (!dialog || !lbContent || !lbCaption) return; if (!dialog || !lbContent || !lbCaption) return;
lightboxOpener = document.activeElement;
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
if (type === 'video') { if (type === 'video') {
@@ -55,6 +57,10 @@ function openLightbox(name, type, caption) {
function closeLightbox() { function closeLightbox() {
if (!dialog) return; if (!dialog) return;
if (lightboxOpener && typeof lightboxOpener.focus === 'function') {
lightboxOpener.focus();
}
lightboxOpener = null;
document.body.style.overflow = ''; document.body.style.overflow = '';
if (lbContent) lbContent.innerHTML = ''; if (lbContent) lbContent.innerHTML = '';
if (lbCaption) lbCaption.textContent = ''; if (lbCaption) lbCaption.textContent = '';
@@ -73,8 +79,8 @@ if (dialog) {
}); });
dialog.addEventListener('close', closeLightbox); dialog.addEventListener('close', closeLightbox);
dialog.addEventListener('cancel', closeLightbox); dialog.addEventListener('cancel', closeLightbox);
dialog.addEventListener('click', () => { dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close(); if (e.target === dialog) closeLightbox();
}); });
} }