Merge pull request #4 from frorong/feature/convenience

Add scrollToTopButton and openGraph
frorong · Mar 28, 2024 · 26ccbaf · 26ccbaf
2 parents 69548fd + 25b4a49
commit 26ccbaf
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 18 deletions.
diff --git a/src/components/scrollToTopButton.svelte b/src/components/scrollToTopButton.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  function scrollToTop() {
+    const scrollStep =
+      -window.scrollY / (500 / 15)
+    const scrollInterval = setInterval(
+      function () {
+        if (window.scrollY !== 0)
+          window.scrollBy(0, scrollStep)
+        else
+          clearInterval(scrollInterval)
+      },
+      15
+    )
+  }
+</script>
+
+<button
+  class="fixed bottom-16 right-16 rounded-full bg-blue-500 px-4 py-2 text-white shadow-md transition duration-300 hover:bg-blue-600"
+  on:click="{scrollToTop}"
+>
+  <svg
+    class="h-6 w-6"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M5 10l7-7m0 0l7 7m-7-7v18"
+    ></path>
+  </svg>
+</button>
diff --git a/src/lib/images/.gitkeep b/src/lib/images/.gitkeep
diff --git a/src/lib/images/github.svg b/src/lib/images/github.svg
diff --git a/src/lib/images/openGraph.png b/src/lib/images/openGraph.png
diff --git a/src/lib/images/svelte-logo.svg b/src/lib/images/svelte-logo.svg
diff --git a/src/lib/images/svelte-welcome.png b/src/lib/images/svelte-welcome.png
diff --git a/src/lib/images/svelte-welcome.webp b/src/lib/images/svelte-welcome.webp
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,8 +2,25 @@
   import '../app.postcss'
   import '../prism.css'
   import Header from '@components/header.svelte'
+  import ScrollToTopButton from '@components/scrollToTopButton.svelte'
 </script>
 
+<svelte:head>
+  <title>Frorong's history</title>
+  <meta
+    property="og:type"
+    content="article"
+  />
+  <meta
+    property="og:title"
+    content="Frorong's history"
+  />
+  <meta
+    property="og:image"
+    content="{'/lib/images/openGraph.png'}"
+  />
+</svelte:head>
+
 <div
   class="w-full p-4 md:p-6 lg:p-8 xl:p-12"
 >
@@ -12,5 +29,6 @@
     class="flex w-full flex-col items-center"
   >
     <slot />
+    <ScrollToTopButton />
   </main>
 </div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1 +1 @@
-export const prerender = true
+export const prerender = false