chore: update exceptions for WC API (#233)

.vitepress/config.ts

@@ -129,38 +129,14 @@ export default defineConfigWithTheme<ThemeConfig>({
   },
 });
 
-function getAnalyticsTags({
-  VITE_GTM_ID = '',
-  VITE_GTAG_ID = '',
-}: NodeJS.ProcessEnv): HeadConfig[] {
-  // Fail the build if we have a defined but malformed analytics id
-  const idPattern = /^(G|GTM)-[A-Z\d]+$/;
-  for (const [name, value] of Object.entries({ VITE_GTM_ID, VITE_GTAG_ID })) {
-    if (value && !idPattern.test(value)) {
-      throw new Error(`Invalid ${name} value: '${value}'`);
-    }
-  }
-
+function getAnalyticsTags({ VITE_GTM_ID = '' }: NodeJS.ProcessEnv): HeadConfig[] {
+  const idPattern = /^GTM-[A-Z\d]+$/;
   const tags: HeadConfig[] = [];
 
-  if (VITE_GTAG_ID) {
-    const source = `
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){ dataLayer.push(arguments) }
-      gtag('js', new Date);
-      gtag('config', '${VITE_GTAG_ID}', { anonymize_ip: true });
-    `;
-    tags.push(['script', {}, source]);
-    if (!VITE_GTM_ID) {
-      const url = `https://www.googletagmanager.com/gtag/js?id=${VITE_GTAG_ID}`;
-      tags.push(['script', { async: '', src: url }]);
-    }
-  }
-
-  // We're migrating from gtag.js to gtm.js, but using both as we verify this change.
-  // According to https://support.google.com/tagmanager/answer/6103696 this should be
-  // inserted after any script declaring a dataLayer.
   if (VITE_GTM_ID) {
+    if (!idPattern.test(VITE_GTM_ID)) {
+      throw new Error(`Invalid VITE_GTM_ID value: '${VITE_GTM_ID}'`);
+    }
     const source = `
       (function(w, d, s, l, i){
         w[l] = w[l] || [];

.vitepress/theme/components/AuthButtons/linkStyles.scss

@@ -1,48 +1,47 @@
-
 .link {
-    --outline-color-hsl: 0, 0%, 100%;
-    --outline-opacity: 0.08;
-    --text-strong-color: #fff;
-    display: flex;
-    align-items: center;
-    height: 36px;
-    padding: 0 20px;
-    border-radius: 8px;
-    color: var(--text-strong-color);
-    font-size: 13px;
-    font-weight: 500;
-    text-decoration: none;
-    box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
-    background-color: hsla(224, 32%, 28%, 0.24);
-    backdrop-filter: blur(8px);
-    transition: 0.1s ease;
-    transition-property: background-color, box-shadow, color;
-  }
-
-  .light {
-    &:hover {
-      --outline-opacity: 0.14;
-      color: var(--text-strong-color);
-      background-color: hsla(224, 32%, 28%, 0.54);
-    }
-    :root:not(.dark) & {
-      --outline-color-hsl: 224, 32%, 28%;
-      --outline-opacity: 0.1;
-      color: hsl(240, 6%, 23%);
-      background-color: hsla(224, 32%, 28%, 0.1);
-      &:hover {
-        --outline-opacity: 0.2;
-        background-color: transparent;
-      }
-    }
-  }  
-
-  .accent {
+  --outline-color-hsl: 0, 0%, 100%;
+  --outline-opacity: 0.08;
+  --text-strong-color: #fff;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 8px;
+  color: var(--text-strong-color);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
+  background-color: hsla(224, 32%, 28%, 0.24);
+  backdrop-filter: blur(8px);
+  transition: 0.1s ease;
+  transition-property: background-color, box-shadow, color;
+}
+
+.light {
+  &:hover {
     --outline-opacity: 0.14;
     color: var(--text-strong-color);
-    background-color: hsl(214, 87%, 51%);
+    background-color: hsla(224, 32%, 28%, 0.54);
+  }
+  :root:not(.dark) & {
+    --outline-color-hsl: 224, 32%, 28%;
+    --outline-opacity: 0.1;
+    color: hsl(240, 6%, 23%);
+    background-color: hsla(224, 32%, 28%, 0.1);
     &:hover {
-      --outline-opacity: 0.24;
-      background-color: hsl(208, 100%, 53%);
+      --outline-opacity: 0.2;
+      background-color: transparent;
     }
-  }
+  }
+}
+
+.accent {
+  --outline-opacity: 0.14;
+  color: var(--text-strong-color);
+  background-color: hsl(214, 87%, 51%);
+  &:hover {
+    --outline-opacity: 0.24;
+    background-color: hsl(208, 100%, 53%);
+  }
+}

.vitepress/theme/components/Helpers/CardLink.vue

@@ -102,8 +102,7 @@ export default {
     min-width: 100px;
     height: 64px;
     &:not(.has-bg)::before {
-      -webkit-mask-size: 32px;
-              mask-size: 32px;
+      mask-size: 32px;
     }
   }
 
@@ -120,14 +119,10 @@ export default {
     height: 100%;
     transition: background-color 0.14s ease;
     background-color: var(--vp-c-text-3);
-    -webkit-mask-image: var(--icon-img);
-            mask-image: var(--icon-img);
-    -webkit-mask-position: center;
-            mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    -webkit-mask-size: var(--icon-mask-size);
-            mask-size: var(--icon-mask-size);
+    mask-image: var(--icon-img);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: var(--icon-mask-size);
     .card-body:hover & {
       background-color: var(--vp-c-text-2);
     }
@@ -149,8 +144,7 @@ export default {
     min-width: 84px;
     height: 48px;
     &::before {
-      -webkit-mask-size: 28px;
-              mask-size: 28px;
+      mask-size: 28px;
     }
   }
   &.is-podcast.small,
@@ -159,7 +153,6 @@ export default {
     min-width: 64px;
     height: 48px;
     &::before {
-      -webkit-mask-size: 24px;
       mask-size: 24px;
     }
   }

.vitepress/theme/components/HomeIntro.vue

@@ -31,14 +31,11 @@ header {
   }
 }
 
-$icon-mask: linear-gradient(to bottom, #fff9 10%, #fffa 30%, #fff0 74%);
-
 header .icon {
   width: 160px;
   height: 160px;
   color: var(--sb-foreground-highlight);
-  -webkit-mask-image: $icon-mask;
-  mask-image: $icon-mask;
+  mask-image: linear-gradient(to bottom, #fff9 10%, #fffa 30%, #fff0 74%);
 
   @media (prefers-contrast: more) {
     display: none;

.vitepress/theme/components/Icons/SvgIcon.vue

@@ -10,10 +10,14 @@ const props = defineProps<{
 
 const styleObj = computed(() => {
   const style: Record<string, string> = {};
-
   const url = iconsUrls[props.icon];
+
   if (url) {
-    style['--icon'] = `url('${url}')`;
+    // Vite may transform SVG assets to data URLs, using single quotes for XML
+    // attribute values for some reason. This means we can't always quote URLs
+    // with single quotes, or the CSS value might be invalid.
+    const quote = url.includes(`"`) ? `'` : `"`;
+    style['--icon'] = `url(${quote}${url}${quote})`;
   } else {
     style['visibility'] = 'hidden';
     style['--error'] = `'${props.icon} not found'`;
@@ -39,10 +43,12 @@ const styleObj = computed(() => {
   flex: none;
   width: var(--size, 1em);
   height: var(--size, 1em);
-  color: inherit;
-  // Use SVG icon as mask for background
-  -webkit-mask: var(--icon) center/contain no-repeat;
-  mask: var(--icon) center/contain no-repeat;
+  // Use inherited text color to paint a square
   background-color: currentColor;
+  // Then use the SVG icon as mask
+  mask-image: var(--icon);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
 }
 </style>

.vitepress/theme/icons/index.ts

@@ -1,6 +1,7 @@
 // Tell Vite to load all SVG icons in the icons folder as part of the build.
 const importedIconsUrls = import.meta.glob('./*.svg', {
-  as: 'url',
+  query: '?url',
+  import: 'default',
   eager: true,
 });
 
@@ -9,6 +10,6 @@ const iconNamePattern = /([0-9a-zA-Z-]+)\.svg$/;
 export const iconsUrls: Record<string, string> = Object.fromEntries(
   Object.entries(importedIconsUrls).map(([path, url]) => {
     const nameMatches = path.match(iconNamePattern);
-    return [nameMatches ? nameMatches[1] : path, url];
-  })
+    return [nameMatches ? nameMatches[1] : path, url as string];
+  }),
 );

.vitepress/theme/styles/content-aside.scss

@@ -0,0 +1,47 @@
+// --------------------------------
+// -- Aside / Table of Contents
+
+// Widen aside
+.VPDoc .aside {
+  max-width: 300px !important;
+  position: relative;
+  padding-left: 0;
+  @media (min-width: 1380px) {
+    max-width: 248px;
+  }
+  @media (min-width: 1500px) {
+    max-width: 300px;
+  }
+  @media (min-width: 1600px) {
+    max-width: 328px;
+  }
+}
+.aside-container {
+  width: 300px !important;
+  max-width: 300px;
+}
+.aside-content {
+  padding-top: 56px;
+}
+
+// Add gap between title and list, but account for hardcoded `outline-marker` `top`
+.VPDocAside .outline-title {
+  margin-block-end: -1px;
+  transform: translateY(-6px);
+}
+
+// Space out links without affecting `outline-marker` too much
+.VPDocAside .outline-link {
+  padding: 6px 0;
+  font-size: 12.5px;
+  transition-duration: 0.1s;
+}
+
+// Don't clip text in the outline
+.VPDocAsideOutline .outline-link {
+  white-space: normal;
+  text-overflow: initial;
+  padding: 5px 0;
+  font-size: 13px;
+  line-height: 18px;
+}