Skip to content

Commit b6945f1

Browse files
d0richd0rich
authored
Add footer social links customization (#16)
* Make footer social links separated component * Implement customization options * [Fix] use links from config * Define icons sizes * Customize docs social links * Update docs
1 parent fbcc592 commit b6945f1

File tree

5 files changed

+181
-32
lines changed

5 files changed

+181
-32
lines changed

‎app.config.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ import type { ModuleOptions } from 'nuxt-icon'
1818
import type { DeepPartial } from './utils/DeepPartial'
1919
import type { RobotsTxtOptions } from './server/routes/robots.txt'
2020

21+
interface SocialLinkConfigOptions {
22+
url: string
23+
customIcon?: string
24+
disabled?: boolean
25+
}
26+
2127
interface ExactproDocsOptions {
2228
/**
2329
* Title of the documentation.
@@ -56,6 +62,13 @@ interface ExactproDocsOptions {
5662
content: string
5763
}[]
5864
}
65+
social?: {
66+
githhub?: SocialLinkConfigOptions
67+
facebook?: SocialLinkConfigOptions
68+
twitter?: SocialLinkConfigOptions
69+
linkedin?: SocialLinkConfigOptions
70+
youtube?: SocialLinkConfigOptions
71+
}
5972
}
6073

6174
declare module 'nuxt/schema' {
@@ -73,6 +86,23 @@ export default defineAppConfig({
7386
repoLink: undefined as string | undefined,
7487
branch: 'master',
7588
docsDir: '/'
89+
},
90+
social: {
91+
githhub: {
92+
url: 'https://github.com/exactpro'
93+
},
94+
facebook: {
95+
url: 'https://www.facebook.com/exactpro/'
96+
},
97+
twitter: {
98+
url: 'https://twitter.com/exactpro'
99+
},
100+
linkedin: {
101+
url: 'https://www.linkedin.com/company/exactpro-systems-llc?trk=biz-companies-cym'
102+
},
103+
youtube: {
104+
url: 'https://www.youtube.com/c/exactprosystems'
105+
}
76106
}
77107
} as ExactproDocsOptions,
78108
// TODO: Workaround for nuxt-icon types module, delete when https://github.com/nuxt-modules/icon/pull/63 is resolved

‎components/ep/layout/Footer.vue‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -76,36 +76,7 @@
7676
<div class="flex flex-col items-center md:items-start">
7777
<h2 class="e-footer__h2">Follow Us</h2>
7878
<hr class="e-footer__hr" />
79-
<div class="flex flex-wrap gap-2 pt-2">
80-
<a href="https://github.com/exactpro" target="_blank"
81-
><img
82-
src="../../../assets/img/footer/github.svg"
83-
alt="link to exactpro GitHub page"
84-
/></a>
85-
<a href="https://www.facebook.com/exactpro/" target="_blank"
86-
><img
87-
src="../../../assets/img/footer/facebook.svg"
88-
alt="link to exactpro Facebook page"
89-
/></a>
90-
<a href="https://twitter.com/exactpro" target="_blank"
91-
><img
92-
src="../../../assets/img/footer/twitter.svg"
93-
size="2em"
94-
alt="link to exactpro Twitter page"
95-
/></a>
96-
<a
97-
href="https://www.linkedin.com/company/exactpro-systems-llc?trk=biz-companies-cym"
98-
target="_blank"
99-
><img
100-
src="../../../assets/img/footer/linkedin.svg"
101-
alt="link to exactpro LinkedIn page"
102-
/></a>
103-
<a href="https://www.youtube.com/c/exactprosystems" target="_blank"
104-
><img
105-
src="../../../assets/img/footer/youtube.svg"
106-
alt="link to exactpro Youtube account"
107-
/></a>
108-
</div>
79+
<EpLayoutFooterSocial class="pt-2" />
10980
</div>
11081
</div>
11182
<hr

‎components/ep/layout/FooterSocial.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!--
2+
~ Copyright 2023 Exactpro (Exactpro Systems Limited)
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<script setup lang="ts">
18+
const config = useAppConfig()
19+
20+
const social = config.exactproDocs.social
21+
</script>
22+
23+
<template>
24+
<div class="flex flex-wrap gap-2">
25+
<!-- GitHub -->
26+
<a
27+
v-if="!social?.githhub?.disabled"
28+
:href="social?.githhub?.url"
29+
target="_blank"
30+
>
31+
<img
32+
v-if="!social?.githhub?.customIcon"
33+
src="../../../assets/img/footer/github.svg"
34+
alt="Exactpro GitHub page"
35+
class="icon"
36+
/>
37+
<Icon v-else class="icon" :name="social?.githhub?.customIcon" />
38+
</a>
39+
<!-- Facebook -->
40+
<a
41+
v-if="!social?.facebook?.disabled"
42+
:href="social?.facebook?.url"
43+
target="_blank"
44+
>
45+
<img
46+
v-if="!social?.facebook?.customIcon"
47+
src="../../../assets/img/footer/facebook.svg"
48+
alt="Exactpro Facebook page"
49+
class="icon"
50+
/>
51+
<Icon v-else class="icon" :name="social?.facebook?.customIcon" />
52+
</a>
53+
<!-- Twitter -->
54+
<a
55+
v-if="!social?.twitter?.disabled"
56+
:href="social?.twitter?.url"
57+
target="_blank"
58+
>
59+
<img
60+
v-if="!social?.twitter?.customIcon"
61+
src="../../../assets/img/footer/twitter.svg"
62+
class="icon"
63+
alt="Exactpro Twitter page"
64+
/>
65+
<Icon v-else class="icon" :name="social?.twitter?.customIcon" />
66+
</a>
67+
<!-- Linkedin -->
68+
<a
69+
v-if="!social?.linkedin?.disabled"
70+
:href="social?.linkedin?.url"
71+
target="_blank"
72+
>
73+
<img
74+
v-if="!social?.linkedin?.customIcon"
75+
class="icon"
76+
src="../../../assets/img/footer/linkedin.svg"
77+
alt="Exactpro LinkedIn page"
78+
/>
79+
<Icon v-else class="icon" :name="social?.linkedin?.customIcon" />
80+
</a>
81+
<!-- Youtube -->
82+
<a
83+
v-if="!social?.youtube?.disabled"
84+
:href="social?.youtube?.url"
85+
target="_blank"
86+
><img
87+
v-if="!social?.youtube?.customIcon"
88+
class="icon"
89+
src="../../../assets/img/footer/youtube.svg"
90+
alt="Exactpro Youtube account"
91+
/>
92+
<Icon v-else class="icon" :name="social?.youtube?.customIcon" />
93+
</a>
94+
</div>
95+
</template>
96+
97+
<style scoped>
98+
.icon {
99+
width: 3em;
100+
height: 3em;
101+
}
102+
</style>

‎docs/app.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ export default defineAppConfig({
2222
branch: 'master',
2323
docsDir: '/docs'
2424
},
25+
social: {
26+
githhub: {
27+
url: 'https://github.com/exactpro/docs-toolkit'
28+
}
29+
},
2530
seo: {
2631
robots: [{ UserAgent: '*' }, { Allow: '/' }],
2732
sitemap: {

‎docs/content/3.customization.md‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,58 @@ export default defineAppConfig({
99
}
1010
})
1111
```
12+
## Header
1213

13-
## Customize the Header logo
14+
### Logo
1415

1516
Set up your very own logo with an image of your choice in two ways:
1617
1. Place an image named `logo.{some-extension}` in the `assets/theme` folder
1718
2. Redefine the vue component `components/exactpro-docs/Logo.vue`
1819

19-
## Customize the Header background
20+
### Background
2021

2122
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.
2223

24+
## Footer
25+
26+
### Social Media Links
27+
28+
Set up your very own social media links in `app.config.ts`. Simply define required options for:
29+
- `social.github`
30+
- `social.facebook`
31+
- `social.twitter`
32+
- `social.linkedin`
33+
- `social.youtube`
34+
35+
| Option | Type | Description |
36+
| --- | --- | --- |
37+
| `url` | `string` | Custom URL |
38+
| `customIcon` | `string` | Icon name from [https://icones.js.org/](https://icones.js.org/) |
39+
| `disabled` | `boolean` | Hide social media link |
40+
41+
::notice{info}
42+
Social media links have default values, so you don't have to customize these options if you don't need to.
43+
::
44+
45+
```ts
46+
export default defineAppConfig({
47+
exactproDocs: {
48+
social: {
49+
githhub: {
50+
url: 'https://github.com/exactpro', // Custom URL
51+
customIcon: 'fa6-brands:square-github', // Icon name from https://icones.js.org/
52+
disabled: false // Hide social media link
53+
},
54+
// Other social media links have the same structure
55+
facebook: {},
56+
twitter: {},
57+
linkedin: {},
58+
youtube: {}
59+
}
60+
}
61+
})
62+
```
63+
2364
## Configuring a base url
2465

2566
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/).

0 commit comments

Comments
 (0)