Skip to content

Commit 3e28bc6

Browse files
yel-haddyel-hadd
authored
Merge pull request #132 from yel-hadd/master
Improve Breadcrumbs, Add CodeTabs & CodeWithCopy components
2 parents 1bb636d + 62a29dc commit 3e28bc6

4 files changed

Lines changed: 291 additions & 11 deletions

File tree

‎docs/.vuepress/client.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import documents from "./config-client/documents";
1212
import sidebar from "./config-client/sidebar";
1313
import social from "./config-client/social";
1414
import Chat from "./components/Chat.vue";
15+
import CodeTabs from "./components/CodeTabs.vue";
16+
import CodeWithCopy from "./components/CodeWithCopy.vue";
1517

1618
export default defineClientConfig({
1719
rootComponents: [

‎docs/.vuepress/components/CodeTabs.vue‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<template>
2+
<div class="code-tabs">
3+
<div class="tab-buttons">
4+
<button v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">
5+
{{ tab.title }}
6+
</button>
7+
</div>
8+
9+
<div class="tab-content code-block-wrapper">
10+
<button class="copy-button" @click="copyCode" aria-label="Copy code">
11+
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
12+
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>
13+
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>
14+
</svg>
15+
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
16+
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
17+
</svg>
18+
</button>
19+
20+
<pre><code ref="codeRef" class="language-bash">{{ tabs[activeTab].content }}</code></pre>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
name: 'CodeTabs',
28+
props: {
29+
tabs: {
30+
type: Array,
31+
required: true
32+
}
33+
},
34+
data() {
35+
return {
36+
activeTab: 0,
37+
copied: false
38+
}
39+
},
40+
watch: {
41+
activeTab() {
42+
this.highlight()
43+
}
44+
},
45+
mounted() {
46+
this.highlight()
47+
},
48+
methods: {
49+
highlight() {
50+
this.$nextTick(() => {
51+
if (typeof window !== 'undefined' && window.hljs && this.$refs.codeRef) {
52+
window.hljs.highlightElement(this.$refs.codeRef)
53+
}
54+
})
55+
},
56+
copyCode() {
57+
const text = this.tabs[this.activeTab].content
58+
navigator.clipboard.writeText(text).then(() => {
59+
this.copied = true
60+
setTimeout(() => (this.copied = false), 2000)
61+
})
62+
}
63+
}
64+
}
65+
</script>
66+
67+
<style scoped>
68+
.code-tabs {
69+
border: 1px solid #ccc;
70+
border-radius: 8px;
71+
overflow: hidden;
72+
margin-bottom: 1.5rem;
73+
}
74+
75+
.tab-buttons {
76+
display: flex;
77+
background-color: #2d2d2d;
78+
border-bottom: 1px solid #444;
79+
}
80+
81+
.tab-buttons button {
82+
padding: 0.85em;
83+
flex: 1;
84+
background: none;
85+
border: none;
86+
cursor: pointer;
87+
font-weight: 500;
88+
color: #ccc;
89+
}
90+
91+
.tab-buttons button.active {
92+
color: #fff;
93+
border-bottom: 2px solid #43a069;
94+
font-weight: bold;
95+
}
96+
97+
.tab-content {
98+
position: relative;
99+
background-color: #2d2d2d;
100+
font-family: monospace;
101+
padding: 1rem;
102+
}
103+
104+
.code-block-wrapper {
105+
background-color: #2d2d2d;
106+
padding: 12px;
107+
position: relative;
108+
overflow: hidden;
109+
}
110+
111+
pre {
112+
margin: 0;
113+
background-color: transparent;
114+
color: #2d2d2d;
115+
font-size: 14px;
116+
overflow-x: auto;
117+
white-space: pre-wrap;
118+
word-wrap: break-word;
119+
max-width: 100%;
120+
line-height: 1.5;
121+
box-shadow: none;
122+
}
123+
124+
code {
125+
color: #ccc;
126+
background: none;
127+
display: block;
128+
white-space: pre-wrap;
129+
word-wrap: break-word;
130+
}
131+
132+
.copy-button {
133+
position: absolute;
134+
top: 0.5rem;
135+
right: 0.5rem;
136+
background: none;
137+
border: none;
138+
cursor: pointer;
139+
padding: 0.2rem;
140+
z-index: 10;
141+
}
142+
143+
.copy-button svg {
144+
fill: #ccc;
145+
width: 20px;
146+
height: 20px;
147+
transition: fill 0.2s;
148+
}
149+
150+
.copy-button:hover svg {
151+
fill: #43a069;
152+
}
153+
154+
.language-bash {
155+
font-size: 0.85em;
156+
padding: 0;
157+
}
158+
</style>
159+

‎docs/.vuepress/components/CodeWithCopy.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="code-block-wrapper">
3+
<button class="copy-button" @click="copyCode" aria-label="Copy code">
4+
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
5+
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
6+
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
7+
</svg>
8+
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
9+
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
10+
</svg>
11+
</button>
12+
<slot />
13+
</div>
14+
</template>
15+
16+
<script setup>
17+
import { ref } from 'vue';
18+
19+
const copied = ref(false);
20+
21+
function copyCode() {
22+
const code = document.querySelector('.code-block-wrapper pre code')?.innerText;
23+
if (code) {
24+
navigator.clipboard.writeText(code);
25+
copied.value = true;
26+
27+
setTimeout(() => {
28+
copied.value = false;
29+
}, 2000);
30+
}
31+
}
32+
</script>
33+
34+
<style scoped>
35+
.copy-button svg {
36+
transition: fill 0.3s;
37+
}
38+
39+
.copy-icon {
40+
fill: #ccc;
41+
width: 20px;
42+
height: 20px;
43+
}
44+
45+
.code-block-wrapper {
46+
position: relative;
47+
}
48+
49+
.copy-button {
50+
position: absolute;
51+
top: 0.5rem;
52+
right: 0.5rem;
53+
background: none;
54+
border: none;
55+
cursor: pointer;
56+
padding: 0.2rem;
57+
z-index: 10;
58+
}
59+
60+
.copy-button:hover .copy-icon {
61+
fill: #43a069;
62+
}
63+
</style>

‎docs/.vuepress/theme/components/Breadcrumb.vue‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,71 @@
11
<template>
22
<div class="breadcrumb-wrapper">
3-
<span class="breadcrumb-title">{{ siteTitle }}:</span>
4-
<router-link class="breadcrumb" v-for="crumb in breadCrumbs" :key="crumb.path" :to="crumb.path">
3+
<router-link
4+
v-for="(crumb, index) in breadCrumbs"
5+
:key="crumb.path"
6+
class="breadcrumb"
7+
:to="crumb.path"
8+
>
59
{{ crumb.title }}
610
</router-link>
711
</div>
812
</template>
913

1014
<script setup>
11-
import {computed, inject} from "vue";
12-
import {usePageData, useSiteData} from "@vuepress/client";
15+
import { computed, inject } from "vue";
16+
import { usePageData, useSiteData } from "@vuepress/client";
17+
18+
const page = usePageData();
19+
const site = useSiteData();
20+
const { locales: { siteTitle } } = inject("themeConfig");
21+
22+
// Title mapping for specific paths
23+
const titleMap = {
24+
'/billing/': 'Billing',
25+
'/command_line_interface/': 'Command Line Interface',
26+
'/config_file_description/': 'Config File Description',
27+
'/control_panel_integration/': 'Control Panel Integration',
28+
'/dashboard/': 'Dashboard',
29+
'/email/': 'Email',
30+
'/faq_and_known_issues/': 'FAQ and Known Issues',
31+
'/features/': 'Features',
32+
'/ids_integration/': 'IDS Integration',
33+
'/imunify_patch/': 'Imunify Patch',
34+
'/imunifyav/': 'ImunifyAV',
35+
'/installation/': 'Installation',
36+
'/introduction/': 'Introduction',
37+
'/localization/': 'Localization',
38+
'/myimunify/': 'MyImunify',
39+
'/patchman/': 'Patchman',
40+
'/terminology/': 'Terminology',
41+
'/uninstall/': 'Uninstall',
42+
'/update/': 'Update',
43+
'/user_interface/': 'User Interface',
44+
'/whmcs_plugin/': 'WHMCS Plugin',
45+
'/wordpress_plugin/': 'WordPress Plugin',
46+
};
1347
14-
const page = usePageData()
15-
const site = useSiteData()
16-
const { locales: {siteTitle}} = inject("themeConfig")
1748
const breadCrumbs = computed(() => {
18-
const crumbs = [];
19-
if (page.value.path !== '/') {
20-
crumbs.push({path: page.value.path, title: page.value.title});
49+
const segments = page.value.path.split("/").filter(Boolean);
50+
const crumbs = [{ path: "/", title: siteTitle || "Documentation" }];
51+
let cumulativePath = "";
52+
53+
for (let i = 0; i < segments.length; i++) {
54+
cumulativePath += `/${segments[i]}`;
55+
const isLast = i === segments.length - 1;
56+
const fullPath = cumulativePath.endsWith(".html") ? cumulativePath : `${cumulativePath}/`;
57+
58+
let title;
59+
60+
if (isLast) {
61+
title = page.value.title;
62+
} else {
63+
title = titleMap[fullPath] || fullPath;
2164
}
65+
66+
crumbs.push({ path: fullPath, title });
67+
}
68+
2269
return crumbs;
2370
});
2471
</script>
@@ -28,14 +75,23 @@ const breadCrumbs = computed(() => {
2875
2976
.breadcrumb
3077
color $breadcrumbColor
78+
text-decoration none
3179
32-
&::after
80+
&:not(:last-child)::after
3381
content " > "
3482
font-family inherit
3583
font-size inherit
84+
color $breadcrumbColor
85+
86+
&:not(:last-child)
87+
cursor pointer
88+
89+
&:hover
90+
color #1994f9
3691
3792
&:last-child
3893
cursor default
94+
color $breadcrumbColor
3995
4096
.breadcrumb-title
4197
color $breadcrumbColor

0 commit comments

Comments
 (0)