From fd0b3d74248a7e1da3719790b7c50ca79801d8e0 Mon Sep 17 00:00:00 2001
From: Nato Boram <NatoBoram@users.noreply.github.com>
Date: Sun, 14 Jan 2024 23:30:01 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20a=20rotating=20tagline=20comp?=
 =?UTF-8?q?onent=20(#155)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .dockerignore                  |  1 -
 Dockerfile                     |  1 +
 src/lib/SiteSidebar.svelte     |  2 +-
 src/lib/Taglines.svelte        | 37 ++++++++++++++++++++++++++++++++++
 src/routes/[site]/+page.svelte | 12 ++++-------
 5 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/Taglines.svelte

diff --git a/.dockerignore b/.dockerignore
index 1b0f3dd..7f8cd81 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -4,7 +4,6 @@
 .env.*
 .eslintignore
 .eslintrc.cjs
-.git
 .github
 .gitignore
 .markdownlint.yaml
diff --git a/Dockerfile b/Dockerfile
index 1af6bff..d3a1395 100644
--- a/Dockerfile
+++ b/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
 
diff --git a/src/lib/SiteSidebar.svelte b/src/lib/SiteSidebar.svelte
index 2bf3e70..b16ee4f 100644
--- a/src/lib/SiteSidebar.svelte
+++ b/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>
diff --git a/src/lib/Taglines.svelte b/src/lib/Taglines.svelte
new file mode 100644
index 0000000..853dc4b
--- /dev/null
+++ b/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}
diff --git a/src/routes/[site]/+page.svelte b/src/routes/[site]/+page.svelte
index d94bdae..b1ddff1 100644
--- a/src/routes/[site]/+page.svelte
+++ b/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 -->