diff --git a/README.md b/README.md index 382941e..b1ca291 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,56 @@ -# Svelte + Vite +# Fediverse Post Display -This template should help get you started developing with Svelte in Vite. +This displays posts from a JSON file exported from a fediverse account. -## Recommended IDE Setup +Currently this supports JSON from a Calckey installation -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). +# Overview -## Need an official Svelte framework? +This is a simple Svelte app that takes an exported JSON file and displays the contents of the posts. There is styling for a dark mode. -Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. +It uses the Vite template. More info here: https://svelte.dev/docs/introduction -## Technical considerations +The output is a single HTML file with all the components making it easy to post or simply view later. -**Why use this over SvelteKit?** +Please update the contents of Header.svelte and Footer.svelte to make them your own. -- It brings its own routing solution which might not be preferable for some users. -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. +# Calkey -This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. +1. Export your posts via the Import/Export Data under Settings +2. Download the JSON file from your Drive +3. Copy the file to the SRC folder, rename it `notes.json` -Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. +Note: the Calkey export does not contain links to boosts / reposts, nor the contents of quote posts -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** +# Build -Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. +To run the files and test your setup and changes -**Why include `.vscode/extensions.json`?** - -Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. - -**Why enable `checkJs` in the JS template?** - -It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration. - -**Why is HMR not preserving my local component state?** - -HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state). - -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. - -```js -// store.js -// An extremely simple external store -import { writable } from 'svelte/store' -export default writable(0) ``` +npm run dev +``` + +To build the final + +``` +npm run build +``` + +this will build a single, self contained HTML file with all the inforamtion. + +# Acknowledgements + +Built with Svelte + +http://svelte.dev + +This uses Vite Singlefile Plugin (MIT License) + +https://github.com/richardtallent/vite-plugin-singlefile + +# License + +The code in this repository is GPL 3.0 + +The contents of notes.json is CC-BY-NC, Jacob Haddon (jacobhaddon.com) + diff --git a/index.html b/index.html index 1f63e0c..24d2832 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - Post Archive for @jake@jacobhaddon.com diff --git a/package-lock.json b/package-lock.json index d7bd5c5..2856741 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.1", "svelte": "^4.2.8", - "vite": "^5.0.8" + "vite": "^5.0.8", + "vite-plugin-singlefile": "^0.13.5" } }, "node_modules/@ampproject/remapping": { @@ -670,6 +671,18 @@ "dequal": "^2.0.3" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/code-red": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", @@ -777,6 +790,18 @@ "@types/estree": "^1.0.0" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -791,6 +816,15 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-reference": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", @@ -833,6 +867,19 @@ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "dev": true }, + "node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -874,6 +921,18 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.32", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", @@ -976,6 +1035,18 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/vite": { "version": "5.0.10", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz", @@ -1031,6 +1102,22 @@ } } }, + "node_modules/vite-plugin-singlefile": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-0.13.5.tgz", + "integrity": "sha512-y/aRGh8qHmw2f1IhaI/C6PJAaov47ESYDvUv1am1YHMhpY+19B5k5Odp8P+tgs+zhfvak6QB1ykrALQErEAo7g==", + "dev": true, + "dependencies": { + "micromatch": "^4.0.5" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "rollup": ">=2.79.0", + "vite": ">=3.2.0" + } + }, "node_modules/vitefu": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz", diff --git a/package.json b/package.json index f730cd7..d320591 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.1", "svelte": "^4.2.8", - "vite": "^5.0.8" + "vite": "^5.0.8", + "vite-plugin-singlefile": "^0.13.5" } } diff --git a/src/App.svelte b/src/App.svelte index cb0359d..d830bd7 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,22 +1,34 @@
-Posts from @jake@social.jacobhaddon.com -{#each notes as note} -{#if note.text != null} - -{/if} -{/each} +
+ {#each notes as note} + {#if note.text != null} + + {/if} + {/each} + +
+ + diff --git a/src/app.css b/src/app.css index 735469a..d47d882 100644 --- a/src/app.css +++ b/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; + + } + +} + + + diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte new file mode 100644 index 0000000..152b197 --- /dev/null +++ b/src/lib/Footer.svelte @@ -0,0 +1,17 @@ + + + + + diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte new file mode 100644 index 0000000..feff9a4 --- /dev/null +++ b/src/lib/Header.svelte @@ -0,0 +1,20 @@ + + +
+ +

A Fediverse Archive

+ +

This is an archive of posts from @jake@social.jacobhaddon.com

+ + +
+ + diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte index ee497c9..df53389 100644 --- a/src/lib/Post.svelte +++ b/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", '
'); +note.text = note.text.replace("\n", '

'); // color the hashtags //note.text = note.text.replace(/#(\w+)/g, '#$1') note.text = note.text.replace(/#(\w+)/g, '#$1') // color the usernames -note.text = note.text.replace(/(@(\w+)@(\w+)(\.\w+)?(\.\w+)?)/g, '$1') +note.text = note.text.replace(/(@([^@]+)@([^\.]+)(\.\w+)?(\.\w+)?)/g, '$1') // make the URLs real links note.text = note.text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '$1'); -
+
{@html note.text}
{note.createdAt}
@@ -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 { diff --git a/src/notes.json b/src/notes.json index b84f4dd..a41082e 100644 --- a/src/notes.json +++ b/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}] \ No newline at end of file +{"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}] \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index d701969..031e6f4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,8 @@ import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' +import { viteSingleFile } from "vite-plugin-singlefile" // https://vitejs.dev/config/ export default defineConfig({ - plugins: [svelte()], + plugins: [svelte(), viteSingleFile()], })