fix(blogs): Breadcrumb & TreeView: supports dir as an article for art…

…icle/index.md
murchinroom · Dec 21, 2024 · ae04c12 · ae04c12
1 parent 9a110f9
commit ae04c12
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/components/blogs/Breadcrumb.vue b/components/blogs/Breadcrumb.vue
@@ -8,7 +8,7 @@
           <span class="max-md:hidden flex items-center">
             <span v-if="index > 0" class="ml-0.5 mr-2">></span>
             <span @click="toggleTreeView(item._path)" :class="{'truncate max-w-xs mx-1 font-bold text-black cursor-default': item._path === $route.path, 'cursor-pointer text-gray-600 hover:text-gray-900 hover:underline': item._path !== $route.path}">
-              <Icon :name="item.children ? 'bx:bxs-folder-open' : 'bx:bxs-file'" class="mx-0.5 mb-1 inline-block align-middle"/>
+              <Icon :name="isDir(item) ? 'bx:bxs-folder-open' : 'bx:bxs-file'" class="mx-0.5 mb-1 inline-block align-middle"/>
               {{ item.title }}
             </span>
           </span>
@@ -57,6 +57,18 @@ export default defineComponent({
       });
     };
 
+    const isDir = (item) => {
+      if (item.children && item.children.length > 1) {
+        return true;
+      }
+      // articleName/index.md: treat the dir as the article
+      if (item.children && item.children[0]._path === item._path) {
+        return false;
+      }
+      return item.children;
+    }
+
+
     const toggleTreeView = (path) => {
       expandPath.value = path;
       showTreeView.value = !showTreeView.value;
@@ -80,7 +92,7 @@ export default defineComponent({
       buildBreadcrumbs(newNavigation);
     }, {immediate: true});
 
-    return {breadcrumbs, showTreeView, expandPath, toggleTreeView, breadcrumbContainer};
+    return {breadcrumbs, showTreeView, expandPath, isDir, toggleTreeView, breadcrumbContainer};
   }
 });
 </script>

diff --git a/components/blogs/TreeView.vue b/components/blogs/TreeView.vue
@@ -3,19 +3,19 @@
     <li v-for="item in items" :key="item._path" class="ml-4">
       <div class="flex items-center">
         <span @click="toggleOrNavigate(item)" :class="{'font-bold text-black cursor-default': item._path === $route.path, 'cursor-pointer text-gray-600 hover:text-gray-900 hover:underline': item._path !== $route.path}">
-          <Icon :name="item.children ? ((item.expanded || shouldExpand(item._path)) ? 'bx:bxs-folder-open' : 'bx:bxs-folder') : 'bx:bxs-file'" class="mr-0.5 mb-1 inline-block align-middle" />
+          <Icon :name="!isArticle(item) ? ((item.expanded || shouldExpand(item)) ? 'bx:bxs-folder-open' : 'bx:bxs-folder') : 'bx:bxs-file'" class="mr-0.5 mb-1 inline-block align-middle" />
 <!--          <span v-if="item.children" class="mr-2">{{ item.expanded || shouldExpand(item._path) ? '˅' : '˃' }}</span> &lt;!&ndash; Arrow icons &ndash;&gt;-->
           {{ item.title }}
         </span>
       </div>
-      <div v-if="item.children && (item.expanded || shouldExpand(item._path))">
+      <div v-if="item.children && (item.expanded || shouldExpand(item))">
         <BlogsTreeView :items="item.children" :expandPath="expandPath" />
       </div>
     </li>
   </ul>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -39,19 +39,29 @@ export default defineComponent({
     };
 
     const toggleOrNavigate = (item) => {
-      if (item.children) {
-        item.expanded = !item.expanded;
-      } else {
+      if (isArticle(item)) {
         navigateTo(item._path);
+      } else {
+        item.expanded = !item.expanded;
+      }
+    };
+
+    const isArticle = (item) => {
+      if (!item.children) {
+        return true;
+      }
+      if (item.children.length === 1 && item.children[0]._path === item._path) {
+        return true;
       }
+      return false;
     };
 
     // shouldExpand prevents user to fold the dir containing current article.
-    const shouldExpand = (path) => {
-      return props.expandPath.startsWith(path);
+    const shouldExpand = (item) => {
+      return !isArticle(item) && props.expandPath.startsWith(item._path);
     };
 
-    return { navigateTo, toggleOrNavigate, shouldExpand, route };
+    return { navigateTo, toggleOrNavigate, isArticle, shouldExpand, route };
   },
 
 });