From c572ae1d6274daca941c6fd6acf8c59e0f817a5f Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 6 Apr 2024 00:24:13 -0700
Subject: [PATCH] feat: add back to top button on /blog

---
 src/lib/components/BackToTop.svelte | 29 +++++++++++++++++++++++++++++
 src/routes/+layout.svelte           |  2 +-
 src/routes/blog/+layout.svelte      |  2 ++
 src/routes/blog/+page.svelte        |  2 +-
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/BackToTop.svelte

diff --git a/src/lib/components/BackToTop.svelte b/src/lib/components/BackToTop.svelte
new file mode 100644
index 0000000..59d8e1b
--- /dev/null
+++ b/src/lib/components/BackToTop.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import Button from './ui/button/button.svelte';
+	import { ChevronUp } from 'svelte-radix';
+
+	let showButton = false;
+
+	function handleScroll() {
+		const threshold = 400;
+
+		showButton = window.scrollY > threshold;
+	}
+
+	function scrollToTop() {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		});
+	}
+</script>
+
+<svelte:window on:scroll={handleScroll} />
+
+{#if showButton}
+	<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
+		<Button size="icon" on:click={scrollToTop}><ChevronUp /></Button>
+	</div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d81253c..ce217b3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '$lib/app.css';
+	import '$lib/app.pcss';
 	import Navbar from '$lib/components/Navbar/Navbar.svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import '@fontsource/geist-sans/latin.css';
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
index 9b3241c..4e5ab24 100644
--- a/src/routes/blog/+layout.svelte
+++ b/src/routes/blog/+layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+	import BackToTop from '$lib/components/BackToTop.svelte';
 	import '$lib/styles/katex.css';
 	import '$lib/styles/markdown.css';
 </script>
 
+<BackToTop />
 <slot />
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index c19719d..d5865f2 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -43,7 +43,7 @@
 		{#if loaded}
 			<Coredump width="100%" height="auto" transition="vertical" />
 			<p
-				class="text-lg sm:text-xl md:text-2xl text-muted-foreground font-mono"
+				class="text-lg sm:text-xl md:text-2xl text-muted-foreground font-mono text-center sm:text-left"
 				in:fly={{ duration: 300, y: -50, delay: 200 }}
 			>
 				my blog on computer science, math, games, art, and more.