Обновлено: Типы в галереи #81

.vitepress/theme/components/AGWGallery.vue

@@ -22,15 +22,27 @@ import 'swiper/css/pagination';
 
 <template>
     <div class="galleries">
-        <h3 v-html="'Галерея ' + frontmatter.title"></h3>
-        <swiper :slides-per-view="1.1" :breakpoints="{ 767: { slidesPerView: 2 }, 1024: { slidesPerView: 4 } }"
-            :space-between="20" @swiper="onSwiper" @slideChange="onSlideChange">
-            <swiper-slide v-for="file in galleries.items" :key="galleries.items.src" class="item">
-                <figure class="figure">
-                    <VPImage :image="file.src" :alt="frontmatter.title" class="gallery"/>
-                </figure>
-            </swiper-slide>
-        </swiper>
+        <h3 v-if="galleries.title" v-html="galleries.title"></h3> 
+        <div v-if="galleries.type == 'carousel'">
+            <swiper :slides-per-view="1.1" :breakpoints="{ 767: { slidesPerView: 2 }, 1024: { slidesPerView: 4 } }"
+                :space-between="20" @swiper="onSwiper" @slideChange="onSlideChange">
+                <swiper-slide v-for="file in galleries.items" :key="galleries.items.src" class="item">
+                    <figure class="figure ratio ratio-1x1">
+                        <VPImage :image="file.src" :alt="frontmatter.title" class="gallery"/>
+                    </figure>
+                </swiper-slide>
+            </swiper>
+        </div>
+        <div v-if="galleries.type == 'slider'">
+            <swiper :slides-per-view="1.05"
+                :space-between="20" @swiper="onSwiper" @slideChange="onSlideChange">
+                <swiper-slide v-for="file in galleries.items" :key="galleries.items.src" class="item">
+                    <figure class="figure ratio ratio-16x9">
+                        <VPImage :image="file.src" :alt="frontmatter.title" class="gallery" />
+                    </figure>
+                </swiper-slide>
+            </swiper>
+        </div>
     </div>
 </template>
 
@@ -44,19 +56,30 @@ import 'swiper/css/pagination';
     width: 100%;
 }
 
-.figure::before {
+.ratio::before {
     content: "";
     display: block;
+    
+}
+
+.ratio.ratio-1x1::before {
     padding-top: 100%;
 }
 
-.figure>* {
+.ratio.ratio-16x9::before {
+    padding-top: 56.25%;
+}
+
+.figure > * {
+    object-fit: cover;
+}
+
+.ratio > * {
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
-    object-fit: cover;
 }
 
 .figure> :deep(.VPImage) {

docs/apps/amberol.md

@@ -6,6 +6,7 @@ appstreamRepo: io.bassi.Amberol
 appstreamFlatpak: io.bassi.Amberol
 gallery: 
     title: Галерея
+    type: carousel
     items: 
         - src: /amberol/amberol-1.png
         - src: /amberol/amberol-2.png

docs/apps/telegram.md

@@ -2,6 +2,12 @@
 title: Telegram
 appstreamRepo: org.telegram.desktop
 appstreamFlatpak: org.telegram.desktop
+gallery: 
+    type: slider
+    items: 
+        - src: /telegram/telegram-6.png
+        - src: /telegram/telegram-7.png
+        - src: /telegram/telegram-8.png
 ---
 
 # Telegram
@@ -70,9 +76,10 @@ epm play telegram
 - Настройки -> Продвинутые настройки
 - Cнимите флажок "Рамка окна QT"
 
-:::info
-Оформление системной рамки зависит от оконного интерфейса приложения X11 или Wayland. 
-:::
+<AGWGallery />
+
+Оформление системной рамки зависит от оконного интерфейса приложения `X11` или `Wayland`. 
+
 
 ## Как сбросить настройки
 

docs/extensions/just-perfection.md

@@ -1,17 +1,18 @@
 ---
 title: Just Perfection
 pluginID: 3843
+gallery: 
+    type: carousel
+    items: 
+        - src: /extensions/just-perfection/just-perfection-1.png
+        - src: /extensions/just-perfection/just-perfection-2.png
 ---
 
 # Just Perfection
 
-Невероятно мощное расширение, позволяющее изменить очень многие детали в GNOME Shell.
+Невероятно мощное расширение, позволяющее изменить очень многие детали в GNOME Shell. Имеет множество настроек, позволяющих каждому сделать из ALT Regular Gnome то, что ему по душе.
 
-Имеет множество настроек, позволяющих каждому сделать из ALT Regular Gnome то, что ему по душе.
-
-![just-perfection-1](/extensions/just-perfection/just-perfection-1.png)
-
-![just-perfection-2](/extensions/just-perfection/just-perfection-2.png)
+<AGWGallery/>
 
 <!--@include: ./parts/show-install-steps.md-->