Merge pull request #6 from ChangJun2019/dev

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',
       },
     },
 

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>

layouts/content.vue

@@ -6,8 +6,13 @@
       <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 />
+      <PostBackTop />
     </main>
   </AppLayout>
 </template>