phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

Improve formatting

Browse Source
This commit is contained in:
Max Nuding 2023-04-11 16:02:54 +02:00
parent 268128c2f4
commit 6c9546b74a
Signed by: phlaym
GPG Key ID: A06651BAB6777237
22 changed files with 280 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.nova/Configuration.json
View File

@ -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
}

7
README.md
View File

@ -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
faviconDescription.json
View File

@ -1,4 +1,3 @@
{
"masterPicture": "./icon.svg",
"iconsPath": "/static",

18
src/app.html
View File

@ -12,18 +12,18 @@
<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="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-text: #2f0c7a;
--color-bg: white;
--color-border: #17063B;
--color-link: #563ACC;
--color-link-visited: #858AFA;
--color-border: #17063b;
--color-link: #563acc;
--color-link-visited: #858afa;
color: var(--color-text);
background-color: var(--color-bg);
@ -39,10 +39,10 @@
@media (prefers-color-scheme: dark) {
body {
--color-text: white;
--color-bg: #17063B;
--color-bg: #17063b;
--color-border: white;
--color-link: #8A9BF0;
--color-link-visited: #C384FB;
--color-link: #8a9bf0;
--color-link-visited: #c384fb;
}
}
</style>

5
src/hooks.server.ts
View File

@ -24,10 +24,7 @@ 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);

2
src/lib/components/AccountComponent.svelte
View File

@ -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>

10
src/lib/components/AvatarComponent.svelte
View File

@ -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 {
img {
max-width: 50px;
max-height: 50px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 3px;;
}
border-radius: 3px;
}
</style>

8
src/lib/components/LoadMoreComponent.svelte
View File

@ -2,8 +2,8 @@
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;
@ -14,7 +14,7 @@
displayText = 'You reached the end';
} else {
displayText = 'Load More';
};
}
$: disabled = !moreAvailable || isLoading;
$: title = moreAvailable ? 'Load More' : 'There be dragons!';
@ -27,7 +27,7 @@
<button on:click={loadOlderPosts} {disabled} {title}>
<div class="loading" class:collapsed={!isLoading}>
<LoadingSpinnerComponent size='0.5em' thickness='6px' />
<LoadingSpinnerComponent size="0.5em" thickness="6px" />
</div>
<span>{displayText}</span>
</button>

10
src/lib/components/LoadingSpinnerComponent.svelte
View File

@ -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>

9
src/lib/components/PostComponent.svelte
View File

@ -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>

35
src/lib/mastodon/response.ts
View File

@ -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;
}

7
src/lib/relativeTime.ts
View File

@ -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,7 +27,7 @@ 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) {

86
src/lib/server/db.ts
View File

@ -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) => {
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}`);
});
}
);
});
}
});
@ -60,7 +64,8 @@ db.on('error', (err) => {
});
function getMigrations(): Migration[] {
return [{
return [
{
id: 1,
name: 'initial',
statement: `
@ -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,10 +213,7 @@ 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[]) => {
db.all(sql, params, (err, rows: any[]) => {
if (err != null) {
console.error('Error loading posts', err);
reject(err);
@ -234,16 +237,15 @@ export async function getPosts(since: string | null, before: string | null, limi
reject(tagErr);
return;
}
const tagMap: Map<string, Tag[]> = tagRows.reduce(
(result: Map<string, Tag[]>, item) => {
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]);
result.set(item.post_id, [...(result.get(item.post_id) || []), tag]);
return result;
}, new Map());
const posts = rows.map(row => {
const posts = rows.map((row) => {
return {
id: row.id,
content: row.content,
@ -259,14 +261,12 @@ export async function getPosts(since: string | null, before: string | null, limi
avatar: row.avatar,
avatar_static: ''
} as Account
} as Post
} as Post;
});
resolve(posts);
}
);
}
);
});
});
return promise;
}

12
src/lib/server/rss.ts
View File

@ -22,20 +22,22 @@ 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: [{
author: [
{
name: p.account.acct,
link: p.account.url
}],
}
],
date: new Date(p.created_at)
})
});
});
feed.addCategory('Music');
return feed;

52
src/lib/server/timeline.ts
View File

@ -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() {

2
src/routes/+page.ts
View File

@ -4,6 +4,6 @@ import type { PageLoad } from './$types';
export const load = (async ({ fetch }) => {
const p = await fetch('/');
return {
posts: await p.json() as Post[]
posts: (await p.json()) as Post[]
};
}) satisfies PageLoad;

7
static/style.css
View File

@ -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 {

4
svelte.config.js
View File

@ -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;