Compare commits
2 Commits
e3c15be31c
...
6c9546b74a
| Author | SHA1 | Date | |
|---|---|---|---|
6c9546b74a
|
|||
|
268128c2f4
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"apexskier.typescript.config.formatDocumentOnSave": "true",
|
||||
"apexskier.typescript.config.isEnabledForJavascript": "Enable",
|
||||
"apexskier.typescript.config.organizeImportsOnSave": "true",
|
||||
"apexskier.typescript.config.userPreferences.quotePreference": "single",
|
||||
"apexskier.typescript.config.userPreferences.useLabelDetailsInCompletionEntries": true
|
||||
"apexskier.typescript.config.formatDocumentOnSave" : "true",
|
||||
"apexskier.typescript.config.isEnabledForJavascript" : "Enable",
|
||||
"apexskier.typescript.config.organizeImportsOnSave" : "true",
|
||||
"apexskier.typescript.config.userPreferences.quotePreference" : "single",
|
||||
"apexskier.typescript.config.userPreferences.useLabelDetailsInCompletionEntries" : true
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ I can see that there are plenty of posts using only descriptions and links witho
|
||||
be missed. This isn't a great solution.
|
||||
|
||||
Another idea was to store only URLs of posts and resolve the content and account information live.
|
||||
This would be better, but I'm *still* storing post information while also slowing the app down and introduce more code
|
||||
This would be better, but I'm _still_ storing post information while also slowing the app down and introduce more code
|
||||
complexity. I'm willing to make this change if people prefer this though.
|
||||
|
||||
Additionally, I ended up adding a few things which turned out to be not needed:
|
||||
@ -51,7 +51,6 @@ By default, NVM is used to install NodeJS, but you can install it any way you wa
|
||||
|
||||
This is based on [SvelteKit's instructions](https://kit.svelte.dev/docs/adapter-node#deploying) and [How To Deploy Node.js Applications Using Systemd and Nginx](https://www.digitalocean.com/community/tutorials/how-to-deploy-node-js-applications-using-systemd-and-nginx)
|
||||
|
||||
|
||||
#### On your server
|
||||
|
||||
Install Apache2 if not already installed.
|
||||
@ -78,7 +77,6 @@ Enter `$APP_DIR`.
|
||||
Place `package-lock.json` and `start.sh.EXAMPLE` in this directory.
|
||||
Run `npm ci --omit dev` to install the dependencies.
|
||||
|
||||
|
||||
Rename `start.sh.EXAMPLE` to `start.sh` and set the path to your NVM.
|
||||
|
||||
If you do not have NVM installed, simply remove the line and make sure your node executable can be found either by
|
||||
@ -93,12 +91,11 @@ If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.
|
||||
Copy `moshing-mammut.service.EXAMPLE` to `/etc/systemd/system/moshing-mammut.service`
|
||||
and set your `User`, `Group`, `ExecStart` and `WorkingDirectory` accordingly.
|
||||
|
||||
|
||||
#### On your development machine
|
||||
|
||||
Copy `.env.EXAMPLE` to `.env` and add your `YOUTUBE_API_KEY`.
|
||||
To obtain one follow [YouTube's guide](https://developers.google.com/youtube/registering_an_application) to create an
|
||||
*API key*. As soon as #13 is implemented, this will be optional!
|
||||
_API key_. As soon as #13 is implemented, this will be optional!
|
||||
|
||||
Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
{
|
||||
"masterPicture": "./icon.svg",
|
||||
"iconsPath": "/static",
|
||||
@ -61,4 +60,4 @@
|
||||
"htmlCodeFile": false,
|
||||
"usePathAsIs": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
94
src/app.html
94
src/app.html
@ -1,53 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
|
||||
<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#2e0b78" />
|
||||
<meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
|
||||
<meta name="application-name" content="Moshing Mammut" />
|
||||
<meta name="msapplication-TileColor" content="#2e0b78" />
|
||||
<meta name="theme-color" content="#2e0b78" />
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="theme-color" content="#2E0B78" media="(prefers-color-scheme: dark)" />
|
||||
<meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
|
||||
<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Atom Feed" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
body {
|
||||
--color-text: #2F0C7A;
|
||||
--color-bg: white;
|
||||
--color-border: #17063B;
|
||||
--color-link: #563ACC;
|
||||
--color-link-visited: #858AFA;
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
|
||||
<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#2e0b78" />
|
||||
<meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
|
||||
<meta name="application-name" content="Moshing Mammut" />
|
||||
<meta name="msapplication-TileColor" content="#2e0b78" />
|
||||
<meta name="theme-color" content="#2e0b78" />
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
|
||||
<meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
|
||||
<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Atom Feed" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
body {
|
||||
--color-text: #2f0c7a;
|
||||
--color-bg: white;
|
||||
--color-border: #17063b;
|
||||
--color-link: #563acc;
|
||||
--color-link-visited: #858afa;
|
||||
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--color-text: white;
|
||||
--color-bg: #17063B;
|
||||
--color-border: white;
|
||||
--color-link: #8A9BF0;
|
||||
--color-link-visited: #C384FB;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--color-text: white;
|
||||
--color-bg: #17063b;
|
||||
--color-border: white;
|
||||
--color-link: #8a9bf0;
|
||||
--color-link-visited: #c384fb;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -24,12 +24,9 @@ export const handle = (async ({ event, resolve }) => {
|
||||
}
|
||||
if (event.url.pathname === '/feed.xml') {
|
||||
const f = await fs.readFile('feed.xml', { encoding: 'utf8' });
|
||||
return new Response(
|
||||
f,
|
||||
{ headers: [['Content-Type', 'application/atom+xml']] }
|
||||
);
|
||||
return new Response(f, { headers: [['Content-Type', 'application/atom+xml']] });
|
||||
}
|
||||
|
||||
const response = await resolve(event);
|
||||
return response;
|
||||
}) satisfies Handle;
|
||||
}) satisfies Handle;
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
export let account: Account;
|
||||
</script>
|
||||
|
||||
<a href="{account.url}" target="_blank">{account.display_name} @{account.acct}</a>
|
||||
<a href={account.url} target="_blank">{account.display_name} @{account.acct}</a>
|
||||
|
||||
@ -3,18 +3,18 @@
|
||||
|
||||
export let account: Account;
|
||||
let avatarDescription: string;
|
||||
$: avatarDescription = `Avatar for ${account.acct}`
|
||||
$: avatarDescription = `Avatar for ${account.acct}`;
|
||||
</script>
|
||||
|
||||
<img src="{account.avatar}" alt={avatarDescription}/>
|
||||
<img src={account.avatar} alt={avatarDescription} />
|
||||
|
||||
<style>
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: 3px;;
|
||||
}
|
||||
</style>
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,24 +4,28 @@
|
||||
</script>
|
||||
|
||||
<div class="footer">
|
||||
<div>
|
||||
<span>Made with 🤘 by </span>
|
||||
<a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
<a href="https://phlaym.net/git/phlaym/moshing-mammut">
|
||||
<img alt="Git branch" src={git} class="icon" />
|
||||
Source Code
|
||||
</a>
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
<a href="/feed.xml">
|
||||
<img alt="RSS" src={rss} class="icon" />
|
||||
RSS Feed
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label"
|
||||
>Made<span class="secretIngredient"> with 🤘</span> by </span
|
||||
>
|
||||
<a href="https://metalhead.club/@aymm" rel="me"
|
||||
>@aymm<span class="mastodonInstance">@metalhead.club</span></a
|
||||
>
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
<a href="https://phlaym.net/git/phlaym/moshing-mammut">
|
||||
<img alt="Git branch" src={git} class="icon" />
|
||||
<span class="label">Source Code</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
<a href="/feed.xml">
|
||||
<img alt="RSS" src={rss} class="icon" />
|
||||
<span class="label">RSS<span class="feedSuffix"> Feed</span></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@ -53,4 +57,27 @@
|
||||
background-color: var(--color-grey-translucent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@media only screen and (max-device-width: 620px) {
|
||||
.mastodonInstance,
|
||||
.feedSuffix {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 430px) {
|
||||
.mastodonInstance,
|
||||
.feedSuffix,
|
||||
.secretIngredient {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 370px) {
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
|
||||
|
||||
export let moreAvailable: boolean = false;
|
||||
export let isLoading: boolean = false;
|
||||
export let moreAvailable = false;
|
||||
export let isLoading = false;
|
||||
let displayText = '';
|
||||
let title = '';
|
||||
let disabled: boolean;
|
||||
|
||||
$: if (isLoading) {
|
||||
displayText = 'Loading...';
|
||||
displayText = 'Loading...';
|
||||
} else if (!moreAvailable) {
|
||||
displayText = 'You reached the end';
|
||||
displayText = 'You reached the end';
|
||||
} else {
|
||||
displayText = 'Load More';
|
||||
};
|
||||
displayText = 'Load More';
|
||||
}
|
||||
$: disabled = !moreAvailable || isLoading;
|
||||
$: title = moreAvailable ? 'Load More' : 'There be dragons!';
|
||||
|
||||
@ -26,10 +26,10 @@
|
||||
</script>
|
||||
|
||||
<button on:click={loadOlderPosts} {disabled} {title}>
|
||||
<div class="loading" class:collapsed={!isLoading}>
|
||||
<LoadingSpinnerComponent size='0.5em' thickness='6px' />
|
||||
</div>
|
||||
<span>{displayText}</span>
|
||||
<div class="loading" class:collapsed={!isLoading}>
|
||||
<LoadingSpinnerComponent size="0.5em" thickness="6px" />
|
||||
</div>
|
||||
<span>{displayText}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
@ -78,4 +78,4 @@
|
||||
max-width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let size: string = '64px';
|
||||
export let thickness: string = '6px';
|
||||
export let size = '64px';
|
||||
export let thickness = '6px';
|
||||
</script>
|
||||
|
||||
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
|
||||
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
|
||||
|
||||
<style>
|
||||
.lds-dual-ring {
|
||||
display: inline-block;
|
||||
@ -11,7 +12,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
.lds-dual-ring:after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
@ -34,5 +35,4 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
import AvatarComponent from '$lib/components/AvatarComponent.svelte';
|
||||
import AccountComponent from '$lib/components/AccountComponent.svelte';
|
||||
import { secondsSince, relativeTime } from '$lib/relativeTime';
|
||||
import { onMount } from "svelte";
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let post: Post;
|
||||
let displayRelativeTime = false;
|
||||
const absoluteDate = new Date(post.created_at).toLocaleString();
|
||||
let dateCreated = absoluteDate;
|
||||
const timePassed = secondsSince(new Date(post.created_at));
|
||||
$: if(displayRelativeTime) {
|
||||
$: if (displayRelativeTime) {
|
||||
dateCreated = relativeTime($timePassed) ?? absoluteDate;
|
||||
}
|
||||
|
||||
@ -19,16 +19,15 @@
|
||||
// When JS is disabled the server-side rendered absolute date will be shown,
|
||||
// otherwise the relative date would be outdated very quickly
|
||||
displayRelativeTime = true;
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="avatar"><AvatarComponent account={post.account} /></div>
|
||||
<div class="post">
|
||||
<div class="meta">
|
||||
<AccountComponent account={post.account} />
|
||||
<small><a href={post.url} target="_blank" title="{absoluteDate}">{dateCreated}</a></small>
|
||||
<small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
|
||||
</div>
|
||||
<div class="content">{@html post.content}</div>
|
||||
</div>
|
||||
@ -54,4 +53,4 @@
|
||||
max-width: calc(600px - 1em - 50px);
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -5,4 +5,4 @@ export function errorToast(message: string): number {
|
||||
return toast.push(`<img src="${errorIcon}" />${message}`, {
|
||||
classes: ['error']
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,29 +1,28 @@
|
||||
export interface TimelineEvent {
|
||||
event: string,
|
||||
payload: string
|
||||
event: string;
|
||||
payload: string;
|
||||
}
|
||||
|
||||
export interface Post {
|
||||
id: string,
|
||||
created_at: string,
|
||||
tags: Tag[],
|
||||
url: string,
|
||||
content: string,
|
||||
account: Account
|
||||
|
||||
id: string;
|
||||
created_at: string;
|
||||
tags: Tag[];
|
||||
url: string;
|
||||
content: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
name: string,
|
||||
url: string
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface Account {
|
||||
id: string,
|
||||
acct: string,
|
||||
username: string,
|
||||
display_name: string,
|
||||
url: string,
|
||||
avatar: string,
|
||||
avatar_static: string
|
||||
}
|
||||
id: string;
|
||||
acct: string;
|
||||
username: string;
|
||||
display_name: string;
|
||||
url: string;
|
||||
avatar: string;
|
||||
avatar_static: string;
|
||||
}
|
||||
|
||||
@ -11,10 +11,7 @@ export const time = readable(new Date(), function start(set) {
|
||||
});
|
||||
|
||||
export function secondsSince(date: Date): Readable<number> {
|
||||
return derived(
|
||||
time,
|
||||
$time => Math.round(($time.getTime() - date.getTime()) / 1000)
|
||||
);
|
||||
return derived(time, ($time) => Math.round(($time.getTime() - date.getTime()) / 1000));
|
||||
}
|
||||
|
||||
export function relativeTime(seconds: number): string | null {
|
||||
@ -30,11 +27,11 @@ export function relativeTime(seconds: number): string | null {
|
||||
|
||||
const day = hour * 24;
|
||||
if (seconds < day) {
|
||||
return `${(Math.floor(seconds / hour))}h`;
|
||||
return `${Math.floor(seconds / hour)}h`;
|
||||
}
|
||||
const maxRelative = day * 31;
|
||||
if (seconds < maxRelative) {
|
||||
return `${Math.floor(seconds / day)}d`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ if (DEV && env.VERBOSE === 'true') {
|
||||
sqlite3.verbose();
|
||||
db.on('change', (t, d, table, rowid) => {
|
||||
console.debug('DB change event', t, d, table, rowid);
|
||||
})
|
||||
});
|
||||
|
||||
db.on('trace', (sql) => {
|
||||
console.debug('Running', sql);
|
||||
@ -21,9 +21,9 @@ if (DEV && env.VERBOSE === 'true') {
|
||||
}
|
||||
|
||||
interface Migration {
|
||||
id: number,
|
||||
name: string,
|
||||
statement: string
|
||||
id: number;
|
||||
name: string;
|
||||
statement: string;
|
||||
}
|
||||
|
||||
db.on('open', () => {
|
||||
@ -37,20 +37,24 @@ db.on('open', () => {
|
||||
}
|
||||
console.debug('Already applied migrations', rows);
|
||||
const appliedMigrations: Set<number> = new Set(rows.map((row: any) => row['id']));
|
||||
const toApply = getMigrations().filter(m => !appliedMigrations.has(m.id));
|
||||
for (let migration of toApply) {
|
||||
const toApply = getMigrations().filter((m) => !appliedMigrations.has(m.id));
|
||||
for (const migration of toApply) {
|
||||
db.exec(migration.statement, (err) => {
|
||||
if (err !== null) {
|
||||
console.error(`Failed to apply migration ${migration.name}`, err);
|
||||
return;
|
||||
}
|
||||
db.run('INSERT INTO migrations (id, name) VALUES(?, ?)', [migration.id, migration.name], (e: Error) => {
|
||||
if (e !== null) {
|
||||
console.error(`Failed to mark migration ${migration.name} as applied`, e);
|
||||
return;
|
||||
db.run(
|
||||
'INSERT INTO migrations (id, name) VALUES(?, ?)',
|
||||
[migration.id, migration.name],
|
||||
(e: Error) => {
|
||||
if (e !== null) {
|
||||
console.error(`Failed to mark migration ${migration.name} as applied`, e);
|
||||
return;
|
||||
}
|
||||
console.info(`Applied migration ${migration.name}`);
|
||||
}
|
||||
console.info(`Applied migration ${migration.name}`);
|
||||
});
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -60,10 +64,11 @@ db.on('error', (err) => {
|
||||
});
|
||||
|
||||
function getMigrations(): Migration[] {
|
||||
return [{
|
||||
id: 1,
|
||||
name: 'initial',
|
||||
statement: `
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
name: 'initial',
|
||||
statement: `
|
||||
CREATE TABLE accounts (
|
||||
id TEXT NOT NULL PRIMARY KEY,
|
||||
acct TEXT,
|
||||
@ -89,14 +94,16 @@ function getMigrations(): Migration[] {
|
||||
FOREIGN KEY (post_id) REFERENCES posts(id),
|
||||
FOREIGN KEY (tag_url) REFERENCES tags(url)
|
||||
)`
|
||||
}];
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
export async function savePost(post: Post): Promise<undefined> {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.debug(`Saving post ${post.url}`);
|
||||
const account = post.account;
|
||||
db.run(`
|
||||
db.run(
|
||||
`
|
||||
INSERT INTO accounts (id, acct, username, display_name, url, avatar, avatar_static)
|
||||
VALUES(?, ?, ?, ?, ?, ?, ?)
|
||||
ON CONFLICT(id)
|
||||
@ -122,20 +129,15 @@ export async function savePost(post: Post): Promise<undefined> {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
db.run(`
|
||||
db.run(
|
||||
`
|
||||
INSERT INTO posts (id, content, created_at, url, account_id)
|
||||
VALUES (?, ?, ?, ?, ?) ON CONFLICT(id) DO UPDATE SET
|
||||
content=excluded.content,
|
||||
created_at=excluded.created_at,
|
||||
url=excluded.url,
|
||||
account_id=excluded.account_id;`,
|
||||
[
|
||||
post.id,
|
||||
post.content,
|
||||
post.created_at,
|
||||
post.url,
|
||||
post.account.id
|
||||
],
|
||||
[post.id, post.content, post.created_at, post.url, post.account.id],
|
||||
(postErr) => {
|
||||
if (postErr !== null) {
|
||||
console.error(`Could not insert post ${post.url}`, postErr);
|
||||
@ -145,26 +147,28 @@ export async function savePost(post: Post): Promise<undefined> {
|
||||
|
||||
db.parallelize(() => {
|
||||
let remaining = post.tags.length;
|
||||
for (let tag of post.tags) {
|
||||
db.run(`
|
||||
for (const tag of post.tags) {
|
||||
db.run(
|
||||
`
|
||||
INSERT INTO tags (url, tag) VALUES (?, ?)
|
||||
ON CONFLICT(url) DO UPDATE SET
|
||||
tag=excluded.tag;`,
|
||||
[
|
||||
tag.url,
|
||||
tag.name
|
||||
],
|
||||
[tag.url, tag.name],
|
||||
(tagErr) => {
|
||||
if (tagErr !== null) {
|
||||
console.error(`Could not insert/update tag ${tag.url}`, tagErr);
|
||||
reject(tagErr);
|
||||
return;
|
||||
}
|
||||
db.run('INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
|
||||
db.run(
|
||||
'INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
|
||||
[post.id, tag.url],
|
||||
(posttagserr) => {
|
||||
if (posttagserr !== null) {
|
||||
console.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
|
||||
console.error(
|
||||
`Could not insert poststags ${tag.url}, ${post.url}`,
|
||||
posttagserr
|
||||
);
|
||||
reject(posttagserr);
|
||||
return;
|
||||
}
|
||||
@ -180,15 +184,17 @@ export async function savePost(post: Post): Promise<undefined> {
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function getPosts(since: string | null, before: string | null, limit: number) {
|
||||
let promise = await new Promise<Post[]>((resolve, reject) => {
|
||||
const promise = await new Promise<Post[]>((resolve, reject) => {
|
||||
let filter_query;
|
||||
let params: any = { $limit: limit };
|
||||
const params: any = { $limit: limit };
|
||||
if (since === null && before === null) {
|
||||
filter_query = '';
|
||||
} else if (since !== null) {
|
||||
@ -207,66 +213,60 @@ export async function getPosts(since: string | null, before: string | null, limi
|
||||
${filter_query}
|
||||
ORDER BY created_at DESC
|
||||
LIMIT $limit`;
|
||||
db.all(
|
||||
sql,
|
||||
params,
|
||||
(err, rows: any[]) => {
|
||||
if (err != null) {
|
||||
console.error('Error loading posts', err);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
if (rows.length === 0) {
|
||||
// No need to check for tags
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
const postIdsParams = rows.map(() => '?').join(', ');
|
||||
db.all(
|
||||
`SELECT post_id, tags.url, tags.tag
|
||||
db.all(sql, params, (err, rows: any[]) => {
|
||||
if (err != null) {
|
||||
console.error('Error loading posts', err);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
if (rows.length === 0) {
|
||||
// No need to check for tags
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
const postIdsParams = rows.map(() => '?').join(', ');
|
||||
db.all(
|
||||
`SELECT post_id, tags.url, tags.tag
|
||||
FROM poststags
|
||||
JOIN tags ON poststags.tag_url = tags.url
|
||||
WHERE post_id IN (${postIdsParams});`,
|
||||
rows.map((r: any) => r.id),
|
||||
(tagErr, tagRows: any[]) => {
|
||||
if (tagErr != null) {
|
||||
console.error('Error loading post tags', tagErr);
|
||||
reject(tagErr);
|
||||
return;
|
||||
}
|
||||
const tagMap: Map<string, Tag[]> = tagRows.reduce(
|
||||
(result: Map<string, Tag[]>, item) => {
|
||||
const tag: Tag = {
|
||||
url: item.url,
|
||||
name: item.tag
|
||||
};
|
||||
result.set(item.post_id, [...result.get(item.post_id) || [], tag]);
|
||||
return result;
|
||||
}, new Map());
|
||||
const posts = rows.map(row => {
|
||||
return {
|
||||
id: row.id,
|
||||
content: row.content,
|
||||
created_at: row.created_at,
|
||||
url: row.url,
|
||||
tags: tagMap.get(row.id) || [],
|
||||
account: {
|
||||
id: row.account_id,
|
||||
acct: row.acct,
|
||||
username: row.username,
|
||||
display_name: row.display_name,
|
||||
url: row.account_url,
|
||||
avatar: row.avatar,
|
||||
avatar_static: ''
|
||||
} as Account
|
||||
} as Post
|
||||
});
|
||||
resolve(posts);
|
||||
rows.map((r: any) => r.id),
|
||||
(tagErr, tagRows: any[]) => {
|
||||
if (tagErr != null) {
|
||||
console.error('Error loading post tags', tagErr);
|
||||
reject(tagErr);
|
||||
return;
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
const tagMap: Map<string, Tag[]> = tagRows.reduce((result: Map<string, Tag[]>, item) => {
|
||||
const tag: Tag = {
|
||||
url: item.url,
|
||||
name: item.tag
|
||||
};
|
||||
result.set(item.post_id, [...(result.get(item.post_id) || []), tag]);
|
||||
return result;
|
||||
}, new Map());
|
||||
const posts = rows.map((row) => {
|
||||
return {
|
||||
id: row.id,
|
||||
content: row.content,
|
||||
created_at: row.created_at,
|
||||
url: row.url,
|
||||
tags: tagMap.get(row.id) || [],
|
||||
account: {
|
||||
id: row.account_id,
|
||||
acct: row.acct,
|
||||
username: row.username,
|
||||
display_name: row.display_name,
|
||||
url: row.account_url,
|
||||
avatar: row.avatar,
|
||||
avatar_static: ''
|
||||
} as Account
|
||||
} as Post;
|
||||
});
|
||||
resolve(posts);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
return promise;
|
||||
}
|
||||
|
||||
|
||||
@ -22,24 +22,26 @@ export function createFeed(posts: Post[]): Feed {
|
||||
author: {
|
||||
name: '@aymm',
|
||||
link: 'https://metalhead.club/@aymm'
|
||||
},
|
||||
}
|
||||
});
|
||||
posts.forEach(p => {
|
||||
posts.forEach((p) => {
|
||||
feed.addItem({
|
||||
title: p.content,
|
||||
id: p.url,
|
||||
link: p.url,
|
||||
content: p.content,
|
||||
author: [{
|
||||
name: p.account.acct,
|
||||
link: p.account.url
|
||||
}],
|
||||
author: [
|
||||
{
|
||||
name: p.account.acct,
|
||||
link: p.account.url
|
||||
}
|
||||
],
|
||||
date: new Date(p.created_at)
|
||||
})
|
||||
});
|
||||
});
|
||||
feed.addCategory('Music');
|
||||
return feed;
|
||||
}
|
||||
export async function saveAtomFeed(feed: Feed) {
|
||||
await fs.writeFile('feed.xml', feed.atom1(), { encoding: 'utf8' });
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import { HASHTAG_FILTER, MASTODON_INSTANCE, URL_FILTER, YOUTUBE_API_KEY } from '$env/static/private';
|
||||
import {
|
||||
HASHTAG_FILTER,
|
||||
MASTODON_INSTANCE,
|
||||
URL_FILTER,
|
||||
YOUTUBE_API_KEY
|
||||
} from '$env/static/private';
|
||||
import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
|
||||
import { getPosts, savePost } from '$lib/server/db';
|
||||
import { createFeed, saveAtomFeed } from '$lib/server/rss';
|
||||
import { WebSocket } from "ws";
|
||||
import { WebSocket } from 'ws';
|
||||
|
||||
const YOUTUBE_REGEX = new RegExp(/https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<videoId>[a-zA-Z_0-9-]+)/gm);
|
||||
const YOUTUBE_REGEX = new RegExp(
|
||||
/https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<videoId>[a-zA-Z_0-9-]+)/gm
|
||||
);
|
||||
|
||||
export class TimelineReader {
|
||||
private static _instance: TimelineReader;
|
||||
@ -13,7 +20,8 @@ export class TimelineReader {
|
||||
const searchParams = new URLSearchParams([
|
||||
['part', 'snippet'],
|
||||
['id', videoId],
|
||||
['key', YOUTUBE_API_KEY]]);
|
||||
['key', YOUTUBE_API_KEY]
|
||||
]);
|
||||
const youtubeVideoUrl = new URL(`https://www.googleapis.com/youtube/v3/videos?${searchParams}`);
|
||||
const resp = await fetch(youtubeVideoUrl);
|
||||
const respObj = await resp.json();
|
||||
@ -30,15 +38,20 @@ export class TimelineReader {
|
||||
const categorySearchParams = new URLSearchParams([
|
||||
['part', 'snippet'],
|
||||
['id', item.categoryId],
|
||||
['key', YOUTUBE_API_KEY]]);
|
||||
const youtubeCategoryUrl = new URL(`https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`);
|
||||
const categoryTitle: string = await fetch(youtubeCategoryUrl).then(r => r.json()).then(r => r.items[0]?.title);
|
||||
['key', YOUTUBE_API_KEY]
|
||||
]);
|
||||
const youtubeCategoryUrl = new URL(
|
||||
`https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`
|
||||
);
|
||||
const categoryTitle: string = await fetch(youtubeCategoryUrl)
|
||||
.then((r) => r.json())
|
||||
.then((r) => r.items[0]?.title);
|
||||
return categoryTitle === 'Music';
|
||||
}
|
||||
|
||||
private static async checkYoutubeMatches(postContent: string): Promise<boolean> {
|
||||
const matches = postContent.matchAll(YOUTUBE_REGEX);
|
||||
for (let match of matches) {
|
||||
for (const match of matches) {
|
||||
if (match === undefined || match.groups === undefined) {
|
||||
continue;
|
||||
}
|
||||
@ -57,10 +70,10 @@ export class TimelineReader {
|
||||
|
||||
private constructor() {
|
||||
const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
|
||||
socket.onopen = (_event) => {
|
||||
socket.onopen = () => {
|
||||
socket.send('{ "type": "subscribe", "stream": "public:local"}');
|
||||
};
|
||||
socket.onmessage = (async (event) => {
|
||||
socket.onmessage = async (event) => {
|
||||
try {
|
||||
const data: TimelineEvent = JSON.parse(event.data.toString());
|
||||
if (data.event !== 'update') {
|
||||
@ -71,31 +84,30 @@ export class TimelineReader {
|
||||
const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
|
||||
|
||||
const urls: string[] = URL_FILTER.split(',');
|
||||
const found_urls = urls.filter(t => post.content.includes(t));
|
||||
const found_urls = urls.filter((t) => post.content.includes(t));
|
||||
|
||||
// If we don't have any tags or non-youtube urls, check youtube
|
||||
// YT is handled separately, because it requires an API call and therefore is slower
|
||||
if (found_urls.length === 0 &&
|
||||
if (
|
||||
found_urls.length === 0 &&
|
||||
found_tags.length === 0 &&
|
||||
!await TimelineReader.checkYoutubeMatches(post.content)) {
|
||||
!(await TimelineReader.checkYoutubeMatches(post.content))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
await savePost(post);
|
||||
const posts = await getPosts(null, null, 100);
|
||||
await saveAtomFeed(createFeed(posts));
|
||||
|
||||
} catch (e) {
|
||||
console.error("error message", event, event.data, e)
|
||||
console.error('error message', event, event.data, e);
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
socket.onclose = (event) => {
|
||||
console.log("Closed", event, event.code, event.reason)
|
||||
console.log('Closed', event, event.code, event.reason);
|
||||
};
|
||||
socket.onerror = (event) => {
|
||||
console.log("error", event, event.message, event.error)
|
||||
console.log('error', event, event.message, event.error);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
public static init() {
|
||||
@ -108,4 +120,4 @@ export class TimelineReader {
|
||||
TimelineReader.init();
|
||||
return this._instance;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import FooterComponent from '$lib/components/FooterComponent.svelte'
|
||||
import FooterComponent from '$lib/components/FooterComponent.svelte';
|
||||
import { SvelteToast } from '@zerodevx/svelte-toast';
|
||||
|
||||
const options = {
|
||||
@ -7,6 +7,7 @@
|
||||
classes: ['toast']
|
||||
};
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
<SvelteToast {options} />
|
||||
<div class="footer">
|
||||
@ -33,4 +34,9 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@media only screen and (max-device-width: 620px) {
|
||||
.footer {
|
||||
width: calc(100% + 16px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,174 +1,184 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import type { PageData } from './$types';
|
||||
import type { Post } from '$lib/mastodon/response';
|
||||
import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
|
||||
import PostComponent from '$lib/components/PostComponent.svelte';
|
||||
import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
|
||||
import { fly, type FlyParams } from 'svelte/transition';
|
||||
import { cubicInOut } from 'svelte/easing';
|
||||
import { errorToast } from '$lib/errorToast'
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
import type { Post } from '$lib/mastodon/response';
|
||||
import {
|
||||
PUBLIC_REFRESH_INTERVAL,
|
||||
PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME
|
||||
} from '$env/static/public';
|
||||
import PostComponent from '$lib/components/PostComponent.svelte';
|
||||
import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
|
||||
import { fly, type FlyParams } from 'svelte/transition';
|
||||
import { cubicInOut } from 'svelte/easing';
|
||||
import { errorToast } from '$lib/errorToast';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
interface FetchOptions {
|
||||
since?: string,
|
||||
before?: string,
|
||||
count?: number
|
||||
}
|
||||
|
||||
interface EdgeFlyParams extends FlyParams {
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
|
||||
let interval: NodeJS.Timer | null = null;
|
||||
let moreOlderPostsAvailable = true;
|
||||
let loadingOlderPosts = false;
|
||||
|
||||
// Needed, so that edgeFly() can do its thing:
|
||||
// To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
|
||||
// post was, before the fetch happened.
|
||||
let oldestBeforeLastFetch: number | null = null;
|
||||
|
||||
/**
|
||||
* Animate either from the top, or the bottom of the window, depending if the post is
|
||||
* newer than the existing ones or older.
|
||||
*/
|
||||
function edgeFly(node: Element, opts: EdgeFlyParams) {
|
||||
const createdAt = new Date(opts.created_at).getTime();
|
||||
const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
|
||||
const oldest = oldestBeforeLastFetch !== null
|
||||
? oldestBeforeLastFetch
|
||||
: new Date(data.posts[data.posts.length - 1].created_at).getTime();
|
||||
const diffOldest = Math.abs(oldest - createdAt);
|
||||
const fromTop = diffNewest <= diffOldest;
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
const paramY = +`${opts.y}`;
|
||||
let offset = isNaN(paramY) ? 0 : paramY + rect.height;
|
||||
opts.y = fromTop ? -offset : window.innerHeight + offset;
|
||||
return fly(node, opts);
|
||||
}
|
||||
|
||||
async function fetchPosts(options: FetchOptions): Promise<Post[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (options?.since !== undefined) {
|
||||
params.set('since', options.since);
|
||||
}
|
||||
if (options?.before !== undefined) {
|
||||
params.set('before', options.before);
|
||||
}
|
||||
if (options?.count !== undefined) {
|
||||
params.set('count', options.count.toFixed(0));
|
||||
interface FetchOptions {
|
||||
since?: string;
|
||||
before?: string;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/posts?${params}`);
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
function filterDuplicates(posts: Post[]): Post[] {
|
||||
return posts.filter((obj, index, arr) => {
|
||||
return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
|
||||
});
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
let filter: FetchOptions = {};
|
||||
if (data.posts.length > 0) {
|
||||
filter = { since: data.posts[0].created_at };
|
||||
interface EdgeFlyParams extends FlyParams {
|
||||
created_at: string;
|
||||
}
|
||||
fetchPosts(filter).then(resp => {
|
||||
if (resp.length > 0) {
|
||||
// Prepend new posts, filter dupes
|
||||
// There shouldn't be any duplicates, but better be safe than sorry
|
||||
data.posts = filterDuplicates(resp.concat(data.posts));
|
||||
|
||||
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
|
||||
let interval: NodeJS.Timer | null = null;
|
||||
let moreOlderPostsAvailable = true;
|
||||
let loadingOlderPosts = false;
|
||||
|
||||
// Needed, so that edgeFly() can do its thing:
|
||||
// To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
|
||||
// post was, before the fetch happened.
|
||||
let oldestBeforeLastFetch: number | null = null;
|
||||
|
||||
/**
|
||||
* Animate either from the top, or the bottom of the window, depending if the post is
|
||||
* newer than the existing ones or older.
|
||||
*/
|
||||
function edgeFly(node: Element, opts: EdgeFlyParams) {
|
||||
const createdAt = new Date(opts.created_at).getTime();
|
||||
const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
|
||||
const oldest =
|
||||
oldestBeforeLastFetch !== null
|
||||
? oldestBeforeLastFetch
|
||||
: new Date(data.posts[data.posts.length - 1].created_at).getTime();
|
||||
const diffOldest = Math.abs(oldest - createdAt);
|
||||
const fromTop = diffNewest <= diffOldest;
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
const paramY = +`${opts.y}`;
|
||||
let offset = isNaN(paramY) ? 0 : paramY + rect.height;
|
||||
opts.y = fromTop ? -offset : window.innerHeight + offset;
|
||||
return fly(node, opts);
|
||||
}
|
||||
|
||||
async function fetchPosts(options: FetchOptions): Promise<Post[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (options?.since !== undefined) {
|
||||
params.set('since', options.since);
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
errorToast('Error loading newest posts: ' + e.message);
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (data.posts.length > 0) {
|
||||
oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime();
|
||||
}
|
||||
interval = setInterval(refresh, refreshInterval);
|
||||
|
||||
// - If the page is hidden, slow down refresh rate
|
||||
// - If the page is shown, bump up refresh rate
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
const delay = document.hidden ? refreshInterval * 10 : refreshInterval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
if (options?.before !== undefined) {
|
||||
params.set('before', options.before);
|
||||
}
|
||||
interval = setInterval(refresh, delay);
|
||||
if (options?.count !== undefined) {
|
||||
params.set('count', options.count.toFixed(0));
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/posts?${params}`);
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
function filterDuplicates(posts: Post[]): Post[] {
|
||||
return posts.filter((obj, index, arr) => {
|
||||
return arr.map((mapObj) => mapObj.url).indexOf(obj.url) === index;
|
||||
});
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
let filter: FetchOptions = {};
|
||||
if (data.posts.length > 0) {
|
||||
filter = { since: data.posts[0].created_at };
|
||||
}
|
||||
fetchPosts(filter)
|
||||
.then((resp) => {
|
||||
if (resp.length > 0) {
|
||||
// Prepend new posts, filter dupes
|
||||
// There shouldn't be any duplicates, but better be safe than sorry
|
||||
data.posts = filterDuplicates(resp.concat(data.posts));
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
errorToast('Error loading newest posts: ' + e.message);
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (data.posts.length > 0) {
|
||||
oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime();
|
||||
}
|
||||
interval = setInterval(refresh, refreshInterval);
|
||||
|
||||
// - If the page is hidden, slow down refresh rate
|
||||
// - If the page is shown, bump up refresh rate
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
const delay = document.hidden ? refreshInterval * 10 : refreshInterval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
interval = setInterval(refresh, delay);
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (interval !== null) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (interval !== null) {
|
||||
clearInterval(interval)
|
||||
function loadOlderPosts() {
|
||||
loadingOlderPosts = true;
|
||||
const filter: FetchOptions = { count: 20 };
|
||||
if (data.posts.length > 0) {
|
||||
const before = data.posts[data.posts.length - 1].created_at;
|
||||
filter.before = before;
|
||||
oldestBeforeLastFetch = new Date(before).getTime();
|
||||
}
|
||||
|
||||
fetchPosts(filter)
|
||||
.then((resp) => {
|
||||
if (resp.length > 0) {
|
||||
// Append old posts, filter dupes
|
||||
// There shouldn't be any duplicates, but better be safe than sorry
|
||||
data.posts = filterDuplicates(data.posts.concat(resp));
|
||||
// If we got less than we expected, there are no older posts available
|
||||
moreOlderPostsAvailable = resp.length >= (filter.count ?? 20);
|
||||
} else {
|
||||
moreOlderPostsAvailable = false;
|
||||
}
|
||||
loadingOlderPosts = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
loadingOlderPosts = false;
|
||||
errorToast('Error loading older posts: ' + e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function loadOlderPosts() {
|
||||
loadingOlderPosts = true;
|
||||
const filter: FetchOptions = { count: 20 };
|
||||
if (data.posts.length > 0) {
|
||||
const before = data.posts[data.posts.length - 1].created_at;
|
||||
filter.before = before;
|
||||
oldestBeforeLastFetch = new Date(before).getTime();
|
||||
}
|
||||
|
||||
|
||||
fetchPosts(filter).then(resp => {
|
||||
if (resp.length > 0) {
|
||||
// Append old posts, filter dupes
|
||||
// There shouldn't be any duplicates, but better be safe than sorry
|
||||
data.posts = filterDuplicates(data.posts.concat(resp));
|
||||
// If we got less than we expected, there are no older posts available
|
||||
moreOlderPostsAvailable = resp.length >= (filter.count ?? 20);
|
||||
} else {
|
||||
moreOlderPostsAvailable = false;
|
||||
}
|
||||
loadingOlderPosts = false;
|
||||
})
|
||||
.catch(e => {
|
||||
loadingOlderPosts = false;
|
||||
errorToast('Error loading older posts: ' + e.message);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</title>
|
||||
</svelte:head>
|
||||
<h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
|
||||
<div class="wrapper">
|
||||
<div></div>
|
||||
<div />
|
||||
<div class="posts">
|
||||
{#if data.posts.length === 0}
|
||||
Sorry, no posts recommending music aave been found yet
|
||||
{/if}
|
||||
{#each data.posts as post (post.url)}
|
||||
{#if data.posts.length === 0}
|
||||
Sorry, no posts recommending music aave been found yet
|
||||
{/if}
|
||||
{#each data.posts as post (post.url)}
|
||||
<div
|
||||
class="post"
|
||||
transition:edgeFly="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}"
|
||||
transition:edgeFly={{
|
||||
y: 10,
|
||||
created_at: post.created_at,
|
||||
duration: 300,
|
||||
easing: cubicInOut
|
||||
}}
|
||||
>
|
||||
<PostComponent {post} />
|
||||
</div>
|
||||
{/each}
|
||||
<LoadMoreComponent
|
||||
on:loadOlderPosts={loadOlderPosts}
|
||||
moreAvailable={moreOlderPostsAvailable}
|
||||
isLoading={loadingOlderPosts}/>
|
||||
</div>
|
||||
<div></div>
|
||||
{/each}
|
||||
<LoadMoreComponent
|
||||
on:loadOlderPosts={loadOlderPosts}
|
||||
moreAvailable={moreOlderPostsAvailable}
|
||||
isLoading={loadingOlderPosts}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.posts {
|
||||
display: flex;
|
||||
@ -191,4 +201,10 @@ function loadOlderPosts() {
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
@media only screen and (max-device-width: 650px) {
|
||||
.post {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,8 +2,8 @@ import type { Post } from '$lib/mastodon/response';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ fetch }) => {
|
||||
const p = await fetch('/');
|
||||
return {
|
||||
posts: await p.json() as Post[]
|
||||
};
|
||||
}) satisfies PageLoad;
|
||||
const p = await fetch('/');
|
||||
return {
|
||||
posts: (await p.json()) as Post[]
|
||||
};
|
||||
}) satisfies PageLoad;
|
||||
|
||||
@ -2,4 +2,4 @@ import type { RequestHandler } from './$types';
|
||||
|
||||
export const GET = (async ({ fetch }) => {
|
||||
return await fetch('api/posts');
|
||||
}) satisfies RequestHandler;
|
||||
}) satisfies RequestHandler;
|
||||
|
||||
@ -13,4 +13,4 @@ export const GET = (async ({ url }) => {
|
||||
count = Math.min(count, 100);
|
||||
const posts = await getPosts(since, before, count);
|
||||
return json(posts);
|
||||
}) satisfies RequestHandler;
|
||||
}) satisfies RequestHandler;
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "Moshing Mammut",
|
||||
"short_name": "Moshing Mammut",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#2e0b78",
|
||||
"background_color": "#2e0b78",
|
||||
"display": "standalone"
|
||||
"name": "Moshing Mammut",
|
||||
"short_name": "Moshing Mammut",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#2e0b78",
|
||||
"background_color": "#2e0b78",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
@ -16,7 +16,6 @@ body {
|
||||
--color-red-desat-dark: hsl(7, 20%, 30%);
|
||||
--color-red-desat-desat: hsl(7, 8%, 56%);
|
||||
|
||||
|
||||
--color-text: var(--color-blue);
|
||||
--color-border: var(--color-grey);
|
||||
--color-link: var(--color-mauve);
|
||||
@ -30,9 +29,9 @@ body {
|
||||
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
|
||||
Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
|
||||
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
a {
|
||||
@ -55,4 +54,4 @@ a:visited {
|
||||
--color-button-deactivated: var(--color-red-desat-desat);
|
||||
--color-button-text: var(--color-blue-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,8 +11,8 @@ const config = {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter(),
|
||||
},
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user