Docs: Update backers list, sponsor logos in README and website

README.md

@@ -14,14 +14,18 @@ Ultra-fast fetching for TypeScript generated automatically from your OpenAPI sch
 
 ## ⭐ Sponsors
 
-### Gold Sponsors
+### 🥇 Gold Sponsors
 
 <p align="center"><a href="https://zuplo.link/openapi-ts-gh"><img width="128" height="128" alt="Zuplo" src="https://avatars.githubusercontent.com/u/85497839?s=200&v=4"></a></p>
 
+### 🥈 Silver Sponsors
+
+<p align="center"><a href="https://github.com/nanabit-inc"><img width="128" height="128" alt="nanabit" src="https://avatars.githubusercontent.com/u/154126976?s=200&v=4"></a></p>
+
 ### Backers
 
-<p align="center"><a href="https://github.com/bddvlpr"><img width="64" height="64" alt="@bddvlpr on GitHub" src="https://avatars.githubusercontent.com/u/17461028?v=4" /></a>
-<a href="https://github.com/customerio"><img width="64" height="64" alt="@customerio on GitHub" src="https://avatars.githubusercontent.com/u/1152079?s=200&v=4"></a></p>
+<p align="center"><a href="https://github.com/customerio"><img width="64" height="64" alt="@customerio on GitHub" src="https://avatars.githubusercontent.com/u/1152079?s=200&v=4"></a>
+<a href="https://github.com/shaunpersad"><img width="64" height="64" alt="@shaunpersad on GitHub" src="https://avatars.githubusercontent.com/u/1702976?s=52&v=4"></a><a href="https://github.com/yoshi2no"><img width="64" height="64" alt="@yoshi2no on GitHub" src="https://avatars.githubusercontent.com/u/57059705?v=4"></a></p>
 
 Become a sponsor by supporting this project on [OpenCollective](https://opencollective.com/openapi-ts)!
 

docs/.vitepress/config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "vitepress";
-import { en } from "./en";
-import { zh } from "./zh";
-import { shared } from "./shared";
+import en from "./en";
+import zh from "./zh";
+import shared from "./shared";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({

docs/.vitepress/en.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vitepress";
+import sharedConfig from "./shared";
 
-export const en = defineConfig({
+export default defineConfig({
   description: "Consume OpenAPI 3.0 & 3.1 schemas in TypeScript",
   themeConfig: {
     nav: [
@@ -88,7 +89,6 @@ export const en = defineConfig({
         indexName: "openapi-ts",
       },
     },
-    socialLinks: [{ icon: "github", link: "https://github.com/openapi-ts/openapi-typescript" }],
     footer: {
       message:
         'Released under the <a href="https://github.com/openapi-ts/openapi-typescript/blob/main/packages/openapi-typescript/LICENSE">MIT License</a>.',

docs/.vitepress/shared.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from "vitepress";
+import type { UserConfig } from "vitepress";
 import { zhSearch } from "./zh";
 
 const HOSTNAME = "https://openapi-ts.dev";
 
-export const shared = defineConfig({
+const shared: UserConfig = {
   title: "OpenAPI TypeScript",
   cleanUrls: true,
   srcExclude: ["**/*/CONTRIBUTRING.md", "**/*/README.md"],
@@ -34,7 +34,15 @@ export const shared = defineConfig({
         locales: { ...zhSearch },
       },
     },
-    socialLinks: [{ icon: "github", link: "https://github.com/openapi-ts/openapi-typescript" }],
+    socialLinks: [
+      {
+        icon: {
+          svg: '<svg fill="#202020" viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path fill-opacity=".4" d="M12.995 8.195c0 .937-.312 1.912-.78 2.693l1.99 1.99c.976-1.327 1.6-2.966 1.6-4.683 0-1.795-.624-3.434-1.561-4.76l-2.068 2.028c.468.781.78 1.679.78 2.732z"></path><path d="M8 13.151a4.995 4.995 0 1 1 0-9.99c1.015 0 1.951.273 2.732.82l1.95-2.03a7.805 7.805 0 1 0 .04 12.449l-1.951-2.03a5.07 5.07 0 0 1-2.732.781z"></path></svg>',
+        },
+        link: "https://opencollective.com/openapi-ts",
+      },
+      { icon: "github", link: "https://github.com/openapi-ts/openapi-typescript" },
+    ],
   },
   transformPageData({ relativePath, frontmatter }) {
     frontmatter.head ??= [];
@@ -43,4 +51,6 @@ export const shared = defineConfig({
       { rel: "canonical", href: `${HOSTNAME}/${relativePath.replace(/(index\.md|\.md)$/, "")}` },
     ]);
   },
-});
+};
+
+export default shared;

docs/.vitepress/theme/CustomLayout.vue

@@ -1,11 +1,14 @@
 <script setup>
 import DefaultTheme from "vitepress/theme";
 
+import sponsors from "../../data/sponsors.json";
+
 const { Layout } = DefaultTheme;
 </script>
 
 <template>
   <Layout>
+    <!-- Gold sponsor banner -->
     <template #layout-top
       ><a
         class="banner"
@@ -35,6 +38,20 @@ const { Layout } = DefaultTheme;
         <span class="banner-pseudo-link">Start Free →</span>
       </a></template
     >
+
+    <!-- Silver sponsor logos -->
+    <template #sidebar-nav-after>
+      <div class="sidenav-sponsors">
+        <h5>Silver Sponsors</h5>
+        <ul>
+          <li v-for="sponsor in sponsors.silver" :key="sponsor.name">
+            <a :href="sponsor.url" target="_blank" :title="sponsor.name">
+              <img :src="sponsor.logo" :alt="sponsor.description" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </template>
   </Layout>
 </template>
 
@@ -93,6 +110,28 @@ const { Layout } = DefaultTheme;
   padding: 0 0.75em;
   white-space: nowrap;
 }
+
+.sidenav-sponsors h5 {
+  color: var(--vp-c-text-2);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.0625em;
+  text-transform: uppercase;
+}
+
+.sidenav-sponsors ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+  list-style: none;
+  margin: 1.5rem 0 0;
+  padding: 0;
+}
+
+.sidenav-sponsors img {
+  height: 3rem;
+  width: auto;
+}
 </style>
 
 <style>

docs/.vitepress/theme/SponsorList.vue

@@ -0,0 +1,39 @@
+<script setup>
+import sponsors from "../../data/sponsors.json";
+</script>
+
+<template>
+  <ul class="sponsors-list">
+    <li
+      v-for="sponsor in [...sponsors.gold, ...sponsors.silver]"
+      :key="sponsor.name"
+    >
+      <a :href="sponsor.url" target="_blank" :title="sponsor.name">
+        <img :src="sponsor.logo" :alt="sponsor.description" />
+      </a>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.sponsors-list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  justify-content: center;
+  gap: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.sponsors-list li {
+  margin: 0;
+  padding: 0;
+}
+
+.sponsors-list img {
+  height: 3rem;
+  width: auto;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -2,12 +2,13 @@
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import CustomLayout from "./CustomLayout.vue";
+import SponsorList from "./SponsorList.vue";
 import "./style.css";
 
 export default {
   extends: DefaultTheme,
   Layout: CustomLayout,
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.component("SponsorList", SponsorList);
   },
 } satisfies Theme;

docs/.vitepress/theme/style.css

@@ -184,17 +184,17 @@ code {
 /**
  * Component: Homepage logos
  * -------------------------------------------------------------------------- */
-.logo-salad {
+.home-logo-salad {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 2.5rem;
-  margin-right: 2.5rem;
+  margin-inline: 2.5rem;
   margin-top: 3rem;
   text-align: center;
 }
 
-.logo-salad h3 {
+.home-logo-salad h3,
+.home-sponsor h3 {
   color: var(--vp-c-text-3);
   font-size: 0.875rem;
   font-weight: 600;
@@ -203,7 +203,7 @@ code {
   text-transform: uppercase;
 }
 
-.logo-salad-list {
+.home-logo-salad-list {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -212,12 +212,26 @@ code {
   justify-content: center;
 }
 
-.logo-salad-list li {
+.home-logo-salad-list li {
   display: flex;
   list-style: none;
 }
 
-.logo-salad-list svg {
+.home-logo-salad-list svg {
   fill: var(--vp-c-text-1);
   width: auto;
 }
+
+.home-sponsor,
+.home-sponsor p {
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+.home-sponsor-list {
+  margin-block: 4rem;
+}
+
+.home-sponsor .donate {
+  display: inline-block;
+}

docs/.vitepress/zh.ts

@@ -1,6 +1,6 @@
 import { defineConfig, type DefaultTheme } from "vitepress";
 
-export const zh = defineConfig({
+export default defineConfig({
   lang: "zh-Hans",
   description: "在 TypeScript 中使用 OpenAPI 3.0 和 3.1 的模式。",
   themeConfig: {

docs/data/sponsors.json

@@ -0,0 +1,16 @@
+{
+  "gold": [
+    {
+      "name": "Zuplo",
+      "logo": "https://avatars.githubusercontent.com/u/85497839?s=200&v=4",
+      "url": "https://zuplo.link/openapi-ts-web"
+    }
+  ],
+  "silver": [
+    {
+      "name": "nanabit",
+      "logo": "https://avatars.githubusercontent.com/u/154126976?s=200&v=4",
+      "url": "https://nanabit.dev"
+    }
+  ]
+}