From bde65e20663d4c34356137a798d0a9f0d374ea2e Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Sun, 28 Jun 2026 20:53:25 +0200
Subject: [PATCH] docs: Make vitepress components css files more readable and
 simply (#2272)

---
 docs/.vitepress/components/BlogHome.vue       |  60 ++++---
 docs/.vitepress/components/BlogLayout.vue     |  84 +++++-----
 .../.vitepress/components/BlogPostPreview.vue |  51 ++----
 .../components/EntrypointPatterns.vue         |  43 +++--
 docs/.vitepress/components/ExampleSearch.vue  | 149 +++++-------------
 .../components/ExampleSearchFilterByItem.vue  |  85 +++++-----
 .../components/ExampleSearchResult.vue        |  69 ++++----
 docs/.vitepress/theme/custom.css              |  71 +++------
 8 files changed, 255 insertions(+), 357 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index d6843cdc..8c6fb0a9 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -18,10 +18,8 @@ const posts = computed<Post[]>(() =>
 
 <template>
   <div class="container">
-    <div>
-      <div class="vp-doc">
-        <h1>Blog</h1>
-      </div>
+    <div class="inner-container">
+      <h1>Blog</h1>
 
       <ul>
         <BlogPostPreview v-for="post of posts" :key="post.url" :post />
@@ -35,37 +33,33 @@ const posts = computed<Post[]>(() =>
   display: flex;
   flex-direction: column;
   align-items: center;
-}
-.container > div {
-  padding: 32px;
-  max-width: 900px;
-  width: 100%;
-  min-width: 0;
-}
 
-h1 {
-  padding-bottom: 16px;
-}
+  .inner-container {
+    padding: 32px;
+    max-width: 900px;
+    width: 100%;
 
-ul {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-}
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
+    h1 {
+      font-size: 32px;
+      font-weight: 600;
+      margin-top: 10px;
+      padding-bottom: 16px;
+    }
 
-ul li {
-  padding-top: 16px;
-  margin-top: 16px;
-  border-top: 1px solid var(--vp-c-default);
-}
-ul li:last-child {
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-default);
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        padding-top: 16px;
+        margin-top: 16px;
+
+        &:last-child {
+          padding-bottom: 16px;
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 4573dd0b..0c58ba97 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -9,7 +9,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 
 <template>
   <div class="vp-doc">
-    <main class="container-content">
+    <main class="container">
       <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a
@@ -18,7 +18,10 @@ const date = useBlogDate(() => frontmatter.value.date);
           :href="`https://github.com/${author.github}`"
           class="author"
         >
-          <img :src="`https://github.com/${author.github}.png?size=96`" />
+          <img
+            :src="`https://github.com/${author.github}.png?size=96`"
+            alt="Author's avatar"
+          />
           <span>{{ author.name }}</span>
         </a>
         <span>&bull;</span>
@@ -30,48 +33,43 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-vp-doc {
+.vp-doc {
   display: flex;
-}
-main {
-  max-width: 1080px;
-  padding: 32px;
-  margin: auto;
-}
-@media (min-width: 768px) {
-  main {
-    padding: 64px;
+
+  .container {
+    max-width: 1080px;
+    padding: 32px;
+    margin: auto;
+
+    @media (min-width: 768px) {
+      padding: 64px;
+    }
+  }
+
+  .meta-row {
+    display: flex;
+    color: var(--vp-c-text-2);
+    gap: 16px;
+    overflow: hidden;
+    padding-bottom: 32px;
+
+    .author {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      color: var(--vp-c-text-2);
+      font-weight: normal;
+      text-decoration: none;
+
+      :hover {
+        text-decoration: underline;
+      }
+
+      img {
+        width: 24px;
+        border-radius: 100%;
+      }
+    }
   }
 }
-.meta-row {
-  display: flex;
-  color: var(--vp-c-text-2);
-  gap: 16px;
-  overflow: hidden;
-  padding-bottom: 32px;
-}
-.meta-row > * {
-  flex-shrink: 0;
-}
-.author {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--vp-c-text-2);
-  font-weight: normal;
-  text-decoration: none;
-}
-.author img {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-}
-.author span {
-  padding: 0;
-  margin: 0;
-}
-.author:hover {
-  text-decoration: underline;
-  color: var(--vp-c-text-2);
-}
 </style>
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 40582218..24b682fd 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -31,42 +31,23 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li {
-  padding: 0;
-  margin: 0;
-}
+.vp-doc {
+  * {
+    margin-block: 10px;
+  }
 
-p {
-  margin: 0;
-}
-h3 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
+  .title {
+    color: var(--vp-c-text-1);
+  }
 
-li > a > div {
-  display: flex;
-  flex-direction: column;
-  margin: 0 -16px;
-  padding: 16px;
-  border-radius: 16px;
-}
-li > a > div:hover {
-  background: var(--vp-c-default);
-}
-li .title {
-  color: var(--vp-c-text);
-  margin-bottom: 12px;
-}
-li .description {
-  font-size: 16px;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-}
-li .meta {
-  font-weight: 400;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
+  .description {
+    color: var(--vp-c-text-2);
+  }
+
+  .meta {
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--vp-c-text-2);
+  }
 }
 </style>
diff --git a/docs/.vitepress/components/EntrypointPatterns.vue b/docs/.vitepress/components/EntrypointPatterns.vue
index df3f661a..a7fad8aa 100644
--- a/docs/.vitepress/components/EntrypointPatterns.vue
+++ b/docs/.vitepress/components/EntrypointPatterns.vue
@@ -5,36 +5,61 @@ defineProps<{
 </script>
 
 <template>
-  <table class="no-vertical-dividers">
+  <table class="no-vertical-dividers entrypoint-patterns">
     <thead>
       <tr>
-        <th style="width: 100%">Filename</th>
+        <th class="col-filename">Filename</th>
         <th></th>
         <th>Output Path</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="pattern of patterns">
-        <td style="white-space: nowrap; padding-right: 8px">
+      <tr v-for="pattern of patterns" :key="pattern[0]">
+        <td class="cell-input">
           <code>entrypoints/{{ pattern[0] }}</code>
         </td>
-        <td style="padding: 6px; opacity: 50%">
+        <td class="cell-arrow">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
             height="20"
             viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill="currentColor"
               d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+              fill="currentColor"
             />
           </svg>
         </td>
-        <td style="white-space: nowrap; padding-left: 8px">
+        <td class="cell-output">
           <code>/{{ pattern[1] }}</code>
         </td>
       </tr>
     </tbody>
   </table>
 </template>
+
+<style scoped>
+.entrypoint-patterns {
+  width: 100%;
+
+  .col-filename {
+    width: 100%;
+  }
+
+  .cell-input {
+    white-space: nowrap;
+    padding-right: 8px;
+  }
+
+  .cell-arrow {
+    padding: 6px;
+    opacity: 0.5;
+  }
+
+  .cell-output {
+    white-space: nowrap;
+    padding-left: 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 98f79269..417247b1 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -72,19 +72,19 @@ const filteredExamples = computed(() => {
 
     <div class="filters">
       <ExampleSearchFilterByItem
-        label="APIs"
-        :items="exampleMetadata?.allApis"
         v-model="selectedApis"
+        :items="exampleMetadata?.allApis"
+        label="APIs"
       />
       <ExampleSearchFilterByItem
-        label="Permissions"
-        :items="exampleMetadata?.allPermissions"
         v-model="selectedPermissions"
+        :items="exampleMetadata?.allPermissions"
+        label="Permissions"
       />
       <ExampleSearchFilterByItem
-        label="Packages"
-        :items="exampleMetadata?.allPackages"
         v-model="selectedPackages"
+        :items="exampleMetadata?.allPackages"
+        label="Packages"
       />
     </div>
 
@@ -107,120 +107,57 @@ const filteredExamples = computed(() => {
 <style scoped>
 .example-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   grid-template-areas:
-    'search'
-    'results';
+    'filters search'
+    'filters results';
   gap: 16px;
-}
-@media only screen and (min-width: 720px) {
-  .example-layout {
+
+  @media only screen and (min-width: 710px) {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'filters search'
-      'filters results';
   }
-}
-.search {
-  grid-area: search;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  width: 100%;
-  display: flex;
-  border-radius: 16px;
-}
-.filters {
-  display: none;
-  grid-area: filters;
-}
-@media only screen and (min-width: 720px) {
+
+  .search {
+    grid-area: search;
+    background: var(--vp-c-bg-soft);
+    padding: 20px;
+    border-radius: 16px;
+
+    input {
+      font-size: 16px;
+    }
+  }
+
   .filters {
+    grid-area: filters;
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    border-radius: 16px;
-    overflow: hidden;
-    align-self: flex-start;
+    gap: 10px;
+
+    @media only screen and (min-width: 710px) {
+      border-radius: 16px;
+    }
   }
-}
-.results {
-  grid-area: results;
-}
 
-.box {
-  border-radius: 16px;
-  overflow: hidden;
-}
+  .results {
+    grid-area: results;
 
-.search input {
-  min-width: 0;
-  flex: 1;
-  font-size: 16px;
-}
+    .search-results {
+      display: grid;
+      gap: 16px;
 
-.checkbox-col {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 200px;
-  font-size: 14px;
-  gap: 4px;
-}
+      @media only screen and (min-width: 800px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
 
-.filter-btn {
-  color: var(--vp-c-brand-1);
-}
+      @media only screen and (min-width: 1024px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
 
-.checkbox-col .header {
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-
-.checkbox-col p {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-}
-
-span {
-  padding-top: 1px;
-}
-
-.checkbox-col input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.checkbox-col-container {
-  display: flex;
-}
-
-.search-results {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 16px;
-}
-@media only screen and (min-width: 800px) {
-  .search-results {
-    grid-template-columns: repeat(2, 1fr);
+      a {
+        background-color: red;
+      }
+    }
   }
 }
-@media only screen and (min-width: 1024px) {
-  .search-results {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-a {
-  background-color: red;
-}
 </style>
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index a7752fe0..3c174c9a 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -29,12 +29,12 @@ function toggleItem(pkg: string) {
       <span>Filter by {{ label }}</span> <span v-if="count">({{ count }})</span>
     </p>
     <div class="scroll-container">
-      <ul>
+      <ul class="items">
         <li v-for="item in items">
-          <label :title="item">
+          <label :title="item" class="item-label">
             <input
-              type="checkbox"
               :checked="selectedItems[item]"
+              type="checkbox"
               @input="toggleItem(item)"
             />
             <span>{{ item }}</span>
@@ -51,50 +51,45 @@ function toggleItem(pkg: string) {
   display: flex;
   flex-direction: column;
   background: var(--vp-c-bg-soft);
-}
+  border-radius: 20px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--vp-c-brand-3) transparent;
+  padding-bottom: 10px;
 
-.scroll-container {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
+  .header {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 50%;
+  }
 
-.scroll-container ul {
-  position: absolute;
-  overflow-y: auto;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: small;
-  padding: 8px 16px 16px 16px;
-}
+  .scroll-container {
+    flex: 1;
+    position: relative;
 
-.header {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-label {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-  cursor: pointer;
-  text-wrap: nowrap;
-}
-span {
-  padding-top: 1px;
-}
-input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+    .items {
+      position: absolute;
+      overflow-y: auto;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: small;
+      padding: 8px 16px 16px;
+
+      .item-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+
+        input[type='checkbox'] {
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index ef25b7da..b093e727 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -17,56 +17,45 @@ defineProps<{
 </template>
 
 <style scoped>
-* {
-  min-width: 0;
-}
 a {
   padding: 16px;
   display: flex;
   flex-direction: column;
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
-  color: var(--vp-c-text-1) !important;
   gap: 8px;
-}
 
-a:hover {
-  outline: 2px solid var(--vp-c-brand-2);
-}
-.name {
-  font-size: 16px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
+  &:hover {
+    outline: 2px solid var(--vp-c-brand-3);
 
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.description {
-  height: 53px;
-  opacity: 70%;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 120%;
-  min-height: 0;
+    .link {
+      opacity: 100%;
+    }
+  }
 
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+  .name {
+    font-weight: 500;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-.link {
-  opacity: 0;
-  transition: 250ms;
-  color: var(--vp-c-brand-2);
-  font-weight: bold;
-  text-align: right;
-}
-a:hover .link {
-  opacity: 100%;
+  .description {
+    opacity: 70%;
+    font-size: 14px;
+    line-height: 130%;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link {
+    opacity: 0;
+    transition: 250ms;
+    color: var(--vp-c-brand-3);
+    font-weight: bold;
+    text-align: right;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index c5a7253d..5dd313f0 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,9 +1,15 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* Colors */
 :root {
   --wxt-c-green-1: #0b8a00;
   --wxt-c-green-2: #096600;
   --wxt-c-green-3: #096600;
   --wxt-c-green-soft: rgba(11, 138, 0, 0.14);
+
+  --vp-c-brand-1: var(--wxt-c-green-1);
+  --vp-c-brand-2: var(--wxt-c-green-2);
+  --vp-c-brand-3: var(--wxt-c-green-3);
+  --vp-c-brand-soft: var(--wxt-c-green-soft);
 }
 
 .dark {
@@ -13,66 +19,40 @@
   --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
 }
 
-/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
-
-:root {
-  --vp-c-brand-1: var(--wxt-c-green-1);
-  --vp-c-brand-2: var(--wxt-c-green-2);
-  --vp-c-brand-3: var(--wxt-c-green-3);
-  --vp-c-brand-soft: var(--wxt-c-green-soft);
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 /* Customize Individual Components */
+.vp-doc .no-vertical-dividers {
+  th,
+  td {
+    border: none;
+  }
 
-.vp-doc .no-vertical-dividers th,
-.vp-doc .no-vertical-dividers td {
-  border: none;
-}
-
-.vp-doc .no-vertical-dividers tr {
-  border: 1px solid var(--vp-c-divider);
+  tr {
+    border: 1px solid var(--vp-c-divider);
+  }
 }
 
 body {
   overflow-y: scroll;
 }
 
-.VPSidebar {
-  user-select: none;
-}
-
-.VPSidebarItem .badge {
-  display: inline-block;
-  min-width: 1.6em;
-  padding: 0.3em 0.4em 0.2em;
-  border-radius: 1rem;
-  font-size: 0.75em;
-  line-height: 1;
-  margin-left: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
-  background-color: var(--vp-c-default-2);
-}
-
-.netlify-badge {
-  display: inline-flex;
-  line-height: 0;
-  vertical-align: middle;
-}
-
-.netlify-badge img {
-  display: block;
-}
-
 .light-netlify {
   display: inline-flex;
 }
+
 .dark .light-netlify {
   display: none;
 }
+
 .dark-netlify {
   display: none;
 }
+
 .dark .dark-netlify {
   display: inline-flex;
 }
@@ -80,15 +60,15 @@ body {
 /* Add Aaron's favorite pic from Artemis II to the hero section because it's cool. */
 .dark .VPHome::before {
   content: '';
-  background-image: url('/assets/art002e009298.jpg');
-  opacity: 50%;
   position: absolute;
+  background-image: url('../../assets/art002e009298.jpg');
+  opacity: 50%;
   width: 100%;
   height: 110vh;
   background-size: cover;
   background-position: 90%;
-  pointer-events: none;
 }
+
 .dark .VPHome::after {
   content: '';
   position: absolute;
@@ -96,9 +76,8 @@ body {
   height: 10vh;
   top: 100vh;
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
-  pointer-events: none;
-  z-index: 0;
 }
+
 .item {
   z-index: 1;
 }