Update BrowserIcons and @cssnr/vitepress-swiper

Author: smashedr

.vitepress/theme/components/BrowserIcons.vue

@@ -5,27 +5,30 @@ import 'animate.css'
 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
+// Props
 const props = defineProps({
   animation: { type: String, default: null },
   centered: { type: Boolean, default: false },
   margin: { type: String, default: null },
+  size: { type: String, default: '48' }, // 16,24,32,48,64,128,256,512
 })
 
+// Browsers
+const baseUrl = 'https://cdnjs.cloudflare.com/ajax/libs/browser-logos/75.0.1'
+const browsers = [
+  { name: 'Chrome', url: chrome_url, img: 'chrome/chrome' },
+  { name: 'Firefox', url: firefox_url, img: 'firefox/firefox' },
+  { name: 'Edge', url: chrome_url, img: 'edge/edge' },
+  { name: 'Opera', url: chrome_url, img: 'opera/opera' },
+  { name: 'Brave', url: chrome_url, img: 'brave/brave' },
+  // { name: 'Chromium', url: chrome_url, img: 'chromium/chromium' },
+]
+
+// Class
 const imageClass = props.animation ? `animate__animated ${props.animation}` : null
 
-const iconStyle = {}
+// Style
+const iconStyle = { minHeight: `${props.size}px` }
 if (props.centered) iconStyle.textAlign = 'center'
 if (props.margin) iconStyle.margin = props.margin
 </script>
@@ -41,19 +44,20 @@ if (props.margin) iconStyle.margin = props.margin
       target="_blank"
       rel="noopener"
     >
-      <img :alt="browser.name" :src="`${baseUrl}/${browser.img}`" :class="imageClass" width="48" height="48" />
+      <img
+        :alt="browser.name"
+        :width="props.size"
+        :height="props.size"
+        :src="`${baseUrl}/${browser.img}_${props.size}x${props.size}.png`"
+        :class="imageClass"
+      />
     </a>
   </div>
 </template>
 
 <style scoped>
-.browser-icons {
-  min-height: 48px;
-}
-.browser-icons img {
-  margin-right: 6px;
-}
 .browser-icons a {
+  margin-right: 8px;
   display: inline-block;
   vertical-align: middle;
   transform: translateZ(0);

.vitepress/theme/custom.css

@@ -14,6 +14,10 @@ summary {
     cursor: pointer;
 }
 
+table th {
+    text-wrap: nowrap;
+}
+
 .search-keywords {
     display: none;
 }

package-lock.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@cssnr/vitepress-plugin-contributors": "^0.0.3",
-    "@cssnr/vitepress-swiper": "^0.1.1",
+    "@cssnr/vitepress-swiper": "^0.2.0",
     "animate.css": "^4.1.1",
     "vitepress": "^1.6.4"
   },