added Header and Footer files for easier configurations
added singlefile plugin for npm build updated styling for all components, added dark mode updated README
This commit is contained in:
jacob
parent
8beb03b32f
commit
761b521d7e
75
README.md
75
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)
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Post Archive for @jake@jacobhaddon.com</title>
|
||||
</head>
|
||||
|
||||
89
package-lock.json
generated
89
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
53
src/app.css
53
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
17
src/lib/Footer.svelte
Normal file
17
src/lib/Footer.svelte
Normal file
@ -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>
|
||||
20
src/lib/Header.svelte
Normal file
20
src/lib/Header.svelte
Normal file
@ -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>
|
||||
@ -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 {
|
||||
|
||||
@ -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}]
|
||||
@ -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()],
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user