Make sponsors section responsive (#157)

Author: leaysgur

.vitepress/config/shared.ts

@@ -1,7 +1,6 @@
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { HeadConfig, defineConfig } from "vitepress";
-import svgLoader from "vite-svg-loader";
 
 const head: HeadConfig[] = [
   [
@@ -93,6 +92,5 @@ export const sharedConfig = defineConfig({
         },
       ],
     },
-    plugins: [svgLoader()],
   },
 });

package.json

@@ -32,7 +32,6 @@
     "textlint-rule-terminology": "^5.0.11",
     "tsx": "^4.15.1",
     "typescript": "~5.4.5",
-    "vite-svg-loader": "^5.1.0",
     "vitepress": "1.2.3",
     "vue": "^3.4.27"
   },

pnpm-lock.yaml

@@ -41,16 +41,27 @@ features:
 ---
 
 <script setup>
-import Sponsors from '../public/sponsors.svg?component'
+import SponsorsSVG from '../public/sponsors.svg?raw'
 </script>
 
-<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+<div class="Sponsors">
   <h2>Sponsored by</h2>
-  <Sponsors />
+  <div v-html="SponsorsSVG"></div>
 </div>
 
 <style>
 .VPHero .VPImage.image-src {
   max-width: 90%;
 }
+
+.Sponsors {
+  display: grid;
+  justify-items: center;
+
+  /* Support narrow viewport */
+  svg {
+    width: 100%;
+    height: auto;
+  }
+}
 </style>