Add BrowserIcons

Author: smashedr

.vitepress/theme/components/BrowserIcons.vue

@@ -0,0 +1,60 @@
+<script setup>
+// Variables
+const chrome_url = 'https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej'
+const firefox_url = 'https://addons.mozilla.org/addon/django-files'
+
+// Browsers
+const baseUrl = 'https://cdnjs.cloudflare.com/ajax/libs/browser-logos/75.0.1'
+const browsers = [
+  { name: 'Chrome', url: chrome_url, img: 'chrome/chrome_48x48.png' },
+  { name: 'Firefox', url: firefox_url, img: 'firefox/firefox_48x48.png' },
+  { name: 'Edge', url: chrome_url, img: 'edge/edge_48x48.png' },
+  { name: 'Opera', url: chrome_url, img: 'opera/opera_48x48.png' },
+  { name: 'Brave', url: chrome_url, img: 'brave/brave_48x48.png' },
+  { name: 'Chromium', url: chrome_url, img: 'chromium/chromium_48x48.png' },
+]
+
+// Style from Props
+const props = defineProps({
+  centered: { type: Boolean, default: false },
+  margin: { type: String, default: null },
+})
+const iconStyle = {}
+if (props.centered) iconStyle.textAlign = 'center'
+if (props.margin) iconStyle.margin = props.margin
+</script>
+
+<style scoped>
+.browser-icons {
+  min-height: 48px;
+}
+.browser-icons img {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  transition-duration: 0.3s;
+  transition-property: transform;
+}
+.browser-icons img:hover {
+  transform: scale(1.2);
+}
+</style>
+
+<template>
+  <div class="browser-icons" :style="iconStyle">
+    <a
+      v-for="browser in browsers"
+      :key="browser.name"
+      :href="browser.url"
+      :title="browser.name"
+      class="px-1 hvr-grow-lg"
+      target="_blank"
+      rel="noopener"
+    >
+      <img :alt="browser.name" :src="`${baseUrl}/${browser.img}`" width="48" height="auto" />
+    </a>
+  </div>
+</template>

.vitepress/theme/index.js

@@ -1,6 +1,7 @@
 import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 
+import BrowserIcons from './components/BrowserIcons.vue'
 import VPCardLink from './components/VPCardLink.vue'
 
 import VPSwiper from '@cssnr/vitepress-swiper'
@@ -11,6 +12,7 @@ export default {
     ...DefaultTheme,
 
     enhanceApp({ app }) {
+        app.component('BrowserIcons', BrowserIcons)
         app.component('VPCardLink', VPCardLink)
         app.component('VPSwiper', VPSwiper)
     },

docs/clients/browser.md

@@ -14,25 +14,20 @@ src="/images/logos/github.png"
 
 Get it from Google or Mozilla.
 
-- [Google Webstore](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
+- [Chrome Web Store](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
 - [Mozilla Addons](https://addons.mozilla.org/addon/django-files)
 
-[![Google Chrome](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/chrome.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
-[![Mozilla Firefox](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/firefox.png)](https://addons.mozilla.org/en-US/firefox/addon/django-files)
-[![Microsoft Edge](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/edge.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
-[![Opera](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/opera.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
-[![Brave](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/brave.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
-[![Chromium](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/browsers/56/chromium.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
+<BrowserIcons />
 
 ::: details View QR Codes 📸
 
 <h3>Mozilla Firefox Android</h3>
 
-[![Firefox Android](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/web-extension/qr/mozilla.png)](https://addons.mozilla.org/en-US/firefox/addon/django-files)
+[![Firefox Android](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/web-extension/qr/mozilla.png)](https://addons.mozilla.org/firefox/addon/django-files)
 
-<h3>Google Chromium</h3>
+<h3>Chrome Web Store</h3>
 
-[![Firefox Android](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/web-extension/qr/google.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
+[![Chrome Web Store](https://raw.githubusercontent.com/django-files/repo-images/refs/heads/master/web-extension/qr/google.png)](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej)
 :::
 
 ## Setup

docs/team.md

@@ -27,8 +27,9 @@ const members = [
         actionText: 'Support',
         links: [
             { icon: 'github', link: 'https://github.com/smashedr' },
-            { icon: 'mozilla', link: 'https://addons.mozilla.org/en-US/firefox/user/18021912/' },
+            { icon: 'mozilla', link: 'https://addons.mozilla.org/firefox/user/18021912' },
             { icon: 'googleplay', link: 'https://play.google.com/store/apps/dev?id=8933468453824534870' },
+            { icon: 'npm', link: 'https://www.npmjs.com/~smashed' },
             { icon: 'discord', link: 'https://discord.gg/wXy6m2X8wY' },
             {
                 icon: {
@@ -86,6 +87,5 @@ const members = [
       Meet the AI behind the software…
     </template>
   </VPTeamPageTitle>
-    <!--suppress CheckEmptyScriptTag -->
     <VPTeamMembers :members />
 </VPTeamPage>