Prettier
This commit is contained in:
@@ -5,6 +5,8 @@
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'fs';
|
||||
import { join, dirname } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { log, error } from 'node:console';
|
||||
import process from 'node:process';
|
||||
import Beasties from 'beasties';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
@@ -23,20 +25,49 @@ const beasties = new Beasties({
|
||||
path: buildDir,
|
||||
preload: 'default',
|
||||
logLevel: 'warn',
|
||||
inlineThreshold: 50 * 1024, // inline any stylesheet < 50KB
|
||||
minimumExternalSize: 50 * 1024 // inline any leftover < 50KB
|
||||
});
|
||||
inlineThreshold: 50 * 1024,
|
||||
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() {
|
||||
const htmlFiles = getFiles(buildDir, '.html');
|
||||
for (const htmlFile of htmlFiles) {
|
||||
const html = readFileSync(htmlFile, 'utf8');
|
||||
const inlined = await beasties.process(html);
|
||||
writeFileSync(htmlFile, inlined);
|
||||
let html = readFileSync(htmlFile, 'utf8');
|
||||
html = await beasties.process(html);
|
||||
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) => {
|
||||
console.error(err);
|
||||
error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@@ -5,7 +5,12 @@
|
||||
*/
|
||||
</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>
|
||||
<button type="button" class="lb-close" aria-label="Close"
|
||||
>×</button
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export const prerender = true;
|
||||
export const csr = false;
|
||||
export const prerender = true;
|
||||
export const ssr = true;
|
||||
|
||||
@@ -29,9 +29,11 @@ if (themeToggle) {
|
||||
const dialog = document.querySelector('dialog.lightbox');
|
||||
const lbContent = dialog?.querySelector('.lb-content');
|
||||
const lbCaption = dialog?.querySelector('#lb-caption, .lb-caption');
|
||||
let lightboxOpener = null;
|
||||
|
||||
function openLightbox(name, type, caption) {
|
||||
if (!dialog || !lbContent || !lbCaption) return;
|
||||
lightboxOpener = document.activeElement;
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
if (type === 'video') {
|
||||
@@ -55,6 +57,10 @@ function openLightbox(name, type, caption) {
|
||||
|
||||
function closeLightbox() {
|
||||
if (!dialog) return;
|
||||
if (lightboxOpener && typeof lightboxOpener.focus === 'function') {
|
||||
lightboxOpener.focus();
|
||||
}
|
||||
lightboxOpener = null;
|
||||
document.body.style.overflow = '';
|
||||
if (lbContent) lbContent.innerHTML = '';
|
||||
if (lbCaption) lbCaption.textContent = '';
|
||||
@@ -73,8 +79,8 @@ if (dialog) {
|
||||
});
|
||||
dialog.addEventListener('close', closeLightbox);
|
||||
dialog.addEventListener('cancel', closeLightbox);
|
||||
dialog.addEventListener('click', () => {
|
||||
if (e.target === dialog) dialog.close();
|
||||
dialog.addEventListener('click', (e) => {
|
||||
if (e.target === dialog) closeLightbox();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user