Contacts customization added (#23)

* Contacts customization added
* specific contacts substitute default contacts
* Document contact us section customization feature
* code snippet fix

---------

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

Author: StanG4313

app.config.ts

@@ -24,6 +24,11 @@ interface SocialLinkConfigOptions {
   disabled?: boolean
 }
 
+interface ContactConfigOptions {
+  type: 'email' | 'phone'
+  contact: string
+}
+
 interface ExactproDocsOptions {
   /**
    * Title of the documentation.
@@ -72,6 +77,7 @@ interface ExactproDocsOptions {
     linkedin?: SocialLinkConfigOptions
     youtube?: SocialLinkConfigOptions
   }
+  contacts: ContactConfigOptions[]
 }
 
 declare module 'nuxt/schema' {

components/ep/layout/Footer.vue

@@ -30,47 +30,11 @@
           <span>Build Software to Test Software</span>
         </div>
 
+        <!-- Contact Us -->
         <div class="flex flex-col items-center md:items-start">
           <h2 class="e-footer__h2">Contact Us</h2>
           <hr class="e-footer__hr" />
-          <ul class="flex flex-col justify-center m-1">
-            <li>
-              <a href="mailto:[email protected]"
-                ><Icon
-                  name="heroicons:envelope"
-                  size="1.5em"
-                  class="inline-block mr-3"
-                />[email protected]</a
-              >
-            </li>
-            <li>
-              <a href="mailto:[email protected]"
-                ><Icon
-                  name="heroicons:envelope"
-                  size="1.5em"
-                  class="inline-block mr-3"
-                />[email protected]</a
-              >
-            </li>
-            <li>
-              <a href="tel:+4402033191644"
-                ><Icon
-                  name="heroicons:phone"
-                  size="1.5em"
-                  class="inline-block mr-3"
-                />+44 (0) 20 3319 1644</a
-              >
-            </li>
-            <li>
-              <a href="tel:+16463403000"
-                ><Icon
-                  name="heroicons:phone"
-                  size="1.5em"
-                  class="inline-block mr-3"
-                />+1 (646) 340 3000</a
-              >
-            </li>
-          </ul>
+          <EpLayoutFooterContacts class="pt-2" />
         </div>
 
         <div class="flex flex-col items-center md:items-start">

components/ep/layout/FooterContacts.vue

@@ -0,0 +1,70 @@
+<!--
+  ~ 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 setup lang="ts">
+const config = useAppConfig()
+let contacts = config.exactproDocs.contacts
+type Contact = (typeof config.exactproDocs.contacts)[number]
+
+if (!contacts?.length) {
+  contacts = [
+    {
+      contact: '[email protected]',
+      type: 'email'
+    },
+    {
+      contact: '[email protected]',
+      type: 'email'
+    },
+    {
+      contact: '+4402033191644',
+      type: 'phone'
+    },
+    {
+      contact: '+16463403000',
+      type: 'phone'
+    }
+  ]
+}
+
+function getContactIcon(contact: Contact) {
+  if (contact.type === 'email') {
+    return 'heroicons:envelope'
+  }
+  return 'heroicons:phone'
+}
+
+function getContactLink(contact: Contact) {
+  if (contact.type === 'email') {
+    return `mailto:${contact.contact}`
+  }
+  return `tel:${contact.contact}`
+}
+</script>
+
+<template>
+  <ul class="flex flex-col justify-center m-1">
+    <li v-for="(contact, index) in contacts" :key="index">
+      <a :href="getContactLink(contact)"
+        ><Icon
+          :name="getContactIcon(contact)"
+          size="1.5em"
+          class="inline-block mr-3"
+        />{{ contact.contact }}</a
+      >
+    </li>
+  </ul>
+</template>

docs/app.config.ts

@@ -27,6 +27,7 @@ export default defineAppConfig({
         url: 'https://github.com/exactpro/docs-toolkit'
       }
     },
+    contacts: [],
     seo: {
       robots: [{ UserAgent: '*' }, { Allow: '/' }],
       sitemap: {

docs/content/3.customization.md

@@ -61,6 +61,32 @@ export default defineAppConfig({
 })
 ```
 
+### Contact us section
+
+Toolkit has the set of default contacts. 
+If you need to use project-specific contacts, specify items with a following syntax to `contacts` array at `app.config.ts` file of your docs website:
+
+```ts
+export default defineAppConfig({
+  exactproDocs: {
+    contacts: [
+      {
+        contact: '[email protected]',
+        type: 'email'
+      },
+      {
+        contact: '+4402033191644',
+        type: 'phone'
+      }
+    ]
+  }
+})
+```
+
+::notice{info}
+Default contacts will be hidden if you add any project-specific ones
+::
+
 ## Configuring a base url 
 
 This option might be required when hosting your website on [GitHub Pages](https://pages.github.com/) or [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/).