From 76c7ef2d84fa2f90e8ec331f953c744bfe047767 Mon Sep 17 00:00:00 2001
From: Clifton Snyder <cliff.snyder@gmail.com>
Date: Sun, 17 Nov 2024 02:51:59 -0500
Subject: [PATCH] extracting static content into separate files (#22)

---
 Cargo.lock      | 158 +++++++++++++------------------
 Cargo.toml      |   7 +-
 src/favicon.svg |   1 +
 src/index.html  | 242 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.rs     | 220 +++----------------------------------------
 5 files changed, 321 insertions(+), 307 deletions(-)
 create mode 100644 src/favicon.svg
 create mode 100644 src/index.html

diff --git a/Cargo.lock b/Cargo.lock
index bab692d..9e99b2e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -41,20 +41,11 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "ansi_term"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d52a9bb7ec0cf484c551830a7ce27bd20d67eac647e1befb56b0be4ee39a55d2"
-dependencies = [
- "winapi",
-]
-
 [[package]]
 name = "anstream"
-version = "0.6.17"
+version = "0.6.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23a1e53f0f5d86382dafe1cf314783b2044280f406e7e1506368220ad11b1338"
+checksum = "8acc5369981196006228e28809f761875c0327210a891e941f4c683b3a99529b"
 dependencies = [
  "anstyle",
  "anstyle-parse",
@@ -67,9 +58,9 @@ dependencies = [
 
 [[package]]
 name = "anstyle"
-version = "1.0.9"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8365de52b16c035ff4fcafe0092ba9390540e3e352870ac09933bebcaa2c8c56"
+checksum = "55cc3b69f167a1ef2e161439aa98aed94e6028e5f9a59be9a6ffb47aef1651f9"
 
 [[package]]
 name = "anstyle-parse"
@@ -253,9 +244,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.1.31"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2e7962b54006dcfcc61cb72735f4d89bb97061dd6a7ed882ec6b8ee53714c6f"
+checksum = "fd9de9f2205d5ef3fd67e685b0df337994ddd4495e2a28d185500d0e1edfea47"
 dependencies = [
  "shlex",
 ]
@@ -282,9 +273,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.20"
+version = "4.5.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b97f376d85a664d5837dbae44bf546e6477a679ff6610010f17276f686d867e8"
+checksum = "fb3b4b9e5a7c7514dfa52869339ee98b3156b0bfb4e8a77c4ff4babb64b1604f"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -292,9 +283,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.20"
+version = "4.5.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19bc80abd44e4bed93ca373a0704ccbd1b710dc5749406201bb018272808dc54"
+checksum = "b17a95aa67cc7b5ebd32aa5370189aa0d79069ef1c64ce893bd30fb24bff20ec"
 dependencies = [
  "anstream",
  "anstyle",
@@ -317,9 +308,9 @@ dependencies = [
 
 [[package]]
 name = "clap_lex"
-version = "0.7.2"
+version = "0.7.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1462739cb27611015575c0c11df5df7601141071f07518d56fcc1be504cbec97"
+checksum = "afb84c814227b90d6895e01398aee0d8033c00e7466aca416fb6a8e0eb19d8a7"
 
 [[package]]
 name = "colorchoice"
@@ -487,9 +478,9 @@ dependencies = [
 
 [[package]]
 name = "flate2"
-version = "1.0.34"
+version = "1.0.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1b589b4dc103969ad3cf85c950899926ec64300a1a46d76c03a6072957036f0"
+checksum = "c936bfdafb507ebbf50b8074c54fa31c5be9a1e7e5f467dd659697041407d07c"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
@@ -557,9 +548,9 @@ checksum = "07e28edb80900c19c28f1072f2e8aeca7fa06b23cd4169cefe1af5aa3260783f"
 
 [[package]]
 name = "hashbrown"
-version = "0.15.0"
+version = "0.15.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e087f84d4f86bf4b218b927129862374b72199ae7d8657835f1e89000eea4fb"
+checksum = "3a9bfc1af68b1726ea47d3d5109de126281def866b33970e10fbab11b5dafab3"
 
 [[package]]
 name = "heck"
@@ -646,9 +637,9 @@ dependencies = [
 
 [[package]]
 name = "hyper-util"
-version = "0.1.9"
+version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41296eb09f183ac68eec06e03cdbea2e759633d4067b2f6552fc2e009bcad08b"
+checksum = "df2dcfbe0677734ab2f3ffa7fa7bfd4706bfdc1ef393f2ee30184aed67e631b4"
 dependencies = [
  "bytes",
  "futures-util",
@@ -728,9 +719,9 @@ checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
 
 [[package]]
 name = "libc"
-version = "0.2.161"
+version = "0.2.162"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e9489c2807c139ffd9c1794f4af0ebe86a828db53ecdc7fea2111d0fed085d1"
+checksum = "18d287de67fe55fd7e1581fe933d965a5a9477b38e949cfa9f8574ef01506398"
 
 [[package]]
 name = "linked-hash-map"
@@ -760,15 +751,6 @@ version = "0.4.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a7a70ba024b9dc04c27ea2f0c0548feb474ec5c54bba33a7f72f873a39d07b24"
 
-[[package]]
-name = "matchers"
-version = "0.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f099785f7595cc4b4553a174ce30dd7589ef93391ff414dbb67f62392b9e0ce1"
-dependencies = [
- "regex-automata 0.1.10",
-]
-
 [[package]]
 name = "matchit"
 version = "0.7.3"
@@ -835,6 +817,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "nu-ansi-term"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77a8165726e8236064dbb45459242600304b42a5ea24ee2948e18e023bf7ba84"
+dependencies = [
+ "overload",
+ "winapi",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.1.0"
@@ -887,6 +879,12 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "overload"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
+
 [[package]]
 name = "parking_lot"
 version = "0.12.3"
@@ -997,36 +995,21 @@ checksum = "b544ef1b4eac5dc2db33ea63606ae9ffcfac26c1416a2806ae0bf5f56b201191"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-automata 0.4.8",
- "regex-syntax 0.8.5",
+ "regex-automata",
+ "regex-syntax",
 ]
 
 [[package]]
 name = "regex-automata"
-version = "0.1.10"
+version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c230d73fb8d8c1b9c0b3135c5142a8acee3a0558fb8db5cf1cb65f8d7862132"
-dependencies = [
- "regex-syntax 0.6.29",
-]
-
-[[package]]
-name = "regex-automata"
-version = "0.4.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "368758f23274712b504848e9d5a6f010445cc8b87a7cdb4d7cbee666c1288da3"
+checksum = "809e8dc61f6de73b46c85f4c96486310fe304c434cfa43669d7b40f711150908"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-syntax 0.8.5",
+ "regex-syntax",
 ]
 
-[[package]]
-name = "regex-syntax"
-version = "0.6.29"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
-
 [[package]]
 name = "regex-syntax"
 version = "0.8.5"
@@ -1041,9 +1024,9 @@ checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
 
 [[package]]
 name = "rustix"
-version = "0.38.37"
+version = "0.38.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8acb788b847c24f28525660c4d7758620a7210875711f79e7f663cc152726811"
+checksum = "99e4ea3e1cdc4b559b8e5650f9c8e5998e3e5c1343b4eaf034565f32318d63c0"
 dependencies = [
  "bitflags 2.6.0",
  "errno",
@@ -1081,18 +1064,18 @@ checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
 [[package]]
 name = "serde"
-version = "1.0.213"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ea7893ff5e2466df8d720bb615088341b295f849602c6956047f8f80f0e9bc1"
+checksum = "6513c1ad0b11a9376da888e3e0baa0077f1aed55c17f50e7b2397136129fb88f"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.213"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e85ad2009c50b58e87caa8cd6dac16bdf511bbfb7af6c33df902396aa480fa5"
+checksum = "ad1e866f866923f252f05c889987993144fb74e722403468a4ebd70c3cd756c0"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1203,9 +1186,9 @@ checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 
 [[package]]
 name = "syn"
-version = "2.0.85"
+version = "2.0.87"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5023162dfcd14ef8f32034d8bcd4cc5ddc61ef7a247c024a33e24e1f24d21b56"
+checksum = "25aa4ce346d03a6dcd68dd8b4010bcb74e54e62c90c573f394c46eae99aba32d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1238,7 +1221,7 @@ dependencies = [
  "once_cell",
  "onig",
  "plist",
- "regex-syntax 0.8.5",
+ "regex-syntax",
  "serde",
  "serde_derive",
  "serde_json",
@@ -1262,6 +1245,7 @@ name = "textpod"
 version = "0.1.2"
 dependencies = [
  "axum",
+ "base64",
  "chrono",
  "clap",
  "comrak",
@@ -1274,18 +1258,18 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "1.0.65"
+version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d11abd9594d9b38965ef50805c5e469ca9cc6f197f883f717e0269a3057b3d5"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.65"
+version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae71770322cbd277e69d762a16c444af02aa0575ac0d174f0b9562d3b37f8602"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1350,9 +1334,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.41.0"
+version = "1.41.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "145f3413504347a2be84393cc8a7d2fb4d863b375909ea59f2158261aa258bbb"
+checksum = "22cfb5bee7a6a52939ca9224d6ac897bb669134078daa8735560897f69de4d33"
 dependencies = [
  "backtrace",
  "bytes",
@@ -1478,45 +1462,27 @@ dependencies = [
 
 [[package]]
 name = "tracing-log"
-version = "0.1.4"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f751112709b4e791d8ce53e32c4ed2d353565a795ce84da2285393f41557bdf2"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
 dependencies = [
  "log",
  "once_cell",
  "tracing-core",
 ]
 
-[[package]]
-name = "tracing-serde"
-version = "0.1.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc6b213177105856957181934e4920de57730fc69bf42c37ee5bb664d406d9e1"
-dependencies = [
- "serde",
- "tracing-core",
-]
-
 [[package]]
 name = "tracing-subscriber"
-version = "0.2.25"
+version = "0.3.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e0d2eaa99c3c2e41547cfa109e910a68ea03823cccad4a0525dcbc9b01e8c71"
+checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b"
 dependencies = [
- "ansi_term",
- "chrono",
- "lazy_static",
- "matchers",
- "regex",
- "serde",
- "serde_json",
+ "nu-ansi-term",
  "sharded-slab",
  "smallvec",
  "thread_local",
- "tracing",
  "tracing-core",
  "tracing-log",
- "tracing-serde",
 ]
 
 [[package]]
diff --git a/Cargo.toml b/Cargo.toml
index 3a4b8d7..531e67b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -10,11 +10,12 @@ readme = "README.md"
 
 [dependencies]
 axum = { version = "0.7.7", features = ["multipart"] }
-tokio = { version = "1.41.0", features = ["full"] }
+tokio = { version = "1.41.1", features = ["full"] }
 tower-http = { version = "0.6.1", features = ["fs"] }
 comrak = "0.29"
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0.215", features = ["derive"] }
 chrono = "0.4.38"
 clap = { version = "4.4", features = ["derive"] }
 tracing = "0.1"
-tracing-subscriber = "0.2"
+tracing-subscriber = "0.3.18"
+base64 = "0.22.1"
diff --git a/src/favicon.svg b/src/favicon.svg
new file mode 100644
index 0000000..82e86d4
--- /dev/null
+++ b/src/favicon.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d='M11.669 2.282c.218-.043.443-.043.662 0 .251.048.479.167.691.277l.053.028 8.27 4.28a.75.75 0 0 1 .405.666v7.897c0 .283.002.583-.093.862a1.758 1.758 0 0 1-.395.652c-.205.214-.473.351-.723.48l-.063.033-8.131 4.208a.75.75 0 0 1-.69 0l-8.131-4.208-.063-.033c-.25-.129-.518-.266-.723-.48a1.759 1.759 0 0 1-.395-.652c-.095-.28-.094-.58-.093-.863V7.533a.75.75 0 0 1 .405-.666l8.269-4.28.053-.027c.213-.111.44-.23.692-.278m.226 1.496a6.579 6.579 0 0 0-.282.141L4.668 7.514 12 11.102l7.332-3.588-6.946-3.595a6.505 6.505 0 0 0-.282-.141.48.48 0 0 0-.058-.024m-.796 16.013v-7.362l-7.5-3.67v6.624c0 .187 0 .294.005.375a.496.496 0 0 0 .009.078.258.258 0 0 0 .057.095c.005.004.021.017.064.042.068.042.163.09.328.176zm.645-15.99a.483.483 0 0 1 .06-.023z'/></svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..548675a
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Textpod</title>
+    <meta name="color-scheme" content="light dark" />
+    <link rel="shortcut icon" href="{{FAVICON}}" />
+    <style>
+        @media (prefers-color-scheme: light) {
+            time {
+                color: #666;
+            }
+
+            .note code {
+                background-color: #dedcd1;
+            }
+
+            .note pre {
+                background-color: #dedcd1;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            time {
+                color: #BBB;
+            }
+
+            .note code {
+                background-color: #3a3a3a;
+            }
+
+            .note pre {
+                background-color: #3a3a3a;
+            }
+        }
+
+        html {
+            height: 100%;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        #editor {
+            width: 100%;
+            height: 200px;
+            margin-bottom: 2em;
+            font-family: monospace;
+            padding: 1em;
+            resize: vertical;
+            box-sizing: border-box
+        }
+
+        .note> :first-child {
+            margin-top: 0;
+        }
+
+        .note> :nth-last-child(2) {
+            margin-bottom: 0.5em;
+        }
+
+        .note {
+            margin-bottom: 1.75em;
+            padding-top: 0.25em;
+        }
+
+        .note code {
+            padding: 0.25em;
+        }
+
+        .note pre {
+            padding: 0.5em;
+        }
+
+        .note pre code {
+            padding: 0;
+            background-color: transparent;
+        }
+
+        .note img,
+        .note iframe,
+        .note video,
+        .note audio,
+        .note embed,
+        .note svg {
+            max-width: 100%;
+        }
+
+        time {
+            font-size: 0.9em;
+            margin-bottom: 0.25em;
+            font-family: monospace;
+        }
+    </style>
+</head>
+
+<body>
+
+    <textarea id="editor"
+        placeholder="Ctrl+Enter to save.&#10;Type / to search.&#10;Drag & drop files to attach.&#10;Start links with + to save local copies."></textarea>
+    <button id="submitButton">Submit</button>
+    <div id="notes">{{NOTES}}</div>
+
+    <script>
+        const editor = document.getElementById('editor');
+        const notesDiv = document.getElementById('notes');
+        const submitButton = document.getElementById('submitButton');
+        let searchTimeout = null;
+        let originalNotes = notesDiv.innerHTML;
+
+        // Check for search parameter on page load
+        window.addEventListener('load', () => {
+            const params = new URLSearchParams(window.location.search);
+            const searchQuery = params.get('q');
+            if (searchQuery) {
+                editor.value = '/' + decodeURIComponent(searchQuery);
+                performSearch(searchQuery);
+            }
+        });
+
+        async function performSearch(query) {
+            const response = await fetch(`/search/${encodeURIComponent(query)}`);
+            if (response.ok) {
+                const notes = await response.json();
+                displayNotes(notes);
+            }
+        }
+
+        async function saveNotes() {
+            const response = await fetch('/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(editor.value)
+            });
+
+            if (response.ok) {
+                editor.value = '';
+                // Clear search parameter from URL when saving
+                window.history.replaceState({}, '', window.location.pathname);
+
+                const notesResponse = await fetch('/');
+                if (notesResponse.ok) {
+                    const text = await notesResponse.text();
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = text;
+                    const newNotes = tempDiv.querySelector('#notes').innerHTML;
+                    notesDiv.innerHTML = newNotes;
+                    originalNotes = newNotes;
+                }
+            }
+        }
+
+        editor.addEventListener('input', async (e) => {
+            const text = editor.value;
+            if (text.startsWith('/')) {
+                if (searchTimeout) {
+                    clearTimeout(searchTimeout);
+                }
+                searchTimeout = setTimeout(async () => {
+                    const query = text.slice(1);
+                    // Update URL with search parameter
+                    const newUrl = query
+                        ? `${window.location.pathname}?q=${encodeURIComponent(query)}`
+                        : window.location.pathname;
+                    window.history.replaceState({}, '', newUrl);
+
+                    if (query) {
+                        await performSearch(query);
+                    }
+                }, 100);
+            } else if (text === '') {
+                // Clear search parameter from URL
+                window.history.replaceState({}, '', window.location.pathname);
+                notesDiv.innerHTML = originalNotes;
+            }
+        });
+
+        editor.addEventListener('keydown', async (e) => {
+            if (e.ctrlKey && e.key === 'Enter' && !editor.value.startsWith('/')) {
+                saveNotes();
+            }
+        });
+
+        submitButton.addEventListener('click', async(e) => {
+            saveNotes();
+        })
+
+        editor.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+
+        editor.addEventListener('drop', async (e) => {
+            e.preventDefault();
+
+            const files = e.dataTransfer.files;
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('file', file);
+
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (response.ok) {
+                    const path = await response.json();
+                    const filename = path.split('/').pop();
+
+                    const position = editor.selectionStart;
+                    const before = editor.value.substring(0, position);
+                    const after = editor.value.substring(position);
+
+                    // Link path with spaces needs to be wrapped in < >, Commonmark spec apparently handles this
+                    const needsBrackets = path.includes(' ') || filename.includes(' ');
+                    const formattedPath = needsBrackets ? `<${path}>` : path;
+
+                    if (file.type.startsWith('image/')) {
+                        editor.value = `${before}![${filename}](${formattedPath})${after}`;
+                    } else {
+                        editor.value = `${before}[${filename}](${formattedPath})${after}`;
+                    }
+                }
+            }
+        });
+
+        function displayNotes(notes) {
+            notesDiv.innerHTML = notes
+                .map(note => `
+                    <div class="note">
+                        ${note.html}
+                        <time datetime="${note.timestamp}">${note.timestamp}</time>
+                    </div>`)
+                .join('');
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
index af68fcd..4685e27 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -6,6 +6,7 @@ use axum::{
     routing::{get, post},
     Json, Router,
 };
+use base64::{display::Base64Display, engine::general_purpose::STANDARD};
 use chrono::Local;
 use clap::Parser;
 use comrak::{markdown_to_html, Options};
@@ -23,213 +24,8 @@ use tower_http::services::ServeDir;
 use tracing::{error, info};
 use tracing_subscriber;
 
-const INDEX_HTML: &str = r#"<!DOCTYPE html>
-<html>
-<head>
-    <title>Textpod</title>
-    <meta name="color-scheme" content="light dark"/>
-    <link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9J00xMS42NjkgMi4yODJjLjIxOC0uMDQzLjQ0My0uMDQzLjY2MiAwIC4yNTEuMDQ4LjQ3OS4xNjcuNjkxLjI3N2wuMDUzLjAyOCA4LjI3IDQuMjhhLjc1Ljc1IDAgMCAxIC40MDUuNjY2djcuODk3YzAgLjI4My4wMDIuNTgzLS4wOTMuODYyYTEuNzU4IDEuNzU4IDAgMCAxLS4zOTUuNjUyYy0uMjA1LjIxNC0uNDczLjM1MS0uNzIzLjQ4bC0uMDYzLjAzMy04LjEzMSA0LjIwOGEuNzUuNzUgMCAwIDEtLjY5IDBsLTguMTMxLTQuMjA4LS4wNjMtLjAzM2MtLjI1LS4xMjktLjUxOC0uMjY2LS43MjMtLjQ4YTEuNzU5IDEuNzU5IDAgMCAxLS4zOTUtLjY1MmMtLjA5NS0uMjgtLjA5NC0uNTgtLjA5My0uODYzVjcuNTMzYS43NS43NSAwIDAgMSAuNDA1LS42NjZsOC4yNjktNC4yOC4wNTMtLjAyN2MuMjEzLS4xMTEuNDQtLjIzLjY5Mi0uMjc4bS4yMjYgMS40OTZhNi41NzkgNi41NzkgMCAwIDAtLjI4Mi4xNDFMNC42NjggNy41MTQgMTIgMTEuMTAybDcuMzMyLTMuNTg4LTYuOTQ2LTMuNTk1YTYuNTA1IDYuNTA1IDAgMCAwLS4yODItLjE0MS40OC40OCAwIDAgMC0uMDU4LS4wMjRtLS43OTYgMTYuMDEzdi03LjM2MmwtNy41LTMuNjd2Ni42MjRjMCAuMTg3IDAgLjI5NC4wMDUuMzc1YS40OTYuNDk2IDAgMCAwIC4wMDkuMDc4LjI1OC4yNTggMCAwIDAgLjA1Ny4wOTVjLjAwNS4wMDQuMDIxLjAxNy4wNjQuMDQyLjA2OC4wNDIuMTYzLjA5LjMyOC4xNzZ6bS42NDUtMTUuOTlhLjQ4My40ODMgMCAwIDEgLjA2LS4wMjN6Jy8+PC9zdmc+" />
-    <style>
-        @media (prefers-color-scheme: light) {
-            time {
-                color: #666;
-            }
-            .note code {
-                background-color: #dedcd1;
-            }
-            .note pre {
-                background-color: #dedcd1;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            time {
-                color: #BBB;
-            }
-            .note code {
-                background-color: #3a3a3a;
-            }
-            .note pre {
-                background-color: #3a3a3a;
-            }
-        }
-        html {
-            height: 100%;
-        }
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        #editor {
-            width: 100%;
-            height: 200px;
-            margin-bottom: 2em;
-            font-family: monospace;
-            padding: 1em;
-            resize: vertical;
-            box-sizing: border-box
-        }
-        .note > :first-child {
-            margin-top: 0;
-        }
-        .note > :nth-last-child(2) {
-            margin-bottom: 0.5em;
-        }
-        .note {
-            margin-bottom: 1.75em;
-            padding-top: 0.25em;
-        }
-        .note code {
-            padding: 0.25em;
-        }
-        .note pre {
-            padding: 0.5em;
-        }
-        .note pre code {
-            padding: 0;
-            background-color: transparent;
-        }
-        .note img, .note iframe, .note video, .note audio, .note embed, .note svg {
-            max-width: 100%;
-        }
-        time {
-            font-size: 0.9em;
-            margin-bottom: 0.25em;
-            font-family: monospace;
-        }
-    </style>
-</head>
-<body>
-
-    <textarea id="editor" placeholder="Ctrl+Enter to save.&#10;Type / to search.&#10;Drag & drop files to attach.&#10;Start links with + to save local copies."></textarea>
-    <div id="notes">{{NOTES}}</div>
-
-    <script>
-        const editor = document.getElementById('editor');
-        const notesDiv = document.getElementById('notes');
-        let searchTimeout = null;
-        let originalNotes = notesDiv.innerHTML;
-
-        // Check for search parameter on page load
-        window.addEventListener('load', () => {
-            const params = new URLSearchParams(window.location.search);
-            const searchQuery = params.get('q');
-            if (searchQuery) {
-                editor.value = '/' + decodeURIComponent(searchQuery);
-                performSearch(searchQuery);
-            }
-        });
-
-        async function performSearch(query) {
-            const response = await fetch(`/search/${encodeURIComponent(query)}`);
-            if (response.ok) {
-                const notes = await response.json();
-                displayNotes(notes);
-            }
-        }
-
-        editor.addEventListener('input', async (e) => {
-            const text = editor.value;
-            if (text.startsWith('/')) {
-                if (searchTimeout) {
-                    clearTimeout(searchTimeout);
-                }
-                searchTimeout = setTimeout(async () => {
-                    const query = text.slice(1);
-                    // Update URL with search parameter
-                    const newUrl = query
-                        ? `${window.location.pathname}?q=${encodeURIComponent(query)}`
-                        : window.location.pathname;
-                    window.history.replaceState({}, '', newUrl);
-
-                    if (query) {
-                        await performSearch(query);
-                    }
-                }, 100);
-            } else if (text === '') {
-                // Clear search parameter from URL
-                window.history.replaceState({}, '', window.location.pathname);
-                notesDiv.innerHTML = originalNotes;
-            }
-        });
-
-        editor.addEventListener('keydown', async (e) => {
-            if (e.ctrlKey && e.key === 'Enter' && !editor.value.startsWith('/')) {
-                const response = await fetch('/save', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify(editor.value)
-                });
-
-                if (response.ok) {
-                    editor.value = '';
-                    // Clear search parameter from URL when saving
-                    window.history.replaceState({}, '', window.location.pathname);
-
-                    const notesResponse = await fetch('/');
-                    if (notesResponse.ok) {
-                        const text = await notesResponse.text();
-                        const tempDiv = document.createElement('div');
-                        tempDiv.innerHTML = text;
-                        const newNotes = tempDiv.querySelector('#notes').innerHTML;
-                        notesDiv.innerHTML = newNotes;
-                        originalNotes = newNotes;
-                    }
-                }
-            }
-        });
-
-        editor.addEventListener('dragover', (e) => {
-            e.preventDefault();
-        });
-
-        editor.addEventListener('drop', async (e) => {
-            e.preventDefault();
-
-            const files = e.dataTransfer.files;
-            for (const file of files) {
-                const formData = new FormData();
-                formData.append('file', file);
-
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                if (response.ok) {
-                    const path = await response.json();
-                    const filename = path.split('/').pop();
-
-                    const position = editor.selectionStart;
-                    const before = editor.value.substring(0, position);
-                    const after = editor.value.substring(position);
-
-                    // Link path with spaces needs to be wrapped in < >, Commonmark spec apparently handles this
-                    const needsBrackets = path.includes(' ') || filename.includes(' ');
-                    const formattedPath = needsBrackets ? `<${path}>` : path;
-
-                    if (file.type.startsWith('image/')) {
-                        editor.value = `${before}![${filename}](${formattedPath})${after}`;
-                    } else {
-                        editor.value = `${before}[${filename}](${formattedPath})${after}`;
-                    }
-                }
-            }
-        });
-
-        function displayNotes(notes) {
-            notesDiv.innerHTML = notes
-                .map(note => `
-                    <div class="note">
-                        ${note.html}
-                        <time datetime="${note.timestamp}">${note.timestamp}</time>
-                    </div>`)
-                .join('');
-        }
-    </script>
-</body>
-</html>"#;
+const INDEX_HTML: &str = include_str!("index.html");
+const FAVICON_SVG: &[u8] = include_bytes!("favicon.svg");
 
 #[derive(Parser)]
 #[command(author, version, about, long_about = None)]
@@ -251,6 +47,7 @@ struct Note {
 
 #[derive(Clone)]
 struct AppState {
+    html: String,
     notes: Arc<Mutex<Vec<Note>>>,
 }
 
@@ -263,7 +60,14 @@ async fn main() {
     let args = Args::parse();
     fs::create_dir_all("attachments").unwrap();
 
+    let favicon = Base64Display::new(FAVICON_SVG, &STANDARD);
+    let html = INDEX_HTML.replace(
+        "{{FAVICON}}",
+        format!("data:image/svg+xml;base64,{favicon}").as_str(),
+    );
+
     let state = AppState {
+        html,
         notes: Arc::new(Mutex::new(load_notes())),
     };
 
@@ -339,7 +143,7 @@ async fn index(State(state): State<AppState>) -> Html<String> {
         .collect::<Vec<_>>()
         .join("\n");
 
-    let html = INDEX_HTML.replace("{{NOTES}}", &notes_html);
+    let html = state.html.replace("{{NOTES}}", &notes_html);
     Html(html)
 }