docs: sponsor friends (#656)

* docs: added sponsor friends section <3

* docs: fix lint

* docs: added patak

* docs: added Daniel

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { VPHomeSponsors } from 'vitepress/theme'
-import { useSponsor } from '../composables/sponsor'
 
-const { data } = useSponsor()
+/* const { data } = useSponsor() */
 </script>
 
 <template>
   <VPHomeSponsors
-    v-if="data"
     message="TresJS is free and open source, made possible by wonderful sponsors."
-    :data="data"
+    :data="[]"
   />
   <div class="action">
     <a
@@ -18,9 +16,94 @@ const { data } = useSponsor()
       target="_blank"
       rel="noreferrer"
     >
-      Become a sponsor <i class="i-carbon-heart"></i>
+      Become a sponsor
     </a>
   </div>
+  <div class="action">
+    <p class="message">Consider supporting our friends</p>
+  </div>
+  <ul class="action flex">
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/vitejs"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Vite <i class="i-logos-vitejs ml-2"></i>
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/patak-dev"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Patak <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/583075?v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/antfu"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Anthony Fu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/posva"
+        target="_blank"
+        rel="noreferrer"
+      >
+        posva <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/664177?v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/johnsoncodehk"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Johnson Chu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/16279759?v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/CodyJasonBennett"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Cody Bennet <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23324155?v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/nuxt"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Daniel Roe <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23360933?s=160&v=4" alt="" />
+      </a>
+    </li>
+    <li>
+      <a
+        class="sponsor"
+        href="https://github.com/sponsors/danielroe"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Nuxt <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="" />
+      </a>
+    </li>
+  </ul>
 </template>
 
 <style scoped>
@@ -33,7 +116,9 @@ const { data } = useSponsor()
 
 .sponsor {
   /* .VPButton */
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;

docs/.vitepress/theme/custom.css

@@ -58,3 +58,7 @@
   color: var(--vp-button-alt-text);
   background-color: var(--vp-button-alt-bg);
 }
+
+.VPHomeSponsors {
+  margin-bottom: 0px !important;
+}

docs/package.json

@@ -12,6 +12,8 @@
     "@tresjs/core": "workspace:*"
   },
   "devDependencies": {
+    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/mdi": "^1.1.66",
     "unocss": "^0.58.0",
     "vite-svg-loader": "^5.1.0"
   }

docs/vite.config.ts

@@ -2,11 +2,25 @@ import { defineConfig } from 'vite'
 import Unocss from 'unocss/vite'
 import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'
+import { presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
   plugins: [
     svgLoader(),
-    Unocss(),
+    Unocss({
+      presets: [
+        presetUno(),
+        presetIcons({
+          scale: 1.2,
+          warn: true,
+          extraProperties: {
+            'display': 'inline-block',
+            'vertical-align': 'middle',
+            // ...
+          },
+        }),
+      ],
+    }),
     Components({
       // allow auto load markdown components under `.vitepress/theme/components`
       dirs: ['.vitepress/theme/components'],

pnpm-lock.yaml

@@ -142,6 +142,12 @@ importers:
         specifier: workspace:*
         version: link:..
     devDependencies:
+      '@iconify-json/logos':
+        specifier: ^1.1.42
+        version: 1.1.42
+      '@iconify-json/mdi':
+        specifier: ^1.1.66
+        version: 1.1.66
       unocss:
         specifier: ^0.58.0
         version: 0.58.7(postcss@8.4.38)(vite@5.2.9)
@@ -1554,6 +1560,18 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
+  /@iconify-json/logos@1.1.42:
+    resolution: {integrity: sha512-/f+frtPm3m3Z30oy8Pk+QqRDkbmAiIaWGPl5CmsCXm15MVfvw9a/V/gD7WzdyuSGAZcFuQaqbHXj92y/n+2ifg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/mdi@1.1.66:
+    resolution: {integrity: sha512-7KPF2RVUUWav/hXCM8Ti/smqu3cmgePJpiX9CSkldiL+80+eBRBeKlc4vPOc9jhAItlqIU1vKsbKoPP0JIfgbg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true