✨ Add a rotating tagline component (#155)

.dockerignore

@@ -4,7 +4,6 @@
 .env.*
 .eslintignore
 .eslintrc.cjs
-.git
 .github
 .gitignore
 .markdownlint.yaml

Dockerfile

@@ -9,6 +9,7 @@ FROM base AS prod-deps
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
 
 FROM base AS build
+RUN apt update && apt install -y git && rm -rf /var/lib/apt/lists/*
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN --mount=type=secret,id=BUILD_BASE BUILD_BASE="$(cat /run/secrets/BUILD_BASE)" BUILD_ADAPTER='node' pnpm run build
 

src/lib/SiteSidebar.svelte

@@ -16,6 +16,6 @@
 	<br />
 
 	{#if site.sidebar}
-		<Prose class="mx-auto prose-a:text-primary" markdown={site.sidebar} />
+		<Prose class="prose-a:text-primary" markdown={site.sidebar} />
 	{/if}
 </aside>

src/lib/Taglines.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import TaglineSvelte from '$lib/Tagline.svelte'
+	import type { Tagline } from 'lemmy-js-client'
+	import { onMount } from 'svelte'
+	import { fly } from 'svelte/transition'
+
+	let className: string | undefined = undefined
+	export { className as class }
+
+	export let taglines: Tagline[]
+
+	// Start with a random tagline
+	let index = Math.floor(Math.random() * taglines.length)
+	$: tagline = taglines[index]
+
+	onMount(() => {
+		if (!taglines.length) return
+
+		// Get a random tagline every 10 seconds
+		const interval = setInterval(
+			() => (index = Math.floor(Math.random() * taglines.length)),
+			10_000,
+		)
+
+		return () => {
+			clearInterval(interval)
+		}
+	})
+</script>
+
+{#if tagline}
+	{#key tagline.id}
+		<div class={className} in:fly={{ duration: 300, x: 300 }}>
+			<TaglineSvelte {tagline} />
+		</div>
+	{/key}
+{/if}

src/routes/[site]/+page.svelte

@@ -2,10 +2,10 @@
 	import LimitSelector from '$lib/LimitSelector.svelte'
 	import ListingTypeSelector from '$lib/ListingTypeSelector.svelte'
 	import PaginationBar from '$lib/PaginationBar.svelte'
-	import Posts from '$lib/posts/Posts.svelte'
 	import SiteSidebar from '$lib/SiteSidebar.svelte'
 	import SortSelector from '$lib/SortSelector.svelte'
-	import Tagline from '$lib/Tagline.svelte'
+	import Taglines from '$lib/Taglines.svelte'
+	import Posts from '$lib/posts/Posts.svelte'
 	import type { PageData } from './$types.js'
 
 	export let data: PageData
@@ -47,12 +47,8 @@
 	<!-- Main content -->
 	<main class="flex flex-grow flex-col gap-4 justify-self-stretch">
 		<!-- Taglines -->
-		<div class="flex flex-col gap-4">
-			{#if data.taglines}
-				{#each data.taglines as tagline (tagline.id)}
-					<Tagline {tagline} class="base-container rounded-md" />
-				{/each}
-			{/if}
+		<div class="base-container flex flex-col gap-4 rounded-md">
+			<Taglines taglines={data.taglines} />
 		</div>
 
 		<!-- Post form -->