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

Compare commits

base: phlaym:79405cd08c282c5355c2cf12f737781b0dbed7bb
Branches Tags
phlaym:main phlaym:fix-ismusicvideo-detection phlaym:v1.1.0
phlaym:v1.4.1 phlaym:v1.4.0 phlaym:v1.3.1 phlaym:v1.3.0 phlaym:v1.2.1 phlaym:v1.2.0 phlaym:v1.1.0 phlaym:v1.0.0
...
compare: phlaym:main
Branches Tags
phlaym:main phlaym:fix-ismusicvideo-detection phlaym:v1.1.0
phlaym:v1.4.1 phlaym:v1.4.0 phlaym:v1.3.1 phlaym:v1.3.0 phlaym:v1.2.1 phlaym:v1.2.0 phlaym:v1.1.0 phlaym:v1.0.0

5 Commits
79405cd08c ... main

Author SHA1 Message Date
Max Nuding
3c6e742e43 check for missed posts 2025-06-15 07:01:45 +02:00
Max Nuding
7296582b0d updated dependencies, fixed sorting 2025-03-26 08:36:20 +01:00
Max Nuding
66f09cf5a3 update to svelte 5 2024-10-29 16:26:07 +01:00
Max Nuding
d39ccba927 minor refactors and additional logs 2024-09-24 14:47:50 +02:00
Max Nuding
498b1d82d9 Update dependencies 2024-09-24 12:05:36 +02:00
14 changed files with 2441 additions and 1719 deletions
Expand all files Collapse all files

2
README.md
View File

@ -65,7 +65,7 @@ Set up NVM:
``` ```
$ cd $ cd
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh $ curl https://raw.githubusercontent.com/nvm-sh/nvm/refs/heads/master/install.sh | bash
$ source ~/.nvm/nvm.sh $ source ~/.nvm/nvm.sh
$ nvm install --lts $ nvm install --lts
``` ```

3853
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
package.json
View File

@ -14,35 +14,35 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-node": "^2.0.0", "@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.21.5",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.0",
"@types/node": "^18.16.3", "@types/node": "^22.6.1",
"@types/sqlite3": "^3.1.8", "@types/sqlite3": "^3.0.0",
"@types/ws": "^8.5.4", "@types/ws": "^8.5.0",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^8.0.0",
"@zerodevx/svelte-toast": "^0.9.3", "@zerodevx/svelte-toast": "^0.9.3",
"eslint": "^8.28.0", "eslint": "^9.11.1",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^10.0.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^3.0.0",
"prettier": "^2.8.0", "prettier": "^3.1.0",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^3.2.6",
"svelte": "^4.0.0", "svelte": "^5",
"svelte-check": "^3.4.3", "svelte-check": "^4.0.0",
"tslib": "^2.4.1", "tslib": "^2.0.0",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^5.0.0" "vite": "^6.0.0"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"feed": "^4.2.2", "feed": "^5.1.0",
"sharp": "^0.32.0", "sharp": "^0.34.2",
"sqlite3": "^5.1.6", "sqlite3": "^5.0.0",
"ws": "^8.13.0" "ws": "^8.18.0"
}, },
"engines": { "engines": {
"node": ">=18.0.0" "node": ">=20.0.0"
} }
} }

21
src/app.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -54,9 +54,22 @@
color: var(--color-text); color: var(--color-text);
background-color: var(--color-bg); background-color: var(--color-bg);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, font-family:
Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', system-ui,
'Segoe UI Emoji', 'Segoe UI Symbol'; -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 { a {

5
src/hooks.server.ts
View File

@ -1,9 +1,10 @@
import { log } from '$lib/log'; import { log } from '$lib/log';
import { TimelineReader } from '$lib/server/timeline'; import { TimelineReader } from '$lib/server/timeline';
import type { HandleServerError } from '@sveltejs/kit'; import type { Handle, HandleServerError } from '@sveltejs/kit';
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import fs from 'fs/promises'; import fs from 'fs/promises';
log.log('App startup');
TimelineReader.init(); TimelineReader.init();
export const handleError = (({ error }) => { export const handleError = (({ error }) => {
@ -16,8 +17,6 @@ export const handleError = (({ error }) => {
}; };
}) satisfies HandleServerError; }) satisfies HandleServerError;
import type { Handle } from '@sveltejs/kit';
export const handle = (async ({ event, resolve }) => { export const handle = (async ({ event, resolve }) => {
// Reeder *insists* on checking /feed instead of /feed.xml // Reeder *insists* on checking /feed instead of /feed.xml
if (event.url.pathname === '/feed') { if (event.url.pathname === '/feed') {

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

@ -1,7 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { Account } from '$lib/mastodon/response'; import type { Account } from '$lib/mastodon/response';
export let account: Account; interface Props {
account: Account;
}
let { account }: Props = $props();
</script> </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>

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

@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { Account } from '$lib/mastodon/response'; import type { Account } from '$lib/mastodon/response';
export let account: Account; interface Props {
let avatarDescription: string; account: Account;
let sourceSetHtml: string; }
$: avatarDescription = `Avatar for ${account.acct}`;
$: { let { account }: Props = $props();
let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
let sourceSetHtml: string = $derived.by(() => {
// Sort thumbnails by file type. This is important, because the order of the srcset entries matter. // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
// We need the best format to be first // We need the best format to be first
const formatPriority = new Map<string, number>([ const formatPriority = new Map<string, number>([
@ -14,7 +16,7 @@
['jpg', 99], ['jpg', 99],
['jpeg', 99] ['jpeg', 99]
]); ]);
const resizedAvatars = (account.resizedAvatars ?? []).sort((a, b) => { const resizedAvatars = (account.resizedAvatars ?? []).toSorted((a, b) => {
const extensionA = a.file.split('.').pop() ?? ''; const extensionA = a.file.split('.').pop() ?? '';
const extensionB = b.file.split('.').pop() ?? ''; const extensionB = b.file.split('.').pop() ?? '';
const prioA = formatPriority.get(extensionA) ?? 3; const prioA = formatPriority.get(extensionA) ?? 3;
@ -33,8 +35,8 @@
const srcset = entry[1].join(', '); const srcset = entry[1].join(', ');
html += `<source srcset="${srcset}" type="${entry[0]}" />`; html += `<source srcset="${srcset}" type="${entry[0]}" />`;
} }
sourceSetHtml = html; return html;
} });
</script> </script>
<picture> <picture>

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

@ -1,33 +1,34 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte';
import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte'; import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
export let moreAvailable = false; interface Props {
export let isLoading = false; moreAvailable?: boolean;
let displayText = ''; isLoading?: boolean;
let title = ''; loadOlderPosts: any;
let disabled: boolean;
$: if (isLoading) {
displayText = 'Loading...';
} else if (!moreAvailable) {
displayText = 'You reached the end';
} else {
displayText = 'Load More';
} }
$: disabled = !moreAvailable || isLoading;
$: title = moreAvailable ? 'Load More' : 'There be dragons!';
const dispatch = createEventDispatcher<{ let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
loadOlderPosts: string; let displayText = $derived.by(() => {
}>(); if (isLoading) {
return 'Loading...';
} else if (!moreAvailable) {
return 'You reached the end';
}
return 'Load More';
});
let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
let disabled: boolean = $derived(!moreAvailable || isLoading);
function loadOlderPosts() { /*const dispatch = createEventDispatcher<{
dispatch('loadOlderPosts'); loadOlderPosts: string;
} }>();
function loadOlderPosts() {
dispatch('loadOlderPosts');
}*/
</script> </script>
<button on:click={loadOlderPosts} {disabled} {title}> <button onclick={() => loadOlderPosts()} {disabled} {title}>
<div class="loading" class:collapsed={!isLoading}> <div class="loading" class:collapsed={!isLoading}>
<LoadingSpinnerComponent size="0.5em" thickness="6px" /> <LoadingSpinnerComponent size="0.5em" thickness="6px" />
</div> </div>

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

@ -1,9 +1,13 @@
<script lang="ts"> <script lang="ts">
export let size = '64px'; interface Props {
export let thickness = '6px'; size?: string;
thickness?: string;
}
let { size = '64px', thickness = '6px' }: Props = $props();
</script> </script>
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" /> <div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
<style> <style>
.lds-dual-ring { .lds-dual-ring {

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

@ -6,15 +6,21 @@
import { secondsSince, relativeTime } from '$lib/relativeTime'; import { secondsSince, relativeTime } from '$lib/relativeTime';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let post: Post; interface Props {
let displayRelativeTime = false; post: Post;
const absoluteDate = new Date(post.created_at).toLocaleString();
let dateCreated = absoluteDate;
const timePassed = secondsSince(new Date(post.created_at));
$: if (displayRelativeTime) {
dateCreated = relativeTime($timePassed) ?? absoluteDate;
} }
let { post }: Props = $props();
let displayRelativeTime = $state(false);
const absoluteDate = new Date(post.created_at).toLocaleString();
const timePassed = secondsSince(new Date(post.created_at));
let dateCreated = $derived.by(() => {
if (displayRelativeTime) {
return relativeTime($timePassed) ?? absoluteDate;
}
return absoluteDate;
});
const songs = filterDuplicates(post.songs ?? []); const songs = filterDuplicates(post.songs ?? []);
function filterDuplicates(songs: SongInfo[]): SongInfo[] { function filterDuplicates(songs: SongInfo[]): SongInfo[] {
@ -59,7 +65,7 @@
['jpg', 99], ['jpg', 99],
['jpeg', 99] ['jpeg', 99]
]); ]);
const thumbs = (song.resizedThumbnails ?? []).sort((a, b) => { const thumbs = (song.resizedThumbnails ?? []).toSorted((a, b) => {
const extensionA = a.file.split('.').pop() ?? ''; const extensionA = a.file.split('.').pop() ?? '';
const extensionB = b.file.split('.').pop() ?? ''; const extensionB = b.file.split('.').pop() ?? '';
const prioA = formatPriority.get(extensionA) ?? 3; const prioA = formatPriority.get(extensionA) ?? 3;

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

@ -479,11 +479,11 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
} }
export async function savePost(post: Post, songs: SongInfo[]) { export async function savePost(post: Post, songs: SongInfo[]) {
log.debug(`Saving post ${post.url}`);
if (!databaseReady) { if (!databaseReady) {
await waitReady(); await waitReady();
} }
log.debug(`Saving post ${post.url}`);
const account = post.account; const account = post.account;
await saveAccountData(account); await saveAccountData(account);
log.debug(`Saved account data ${post.url}`); log.debug(`Saved account data ${post.url}`);

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

@ -224,7 +224,7 @@ export class TimelineReader {
accountUrl: accountUrl, accountUrl: accountUrl,
file: fn, file: fn,
sizeDescriptor: `${i}x` sizeDescriptor: `${i}x`
} as AccountAvatar) }) as AccountAvatar
) )
.then(saveAvatar) .then(saveAvatar)
) )
@ -261,7 +261,7 @@ export class TimelineReader {
file: fn, file: fn,
sizeDescriptor: `${i}x`, sizeDescriptor: `${i}x`,
kind: kind kind: kind
} as SongThumbnailImage) }) as SongThumbnailImage
) )
.then(saveSongThumbnail) .then(saveSongThumbnail)
) )
@ -352,6 +352,30 @@ export class TimelineReader {
} }
} }
private async checkAndSavePost(post: Post) {
const hashttags: string[] = HASHTAG_FILTER.split(',');
const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
const songs = await TimelineReader.getSongInfoInPost(post);
// 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 (songs.length === 0 && found_tags.length === 0) {
log.log('Ignoring post', post.url);
return;
}
await savePost(post, songs);
await TimelineReader.saveAvatar(post.account);
await TimelineReader.saveSongThumbnails(songs);
log.debug('Saved post', post.url);
const posts = await getPosts(null, null, 100);
await saveAtomFeed(createFeed(posts));
}
private startWebsocket() { private startWebsocket() {
const socket = new WebSocket( const socket = new WebSocket(
`wss://${MASTODON_INSTANCE}/api/v1/streaming?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}` `wss://${MASTODON_INSTANCE}/api/v1/streaming?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}`
@ -363,31 +387,11 @@ export class TimelineReader {
try { try {
const data: TimelineEvent = JSON.parse(event.data.toString()); const data: TimelineEvent = JSON.parse(event.data.toString());
if (data.event !== 'update') { if (data.event !== 'update') {
log.log('Ignoring ES event', data.event);
return; return;
} }
const post: Post = JSON.parse(data.payload); const post: Post = JSON.parse(data.payload);
await this.checkAndSavePost(post);
const hashttags: string[] = HASHTAG_FILTER.split(',');
const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
const songs = await TimelineReader.getSongInfoInPost(post);
// 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 (songs.length === 0 && found_tags.length === 0) {
log.log('Ignoring post', post.url);
return;
}
await savePost(post, songs);
await TimelineReader.saveAvatar(post.account);
await TimelineReader.saveSongThumbnails(songs);
log.debug('Saved post', post.url);
const posts = await getPosts(null, null, 100);
await saveAtomFeed(createFeed(posts));
} catch (e) { } catch (e) {
log.error('error message', event, event.data, e); log.error('error message', event, event.data, e);
} }
@ -409,11 +413,42 @@ export class TimelineReader {
}; };
} }
private async loadPostsSinceLastRun() {
const now = new Date().toISOString();
let latestPost = await getPosts(null, now, 1);
log.log('Last post in DB since', now, latestPost);
let u = new URL(`https://${MASTODON_INSTANCE}/api/v1/timelines/public?local=true&limit=40`);
if (latestPost.length > 0) {
u.searchParams.append('since_id', latestPost[0].id);
}
for (let tag of HASHTAG_FILTER.split(',')) {
u.searchParams.append('q', '#' + tag);
}
const headers = {
Authorization: `Bearer ${MASTODON_ACCESS_TOKEN}`
};
const latestPosts: Post[] = await fetch(u, { headers }).then((r) => r.json());
log.info('searched posts', latestPosts);
for (const post of latestPosts) {
await this.checkAndSavePost(post);
}
}
private constructor() { private constructor() {
log.log('Constructing timeline object');
this.startWebsocket(); this.startWebsocket();
this.loadPostsSinceLastRun()
.then((_) => {
log.info('loaded posts since last run');
})
.catch((e) => {
log.error('cannot fetch latest posts', e);
});
} }
public static init() { public static init() {
log.log('Timeline object init');
if (this._instance === undefined) { if (this._instance === undefined) {
this._instance = new TimelineReader(); this._instance = new TimelineReader();
} }

7
src/routes/+layout.svelte
View File

@ -1,6 +1,11 @@
<script lang="ts"> <script lang="ts">
import FooterComponent from '$lib/components/FooterComponent.svelte'; import FooterComponent from '$lib/components/FooterComponent.svelte';
import { SvelteToast } from '@zerodevx/svelte-toast'; import { SvelteToast } from '@zerodevx/svelte-toast';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
const options = { const options = {
pausable: true, pausable: true,
@ -8,7 +13,7 @@
}; };
</script> </script>
<slot /> {@render children?.()}
<SvelteToast {options} /> <SvelteToast {options} />
<div class="footer"> <div class="footer">
<FooterComponent /> <FooterComponent />

42
src/routes/+page.svelte
View File

@ -12,7 +12,12 @@
import { cubicInOut } from 'svelte/easing'; import { cubicInOut } from 'svelte/easing';
import { errorToast } from '$lib/errorToast'; import { errorToast } from '$lib/errorToast';
export let data: PageData; interface Props {
data: PageData;
}
let { data = $bindable() }: Props = $props();
let posts: Post[] = $state(data.posts);
interface FetchOptions { interface FetchOptions {
since?: string; since?: string;
@ -26,8 +31,8 @@
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL); const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
let interval: ReturnType<typeof setTimeout> | null = null; let interval: ReturnType<typeof setTimeout> | null = null;
let moreOlderPostsAvailable = true; let moreOlderPostsAvailable = $state(true);
let loadingOlderPosts = false; let loadingOlderPosts = $state(false);
// Needed, so that edgeFly() can do its thing: // 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 // To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
@ -40,11 +45,11 @@
*/ */
function edgeFly(node: Element, opts: EdgeFlyParams) { function edgeFly(node: Element, opts: EdgeFlyParams) {
const createdAt = new Date(opts.created_at).getTime(); const createdAt = new Date(opts.created_at).getTime();
const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt); const diffNewest = Math.abs(new Date(posts[0].created_at).getTime() - createdAt);
const oldest = const oldest =
oldestBeforeLastFetch !== null oldestBeforeLastFetch !== null
? oldestBeforeLastFetch ? oldestBeforeLastFetch
: new Date(data.posts[data.posts.length - 1].created_at).getTime(); : new Date(posts[posts.length - 1].created_at).getTime();
const diffOldest = Math.abs(oldest - createdAt); const diffOldest = Math.abs(oldest - createdAt);
const fromTop = diffNewest <= diffOldest; const fromTop = diffNewest <= diffOldest;
@ -79,15 +84,15 @@
function refresh() { function refresh() {
let filter: FetchOptions = {}; let filter: FetchOptions = {};
if (data.posts.length > 0) { if (posts.length > 0) {
filter = { since: data.posts[0].created_at }; filter = { since: posts[0].created_at };
} }
fetchPosts(filter) fetchPosts(filter)
.then((resp) => { .then((resp) => {
if (resp.length > 0) { if (resp.length > 0) {
// Prepend new posts, filter dupes // Prepend new posts, filter dupes
// There shouldn't be any duplicates, but better be safe than sorry // There shouldn't be any duplicates, but better be safe than sorry
data.posts = filterDuplicates(resp.concat(data.posts)); posts = filterDuplicates(resp.concat(posts));
} }
}) })
.catch((e: Error) => { .catch((e: Error) => {
@ -96,8 +101,9 @@
} }
onMount(async () => { onMount(async () => {
if (data.posts.length > 0) { posts = data.posts;
oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime(); if (posts.length > 0) {
oldestBeforeLastFetch = new Date(posts[posts.length - 1].created_at).getTime();
} }
interval = setInterval(refresh, refreshInterval); interval = setInterval(refresh, refreshInterval);
@ -121,8 +127,8 @@
function loadOlderPosts() { function loadOlderPosts() {
loadingOlderPosts = true; loadingOlderPosts = true;
const filter: FetchOptions = { count: 20 }; const filter: FetchOptions = { count: 20 };
if (data.posts.length > 0) { if (posts.length > 0) {
const before = data.posts[data.posts.length - 1].created_at; const before = posts[posts.length - 1].created_at;
filter.before = before; filter.before = before;
oldestBeforeLastFetch = new Date(before).getTime(); oldestBeforeLastFetch = new Date(before).getTime();
} }
@ -132,7 +138,7 @@
if (resp.length > 0) { if (resp.length > 0) {
// Append old posts, filter dupes // Append old posts, filter dupes
// There shouldn't be any duplicates, but better be safe than sorry // There shouldn't be any duplicates, but better be safe than sorry
data.posts = filterDuplicates(data.posts.concat(resp)); posts = filterDuplicates(posts.concat(resp));
// If we got less than we expected, there are no older posts available // If we got less than we expected, there are no older posts available
moreOlderPostsAvailable = resp.length >= (filter.count ?? 20); moreOlderPostsAvailable = resp.length >= (filter.count ?? 20);
} else { } else {
@ -152,12 +158,12 @@
</svelte:head> </svelte:head>
<h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2> <h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
<div class="wrapper"> <div class="wrapper">
<div /> <div></div>
<div class="posts"> <div class="posts">
{#if data.posts.length === 0} {#if posts.length === 0}
Sorry, no posts recommending music have been found yet Sorry, no posts recommending music have been found yet
{/if} {/if}
{#each data.posts as post (post.url)} {#each posts as post (post.url)}
<div <div
class="post" class="post"
transition:edgeFly|global={{ transition:edgeFly|global={{
@ -171,12 +177,12 @@
</div> </div>
{/each} {/each}
<LoadMoreComponent <LoadMoreComponent
on:loadOlderPosts={loadOlderPosts} {loadOlderPosts}
moreAvailable={moreOlderPostsAvailable} moreAvailable={moreOlderPostsAvailable}
isLoading={loadingOlderPosts} isLoading={loadingOlderPosts}
/> />
</div> </div>
<div /> <div></div>
</div> </div>
<style> <style>