[DO-525] Implement breadcrumbs (#38)

* define breadcrumbs and call in slug

* create an array of parents paths for current pg

* create promises array with path and titles

* add v-for to slug , and use Nuxtlink



* replace div with span

* adjust spacing and add a /

* added if statement  for when in home page



* remove button

* remove slash

* improve formatting

* remove variable route

* update names

* update loop for creating directory

* return breadcrumbs instead of promises

* change name to pathDirectory and update comments

* fix error , unable to access docs in local

* underline and text color for breadcrumbs

* change from getBreadCrumbs to useBreadCrumbs

* remove last crumb to show only previous paths


* removed utils file, created composables file

* display current page, separator and lintfix

* adjust spacing

* add the home icon to slug

* use icon separator, default size for home

* Update composables/useBreadcrumbs.ts

Co-authored-by: Nikolai Dorofeev <[email protected]>

* assign variable to useAsyncData

* add template tag to separate v-for and v-if

* convert breadcrumbs into synchronous function

* remove first element of path array

* display crumbs

* add icon border , adjust spacing

* fix type check error

* add border with hover in color accent

* border color black

* border to nuxt link instead add bottom spacing

* border color gray 600

* Apply suggestions from code review

improve home icon's border , transform data into new variables

Co-authored-by: Nikolai Dorofeev <[email protected]>

* fix error _path doesnot exist

* create breadcrumbs component

* Add breadcrumbs component to slug

* pass a prop to the component

* add a required=true

* remove unnecessary variables

* lint fix, remove comments

* remove unnecessary div

* Apply suggestions from code review

remove comments , add v-if statement to the Breadcrumbs component when assigning prop

Co-authored-by: Nikolai Dorofeev <[email protected]>

* update to w to new variable name

* remove v-if from vue comp, as v-if is in props

* fix bug by removing all empty strings

* Update composables/breadcrumbs.ts

Co-authored-by: Nikolai Dorofeev <[email protected]>

---------

Co-authored-by: Nikolai Dorofeev <[email protected]>

Author: Hdd87

components/ep/layout/Breadcrumbs.vue

@@ -0,0 +1,55 @@
+<!--
+  ~ Copyright 2023 Exactpro (Exactpro Systems Limited)
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<template>
+  <nav class="mb-4 flex flex-wrap items-center gap-x-2">
+    <NuxtLink
+      class="border border-solid rounded text-gray-600 border-gray-600 hover:border-accent-600 hover:text-accent-600 transition-colors p-1 inline-flex"
+      to="/"
+    >
+      <Icon name="heroicons:home-20-solid" size="1.2em" />
+    </NuxtLink>
+    <Icon name="heroicons:chevron-right" />
+
+    <template v-for="(crumb, index) in breadcrumbs" :key="crumb._path">
+      <template v-if="index < breadcrumbs.length - 1">
+        <NuxtLink class="underline text-accent-600" :to="crumb.path">
+          {{ crumb.title }}
+        </NuxtLink>
+        <Icon name="heroicons:chevron-right" />
+      </template>
+      <span v-else>
+        {{ crumb.title }}
+      </span>
+    </template>
+  </nav>
+</template>
+
+<script lang="ts">
+export interface Breadcrumb {
+  path: string
+  title: string
+}
+
+export default {
+  props: {
+    breadcrumbs: {
+      type: Array as () => Breadcrumb[],
+      required: true
+    }
+  }
+}
+</script>

composables/breadcrumbs.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 Exactpro (Exactpro Systems Limited)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { withTrailingSlash } from 'ufo'
+
+export const useBreadcrumbs = () => {
+  const currentPath = useRoute().path
+
+  const currentPathSections = currentPath.split('/').filter((el) => !!el)
+
+  const pathDirectory: string[] = []
+
+  // fill the pathDirectory with all paths
+  let pathToAdd = ''
+  if (currentPath !== '/') {
+    for (let i = 0; i < currentPathSections?.length; i++) {
+      pathToAdd = withTrailingSlash(pathToAdd + currentPathSections[i])
+      pathDirectory.push(pathToAdd)
+    }
+  }
+
+  //  extract titles and its path and create breadcrumbs object
+  const breadcrumbs = useAsyncData(
+    () => {
+      return Promise.all(
+        pathDirectory.map((path) =>
+          queryContent(path).only(['_path', 'title']).findOne()
+        )
+      )
+    },
+    {
+      transform: (data) =>
+        data.map((item) => ({
+          path: item._path,
+          title: item.title
+        }))
+    }
+  )
+  return breadcrumbs
+}

pages/[...slug].vue

@@ -18,6 +18,7 @@
   <EpPageMeta :doc="doc" />
   <NuxtLayout>
     <div class="px-4 md:pr-6 print:px-8 mt-10 mb-96 print:mb-0">
+      <EpLayoutBreadcrumbs v-if="breadcrumbs" :breadcrumbs="breadcrumbs" />
       <article class="mb-10">
         <ContentRenderer v-if="doc && doc._type === 'markdown'" :value="doc">
           <ContentRendererMarkdown :value="doc" class="gevamu-prose" />
@@ -65,6 +66,7 @@ export default defineComponent({
     definePageMeta({
       layout: 'docs'
     })
+
     const route = useRoute()
 
     const { data: doc } = useAsyncData('page-data' + route.path, async () => {
@@ -86,8 +88,11 @@ export default defineComponent({
 
     useTocUpdate(doc)
 
+    const { data: breadcrumbs } = useBreadcrumbs()
+
     return {
-      doc
+      doc,
+      breadcrumbs
     }
   }
 })