Skip to content

Commit 6f2cb31

Browse files
smashedrsmashedr
committed
Reduce Boilerplate with Vue Components
1 parent 1045aa8 commit 6f2cb31

File tree

7 files changed

+52
-50
lines changed

7 files changed

+52
-50
lines changed

‎.vitepress/theme/components/FullscreenButton.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<button @click="$requestFullscreen()" class="inline-button">
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
stroke="currentColor"
10+
stroke-width="2"
11+
stroke-linecap="round"
12+
stroke-linejoin="round"
13+
class="lucide lucide-fullscreen-icon lucide-fullscreen"
14+
>
15+
<path d="M3 7V5a2 2 0 0 1 2-2h2" />
16+
<path d="M17 3h2a2 2 0 0 1 2 2v2" />
17+
<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
18+
<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
19+
<rect width="10" height="8" x="7" y="8" rx="1" />
20+
</svg>
21+
<slot>View in Full Screen</slot>
22+
</button>
23+
</template>

‎.vitepress/theme/custom.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@
1010
--swiper-navigation-sides-offset: 4px;
1111
}
1212

13-
/*NOTE: Override Team Page Top Margin */
13+
/*NOTE: Override block on images */
14+
img {
15+
display: inline-block;
16+
}
17+
18+
/*NOTE: Override Team Page top margin */
1419
.VPTeamPage {
1520
margin-top: 0 !important;
1621
}
1722

18-
/*NOTE: Override block on images */
19-
img {
20-
display: inline-block;
23+
/*NOTE: inline-button style for FullscreenButton.vue */
24+
.inline-button {
25+
display: inline-flex;
26+
align-items: center;
27+
gap: 0.5rem;
2128
}
2229

2330
.swiper {

‎.vitepress/theme/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import DefaultTheme from 'vitepress/theme'
22
import './custom.css'
33

4+
import FullscreenButton from './components/FullscreenButton.vue'
5+
46
import { Swiper, SwiperSlide } from 'swiper/vue'
57
import 'swiper/css'
68

@@ -18,11 +20,17 @@ export default {
1820
enhanceApp({ app }) {
1921
app.component('Swiper', Swiper)
2022
app.component('SwiperSlide', SwiperSlide)
21-
2223
app.config.globalProperties.Keyboard = Keyboard
2324
app.config.globalProperties.Mousewheel = Mousewheel
2425
app.config.globalProperties.Navigation = Navigation
2526
app.config.globalProperties.Pagination = Pagination
2627
app.config.globalProperties.EffectCoverflow = EffectCoverflow
28+
29+
app.component('FullscreenButton', FullscreenButton)
30+
app.config.globalProperties.$requestFullscreen = () => {
31+
console.debug('requestFullscreen')
32+
// noinspection JSIgnoredPromiseFromCall
33+
document.querySelector('.swiper')?.requestFullscreen()
34+
}
2735
},
2836
}

‎docs/clients/android.md‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,8 @@ Click `Add Server` and you are done!
3434

3535
## Screenshots
3636

37-
<!--suppress HtmlUnknownAttribute -->
38-
<script setup>
39-
const requestFullscreen = () => document.querySelector('.swiper')?.requestFullscreen()
40-
</script>
41-
42-
<button @click="requestFullscreen" style="display: inline-flex; align-items: center; gap: 0.5rem;">
43-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fullscreen-icon lucide-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
44-
View in Full Screen
45-
</button>
46-
47-
<!--suppress HtmlUnknownTag -->
37+
<!--suppress CheckEmptyScriptTag, HtmlUnknownTag -->
38+
<FullscreenButton />
4839
<ClientOnly>
4940
<Swiper
5041
:modules="[Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow]"

‎docs/clients/browser.md‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,8 @@ Alternatively you can copy and paste your URL and Token into the Settings.
4141

4242
## Screenshots
4343

44-
<!--suppress HtmlUnknownAttribute -->
45-
<script setup>
46-
const requestFullscreen = () => document.querySelector('.swiper')?.requestFullscreen()
47-
</script>
48-
49-
<button @click="requestFullscreen" style="display: inline-flex; align-items: center; gap: 0.5rem;">
50-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fullscreen-icon lucide-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
51-
View in Full Screen
52-
</button>
53-
54-
<!--suppress HtmlUnknownTag -->
44+
<!--suppress CheckEmptyScriptTag, HtmlUnknownTag -->
45+
<FullscreenButton />
5546
<ClientOnly>
5647
<Swiper
5748
:modules="[Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow]"

‎docs/clients/ios.md‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,8 @@ Click `Add Server` and you are done!
2929

3030
## Screenshots
3131

32-
<!--suppress HtmlUnknownAttribute -->
33-
<script setup>
34-
const requestFullscreen = () => document.querySelector('.swiper')?.requestFullscreen()
35-
</script>
36-
37-
<button @click="requestFullscreen" style="display: inline-flex; align-items: center; gap: 0.5rem;">
38-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fullscreen-icon lucide-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
39-
View in Full Screen
40-
</button>
41-
42-
<!--suppress HtmlUnknownTag -->
32+
<!--suppress CheckEmptyScriptTag, HtmlUnknownTag -->
33+
<FullscreenButton />
4334
<ClientOnly>
4435
<Swiper
4536
:modules="[Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow]"

‎docs/guides/features.md‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,8 @@ Missing a feature? Submit a [Feature Request](https://github.com/django-files/dj
4343

4444
## Screenshots
4545

46-
<!--suppress HtmlUnknownAttribute -->
47-
<script setup>
48-
const requestFullscreen = () => document.querySelector('.swiper')?.requestFullscreen()
49-
</script>
50-
51-
<button @click="requestFullscreen" style="display: inline-flex; align-items: center; gap: 0.5rem;">
52-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fullscreen-icon lucide-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
53-
View in Full Screen
54-
</button>
55-
56-
<!--suppress HtmlUnknownTag -->
46+
<!--suppress CheckEmptyScriptTag, HtmlUnknownTag -->
47+
<FullscreenButton />
5748
<ClientOnly>
5849
<Swiper
5950
:modules="[Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow]"
@@ -69,7 +60,7 @@ View in Full Screen
6960
:effect="'coverflow'"
7061
class="swiper" style="height: 396px;">
7162
<SwiperSlide v-for="i in 18" :key="i">
72-
<img :src="`https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/django-files/docs/${String(i).padStart(2, '0')}.jpg`" alt="Loading..." loading="lazy" />
63+
<img :src="`https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/django-files/docs/${String(i).padStart(2, '0')}.jpg`" alt="Loading..." loading="lazy" />
7364
</SwiperSlide>
7465
</Swiper>
7566
</ClientOnly>

0 commit comments

Comments
 (0)