From d2af9037ba96e3682f39b9a996ba284dcaa5d651 Mon Sep 17 00:00:00 2001
From: FichteFoll <fichtefoll2@googlemail.com>
Date: Sun, 29 Oct 2023 21:29:47 +0100
Subject: [PATCH 1/3] Adopt spacings for contributors box from VPFeatures

---
 docs/.vitepress/components/Contributors.vue | 66 ++++++++++++++-------
 docs/.vitepress/theme/custom.css            | 34 -----------
 docs/index.md                               | 34 ++++++++++-
 3 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/docs/.vitepress/components/Contributors.vue b/docs/.vitepress/components/Contributors.vue
index 2b645a26..b591f6bc 100644
--- a/docs/.vitepress/components/Contributors.vue
+++ b/docs/.vitepress/components/Contributors.vue
@@ -1,31 +1,47 @@
 <template>
-  <h1>Contributors ({{ contributors.length }})</h1>
+  <div class="contributors-card">
+    <h1>Contributors ({{ contributors.length }})</h1>
 
-  <input type="checkbox" id="showMoreToggle" class="hidden">
+    <input type="checkbox" id="showMoreToggle" class="hidden">
 
-  <!-- Displayed contributors -->
+    <!-- Displayed contributors -->
 
-  <VPTeamMembers class="contributors" size="small" :members="contributors.slice(0, maxVisible)" />
+    <VPTeamMembers class="contributors" size="small" :members="contributors.slice(0, maxVisible)" />
 
-  <!-- More contributors -->
-  <VPTeamMembers class="moreContributors" size="small" :members="contributors" />
+    <!-- More contributors -->
+    <VPTeamMembers class="moreContributors" size="small" :members="contributors" />
 
-  <!-- Toggle button -->
-  <label for="showMoreToggle" class="toggleButton">
-    <div class="icon-container">
-      <svg class="show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-      <svg class="hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <path d="m18 15-6-6-6 6" />
-      </svg>
-    </div>
-  </label>
+    <!-- Toggle button -->
+    <label for="showMoreToggle" class="toggleButton">
+      <div class="icon-container">
+        <svg class="show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+        <svg class="hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="m18 15-6-6-6 6" />
+        </svg>
+      </div>
+    </label>
 
-  <p v-if="error" class="error-message">{{ error }}</p>
+    <p v-if="error" class="error-message">{{ error }}</p>
+  </div>
 </template>
 
 <style>
+.contributors-card {
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  min-height: 400px;
+  border-radius: 10px;
+  padding: 24px;
+}
+
+.contributors-card h1 {
+  font-size: 1.75rem;
+  font-weight: 600;
+}
+
+
 .icon-container {
   display: inline-block;
   width: 24px;
@@ -41,6 +57,10 @@
   display: none;
 }
 
+.toggleButton {
+  cursor: pointer;
+}
+
 #showMoreToggle:checked~.contributors {
   display: none;
 }
@@ -55,13 +75,17 @@
 }
 
 .VPTeamMembers>.container {
+  /* Allows items to wrap to the next line if there's not enough space */
   display: flex;
   flex-wrap: wrap;
-  /* Allows items to wrap to the next line if there's not enough space */
-  justify-content: center;
   /* Centers items horizontally */
-  gap: 1rem;
+  justify-content: center;
   /* Space between members. Adjust as needed */
+  gap: 10px;
+}
+
+.VPTeamMembers>.container>.item {
+  width: 180px;
 }
 </style>
 
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 80b297f6..d5e67541 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -39,7 +39,6 @@
 }
 
 
-
 .VPNavBar:not(.has-sidebar):not(.top) {
   border-bottom-color: transparent !important;
 }
@@ -48,40 +47,7 @@
   background-color: var(--vp-c-bg-elv);
 }
 
-.VPTeamMembers.small .container {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
-  gap: 10px;
-}
-
 /* Custom Stlye */
-.custom-layout {
-  background-color: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-1);
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 1rem;
-  min-height: 400px;
-  max-width: 1152px;
-  margin: 6rem auto 0;
-  border-radius: 10px;
-}
-
-.custom-layout h1 {
-  font-size: 1.75rem;
-  font-weight: 600;
-}
-
-.custom-layout .btn {
-  background-color: var(--vp-button-brand-bg);
-  color: var(--vp-button-brand-text);
-  border-radius: 20px;
-  padding: 0.5rem 1.4rem;
-}
-
 dt.defined-term {
   color: var(--vp-c-brand) !important;
   text-transform: uppercase;
diff --git a/docs/index.md b/docs/index.md
index 3eb52b0d..2f8236bb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -48,6 +48,38 @@ head:
 
 <!-- Custom home layout -->
 <div class="custom-layout">
-  <Contributors ></Contributors>
+  <div class="custom-container">
+    <Contributors ></Contributors>
+  </div>
 </div>
 
+<style scoped>
+/* horizonal padding copied from .VPFeatures's padding */
+.custom-layout {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .custom-layout {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .custom-layout {
+    padding: 0 64px;
+  }
+}
+
+.custom-container {
+  max-width: 1152px;
+  margin: 2rem auto 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+}
+</style>

From 28bc3340fc6d4967aa92a47bd543a81298185326 Mon Sep 17 00:00:00 2001
From: FichteFoll <fichtefoll2@googlemail.com>
Date: Sun, 29 Oct 2023 21:48:20 +0100
Subject: [PATCH 2/3] Use a single VPTeamMembers component

Here, we use max-height and `overflow: hidden` to display at most 2 rows
of contributors, regardless of the page width. For this, we explicitly
need to set a height for all items.

Since we don't know ahead of time how many those will be, we might as
well "render" everything at once, even though it will be hidden. At
least FireFox would download the avatars of all images on the page
regardless, also when `display: none` was used on a parent DOM
element.

Also make the "button" to expand the list show a pointer.
---
 docs/.vitepress/components/Contributors.vue | 53 ++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/docs/.vitepress/components/Contributors.vue b/docs/.vitepress/components/Contributors.vue
index b591f6bc..00796f7b 100644
--- a/docs/.vitepress/components/Contributors.vue
+++ b/docs/.vitepress/components/Contributors.vue
@@ -5,11 +5,7 @@
     <input type="checkbox" id="showMoreToggle" class="hidden">
 
     <!-- Displayed contributors -->
-
-    <VPTeamMembers class="contributors" size="small" :members="contributors.slice(0, maxVisible)" />
-
-    <!-- More contributors -->
-    <VPTeamMembers class="moreContributors" size="small" :members="contributors" />
+    <VPTeamMembers class="contributors" size="small" :members="contributors" />
 
     <!-- Toggle button -->
     <label for="showMoreToggle" class="toggleButton">
@@ -27,8 +23,12 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 .contributors-card {
+  --item-height: 256px; /* allows for 2 rows in name */
+  --item-width: 180px;
+  --item-gap: 0px; /* items are padded enough */
+
   background-color: var(--vp-c-bg-soft);
   color: var(--vp-c-text-1);
   min-height: 400px;
@@ -41,51 +41,50 @@
   font-weight: 600;
 }
 
-
-.icon-container {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  position: relative;
-}
-
 .hidden {
   display: none;
 }
 
-.moreContributors {
-  display: none;
-}
-
 .toggleButton {
   cursor: pointer;
 }
 
-#showMoreToggle:checked~.contributors {
-  display: none;
+.icon-container {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.contributors {
+  max-height: calc(var(--item-height) * 2);
+  overflow: hidden;
 }
 
-#showMoreToggle:checked~.moreContributors {
-  display: block;
+#showMoreToggle:checked ~ .contributors {
+  max-height: none;
 }
 
 #showMoreToggle:checked~.toggleButton .show,
 #showMoreToggle:not(:checked)~.toggleButton .hide {
   display: none;
 }
+</style>
 
-.VPTeamMembers>.container {
+<style>
+/* Overrides for within .VPTeamMembers */
+.contributors-card .VPTeamMembers > .container {
   /* Allows items to wrap to the next line if there's not enough space */
   display: flex;
   flex-wrap: wrap;
   /* Centers items horizontally */
   justify-content: center;
-  /* Space between members. Adjust as needed */
-  gap: 10px;
+  gap: var(--item-gap);
 }
 
-.VPTeamMembers>.container>.item {
-  width: 180px;
+.contributors-card .VPTeamMembers > .container > .item {
+  width: var(--item-width);
+  height: var(--item-height);
 }
 </style>
 

From bd0fb5cf175db2c2f3de45e5656f6b6c3d1aa384 Mon Sep 17 00:00:00 2001
From: FichteFoll <fichtefoll2@googlemail.com>
Date: Sun, 29 Oct 2023 22:31:43 +0100
Subject: [PATCH 3/3] Use non-API URL

---
 docs/.vitepress/data/contributors.data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/data/contributors.data.ts b/docs/.vitepress/data/contributors.data.ts
index fe7ee8a2..942dee1c 100644
--- a/docs/.vitepress/data/contributors.data.ts
+++ b/docs/.vitepress/data/contributors.data.ts
@@ -43,7 +43,7 @@ export default {
           name: contributor.login,
           title: 'Contributor',
           links: [
-            { icon: 'github', link: contributor.url },
+            { icon: 'github', link: contributor.html_url },
           ]
         }));