commit 9fee0f9cae18f6a7439a5decfc2085758c3291e7
parent 194a641d2c3f7817ee436ecee558f68f84c99e94
Author: Hunter
Date: Tue, 23 Dec 2025 00:28:34 -0500
support bare image paths in css url() properties
Diffstat:
4 files changed, 57 insertions(+), 46 deletions(-)
diff --git a/README.md b/README.md
@@ -6,18 +6,18 @@ Craft handmade websites in their natural habitat (your web browser).
## Usage
-1. Open `index.html` in your web browser (or <a href="https://hunterirving.github.io/web_workshop/">click here</a>)
+1. Open `index.html` in your web browser (<a href="https://hunterirving.github.io/web_workshop/">click here</a>)
2. Start typing HTML in the editor pane
- The preview pane will rerender when you're done typing
- - Your work is automatically saved and restored when you reload the page
-3. Press `⌘ + S` to export your work as an HTML file (`⌘ + O` to reopen exported files)
+ - Your work is automatically saved, and restored when you reload the page
+3. Press `⌘ + S` to export your work as an HTML file (`⌘ + O` to open an existing file)
### Options
- to toggle <b>line numbers</b>, press <kbd>F1</kbd> (disabled by default)
- to toggle <b>line wrapping</b>, press <kbd>F2</kbd> (enabled by default)
### Stock Images
-A library of retro images is included. To browse them, type the magic tag `<images>` anywhere in the editor. You can use them in your pages like so: `<img src="coffee.gif">`.
+A library of stock images is included for your convenience. To browse them, type `<img src="?">` anywhere in the editor. You can use them in your pages like so: `<img src="coffee.gif">`.
<br>
<img src="images/hint.gif" width=60px>
diff --git a/main.js b/main.js
@@ -18,7 +18,8 @@ const stockImagesReady = fetch('resource-manifest.json')
// Rewrite bare image filenames to use images/ prefix (case-insensitive, uses correct case)
function rewriteBareImageSrcs(html) {
- return html.replace(/(<img\s[^>]*\bsrc\s*=\s*["'])([^"'/:]+\.(gif|png|jpg|jpeg|svg|webp))(["'])/gi,
+ // Rewrite <img src="filename.ext">
+ html = html.replace(/(<img\s[^>]*\bsrc\s*=\s*["'])([^"'/:]+\.(gif|png|jpg|jpeg|svg|webp))(["'])/gi,
(match, before, filename, ext, after) => {
const original = stockImages.get(filename.toLowerCase());
if (original) {
@@ -26,11 +27,21 @@ function rewriteBareImageSrcs(html) {
}
return match;
});
+ // Rewrite url(filename.ext) in CSS
+ html = html.replace(/(url\(\s*["']?)([^"')/:]+\.(gif|png|jpg|jpeg|svg|webp))(["']?\s*\))/gi,
+ (match, before, filename, ext, after) => {
+ const original = stockImages.get(filename.toLowerCase());
+ if (original) {
+ return before + 'images/' + original + after;
+ }
+ return match;
+ });
+ return html;
}
-// Expand <images> tags into gallery table
+// Expand <img src="?"> tags into gallery table
function expandImagesTag(html) {
- return html.replace(/<images\s*\/?>/gi, () => {
+ return html.replace(/<img\s+src\s*=\s*["']?\?["']?\s*\/?>/gi, () => {
const images = Array.from(stockImages.values()).sort();
if (images.length === 0) return '<p>No images available</p>';
const rows = images.map(filename =>
diff --git a/vendor/build.mjs b/vendor/build.mjs
@@ -2,9 +2,9 @@
// Build script to bundle CodeMirror for offline use
//
// Usage:
-// cd vendor
-// npm install
-// npm run build
+// cd vendor
+// npm install
+// npm run build
//
// This will regenerate ../codemirror-bundle.js
@@ -15,25 +15,25 @@ import { dirname, join } from 'path';
const __dirname = dirname(fileURLToPath(import.meta.url));
await esbuild.build({
- stdin: {
- contents: `
- export {EditorView, keymap, placeholder, lineNumbers, Decoration} from "@codemirror/view";
- export {EditorState, Compartment} from "@codemirror/state";
- export {defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap} from "@codemirror/commands";
- export {closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete";
- export {html} from "@codemirror/lang-html";
- export {githubDark} from "@fsegurai/codemirror-theme-github-dark";
- export {indentUnit} from "@codemirror/language";
- export {search, searchKeymap, closeSearchPanel, openSearchPanel} from "@codemirror/search";
- `,
- resolveDir: __dirname,
- loader: 'js',
- },
- bundle: true,
- format: 'esm',
- outfile: join(__dirname, '..', 'codemirror-bundle.js'),
- minify: true,
- target: ['es2020'],
+ stdin: {
+ contents: `
+ export {EditorView, keymap, placeholder, lineNumbers, Decoration} from "@codemirror/view";
+ export {EditorState, Compartment} from "@codemirror/state";
+ export {defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap} from "@codemirror/commands";
+ export {closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete";
+ export {html} from "@codemirror/lang-html";
+ export {githubDark} from "@fsegurai/codemirror-theme-github-dark";
+ export {indentUnit} from "@codemirror/language";
+ export {search, searchKeymap, closeSearchPanel, openSearchPanel} from "@codemirror/search";
+ `,
+ resolveDir: __dirname,
+ loader: 'js',
+ },
+ bundle: true,
+ format: 'esm',
+ outfile: join(__dirname, '..', 'codemirror-bundle.js'),
+ minify: true,
+ target: ['es2020'],
});
console.log('✓ CodeMirror bundle created: ../codemirror-bundle.js');
diff --git a/vendor/package.json b/vendor/package.json
@@ -1,19 +1,19 @@
{
- "name": "codemirror-bundle",
- "private": true,
- "type": "module",
- "scripts": {
- "build": "node build.mjs"
- },
- "dependencies": {
- "@codemirror/autocomplete": "^6",
- "@codemirror/commands": "^6",
- "@codemirror/lang-html": "^6",
- "@codemirror/language": "^6",
- "@codemirror/search": "^6",
- "@codemirror/state": "^6",
- "@codemirror/view": "^6",
- "@fsegurai/codemirror-theme-github-dark": "^6",
- "esbuild": "^0.24"
- }
+ "name": "codemirror-bundle",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "node build.mjs"
+ },
+ "dependencies": {
+ "@codemirror/autocomplete": "^6",
+ "@codemirror/commands": "^6",
+ "@codemirror/lang-html": "^6",
+ "@codemirror/language": "^6",
+ "@codemirror/search": "^6",
+ "@codemirror/state": "^6",
+ "@codemirror/view": "^6",
+ "@fsegurai/codemirror-theme-github-dark": "^6",
+ "esbuild": "^0.24"
+ }
}