xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
lazy load qr mode
author
Morgan Williams
date
(Dec 23, 2025, 6:55 AM +0100)
commit
244e770b
244e770b59268e007dc0f657664d9dbe0e7bcf8a
parent
842b9fb3
842b9fb31450814663a9b2bc347dbe01d142cd62
+22
-22
+3
-16
scripts/generate-qr-codes.mjs
+3
-16
scripts/generate-qr-codes.mjs
···
9
9
10
10
/**
11
11
* Shuffle array with seeded random for consistent results
12
-
* @param {Array} array
12
+
* @param {string[]} array
13
13
* @param {number} seed
14
-
* @returns {Array}
14
+
* @returns {string[]}
15
15
*/
16
16
function shuffleWithSeed(array, seed) {
17
17
const shuffled = [...array];
···
32
32
* Uses seeded shuffling for consistent animation order across reloads
33
33
* @param {string} text - Text to encode
34
34
* @param {number} size - SVG size in pixels
35
-
* @returns {string} SVG string with rect elements
35
+
* @returns {string} SVG string with rect elements (fill="currentColor")
36
36
*/
37
37
function generateOptimizedQRSvg(text, size = 164) {
38
38
const qr = QRCode.create(text);
···
62
62
const shuffled = shuffleWithSeed(rects, seed);
63
63
64
64
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" style="overflow:visible">${shuffled.join("")}</svg>`;
65
-
}
66
-
67
-
/**
68
-
* Get hash of current link URLs to detect changes
69
-
* @param {Object<string, string>} qrCodes
70
-
* @returns {string}
71
-
*/
72
-
function hashQRCodes(qrCodes) {
73
-
const urls = Object.entries(qrCodes)
74
-
.sort()
75
-
.map(([title, svg]) => title)
76
-
.join("|");
77
-
return urls;
78
65
}
79
66
80
67
/**
+19
-6
src/routes/+page.server.js
+19
-6
src/routes/+page.server.js
···
1
1
import { env } from "$env/dynamic/private";
2
2
import { linkTemplates, buildLink } from "$lib/links.js";
3
-
import { preGeneratedQRCodes } from "$lib/generated-qr-codes.js";
4
3
5
4
/** @typedef {import('$lib/links.js').Link} Link */
6
5
···
79
78
}
80
79
81
80
/**
82
-
* Attach pre-generated QR codes to links
81
+
* Attach pre-generated QR codes to links (lazy loads the QR file)
83
82
* @param {Link[]} allLinks
84
83
* @param {string[]} titlesToShow
85
-
* @returns {Link[]}
84
+
* @param {boolean} qrMode - Whether QR mode is active
85
+
* @returns {Promise<Link[]>}
86
86
*/
87
-
function buildLinksWithQr(allLinks, titlesToShow) {
87
+
async function buildLinksWithQr(allLinks, titlesToShow, qrMode) {
88
88
// Filter to only requested titles
89
89
const filteredLinks = titlesToShow
90
90
.map((title) =>
91
91
allLinks.find((link) => link.title === title || link.alias === title),
92
92
)
93
93
.filter(Boolean);
94
+
95
+
// Only import QR codes if in QR mode
96
+
// This defers the 35ms+ import cost until actually needed
97
+
let preGeneratedQRCodes = {};
98
+
99
+
if (qrMode) {
100
+
try {
101
+
const qrModule = await import("$lib/generated-qr-codes.js");
102
+
preGeneratedQRCodes = qrModule.preGeneratedQRCodes || {};
103
+
} catch (err) {
104
+
console.warn("Failed to load pre-generated QR codes", err);
105
+
}
106
+
}
94
107
95
108
// Attach pre-generated QR codes to links
96
109
const linksWithQr = filteredLinks.map((link) => {
···
131
144
// Determine which titles to display
132
145
const titlesToShow = getTitlesToDisplay(hostname, requestedTitles);
133
146
134
-
// Build links with QR codes (only for displayed links)
135
-
const links = buildLinksWithQr(allLinks, titlesToShow);
147
+
// Build links with QR codes (lazy loads QR file only in qrMode)
148
+
const links = await buildLinksWithQr(allLinks, titlesToShow, qrMode);
136
149
137
150
return {
138
151
links,