From 8bafcfe8d8ab63fd054c49a151909f493bb1a36f Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Mon, 26 Aug 2024 10:59:57 +0800
Subject: [PATCH] 1,540th Commit

---
 app/src/plugins/router.ts                     |  1 +
 .../(library)/navigation/outline/+page.vue    | 52 ++++++++++++++++---
 ui/src/components/hash-anchor/HashAnchor.vue  | 25 +++++++++
 ui/src/index.ts                               |  1 +
 4 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/components/hash-anchor/HashAnchor.vue

diff --git a/app/src/plugins/router.ts b/app/src/plugins/router.ts
index 8ed85669..a104e1a1 100644
--- a/app/src/plugins/router.ts
+++ b/app/src/plugins/router.ts
@@ -17,6 +17,7 @@ const router = createRouter({
     ...routes,
   ],
   scrollBehavior(to, from, savedPosition) {
+    if (to.hash) return { selector: to.hash };
     if (savedPosition) return savedPosition;
     return { top: 0 };
   },
diff --git a/app/src/routes/(backstage)/(library)/navigation/outline/+page.vue b/app/src/routes/(backstage)/(library)/navigation/outline/+page.vue
index d0ea6d97..a046f278 100644
--- a/app/src/routes/(backstage)/(library)/navigation/outline/+page.vue
+++ b/app/src/routes/(backstage)/(library)/navigation/outline/+page.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { XBreadcrumb, XButton, XOutline } from '@x/ui';
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { XBreadcrumb, XButton, XOutline, XHashAnchor } from '@x/ui';
 import { useOutline } from '@x/ui';
 
+const route = useRoute();
+
 const outline = useOutline([
   /* 0 */ { text: '1. Create a Project' },
   /* 1 */ { text: '2. Create a Collection' },
@@ -13,6 +17,10 @@ const outline = useOutline([
   /* 7 */ { text: '5. Set Roles & Permissions' },
   /* 8 */ { text: '6. Connect to the API' },
 ]);
+
+onMounted(() => {
+  if (route.hash) location.href = route.hash;
+});
 </script>
 
 <template>
@@ -23,7 +31,12 @@ const outline = useOutline([
   <div class="grid grid-cols-12 gap-2">
     <div class="col-span-9">
       <div :ref="(el) => (outline[0].el = el)" class="flex flex-col gap-3 mb-12">
-        <h2 class="text-3xl font-bold">1. Create a Project</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="create-a-project">
+          <h2 class="text-3xl font-bold">
+            1. Create a Project
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
@@ -55,7 +68,12 @@ const outline = useOutline([
       </div>
 
       <div :ref="(el) => (outline[1].el = el)" class="flex flex-col gap-3 mt-8 mb-12">
-        <h2 class="text-3xl font-bold">2. Create a Collection</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="create-a-collection">
+          <h2 class="text-3xl font-bold">
+            2. Create a Collection
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
@@ -87,7 +105,12 @@ const outline = useOutline([
       </div>
 
       <div class="flex flex-col gap-3 mt-8 mb-12">
-        <h2 :ref="(el) => (outline[2].el = el)" class="text-3xl font-bold">3. Create a Field</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="create-a-field">
+          <h2 :ref="(el) => (outline[2].el = el)" class="text-3xl font-bold">
+            3. Create a Field
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
@@ -129,7 +152,12 @@ const outline = useOutline([
       </div>
 
       <div :ref="(el) => (outline[6].el = el)" class="flex flex-col gap-3 mt-8 mb-12">
-        <h2 class="text-3xl font-bold">4. Create an Item</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="create-an-item">
+          <h2 class="text-3xl font-bold">
+            4. Create an Item
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
@@ -161,7 +189,12 @@ const outline = useOutline([
       </div>
 
       <div :ref="(el) => (outline[7].el = el)" class="flex flex-col gap-3 mt-8 mb-12">
-        <h2 class="text-3xl font-bold">5. Set Roles & Permissions</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="set-roles-&-permissions">
+          <h2 class="text-3xl font-bold">
+            5. Set Roles & Permissions
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
@@ -193,7 +226,12 @@ const outline = useOutline([
       </div>
 
       <div :ref="(el) => (outline[8].el = el)" class="flex flex-col gap-3 mt-8 mb-12">
-        <h2 class="text-3xl font-bold">6. Connect to the API</h2>
+        <XHashAnchor v-slot="{ Hashtag }" hash="connect-to-the-api">
+          <h2 class="text-3xl font-bold">
+            6. Connect to the API
+            <component :is="Hashtag"></component>
+          </h2>
+        </XHashAnchor>
 
         <div class="flex flex-col gap-3">
           <p>
diff --git a/ui/src/components/hash-anchor/HashAnchor.vue b/ui/src/components/hash-anchor/HashAnchor.vue
new file mode 100644
index 00000000..564dcf68
--- /dev/null
+++ b/ui/src/components/hash-anchor/HashAnchor.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+const props = defineProps<{
+  hash?: string;
+}>();
+
+const Hashtag = () => {
+  return h(
+    'a',
+    {
+      href: `#${props.hash}`,
+      class:
+        'absolute left-0 -ml-6 opacity-0 group-hover:opacity-100 transition-opacity text-primary-500 dark:text-primary-400 select-none',
+    },
+    '#',
+  );
+};
+</script>
+
+<template>
+  <div :id="hash" class="relative group scroll-mt-24">
+    <slot :Hashtag></slot>
+  </div>
+</template>
diff --git a/ui/src/index.ts b/ui/src/index.ts
index 49f7b620..9b696af4 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -30,6 +30,7 @@ export { default as XDropzone } from './components/dropzone/Dropzone.vue';
 export { default as XFade } from './components/fade/Fade.vue';
 export { default as XFileInput } from './components/file-input/FileInput.vue';
 export { default as XFormControl } from './components/form-control/FormControl.vue';
+export { default as XHashAnchor } from './components/hash-anchor/HashAnchor.vue';
 export { default as XHighlight } from './components/highlight/Highlight.vue';
 export { default as XInputMask } from './components/input-mask/InputMask.vue';
 export { default as XIterator } from './components/iterator/Iterator.vue';