Обновлено: Боковой бар с информацией о приложении #75

OlegShchavelev · Feb 8, 2024 · fd4da5c · fd4da5c
1 parent 40039cc
commit fd4da5c
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 49 deletions.
diff --git a/.vitepress/theme/components/AGWAppsMetaWidget.vue b/.vitepress/theme/components/AGWAppsMetaWidget.vue
@@ -3,8 +3,8 @@ import { type Ref, computed } from 'vue'
 import { DefaultTheme, useData } from 'vitepress'
 
 
-const {theme, frontmatter} = useData();
-const props = computed(() => frontmatter.value.appsMetaWidgets ?? theme.value.appsMetaWidgets ?? []);
+const { theme, frontmatter } = useData();
+const props = computed(() => frontmatter.value.metainfo ?? theme.value.metainfo ?? []);
 
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue';
@@ -14,21 +14,27 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
 <template>
     <article v-if="props.active" class="AppsWidget">
         <figure class="figure" v-if="props.thumb && props.thumb.src">
-            <VPImage
-            :image="props.thumb.src"
-            :alt="props.thumb.title"
-            class="card-image"
-            />
+            <VPImage :image="props.thumb.src" :alt="props.thumb.title" class="card-image" />
             <img src="">
         </figure>
-        <div class="card-body">
-            <div class="card-title">{{ props.introtext }}</div>
-            <div v-if="props.adaptive || props.proprietary || props.gnomeCircle || props.gnomeCore" class="badges">
-            <Badge v-if="props.adaptive" type="tip">Адаптивный</Badge>
-            <Badge v-if="props.proprietary" type="danger">Проприетарный</Badge>
-            <Badge v-if="props.gnomeCircle" type="danger">GNOME Circle</Badge>
-            <Badge v-if="props.gnomeCore" type="info">GNOME Core</Badge>
-        </div>
+        <div class="body">
+            <div class="summary">{{ props.summary }}</div>
+            <div v-if="props.adaptive || props.proprietary || props.gnomeCircle || props.gnomeCore || props.createTheme" class="badges">
+                <Badge v-if="props.adaptive" type="tip">Адаптивный</Badge>
+                <Badge v-if="props.proprietary" type="danger">Проприетарный</Badge>
+                <Badge v-if="props.gnomeCircle" type="success">GNOME Circle</Badge>
+                <Badge v-if="props.gnomeCore" type="info">GNOME Core</Badge>
+                <Badge v-if="props.createTheme" type="success-1">Please don’t theme</Badge>
+            </div>
+            <div v-if="props.developer && props.developer.name" class="developers">
+                <figure v-if="props.developer && props.developer.avatar" class="avatar">
+                    <VPImage :image="props.developer.avatar" :alt="props.developer.name" class="avatar-developer" />
+                </figure>
+                <div>
+                    <div class="caption">Разработчик</div>
+                    <div class="name">{{ props.developer.name }}<span class="nickname">{{ props.developer.nickname }}</span></div>
+                </div>
+            </div>
         </div>
         <dl>
             <dt v-if="props.licence && props.licence.url">Лицензия</dt>
@@ -57,9 +63,12 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
             </dd>
         </dl>
         <div class="footet">
-            <a target="_blank" v-if="props.sponsor && props.sponsor.url" :href="props.sponsor.url" class="link-gnome-sponsor">Поддержать автора</a>
-            <a target="_blank" v-if="props.sisyphus && props.sisyphus.url" :href="props.sisyphus.url" class="link-gnome-sisyphus">Сизиф</a>
-            <a target="_blank" v-if="props.flathub && props.flathub.url" :href="props.flathub.url" class="link-gnome-flathub">Flathub</a>
+            <a target="_blank" v-if="props.sponsor && props.sponsor.url" :href="props.sponsor.url"
+                class="link-gnome-sponsor">Поддержать автора</a>
+            <a target="_blank" v-if="props.flathub && props.flathub.url" :href="props.flathub.url"
+                class="link-gnome-flathub">Flathub</a>
+            <a target="_blank" v-if="props.sisyphus && props.sisyphus.url" :href="props.sisyphus.url"
+                class="link-gnome-sisyphus">Сизиф</a>
         </div>
     </article>
 </template>
@@ -72,17 +81,18 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
     margin-top: 24px;
 }
 
-.card-title {
+.summary {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 8px;
 }
 
-.card-title:last-child, .card-title:only-child {
+.summary:last-child,
+.summary:only-child {
     margin-bottom: 0;
 }
 
-.card-body {
+.body {
     padding: 16px;
 }
 
@@ -91,15 +101,16 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
 }
 
 .figure {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 24px;
 }
 
 .badges {
-    display: inline-flex;
-    gap: 2px
+    display: flex;
+    gap: 2px;
+    flex-wrap: wrap;
 }
 
 .VPBadge {
@@ -108,24 +119,59 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
     margin-left: 0;
 }
 
+
+
+.developers {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+}
+
+.developers .avatar {
+    width: 48px;
+    height: 48px;
+}
+
+.avatar {
+    position: relative;
+    flex-shrink: 0;
+    border-radius: 50%;
+    box-shadow: var(--vp-shadow-3);
+}
+
+.nickname {
+    display: block;
+    font-size: 11px;
+    color: var(--vp-c-text-3);
+    font-weight: 500;
+}
+
+.name {
+    line-height: 1.5;
+}
+
 dl {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-dt {
+dt, .developers .caption {
     font-size: 12px;
     color: var(--vp-c-text-2);
     font-weight: 500;
 }
 
-dd {
+dd, .developers .name {
     margin-left: 0;
     font-size: 14px;
     padding-bottom: 8px;
     margin-bottom: 8px;
 
 }
+.developers .name:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
 
 dd:not(:last-child) {
     border-bottom: 1px solid var(--vp-c-divider);
@@ -211,4 +257,5 @@ dd {
 .link-gnome-flathub:hover {
     background-color: var(--vp-c-blue-darker);
     color: #fff;
-}</style>
+}
+</style>
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -186,4 +186,26 @@
 
  .AppsWidget:hover .card-image {
   filter: grayscale(0) invert(0);
- }
+ }
+
+ .avatar-developer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+ .VPBadge.success {
+  border-color: transparent;
+  color: var(--vp-c-success-1);
+  background-color: var(--vp-c-success-soft);
+}
+
+.VPBadge.success-1 {
+  border-color: transparent;
+  color: var(--vp-c-white);
+  background-color: var(--vp-c-success-2);
+}
diff --git a/docs/apps/cartridges.md b/docs/apps/cartridges.md
@@ -3,12 +3,15 @@ title: Картриджи
 appstreamRepo: hu.kramo.Cartridges
 appstreamFlatpak: hu.kramo.Cartridges
 
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /cartridges/hu.kramo.Cartridges.png
         title: Картриджи
-    introtext: Запускайте все свои игры
+    summary: Запускайте все свои игры
+    developer: 
+        name: kramo
+        avatar: https://avatars.githubusercontent.com/u/93832451?v=4
     site:
         url: https://github.com/kra-mo/cartridges/
         anchor: github.com
@@ -24,6 +27,7 @@ appsMetaWidgets:
     adaptive: true
     gnomeCore: false
     gnomeCircle: true
+    createTheme: true
     proprietary: false
     sisyphus:
         url: https://packages.altlinux.org/ru/sisyphus/srpms/cartridges/

diff --git a/docs/apps/cassette.md b/docs/apps/cassette.md
@@ -2,12 +2,16 @@
 title: Cassette
 appstreamRepo: io.github.Rirusha.Cassette
 appstreamFlatpak: io.github.Rirusha.Cassette
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /casseta/io.github.Rirusha.Cassette.png
         title: Кассета
-    introtext: Неофициальный клиент Яндекс Музыки
+    summary: Неофициальный клиент Яндекс Музыки
+    developer: 
+        name: Владимир Васьков
+        nickname: Rirusha
+        avatar: https://avatars.githubusercontent.com/u/95986183?v=4
     site:
         url: https://github.com/Rirusha/Cassette
         anchor: github.com
@@ -20,6 +24,7 @@ appsMetaWidgets:
     adaptive: false
     gnomeCore: false
     gnomeCircle: false
+    createTheme: true
     proprietary: false
     sponsor: 
         url: https://www.tinkoff.ru/collectmoney/crowd/vaskov.vladimir19/Uhi7d15460/

diff --git a/docs/apps/discord.md b/docs/apps/discord.md
@@ -1,12 +1,12 @@
 ---
 title: Discord
 appstreamFlatpak: com.discordapp.Discord
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /discord/com.discordapp.Discord.png
         title: Discord
-    introtext: Клиент для обмена сообщениями, аудио и видеосвязи
+    summary: Клиент для обмена сообщениями, аудио и видеосвязи
     site:
         url: https://discord.com/
         anchor: discord.com

diff --git a/docs/apps/flatseal.md b/docs/apps/flatseal.md
@@ -2,12 +2,16 @@
 title: Flatseal
 appstreamRepo: com.github.tchx84.Flatseal
 appstreamFlatpak: com.github.tchx84.Flatseal
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /flatseal/com.github.tchx84.Flatseal.png
         title: Кассета
-    introtext: Управление разрешениями Flatpak
+    summary: Управление разрешениями Flatpak
+    developer: 
+        name: Martin Abente Lahaye
+        avatar: https://avatars.githubusercontent.com/u/481418?v=4
+        nickname: tchx84
     site:
         url: https://github.com/tchx84/flatseal
         anchor: github.com
@@ -22,10 +26,8 @@ appsMetaWidgets:
         anchor: github.com
     adaptive: false
     gnomeCircle: false
-    sponsor: 
-        url:
-    flathub:
-        url:
+    flathub: 
+        url: https://flathub.org/apps/com.github.tchx84.Flatseal
     sisyphus:
         url: https://packages.altlinux.org/ru/sisyphus/srpms/flatseal/
 ---

diff --git a/docs/apps/google-chrome.md b/docs/apps/google-chrome.md
@@ -1,12 +1,12 @@
 ---
 title: Google Chrome
 appstreamFlatpak: com.google.Chrome
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /google-chrome/com.google.Chrome.png
         title: Кассета
-    introtext: Веб-браузер от Google
+    summary: Веб-браузер от Google
     site:
         url: https://www.google.com/chrome/
         anchor: google.com

diff --git a/docs/apps/wps-office.md b/docs/apps/wps-office.md
@@ -3,12 +3,12 @@ title: WPS Office
 appstreamRepo: com.wps.Office
 appstreamFlatpak: com.wps.Office
 
-appsMetaWidgets:
+metainfo:
     active: true
     thumb:
         src: /wps-office/wps-office-free-all-in-one-office-suite.d880717.png
         title: WPS Office
-    introtext: Универсальный пакет Office приложений
+    summary: Универсальный пакет Office приложений
     site:
         url: https://www.wps.com/ru-RU/
         anchor: wps.com

diff --git a/docs/system/epm.md b/docs/system/epm.md
@@ -1,10 +1,13 @@
 ---
-appsMetaWidgets:
+metainfo:
     active: true
-    introtext: оболочка для любого менеджера пакетов
+    summary: Оболочка для любого менеджера пакетов
     site:
         url: https://github.com/Etersoft/eepm
         anchor: github.com
+    developer: 
+        name: Этерсофт
+        avatar: https://avatars.githubusercontent.com/u/7222689?s=200&v=4
     issue: 
         url: https://github.com/Etersoft/eepm/issues
         anchor: github.com