feat: add CTA / sidebar

package.json

@@ -39,6 +39,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@fontsource-variable/nunito": "^5.1.0",
 		"@fontsource/hind-vadodara": "^5.1.0",
 		"@sveltejs/adapter-node": "^5.2.2",
 		"clsx": "^2.1.1",

src/lib/components/custom/BottomLinks.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { Button } from '@/components/ui/button';
+
+	let { class: className = '' } = $props();
+
+	const links = [
+		{ label: 'Donate', href: 'https://opencollective.com/mwmbl' },
+		{ label: 'Source Code', href: 'https://github.com/mwmbl' },
+		{ label: 'Book', href: 'https://book.mwmbl.org/' },
+		{ label: 'Blog', href: 'https://blog.mwmbl.org/' },
+		{ label: 'YouTube', href: 'https://www.youtube.com/@mwmbl' }
+	];
+</script>
+
+<section class="mt-2 flex flex-col gap-1">
+	<div class="flex flex-row items-center text-sm font-medium text-unemphasized-2 {className}">
+		{#each links as link}
+			<Button
+				variant="link"
+				href={link.href}
+				class="h-fit px-0 py-0 text-sm font-medium text-unemphasized-2"
+				target="_blank"
+			>
+				{link.label}
+			</Button>
+			{#if links.indexOf(link) < links.length - 1}
+				<span class="px-1">•</span>
+			{/if}
+		{/each}
+	</div>
+	<p class="flex flex-row text-sm text-unemphasized-2 {className}">
+		© Mwmbl 2024, under the AGPL-3.0 license
+	</p>
+</section>

src/lib/components/custom/CTA.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Button } from '@/components/ui/button';
+	import RiDiscordFill from '~icons/ri/discord-fill';
+	import PhMatrixLogoBold from '~icons/ph/matrix-logo-bold';
+</script>
+
+<div
+	class="rounded-2xl border-2 border-black border-opacity-25 bg-opacity-25 bg-brand-gradient p-5"
+>
+	<h2 class="font-display mb-3 text-xl font-extrabold">Join the Mwmbl community</h2>
+	<p class="text-unemphasized-2 dark:text-white/70">
+		Mwmbl is powered by you – our community. We're a friendly bunch and you can find us on Matrix
+		and Discord.
+	</p>
+	<p class="mt-1 font-semibold text-unemphasized-2 dark:text-white/70">Join the community now!</p>
+	<div class="mt-3 flex flex-row gap-3">
+		<Button href="https://matrix.to/#/#mwmbl:matrix.org" target="_blank">
+			<PhMatrixLogoBold class="mr-2" />
+			Matrix
+		</Button>
+		<Button
+			href="https://discord.gg/2BGSUYFdkD"
+			class="bg-primary/15 text-black hover:bg-primary/25 dark:text-white"
+			target="_blank"
+		>
+			<RiDiscordFill class="mr-2" />
+			Discord
+		</Button>
+	</div>
+</div>

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import '@fontsource/hind-vadodara/500.css';
 	import '@fontsource/hind-vadodara/600.css';
 	import '@fontsource/hind-vadodara/700.css';
+	import '@fontsource-variable/nunito';
 
 	import { ModeWatcher } from 'mode-watcher';
 </script>

src/routes/search/+page.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
 	import { Button } from '@/components/ui/button';
 	import * as Popover from '@/components/ui/popover';
-	import * as Sheet from '@/components/ui/sheet';
 
 	import RiEqualizer2Line from '~icons/ri/equalizer-2-line';
-	import RiUserLine from '~icons/ri/user-line';
-	import RiSearchLine from '~icons/ri/search-line';
-	import RiImage2Line from '~icons/ri/image-2-line';
 	import RiLinksLine from '~icons/ri/links-line';
 
 	import Search from '@/components/custom/Search.svelte';
 	import SearchResult from '@/components/custom/SearchResult.svelte';
 	import Options from '@/components/custom/Options.svelte';
 	import MobileMenu from '@/components/custom/MobileMenu.svelte';
 	import SignInButton from '@/components/custom/SignInButton.svelte';
+	import Cta from '@/components/custom/CTA.svelte';
+	import BottomLinks from '@/components/custom/BottomLinks.svelte';
 
 	let { data } = $props();
 </script>
@@ -64,13 +62,17 @@
 	</header>
 	<hr class="lg:col-span-3 lg:row-start-3" />
 
-	<main class="contents">
-		<div class="flex w-full flex-col gap-4 lg:col-start-2 lg:col-end-2">
-			{#each data.results as result}
-				<SearchResult {result} />
-			{/each}
-		</div>
+	<main class="flex w-full flex-col gap-4 lg:col-start-2 lg:col-end-2">
+		{#each data.results as result}
+			<SearchResult {result} />
+		{/each}
 	</main>
+
+	<section class="lg:col-start-3 lg:col-end-3">
+		<hr class="mb-6 mt-3 lg:hidden" />
+		<Cta />
+		<BottomLinks class="lg:justify-end" />
+	</section>
 </div>
 
 <style>

tailwind.config.ts

@@ -1,4 +1,3 @@
-import { fontFamily } from 'tailwindcss/defaultTheme';
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
@@ -60,10 +59,12 @@ const config: Config = {
 				sm: 'calc(var(--radius) - 4px)'
 			},
 			fontFamily: {
-				sans: ['Hind Vadodara', 'sans-serif']
+				sans: ['Hind Vadodara', 'sans-serif'],
+				display: ['Nunito Variable', 'sans-serif']
 			},
 			backgroundImage: {
-				'brand-gradient': 'linear-gradient(in oklab 130deg, #FFD83A, #DD8AFF, #74C3FF)'
+				'brand-gradient':
+					'linear-gradient(in oklab 130deg, hsla(48, 100%, 61%, var(--tw-bg-opacity)), hsla(283, 100%, 77%, var(--tw-bg-opacity)), hsla(206, 100%, 73%, var(--tw-bg-opacity)))'
 			}
 		}
 	}