theme: workaround adblock for sponsors (#2505)

Author: jay-es

.vitepress/config.ts

@@ -643,7 +643,7 @@ export default defineConfigWithTheme<ThemeConfig>({
       'link',
       {
         rel: 'preconnect',
-        href: 'https://sponsors.vuejs.org'
+        href: 'https://automation.vuejs.org'
       }
     ],
     [

.vitepress/theme/components/Home.vue

@@ -52,7 +52,7 @@ onMounted(load)
     </p>
   </section>
 
-  <section v-if="data && data.special" id="special-sponsor">
+  <section v-if="data && data.special" id="special-spsr">
     <span>スペシャルスポンサー</span>
     <template v-for="{ url, img, name, description } of data.special">
       <a :href="url" target="_blank" rel="sponsored noopener">
@@ -74,7 +74,7 @@ onMounted(load)
       <span>{{ description }}</span>
     </template>
   </section>
-  <section v-else id="special-sponsor">
+  <section v-else id="special-spsr">
     <span>
       <a href="/sponsor/#tier-benefits">
         Special Sponsor slot is now vacant - Inquire now
@@ -106,7 +106,7 @@ onMounted(load)
     </div>
   </section>
 
-  <section id="sponsors">
+  <section id="spsrs">
     <h2>プラチナスポンサー</h2>
     <SponsorsGroup tier="platinum" placement="landing" />
     <h2>ゴールドスポンサー</h2>
@@ -226,38 +226,38 @@ html:not(.dark) .accent,
   background-color: var(--vt-c-gray-dark-3);
 }
 
-#special-sponsor {
+#special-spsr {
   border-top: 1px solid var(--vt-c-divider-light);
   border-bottom: 1px solid var(--vt-c-divider-light);
   padding: 12px 24px;
   display: flex;
   align-items: center;
 }
 
-#special-sponsor span {
+#special-spsr span {
   color: var(--vt-c-text-2);
   font-weight: 500;
   font-size: 13px;
   vertical-align: middle;
   flex: 1;
 }
 
-#special-sponsor span:first-child {
+#special-spsr span:first-child {
   text-align: right;
 }
 
-#special-sponsor a {
+#special-spsr a {
   display: flex;
   justify-content: center;
   padding: 0 24px;
 }
 
-#special-sponsor img {
+#special-spsr img {
   height: 42px;
   margin: -6px 0;
 }
 
-.dark #special-sponsor img {
+.dark #special-spsr img {
   filter: grayscale(1) invert(1);
 }
 
@@ -285,18 +285,18 @@ html:not(.dark) .accent,
   background-color: transparent;
 }
 
-#sponsors {
+#spsrs {
   max-width: 900px;
   margin: 0px auto;
 }
 
-#sponsors h2 {
+#spsrs h2 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 1em;
 }
 
-#sponsors .sponsor-container {
+#spsrs .spsr-container {
   margin-bottom: 3em;
 }
 
@@ -329,14 +329,14 @@ html:not(.dark) .accent,
     font-size: 16px;
     margin: 18px 0 30px;
   }
-  #special-sponsor {
+  #special-spsr {
     flex-direction: column;
   }
-  #special-sponsor img {
+  #special-spsr img {
     height: 36px;
     margin: 8px 0;
   }
-  #special-sponsor span {
+  #special-spsr span {
     text-align: center !important;
   }
   #highlights h3 {

.vitepress/theme/components/SponsorsGroup.vue

@@ -66,13 +66,13 @@ function resolveList(data: SponsorData) {
 <template>
   <div
     ref="container"
-    class="sponsor-container"
+    class="spsr-container"
     :class="[tier.startsWith('plat') ? 'platinum' : tier, placement]"
   >
     <template v-if="data && visible">
       <a
         v-for="{ url, img, name } of resolveList(data)"
-        class="sponsor-item"
+        class="spsr-item"
         :href="url"
         target="_blank"
         rel="sponsored noopener"
@@ -91,39 +91,39 @@ function resolveList(data: SponsorData) {
     <a
       v-if="placement !== 'page' && tier !== 'special'"
       href="/sponsor/"
-      class="sponsor-item action"
+      class="spsr-item action"
       @click="track(true)"
       >スポンサーになる</a
     >
     <a
       v-if="tier === 'special' && data && !data[tier]?.length"
       href="/sponsor/#tier-benefits"
-      class="sponsor-item action"
+      class="spsr-item action"
       @click="track(true)"
       >Inquire about Special Sponsorship</a
     >
   </div>
 </template>
 
 <style scoped>
-.sponsor-container {
+.spsr-container {
   --max-width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
   column-gap: 4px;
 }
 
-.sponsor-container.platinum {
+.spsr-container.platinum {
   --max-width: 240px;
 }
-.sponsor-container.gold {
+.spsr-container.gold {
   --max-width: 180px;
 }
-.sponsor-container.silver {
+.spsr-container.silver {
   --max-width: 140px;
 }
 
-.sponsor-item {
+.spsr-item {
   margin: 2px 0;
   background-color: var(--vt-c-white-soft);
   display: flex;
@@ -133,92 +133,92 @@ function resolveList(data: SponsorData) {
   transition: background-color 0.2s ease;
   height: calc(var(--max-width) / 2 - 6px);
 }
-.sponsor-item.action {
+.spsr-item.action {
   font-size: 11px;
   color: var(--vt-c-text-3);
 }
-.sponsor-container.page .sponsor-item.action {
+.spsr-container.page .spsr-item.action {
  font-size: 16px;
 }
-.sponsor-item img {
+.spsr-item img {
   max-width: calc(var(--max-width) - 30px);
   max-height: calc(var(--max-width) / 2 - 20px);
 }
-.special .sponsor-item {
+.special .spsr-item {
   height: 160px;
 }
-.special .sponsor-item img {
+.special .spsr-item img {
   max-width: 300px;
   max-height: 150px;
 }
 
 /* dark mode */
-.dark .aside .sponsor-item,
-.dark .landing .sponsor-item {
+.dark .aside .spsr-item,
+.dark .landing .spsr-item {
   background-color: var(--vt-c-bg-soft);
 }
-.aside .sponsor-item img,
-.landing .sponsor-item img {
+.aside .spsr-item img,
+.landing .spsr-item img {
   transition: filter 0.2s ease;
 }
-.dark .aside .sponsor-item img,
-.dark .landing .sponsor-item img {
+.dark .aside .spsr-item img,
+.dark .landing .spsr-item img {
   filter: grayscale(1) invert(1);
 }
-.dark .aside .sponsor-item:hover,
-.dark .landing .sponsor-item:hover {
+.dark .aside .spsr-item:hover,
+.dark .landing .spsr-item:hover {
   color: var(--vt-c-indigo);
   background-color: var(--vt-c-white-mute);
 }
-.dark .sponsor-item:hover img {
+.dark .spsr-item:hover img {
   filter: none;
 }
 
 /* aside mode (on content pages) */
-.sponsor-container.platinum.aside {
+.spsr-container.platinum.aside {
   --max-width: 110px;
   column-gap: 1px;
 }
-.aside .sponsor-item {
+.aside .spsr-item {
   margin: 1px 0;
 }
-.aside .special .sponsor-item {
+.aside .special .spsr-item {
   width: 100%;
   height: 60px;
 }
-.aside .special .sponsor-item img {
+.aside .special .spsr-item img {
   max-width: 120px;
   max-height: 48px;
 }
-.aside .platinum .sponsor-item {
+.aside .platinum .spsr-item {
   width: 111px;
   height: 50px;
 }
-.aside .platinum .sponsor-item img {
+.aside .platinum .spsr-item img {
   max-width: 88px;
 }
 
 /* narrow, aside will be hidden under this state so it's mutually exclusive */
 @media (max-width: 720px) {
-  .sponsor-container.platinum {
+  .spsr-container.platinum {
     --max-width: 180px;
   }
-  .sponsor-container.gold {
+  .spsr-container.gold {
     --max-width: 140px;
   }
-  .sponsor-container.silver {
+  .spsr-container.silver {
     --max-width: 120px;
   }
 }
 
 @media (max-width: 480px) {
-  .sponsor-container.platinum {
+  .spsr-container.platinum {
     --max-width: 150px;
   }
-  .sponsor-container.gold {
+  .spsr-container.gold {
     --max-width: 120px;
   }
-  .sponsor-container.silver {
+  .spsr-container.silver {
     --max-width: 100px;
   }
 }

.vitepress/theme/components/sponsors.ts

@@ -28,7 +28,7 @@ export interface SponsorData {
 export const data = ref<SponsorData>()
 export const pending = ref<boolean>(false)
 
-export const base = `https://sponsors.vuejs.org`
+export const base = `https://automation.vuejs.org`
 
 export const load = async () => {
   if (!pending.value) {