docs: credit JetBrains for the open source licenses (#2984)

Author: vmaerten

README.md

@@ -44,6 +44,22 @@
           <img src="website/src/public/img/cloudsmith.svg" height="100px" width="200px" title="Cloudsmith" />
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a target="_blank" href="https://jb.gg/OpenSource">
+          <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="website/src/public/img/jetbrains-dark.svg" />
+            <img src="website/src/public/img/jetbrains.svg" height="100px" width="200px" title="JetBrains" alt="JetBrains logo" />
+          </picture>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center">
+        Package hosting provided by <a target="_blank" href="https://cloudsmith.com/">Cloudsmith</a>.
+      </td>
+      <td align="center">
+        Tooling provided by <a target="_blank" href="https://jb.gg/OpenSource">JetBrains</a>.
+      </td>
     </tr>
   </table>
 </div>

website/.vitepress/components/VPSponsorsGrid.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSponsorsGrid } from 'vitepress/dist/client/theme-default/composables/sponsor-grid';
+import type { Sponsor } from '../sponsors';
+
+interface Props {
+  size?: 'xmini' | 'mini' | 'small' | 'medium' | 'big';
+  data: Sponsor[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+});
+
+const el = ref(null);
+
+useSponsorsGrid({ el, size: props.size });
+</script>
+
+<template>
+  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
+    <div
+      v-for="sponsor in data"
+      :key="sponsor.name"
+      class="vp-sponsor-grid-item"
+      :class="{ 'has-dark-logo': sponsor.imgDark }"
+    >
+      <a
+        class="vp-sponsor-grid-link"
+        :href="sponsor.url"
+        target="_blank"
+        rel="sponsored noopener"
+      >
+        <article class="vp-sponsor-grid-box">
+          <h4 class="visually-hidden">{{ sponsor.name }}</h4>
+          <!-- Both logos are rendered and one is hidden in CSS, so the right
+               one is already in place before hydration. -->
+          <img
+            class="vp-sponsor-grid-image logo-light"
+            :src="sponsor.img"
+            :alt="sponsor.name"
+          />
+          <img
+            v-if="sponsor.imgDark"
+            class="vp-sponsor-grid-image logo-dark"
+            :src="sponsor.imgDark"
+            :alt="sponsor.name"
+          />
+        </article>
+      </a>
+      <!-- Sits inside the tile: the grid clips anything that overflows it. -->
+      <span v-if="sponsor.description" class="tooltip">
+        {{ sponsor.description }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vp-sponsor-grid-item {
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 14px;
+  left: 50%;
+  transform: translate(-50%, 6px);
+  max-width: calc(100% - 28px);
+  padding: 7px 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  background-color: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-2);
+  color: var(--vp-c-text-1);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: center;
+  text-wrap: balance;
+  opacity: 0;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
+  pointer-events: none;
+}
+
+.vp-sponsor-grid-item:hover .tooltip,
+.vp-sponsor-grid-item:focus-within .tooltip {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}
+</style>

website/.vitepress/config.ts

@@ -316,6 +316,12 @@ export default defineConfig({
           replacement: fileURLToPath(
             new URL('./components/VPTeamMembersItem.vue', import.meta.url)
           )
+        },
+        {
+          find: /^.*\/VPSponsorsGrid\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./components/VPSponsorsGrid.vue', import.meta.url)
+          )
         }
       ]
     }

website/.vitepress/sponsors.ts

@@ -1,4 +1,15 @@
-export const sponsors = [
+export interface Sponsor {
+  name: string;
+  url: string;
+  img: string;
+  // Logo variant for dark backgrounds. Sponsors that set one keep their own
+  // colours instead of being inverted by the sponsor grid.
+  imgDark?: string;
+  // Tooltip explaining what this sponsor gives the project.
+  description?: string;
+}
+
+export const sponsors: { tier: string; size: string; items: Sponsor[] }[] = [
   {
     tier: 'Gold Sponsors',
     size: 'big',
@@ -27,7 +38,16 @@ export const sponsors = [
       {
         name: 'Cloudsmith',
         url: 'https://cloudsmith.com/',
-        img: '/img/cloudsmith.svg'
+        img: '/img/cloudsmith.svg',
+        description: 'Hosts the deb and rpm package registries for free'
+      },
+      {
+        name: 'JetBrains',
+        url: 'https://jb.gg/OpenSource',
+        img: '/img/jetbrains.svg',
+        imgDark: '/img/jetbrains-mono.svg',
+        description:
+          'Provides free All Products Pack licenses to the maintainers'
       }
     ]
   }

website/.vitepress/theme/custom.css

@@ -145,3 +145,27 @@ img[src*='custom-icon-badges.demolab.com'] {
 .VPTeamPage > .VPTeamPageTitle {
   padding-top: 0
 }
+
+/* VitePress greys out sponsor logos by default. Show them in their brand
+   colours in light mode; dark mode keeps the inversion so black wordmarks
+   stay readable. */
+html:not(.dark) .vp-sponsor-grid-image {
+  filter: none;
+}
+
+/* A sponsor shipping its own dark-background logo already reads correctly on
+   dark, so it opts out of the grid's invert treatment. On hover the grid turns
+   the tile white, so it falls back to the light logo like every other tile. */
+.vp-sponsor-grid-item.has-dark-logo .vp-sponsor-grid-image {
+  filter: none;
+}
+
+.dark .vp-sponsor-grid-item.has-dark-logo .logo-light,
+.dark .vp-sponsor-grid-item.has-dark-logo:hover .logo-dark,
+html:not(.dark) .vp-sponsor-grid-item .logo-dark {
+  display: none;
+}
+
+.dark .vp-sponsor-grid-item.has-dark-logo:hover .logo-light {
+  display: block;
+}