WIP migration

11 files changed, 816 insertions, 0 deletions

diff --git a/Blog/Components/Pages/Calc.razor b/Blog/Components/Pages/Calc.razor
new file mode 100644
index 0000000..942d9a9
--- /dev/null
+++ b/Blog/Components/Pages/Calc.razor
@@ -0,0 +1,56 @@
+@page "/Calc"
+<PageTitle>Calculator</PageTitle>
+<PageScript Src="./Components/Pages/Calc.razor.js"/>
+
+<main>
+    <p>A rpn calculator</p>
+    <form id="form" class="flex-row">
+        <input id="input" type="text" placeholder="1 2 +" />
+        <input type="submit" value="Evaluate">
+    </form>
+    <div>
+        <div id="log"></div>
+    </div>
+
+    <fieldset class="docs">
+        <legend>Available stack operations</legend>
+        <details>
+            <summary>dup</summary>
+            <p>Duplicates the top value on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[1, 1, 2, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>drop</summary>
+            <p>Drops the top value on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>drop</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>swap</summary>
+            <p>Swaps the top two values on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>swap</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 1, 3]</span>
+                <span></span>
+            </div>
+        </details>
+    </fieldset>
+</main>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Calc.razor.js b/Blog/Components/Pages/Calc.razor.js
new file mode 100644
index 0000000..d18634e
--- /dev/null
+++ b/Blog/Components/Pages/Calc.razor.js
@@ -0,0 +1,140 @@
+import { getById, div, span, h, writeError } from "/common.module.js"
+
+export function onLoad() {
+    console.log('Loaded');
+    const form = getById("form");
+    const input = getById("input");
+    const log = getById("log");
+
+    form.addEventListener("submit", submitForm);
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryInput = urlParams.get('in');
+
+    if (input.value.length === 0) {
+        input.value = queryInput;
+    }
+}
+
+export function onUpdate() {
+    console.log('Updated');
+}
+
+export function onDispose() {
+    console.log('Disposed');
+}
+
+/** @param {SubmitEvent} event */
+function submitForm(event) {
+    console.log(input.value);
+    resetLog();
+    try {
+        const stack = evalString(input.value);
+        console.log(stack);
+
+        const path = window.location.pathname;
+        const params = new URLSearchParams(window.location.search);
+        const hash = window.location.hash;
+
+        params.set("in", input.value);
+        window.history.replaceState({}, '', `${path}?${params.toString()}${hash}`);
+    }
+    catch (error) {
+        writeError(error);
+    }
+    event.preventDefault();
+}
+
+/** @param {string} input */
+function evalString(input) {
+    let words = input.trim().split(' ').filter(i => i);
+    return evalWords([], words);
+}
+
+function effect2(f) {
+    return (stack) => {
+        if (stack.length <= 1) throw "stack underflow";
+        let [x, y, ...rest] = stack;
+        return [f(y, x), ...rest];
+    }
+}
+
+const plus = effect2((a, b) => a + b);
+const subtract = effect2((a, b) => a - b);
+const multiply = effect2((a, b) => a * b);
+const divide = effect2((a, b) => a / b);
+
+
+function evalWords(stack, words) {
+    writeLog(stack, words);
+    if (words.length === 0) return stack;
+
+    let [word, ...rest] = words;
+    return evalWords(evalWord(word, stack), rest);
+}
+
+function evalWord(word, stack, rest) {
+    switch (word) {
+        case "+": return plus(stack);
+        case "-": return subtract(stack);
+        case "*": return multiply(stack);
+        case "/": return divide(stack);
+        case "dup": return dup(stack);
+        case "drop": return drop(stack);
+        case "swap": return swap(stack);
+        default: return parse(word, stack);
+    }
+}
+
+function dup(stack) {
+    let [x, ...rest] = stack;
+    return [x, x, ...rest];
+}
+
+function drop(stack) {
+    let [_, ...rest] = stack;
+    return rest;
+}
+
+function swap(stack) {
+    let [x, y, ...rest] = stack;
+    return [y, x, ...rest];
+}
+
+function parse(word, stack) {
+    let num = Number(word);
+    if (isNaN(num)) {
+        throw `word '${word}' not recognised`;
+    }
+    return [num, ...stack];
+}
+
+function writeLog(stack, words) {
+    let log_left = span(`[${stack.join(', ')}]`);
+    let log_right = span(words.join(' '));
+
+    if (words.length === 0) {
+        log_left.textContent += " <=="
+    }
+
+    let log_row = div(log_left, log_right);
+    log_row.className = "flex-spread";
+
+    log.appendChild(log_row);
+}
+
+function resetLog() {
+    if (!log.hasChildNodes()) return;
+
+    let summary = h("summary");
+    summary.textContent = log.firstChild.lastChild.textContent;
+
+    let old_log = log.cloneNode(true);
+    old_log.id = '';
+
+    let details = h("details", summary, old_log);
+    details.className = "history"
+
+    log.insertAdjacentElement("afterend", details);
+    log.replaceChildren(); //remove children, clear log
+}
\ No newline at end of file
diff --git a/Blog/Components/Pages/Concat.razor b/Blog/Components/Pages/Concat.razor
new file mode 100644
index 0000000..856d4e0
--- /dev/null
+++ b/Blog/Components/Pages/Concat.razor
@@ -0,0 +1,138 @@
+@page "/Concat"
+<PageTitle>Concatenator</PageTitle>
+<PageScript Src="./Components/Pages/Concat.razor.js"/>
+<main>
+    <p>A "concatenative language"</p>
+    <form id="form">
+        <textarea id="input" placeholder="1 2 +" rows="5"></textarea>
+        <input type="submit" value="Run program">
+    </form>
+    <div>
+        <div id="log"></div>
+    </div>
+
+    <fieldset class="docs">
+        <legend>Predefined operations</legend>
+        <details>
+            <summary>dup</summary>
+            <p>Duplicates the top value on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[1, 1, 2, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>drop</summary>
+            <p>Drops the top value on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>drop</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>swap</summary>
+            <p>Swaps the top two values on the stack</p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>swap</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 1, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>skip</summary>
+            <p>Skips forward in the program by the amount on the top of the stack.
+                If the value on the top of the stack is 0 or negative,
+                the value is dropped and the program does not skip ahead.
+            </p>
+            <div class="flex-spread">
+                <span>[1, 2, 3]</span>
+                <span>skip drop dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 3]</span>
+                <span>dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 2, 3]</span>
+                <span></span>
+            </div>
+            Or
+            <div class="flex-spread">
+                <span>[-1, 2, 3]</span>
+                <span>skip drop dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 3]</span>
+                <span>drop dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[3]</span>
+                <span>dup</span>
+            </div>
+            <div class="flex-spread">
+                <span>[3, 3]</span>
+                <span></span>
+            </div>
+        </details>
+
+        <details>
+            <summary>: word ... ;</summary>
+            <p>Creates a new definition.</p>
+            <p>Example: ": double 2 * ;" defines a new word called double. Any subsequent mention of double will
+                replace the word with its definition.</p>
+            <div class="flex-spread">
+                <span>[]</span>
+                <span>: double 2 * ; 3 double</span>
+            </div>
+            <div class="flex-spread">
+                <span>[]</span>
+                <span>3 double</span>
+            </div>
+            <div class="flex-spread">
+                <span>[3]</span>
+                <span>double</span>
+            </div>
+            <div class="flex-spread">
+                <span>[3]</span>
+                <span>2 *</span>
+            </div>
+            <div class="flex-spread">
+                <span>[2, 3]</span>
+                <span>*</span>
+            </div>
+            <div class="flex-spread">
+                <span>[6] &lt;==</span>
+                <span></span>
+            </div>
+        </details>
+    </fieldset>
+    <fieldset class="docs">
+        <legend>Example programs</legend>
+        <details>
+            <summary>Factorial</summary>
+            <NavLink
+                href="/concat?in=FwAgxg9grgdgLgUwE4lQEygBxAJhAZwHcBDbAWhAG4AoUAQlRA2wEYQLJZEV8BrAS2wMAVFWoB2EHWpA">
+                Replace program
+            </NavLink>
+            <pre>
+                : counter   dup 2 swap - ;
+                : !   dup 1 - counter skip ! * ;
+                7 !
+            </pre>
+        </details>
+    </fieldset>
+</main>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Concat.razor.js b/Blog/Components/Pages/Concat.razor.js
new file mode 100644
index 0000000..bd476e9
--- /dev/null
+++ b/Blog/Components/Pages/Concat.razor.js
@@ -0,0 +1,261 @@
+import { getById, div, span, h, writeError } from "/common.module.js";
+import lzString from "/lz-string.module.js";
+
+let definitions = {};
+let log = undefined;
+let input = undefined;
+
+export function onLoad() {
+    console.log('Loaded');
+    const form = getById("form");
+    input = getById("input");
+    log = getById("log");
+
+    form.onsubmit = async (event) => {
+        event.preventDefault();
+        await submitForm();
+    };
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryInput = urlParams.get("in");
+
+    if (input.value.length === 0) {
+        input.value = lzString.decompressFromEncodedURIComponent(queryInput);
+    }
+}
+
+export function onUpdate() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryInput = urlParams.get("in");
+
+    if (input.value.length === 0) {
+        input.value = lzString.decompressFromEncodedURIComponent(queryInput);
+    }
+}
+
+async function submitForm() {
+    console.log(input.value);
+    resetLog();
+    try {
+        definitions = {};
+        const stack = await evalString(input.value);
+        console.log(stack);
+
+        const path = window.location.pathname;
+        const params = new URLSearchParams(window.location.search);
+        const hash = window.location.hash;
+
+        params.set("in", lzString.compressToEncodedURIComponent(input.value));
+        window.history.replaceState(
+            {},
+            "",
+            `${path}?${params.toString()}${hash}`,
+        );
+    } catch (error) {
+        writeError(error);
+        console.log(error);
+    }
+}
+
+function splitWords(input) {
+    return input
+        .trim()
+        .split(/\s+/)
+        .filter((i) => i);
+}
+
+/** @param {string} inputString */
+function evalString(inputString) {
+    let words = splitWords(inputString);
+    return evalWords(words);
+}
+
+function effect2(f) {
+    return (stack) => {
+        if (stack.length <= 1) throw "stack underflow, need 2 numbers";
+        let [x, y, ...rest] = stack;
+        return [f(y, x), ...rest];
+    };
+}
+
+const plus = effect2((a, b) => a + b);
+const subtract = effect2((a, b) => a - b);
+const multiply = effect2((a, b) => a * b);
+const divide = effect2((a, b) => a / b);
+
+async function evalWords(inputWords) {
+    let words = inputWords;
+    let stack = [];
+
+    while (words.length > 0) {
+        await writeLog(stack, words);
+        if (words.length === 0) return stack;
+
+        let [word, ...rest] = words;
+        [stack, words] = evalWord(word, stack, rest);
+
+        await new Promise((r) => setTimeout(r, 100));
+    }
+    await writeLog(stack, words);
+    return stack;
+}
+
+function evalWord(word, stack, rest) {
+    switch (word) {
+        case "+":
+            return [plus(stack), rest];
+        case "-":
+            return [subtract(stack), rest];
+        case "*":
+            return [multiply(stack), rest];
+        case "/":
+            return [divide(stack), rest];
+        case "dup":
+            return [dup(stack), rest];
+        case "drop":
+            return [drop(stack), rest];
+        case "swap":
+            return [swap(stack), rest];
+        case "skip":
+            return skip(stack, rest);
+        case ",,":
+            return unquote(stack, rest);
+        case ":":
+            return [stack, define(rest)];
+        default:
+            return parse(word, stack, rest);
+    }
+}
+
+function unquote(stack, rest) {
+    let [quote, ...restStack] = stack;
+    if (typeof quote === "string" || quote instanceof String) {
+        return [restStack, [...splitWords(quote), ...rest]];
+    } else {
+        throw "not a string, only strings are unquoteable";
+    }
+}
+
+function skip(stack, words) {
+    if (stack.length === 0) throw "stack underflow, dont know how much to skip";
+    let [amount, ...restStack] = stack;
+
+    if (amount > words.length)
+        throw `program underflow, cant skip ${amount} words`;
+    if (amount <= 0) return [stack.slice(1), words]; // no skipping on <= 0
+
+    let restWords = words.slice(amount);
+
+    return [restStack, restWords];
+}
+
+function define(words) {
+    if (words.length < 2) throw "missing definition after ':'";
+    let [ident, ...rest] = words;
+    let index = 0;
+    let definition = [];
+
+    for (; index < rest.length; index++) {
+        const word = rest[index];
+        if (word === ";") {
+            break;
+        } else if (rest.length - 1 === index) {
+            throw "expected ';', found end of program";
+        }
+        definition.push(word);
+    }
+
+    definitions[ident] = definition;
+
+    return rest.slice(index + 1);
+}
+
+function dup(stack) {
+    if (stack.length === 0) throw "stack underflow, nothing to duplicate";
+    let [x, ...rest] = stack;
+    return [x, x, ...rest];
+}
+
+function drop(stack) {
+    if (stack.length === 0) throw "stack underflow, nothing to drop";
+    let [_, ...rest] = stack;
+    return rest;
+}
+
+function swap(stack) {
+    if (stack.length < 2) throw "stack underflow, not enough to swap";
+    let [x, y, ...rest] = stack;
+    return [y, x, ...rest];
+}
+
+function parse(word, stack, rest) {
+    if (word.startsWith('"')) {
+        return parseString(word, stack, rest);
+    }
+
+    if (word in definitions) {
+        return [stack, [...definitions[word], ...rest]];
+    }
+
+    let num = Number(word);
+    if (isNaN(num)) {
+        throw `word '${word}' not recognised`;
+    }
+
+    return [[num, ...stack], rest];
+}
+
+function parseString(word, stack, rest) {
+    if (word.length > 1 && word.endsWith('"')) {
+        return [[word.slice(1, -1), ...stack], rest];
+    }
+
+    let string = word.slice(1);
+    let index = 0;
+
+    for (; index < rest.length; index++) {
+        const word = rest[index];
+        if (word.endsWith('"')) {
+            string = string.concat(" ", word.slice(0, -1));
+            break;
+        } else if (rest.length - 1 === index) {
+            throw "expected word ending with '\"', found end of program";
+        }
+        string = string.concat(" ", word);
+    }
+
+    return [[string, ...stack], rest.slice(index + 1)];
+}
+
+function writeLog(stack, words) {
+    return new Promise((resolve, _reject) => {
+        let log_left = span(`[${stack.join(", ")}]`);
+        let log_right = span(words.join(" "));
+
+        if (words.length === 0) {
+            log_left.textContent += " <==";
+        }
+
+        let log_row = div(log_left, log_right);
+        log_row.className = "flex-spread";
+
+        log.appendChild(log_row);
+        resolve();
+    });
+}
+
+function resetLog() {
+    if (!log.hasChildNodes()) return;
+
+    let summary = h("summary");
+    summary.textContent = log.firstChild.lastChild.textContent;
+
+    let old_log = log.cloneNode(true);
+    old_log.id = "";
+
+    let details = h("details", summary, old_log);
+    details.className = "history";
+
+    log.insertAdjacentElement("afterend", details);
+    log.replaceChildren(); //remove children, clear log
+}
diff --git a/Blog/Components/Pages/Error.razor b/Blog/Components/Pages/Error.razor
new file mode 100644
index 0000000..6567978
--- /dev/null
+++ b/Blog/Components/Pages/Error.razor
@@ -0,0 +1,37 @@
+@page "/Error"
+@using System.Diagnostics
+@using Microsoft.AspNetCore.Http
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    [CascadingParameter] private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+
+}
\ No newline at end of file
diff --git a/Blog/Components/Pages/Home.razor b/Blog/Components/Pages/Home.razor
new file mode 100644
index 0000000..be924d5
--- /dev/null
+++ b/Blog/Components/Pages/Home.razor
@@ -0,0 +1,10 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<main>
+    <p>A couple of JS/HTML experiments.</p>
+    <div>
+        <div id="log"></div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Letterflixd.razor b/Blog/Components/Pages/Letterflixd.razor
new file mode 100644
index 0000000..b6a088a
--- /dev/null
+++ b/Blog/Components/Pages/Letterflixd.razor
@@ -0,0 +1,30 @@
+@page "/Letterflixd"
+<PageTitle>Netflix to Letterboxd converter</PageTitle>
+<PageScript Src="./Components/Pages/Letterflixd.razor.js"/>
+<main>
+    <p>Convert Netflix viewing history to a Letterboxd import file.</p>
+    <p>Download your viewing history from Netflix at <a href="https://www.netflix.com/settings/viewed/"
+                                                        target="_blank">https://www.netflix.com/settings/viewed/</a></p>
+    <p>Import the resulting Letterboxd file at <a href="https://letterboxd.com/import/"
+                                                  target="_blank">https://letterboxd.com/import/</a></p>
+    <form id="form">
+        <fieldset class="docs">
+            <div class="row">
+                <label for="netflix-file">
+                    Netflix viewing history file:
+                    <input id="netflix-file" type="file">
+                </label>
+            </div>
+            <div class="row">
+                <input type="submit" value="Convert">
+            </div>
+        </fieldset>
+    </form>
+    <div>
+        <label for="debug">
+            Show debug log
+            <input type="checkbox" id="debug">
+        </label>
+        <div id="log"></div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Letterflixd.razor.js b/Blog/Components/Pages/Letterflixd.razor.js
new file mode 100644
index 0000000..a3903e2
--- /dev/null
+++ b/Blog/Components/Pages/Letterflixd.razor.js
@@ -0,0 +1,99 @@
+import { getById, resetLog, writeError, writeInfo, writeDebug, a, span, div, addClass } from "/common.module.js"
+
+let netflix_file_input = undefined;
+
+export function onLoad() {
+
+    const form = getById("form");
+    netflix_file_input = getById("netflix-file");
+
+    form.addEventListener("submit", submitForm);
+}
+
+
+/** @param {SubmitEvent} event */
+function submitForm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    resetLog();
+    const files = netflix_file_input.files;
+    if (files.length !== 1) {
+        writeError("First select your viewing history file.");
+        return;
+    }
+
+    const netflix_file = files[0];
+
+    writeInfo("Checking metadata...");
+
+    if (!netflix_file.type.match('text/csv')) {
+        let detected_filetype = "";
+        if (netflix_file.type) {
+            detected_filetype = ", detected filetype: " + netflix_file.type;
+        }
+        writeError("Select a CSV file" + detected_filetype);
+        return;
+    }
+
+    handleFile(netflix_file);
+}
+
+/** @param {File} file  */
+function handleFile(file) {
+    writeInfo("Reading file...");
+    file.text()
+        .then(convertText);
+}
+
+const viewingHistoryPattern = /"(.*)","(\d{1,2})\/(\d{1,2})\/(\d+)"/;
+
+/** @param {string} data  */
+function convertText(data) {
+    writeInfo("Checking header...");
+    const [header, ...lines] = data.split(/\r?\n|\r|\n/g);
+    if (header !== "Title,Date") {
+        writeError("Invalid Netflix viewing history file, expected header \"Title,Date\"");
+        return;
+    }
+    writeInfo("History count: " + lines.length);
+    let letterboxd_output = "Title,WatchedDate,Rewatch\n";
+    let watched_movies = new Set();
+
+    for (let line of lines) {
+        if (!line) continue;
+        if (line.includes(": Season")
+            || line.includes(": Limited Series:")
+            || line.includes(": Part")
+            || line.includes(": Chapter ")
+            || line.includes(": Volume ")
+            || line.includes(": Series ")
+            || line.includes(": Book ")) {
+            writeDebug("Skipping show episode: " + line);
+            continue;
+        }
+        if (line.startsWith(": ")) {
+            writeDebug("Skipping empty title entry")
+        }
+        const [_, title, day, month, year] = viewingHistoryPattern.exec(line);
+        if (title && day && month && year) {
+            const rewatch = watched_movies.has(title);
+            letterboxd_output += `"${title}",${year}-${month}-${day},${rewatch}\n`
+            if (rewatch) {
+                writeDebug("Rewatch of: " + title);
+            }
+            watched_movies.add(title);
+        }
+        else {
+            writeError("could not parse line: " + line);
+        }
+    }
+
+    let letterboxd_import = new Blob([letterboxd_output], { type: 'text/csv' });
+    
+    const filename = "netflix-letterboxd-import.csv"
+    let download_button = a(window.URL.createObjectURL(letterboxd_import), filename)
+    let download_text = span("Download import file ==> ")
+    download_button.download = filename;
+    log.appendChild(div(addClass(download_text, "info"), download_button));
+}
\ No newline at end of file
diff --git a/Blog/Components/Pages/NotFound.razor b/Blog/Components/Pages/NotFound.razor
new file mode 100644
index 0000000..5278494
--- /dev/null
+++ b/Blog/Components/Pages/NotFound.razor
@@ -0,0 +1,4 @@
+@page "/not-found"
+
+<h3>Not Found</h3>
+<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Note.razor b/Blog/Components/Pages/Note.razor
new file mode 100644
index 0000000..531adcf
--- /dev/null
+++ b/Blog/Components/Pages/Note.razor
@@ -0,0 +1,8 @@
+@page "/Note"
+<PageTitle>Note</PageTitle>
+<PageScript Src="./Components/Pages/Note.razor.js"></PageScript>
+
+<main>
+    <textarea id="input" style="height:60vh" autofocus></textarea>
+    <div id="log"></div>
+</main>
\ No newline at end of file
diff --git a/Blog/Components/Pages/Note.razor.js b/Blog/Components/Pages/Note.razor.js
new file mode 100644
index 0000000..3d47d23
--- /dev/null
+++ b/Blog/Components/Pages/Note.razor.js
@@ -0,0 +1,33 @@
+import { getById, debounce, writeError, resetLog } from "/common.module.js";
+import lzString from "/lz-string.module.js";
+
+let input = undefined;
+export function onLoad() {
+    input = getById("input");
+    input.addEventListener("input", debounce(() => {
+        if (input.value === '') {
+            window.location.hash = ''
+        }
+        else {
+            window.location.hash = '#' + lzString.compressToEncodedURIComponent(input.value);
+        }
+        resetLog();
+    }, 10))
+    
+    window.addEventListener('hashchange', loadState);
+    loadState();
+}
+
+export function onUpdate() {
+    loadState();
+}
+
+function loadState() {
+    if (window.location.hash !== '') {
+        input.value = lzString.decompressFromEncodedURIComponent(window.location.hash.substring(1));
+        if (input.value === '') {
+            //Hash but no content?
+            writeError("Failed to load note from url.")
+        }
+    }
+}
\ No newline at end of file