added Header and Footer files for easier configurations

added singlefile plugin for npm build
updated styling for all components, added dark mode
updated README

src/App.svelte

@@ -1,22 +1,34 @@
 <script>
   import notes from './notes.json'
   import Post from './lib/Post.svelte'
+  import Header from './lib/Header.svelte'
+  import Footer from './lib/Footer.svelte'
 
-  console.log(notes[0]);
+  //console.log(notes[0]);
 </script>
 
 <main>
-Posts from @jake@social.jacobhaddon.com
 
-{#each notes as note}
-{#if note.text != null}
-<Post {note} />
-{/if}
-{/each}
+  <Header />
+  {#each notes as note}
+    {#if note.text != null}
+      <Post {note} />
+    {/if}
+  {/each}
+
+  <Footer />
+
 </main>
 
+
+
 <style>
+
 main {
 
+    width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+
 }
 </style>

src/app.css

@@ -1,14 +1,59 @@
+
+/* overall styles for the page */
+
 html {
 
-  font-family:Jost;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Noto Sans", "Droid Sans", sans-serif;
+
 }
 
 .hashtag {
-    color: red;
-    style: bold;
+  color: red;
 }
 
 .username {
-
   color: blue;
+  font-weight: bold;
 }
+a:visited, a:link {
+
+
+}
+
+a:hover {
+
+
+}
+
+@media (prefers-color-scheme: dark) {
+  /*Dark Mode styles */
+
+  html {
+    background-color: #111111;
+    color: #e1e1e1;
+
+  }
+
+  .hashtag {
+    color: #007acc;
+
+  }
+
+  .username {
+    color: #007acc;
+  }
+
+  a:visited, a:link {
+    color: #8e8e8e;
+
+  }
+
+  a:hover {
+    color: #007acc;
+
+  }
+
+}
+
+
+

src/lib/Footer.svelte

@@ -0,0 +1,17 @@
+<script>
+// page footer
+
+</script>
+
+<footer>
+
+    <p><a href="http://jacobhaddon.com">Home</a> - <a href="https://posts.jacobhaddon.com/users/jake">Fediverse</a> - <a href="http://code.jacobhaddon.com">Code</a> - <a href="http://svelte.dev" target="_blank">Svelte</a></p>
+
+    <p>This was made from the JSON export output from Calckey.</p>
+
+    <p>Code can be found here: <a href="https://code.jacobhaddon.com/jake/fedidisplay">https://code.jacobhaddon.com/jake/fedidisplay</a></p>
+
+</footer>
+
+<style>
+</style>

src/lib/Header.svelte

@@ -0,0 +1,20 @@
+<script>
+
+// the introduction to the page
+
+</script>
+
+<header>
+
+    <h1>A Fediverse Archive</h1>
+
+    <p>This is an archive of posts from @jake@social.jacobhaddon.com</p>
+
+
+</header>
+
+<style>
+
+
+
+</style>

src/lib/Post.svelte

@@ -10,21 +10,21 @@ export let note;
 // style some of the parts. Styles for these live in app.css
 
 // make line brakes into html br tags
-note.text = note.text.replace("\n", '<br>');
+note.text = note.text.replace("\n", '<br><br>');
 
 // color the hashtags
 //note.text = note.text.replace(/#(\w+)/g, '<a href="tag/$1">#$1</a>')
 note.text = note.text.replace(/#(\w+)/g, '<span class=hashtag>#$1</span>')
 
 // color the usernames
-note.text = note.text.replace(/(@(\w+)@(\w+)(\.\w+)?(\.\w+)?)/g, '<span class=username>$1</span>')
+note.text = note.text.replace(/(@([^@]+)@([^\.]+)(\.\w+)?(\.\w+)?)/g, '<span class=username>$1</span>')
 
 // make the URLs real links
 note.text = note.text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '<a href="$1" target="_blank">$1</a>');
 
 </script>
 
-<div class=post id={note.id}>
+<div class="post" id={note.id}>
     <div class=text>{@html note.text}</div>
     <div class=createdAt>{note.createdAt}</div>
 </div>
@@ -34,10 +34,8 @@ note.text = note.text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-
 .post {
     margin: 24px;
     padding: 12px;
-    width: 450px;
     border: 2px solid #1C6EA4;
-      margin-left: auto;
-  margin-right: auto;
+
 }
 
 .createdAt {

src/notes.json

@@ -596,4 +596,5 @@
 {"id":"9nd30fm2b1","text":"@tournesol@peculiar.florist assuming I'm doing it right (which may be a big assumption heh!) it returned (empty array) for the keys command.","createdAt":"2023-12-17T13:23:09.962Z","fileIds":[],"replyId":"9nd2jzfb9c","renoteId":null,"poll":null,"cw":"​","visibility":"home","visibleUserIds":[],"localOnly":false},
 {"id":"9nd3rr6uql","text":"@Theotime812@bliry.fr @tournesol@peculiar.florist sorry it is my first time with redis so I am taking a crash course via google. I did not, i just entered `redis-cli` and got a prompt. \n\nI am seeing keys when i type `KEYS *` but they seem to be all Bookwrym related...","createdAt":"2023-12-17T13:44:24.678Z","fileIds":[],"replyId":"9nd3jjy5pv","renoteId":null,"poll":null,"cw":null,"visibility":"home","visibleUserIds":[],"localOnly":false},
 {"id":"9nd4x00uto","text":"@Theotime812@bliry.fr @tournesol@peculiar.florist pass is commented out in both default and ci.yml, but i tried it anyways. auth gives an OK, but no change in the list. i couldn't tell from the command list if there were multiple databases and you switched between them, or if the password should just open things up...","createdAt":"2023-12-17T14:16:29.022Z","fileIds":[],"replyId":"9nd3wc43qs","renoteId":null,"poll":null,"cw":null,"visibility":"home","visibleUserIds":[],"localOnly":false},
-{"id":"9nd6e1g6y2","text":"@Theotime812@bliry.fr @tournesol@peculiar.florist I do not, it is running via YUNOHost","createdAt":"2023-12-17T14:57:43.638Z","fileIds":[],"replyId":"9nd5k0wvvy","renoteId":null,"poll":null,"cw":null,"visibility":"home","visibleUserIds":[],"localOnly":false}]
+{"id":"9nd6e1g6y2","text":"@Theotime812@bliry.fr @tournesol@peculiar.florist I do not, it is running via YUNOHost","createdAt":"2023-12-17T14:57:43.638Z","fileIds":[],"replyId":"9nd5k0wvvy","renoteId":null,"poll":null,"cw":null,"visibility":"home","visibleUserIds":[],"localOnly":false},
+{"id":"9nd6o8kk0l","text":"@Theotime812@bliry.fr @tournesol@peculiar.florist I GOT IT! \n\nthe setup uses multiple databases, so I had to use SELECT to go to a different database, from there the original instructions on finding and deleting keys worked \n\nthank you both so much! I'll be seeing you from my other account soon =D","createdAt":"2023-12-17T15:05:39.428Z","fileIds":[],"replyId":"9nd5k0wvvy","renoteId":null,"poll":null,"cw":null,"visibility":"home","visibleUserIds":[],"localOnly":false}]