commit d1826c6729d76dee0105c555cd5de8f3a090433f
parent 0f173812da782d883d7a8b3ee884d1763ba4f835
Author: Hunter
Date: Tue, 8 Jul 2025 17:41:00 -0400
add hint text; focus editor on page load
Diffstat:
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
# HTML Laboratory 🛼
Craft handmade websites in their natural habitat (your web browser).
-<center><img src="images/pika_construction.gif"></center>
+<img src="images/pika_construction.gif">
## Usage
-1. Open `index.html` in your browser (click <a href="https://hunterirving.github.io/html_laboratory/">here</a>)
+1. Open `index.html` in your web browser (or <a href="https://hunterirving.github.io/html_laboratory/">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)
+3. Press `⌘ + S` to export your work as an HTML file (`⌘ + O` to reopen exported files)
## Technologies Used
diff --git a/index.html b/index.html
@@ -6,14 +6,14 @@
<title>HTML Laboratory</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛼</text></svg>">
<script type="module">
- import {EditorView, keymap} from "https://esm.sh/@codemirror/view@6"
+ import {EditorView, keymap, placeholder} from "https://esm.sh/@codemirror/view@6"
import {EditorState} from "https://esm.sh/@codemirror/state@6"
import {defaultKeymap, indentWithTab} from "https://esm.sh/@codemirror/commands@6"
import {html} from "https://esm.sh/@codemirror/lang-html@6"
import {githubDark} from "https://esm.sh/@fsegurai/codemirror-theme-github-dark"
import {indentUnit} from "https://esm.sh/@codemirror/language@6"
- window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit};
+ window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder};
</script>
<style>
:root {
@@ -66,6 +66,11 @@
tab-size: 2;
}
+ .cm-placeholder {
+ color: #666;
+ opacity: 0.6;
+ }
+
.cm-content {
padding: 15px;
font-size: 21px;
@@ -211,7 +216,7 @@
return;
}
- const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit} = window.CodeMirror;
+ const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder} = window.CodeMirror;
// Load saved content
const savedContent = loadFromStorage();
@@ -230,6 +235,7 @@
html(),
githubDark,
indentUnit.of("\t"),
+ placeholder("Build something with HTML..."),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
clearTimeout(updateTimer);
@@ -244,6 +250,9 @@
// Initial render
updatePreview();
+
+ // Focus the editor
+ editorView.focus();
}
// Initialize when page loads