From 91faeb33b7c3fbb10247915976385fa113e41e2e Mon Sep 17 00:00:00 2001
From: Chang Jun <52chinaweb@gmail.com>
Date: Sun, 15 Oct 2023 12:56:58 +0800
Subject: [PATCH 1/2] feat: add go back btn

---
 app.config.ts       | 1 +
 layouts/content.vue | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/app.config.ts b/app.config.ts
index e5156d9..2e411cc 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -13,6 +13,7 @@ export default defineAppConfig({
       variant: {
         solid: 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 c-bg-primary c-text-primary shadow hover:c-bg-primary/90',
         ghost: 'focus:outline-nones hover:bg-zinc-100 dark:hover:bg-zinc-800',
+        outline: 'border-1 c-border-base c-text-base ring-0',
       },
     },
 
diff --git a/layouts/content.vue b/layouts/content.vue
index 0530b27..f09dc01 100644
--- a/layouts/content.vue
+++ b/layouts/content.vue
@@ -6,6 +6,10 @@
       <PostHeader />
       <main class="prose prose-slate dark:prose-invert tracking-wide">
         <slot />
+
+        <UButton to="/blog" variant="outline" class="mt-6 not-prose">
+          Go Back
+        </UButton>
       </main>
       <Footer />
     </main>

From 5246ee180753570110f8591d04d59e30000f8139 Mon Sep 17 00:00:00 2001
From: Chang Jun <52chinaweb@gmail.com>
Date: Sun, 15 Oct 2023 13:37:15 +0800
Subject: [PATCH 2/2] feat: add back top btn

---
 components/Post/PostBackTop.client.vue | 21 +++++++++++++++++++++
 layouts/content.vue                    |  1 +
 2 files changed, 22 insertions(+)
 create mode 100644 components/Post/PostBackTop.client.vue

diff --git a/components/Post/PostBackTop.client.vue b/components/Post/PostBackTop.client.vue
new file mode 100644
index 0000000..551da82
--- /dev/null
+++ b/components/Post/PostBackTop.client.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core'
+
+const show = computed(() => {
+  const { y } = useWindowScroll()
+  return y.value >= 300
+})
+
+function goTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+</script>
+
+<template>
+  <div :class="show ? 'opacity-90' : 'opacity-0'" class="fixed right-6 bottom-4 transition-all duration-400 ease-in-out" @click.top="goTop()">
+    <UButton icon="i-heroicons-arrow-up-circle" variant="ghost" />
+  </div>
+</template>
diff --git a/layouts/content.vue b/layouts/content.vue
index f09dc01..500c4f4 100644
--- a/layouts/content.vue
+++ b/layouts/content.vue
@@ -12,6 +12,7 @@
         </UButton>
       </main>
       <Footer />
+      <PostBackTop />
     </main>
   </AppLayout>
 </template>