21 implement next and previous pages links (#26)

* cards added

* type fix

* partial content fix

* styles added

* styles correction

* trailing slash

* Configure dark mode

---------

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

Author: StanG4313

components/ep/layout/SurroundDocCard.vue

@@ -0,0 +1,57 @@
+<!--
+  ~ 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.
+  -->
+
+<script lang="ts">
+import { ParsedContent } from '@nuxt/content/dist/runtime/types'
+export default {
+  name: 'EpLayoutSurroundDocCard'
+}
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  doc: ParsedContent
+  direction: 'before' | 'after'
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="doc._path"
+    class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+  >
+    <div>
+      <div v-if="direction === 'before'" class="mb-2">
+        <span
+          class="bg-secondary-100 text-gray-800 font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
+        >
+          <Icon name="ic:sharp-arrow-back-ios" class="leading-4 mb-1" />Previous
+          <!--TODO: shink flexbox -->
+        </span>
+      </div>
+      <div v-else class="mb-2">
+        <span
+          class="bg-secondary-100 text-gray-800 font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
+          >Next
+
+          <Icon name="ic:sharp-arrow-forward-ios" class="leading-4 mb-1" />
+        </span>
+      </div>
+      <h4 class="text-xl font-bold">{{ doc.title }}</h4>
+      <p>{{ doc.description }}</p>
+    </div>
+  </NuxtLink>
+</template>

pages/[...slug].vue

@@ -21,6 +21,20 @@
       <article class="mb-10">
         <ContentRenderer v-if="doc && doc._type === 'markdown'" :value="doc">
           <ContentRendererMarkdown :value="doc" class="gevamu-prose" />
+          <nav
+            class="justify-center grid sm:grid-cols-2 gap-8 items-start mt-32"
+          >
+            <EpLayoutSurroundDocCard
+              v-if="doc.before"
+              :doc="doc.before"
+              direction="before"
+            />
+            <EpLayoutSurroundDocCard
+              v-if="doc.after"
+              :doc="doc.after"
+              direction="after"
+            />
+          </nav>
         </ContentRenderer>
         <div v-else-if="doc" class="gevamu-prose w-screen">
           <h1>{{ doc._dir.title }} pages</h1>
@@ -33,16 +47,44 @@
 </template>
 
 <script lang="ts">
+import {
+  ParsedContent,
+  MarkdownParsedContent
+} from '@nuxt/content/dist/runtime/types'
+
+// TODO: check how to use native type instead of DocParsedContent
+interface DocParsedContent extends MarkdownParsedContent {
+  _dir: { title: string }
+}
+function removeTrailingSlash(path: string) {
+  if (path.endsWith('/')) {
+    return path.slice(0, -1)
+  }
+  return path
+}
 export default defineComponent({
   name: 'ContentPage',
-  async setup() {
+  setup() {
     definePageMeta({
       layout: 'docs'
     })
     const route = useRoute()
     const toc = useToc()
-    const { data: doc } = await useAsyncData('page-data' + route.path, () => {
-      return queryContent(route.path).findOne()
+    const { data: doc } = useAsyncData('page-data' + route.path, async () => {
+      const docPromise = queryContent<DocParsedContent>(route.path).findOne()
+      const surroundPromise = queryContent()
+        .only(['_path', 'title', 'description', '_partial'])
+        .where({ _partial: false })
+        .findSurround(removeTrailingSlash(route.path), {
+          before: 1,
+          after: 1
+        })
+      const [doc, surround] = await Promise.all([docPromise, surroundPromise])
+      return {
+        ...doc,
+        before: surround[0] as ParsedContent,
+        after: surround[1] as ParsedContent
+      }
     })
     toc.value = doc.value?.body?.toc ?? null
 

tailwind.config.js

@@ -20,6 +20,7 @@ const defaultTheme = require('tailwindcss/defaultTheme') // eslint-disable-line
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {