[DO-599] prev/next buttons description customization (#54)

* Define config for cards description

* Implement hidden option

* Nuxt config lintfix

* Implement display limited

* Eslint ignore line

* Fix schema declaration

* Add docs

* Remove unneded lines

* Update docs/content/3.customization.md

`limit` -> `limited`

Co-authored-by: Stanislav Glushkov <[email protected]>

---------

Co-authored-by: Stanislav Glushkov <[email protected]>

Author: d0rich

app.config.ts

@@ -17,6 +17,12 @@
 export default defineAppConfig({
   exactproDocs: {
     title: 'Exactpro Documentation',
+    prevNextCards: {
+      description: {
+        display: 'full',
+        limit: 2
+      }
+    },
     github: {
       branch: 'master',
       docsDir: '/'

components/ep/layout/SurroundDocCard.vue

@@ -27,6 +27,8 @@ defineProps<{
   doc: ParsedContent
   direction: 'before' | 'after'
 }>()
+
+const config = useToolkitConfig().prevNextCards!
 </script>
 
 <template>
@@ -52,7 +54,30 @@ defineProps<{
         </span>
       </div>
       <h4 class="text-xl font-bold">{{ doc.title }}</h4>
-      <p class="break-words">{{ doc.description }}</p>
+      <p
+        v-if="config.description?.display !== 'hidden'"
+        class="break-words"
+        :style="{
+          '--line-clamp':
+            config.description?.display === 'limited'
+              ? config.description?.limit
+              : 'unset'
+        }"
+        :class="{
+          'description--limited': config.description?.display === 'limited'
+        }"
+      >
+        {{ doc.description }}
+      </p>
     </div>
   </NuxtLink>
 </template>
+
+<style scoped>
+.description--limited {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp);
+}
+</style>

docs/content/3.customization.md

@@ -21,6 +21,45 @@ Set up your very own logo with an image of your choice in two ways:
 
 Set up your very own header background with an image of your choice by placing an image file named `header-bg.{some-extension}` in the `assets/theme` folder. 
 
+## Documentation body
+
+### Previous and Next buttons
+
+Each page of the documentation has buttons that allow you to navigate to the previous and next pages. These buttons are placed right after article content. 
+
+These cards are customizable in `app.config.ts` by key `exactproDocs.prevNextCards` (see below).
+
+```ts
+export default defineAppConfig({
+  exactproDocs: {
+    prevNextCards: {
+      /**
+       * Display options for the description of the page in prev/next cards
+       */
+      description: {
+        /**
+         * Choose display type for the description of the page in prev/next cards.
+         * 
+         * 'full' - display full description
+         * 'limited' - display first n lines of description
+         * 'hidden' - hide description
+         * 
+         * @default "full"
+         */
+        display: 'full',
+        /**
+         * Limit of lines for the description of the page in prev/next cards
+         * It will be used if display type is "limited"
+         * 
+         * @default 2
+         */
+        limit: 2
+      }
+    }
+  }
+})
+```
+
 ## Footer
 
 ### Social Media Links

nuxt.schema.ts

@@ -53,6 +53,36 @@ export default defineNuxtSchema({
           required: true
         }
       },
+      prevNextCards: {
+        $schema: {
+          title: 'Configuration for previous and next pages cards'
+        },
+        description: {
+          $schema: {
+            title:
+              'Display options for the description of the page in prev/next cards',
+            type: 'object'
+          },
+          display: {
+            $schema: {
+              title:
+                'Choose display type for the description of the page in prev/next cards',
+              type: 'string',
+              tsType: '"full" | "limited" | "hidden"',
+              default: 'full'
+            }
+          },
+          limit: {
+            $schema: {
+              title:
+                'Limit of lines for the description of the page in prev/next cards',
+              description: 'It will be used if display type is "limited"',
+              type: 'number',
+              default: 2
+            }
+          }
+        }
+      },
       github: {
         $schema: {
           title: 'Configuration for GitHub integration'