Compare commits

..

No commits in common. "6c9546b74ac9a1748ef0992c95afe905c72c9aa1" and "e3c15be31cb7807614eb7ee45f8a6ff9187b7ecd" have entirely different histories.

25 changed files with 444 additions and 494 deletions

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,6 +51,7 @@ 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.
@ -77,6 +78,7 @@ 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
@ -91,11 +93,12 @@ 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.

View File

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

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, initial-scale=1" />
<meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
<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-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>

View File

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

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>

View File

@ -3,10 +3,10 @@
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 {
@ -15,6 +15,6 @@
width: auto;
height: auto;
object-fit: contain;
border-radius: 3px;
border-radius: 3px;;
}
</style>

View File

@ -5,25 +5,21 @@
<div class="footer">
<div>
<span class="label"
>Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
>
<a href="https://metalhead.club/@aymm" rel="me"
>@aymm<span class="mastodonInstance">@metalhead.club</span></a
>
<span>Made with &#x1F918; by&nbsp;</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" />
<span class="label">Source Code</span>
Source Code
</a>
</div>
|
<div>
<a href="/feed.xml">
<img alt="RSS" src={rss} class="icon" />
<span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
RSS Feed
</a>
</div>
</div>
@ -57,27 +53,4 @@
background-color: var(--color-grey-translucent);
}
}
@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>

View File

@ -2,8 +2,8 @@
import { createEventDispatcher } from 'svelte';
import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
export let moreAvailable = false;
export let isLoading = false;
export let moreAvailable: boolean = false;
export let isLoading: boolean = 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>

View File

@ -1,10 +1,9 @@
<script lang="ts">
export let size = '64px';
export let thickness = '6px';
export let size: string = '64px';
export let thickness: string = '6px';
</script>
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
<style>
.lds-dual-ring {
display: inline-block;
@ -12,7 +11,7 @@
height: 100%;
}
.lds-dual-ring:after {
content: ' ';
content: " ";
display: block;
width: var(--size);
height: var(--size);
@ -35,4 +34,5 @@
transform: rotate(360deg);
}
}
</style>

View File

@ -3,7 +3,7 @@
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;
@ -19,15 +19,16 @@
// 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>

View File

@ -1,28 +1,29 @@
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
}

View File

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

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,24 +37,20 @@ 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 (const migration of toApply) {
const toApply = getMigrations().filter(m => !appliedMigrations.has(m.id));
for (let 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}`);
}
);
});
});
}
});
@ -64,8 +60,7 @@ db.on('error', (err) => {
});
function getMigrations(): Migration[] {
return [
{
return [{
id: 1,
name: 'initial',
statement: `
@ -94,16 +89,14 @@ 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)
@ -129,15 +122,20 @@ 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);
@ -147,28 +145,26 @@ export async function savePost(post: Post): Promise<undefined> {
db.parallelize(() => {
let remaining = post.tags.length;
for (const tag of post.tags) {
db.run(
`
for (let 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;
}
@ -184,17 +180,15 @@ export async function savePost(post: Post): Promise<undefined> {
);
}
});
}
);
}
);
});
});
});
}
export async function getPosts(since: string | null, before: string | null, limit: number) {
const promise = await new Promise<Post[]>((resolve, reject) => {
let promise = await new Promise<Post[]>((resolve, reject) => {
let filter_query;
const params: any = { $limit: limit };
let params: any = { $limit: limit };
if (since === null && before === null) {
filter_query = '';
} else if (since !== null) {
@ -213,7 +207,10 @@ 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);
@ -237,15 +234,16 @@ 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,
@ -261,12 +259,14 @@ 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;
}

View File

@ -22,22 +22,20 @@ 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;

View File

@ -1,17 +1,10 @@
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;
@ -20,8 +13,7 @@ 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();
@ -38,20 +30,15 @@ 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 (const match of matches) {
for (let match of matches) {
if (match === undefined || match.groups === undefined) {
continue;
}
@ -70,10 +57,10 @@ export class TimelineReader {
private constructor() {
const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
socket.onopen = () => {
socket.onopen = (_event) => {
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') {
@ -84,30 +71,31 @@ 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() {

View File

@ -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,7 +7,6 @@
classes: ['toast']
};
</script>
<slot />
<SvelteToast {options} />
<div class="footer">
@ -34,9 +33,4 @@
align-items: center;
gap: 10px;
}
@media only screen and (max-device-width: 620px) {
.footer {
width: calc(100% + 16px);
}
}
</style>

View File

@ -1,27 +1,25 @@
<script lang="ts">
import { onMount } from 'svelte';
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 { 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 { errorToast } from '$lib/errorToast'
export let data: PageData;
interface FetchOptions {
since?: string;
before?: string;
count?: number;
since?: string,
before?: string,
count?: number
}
interface EdgeFlyParams extends FlyParams {
created_at: string;
created_at: string
}
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
@ -41,8 +39,7 @@
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
const oldest = oldestBeforeLastFetch !== null
? oldestBeforeLastFetch
: new Date(data.posts[data.posts.length - 1].created_at).getTime();
const diffOldest = Math.abs(oldest - createdAt);
@ -73,7 +70,7 @@
function filterDuplicates(posts: Post[]): Post[] {
return posts.filter((obj, index, arr) => {
return arr.map((mapObj) => mapObj.url).indexOf(obj.url) === index;
return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
});
}
@ -82,8 +79,7 @@
if (data.posts.length > 0) {
filter = { since: data.posts[0].created_at };
}
fetchPosts(filter)
.then((resp) => {
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
@ -113,9 +109,9 @@
return () => {
if (interval !== null) {
clearInterval(interval);
clearInterval(interval)
}
}
};
});
function loadOlderPosts() {
@ -127,8 +123,8 @@
oldestBeforeLastFetch = new Date(before).getTime();
}
fetchPosts(filter)
.then((resp) => {
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
@ -140,19 +136,20 @@
}
loadingOlderPosts = false;
})
.catch((e) => {
.catch(e => {
loadingOlderPosts = false;
errorToast('Error loading older posts: ' + e.message);
});
}
</script>
}
</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
@ -160,12 +157,7 @@
{#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>
@ -173,12 +165,10 @@
<LoadMoreComponent
on:loadOlderPosts={loadOlderPosts}
moreAvailable={moreOlderPostsAvailable}
isLoading={loadingOlderPosts}
/>
isLoading={loadingOlderPosts}/>
</div>
<div />
<div></div>
</div>
<style>
.posts {
display: flex;
@ -201,10 +191,4 @@
text-align: center;
z-index: 100;
}
@media only screen and (max-device-width: 650px) {
.post {
max-width: 100vw;
}
}
</style>

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;

View File

@ -16,6 +16,7 @@ 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);
@ -29,9 +30,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 {

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;