docs: update to @nuxt/fonts

nuxt · Mar 11, 2024 · 40b3a07 · 40b3a07
1 parent f5ac6f5
commit 40b3a07
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 79 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -90,7 +90,7 @@ provide('navigation', navigation)
     </template>
     <!-- Mobile panel -->
     <template v-if="$route.path !== '/'" #panel>
-      <LazyUDocsSearchButton size="md" class="mb-4 w-full" />
+      <LazyUContentSearchButton size="md" class="mb-4 w-full" />
       <LazyUNavigationTree :links="mapContentNavigation(navigation!)" default-open :multiple="false" />
     </template>
   </UHeader>
@@ -136,6 +136,6 @@ provide('navigation', navigation)
     </template>
   </UFooter>
   <ClientOnly>
-    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+    <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
   </ClientOnly>
 </template>
diff --git a/docs/components/AdsCarbon.vue b/docs/components/AdsCarbon.vue
diff --git a/docs/components/ads/Ads.vue b/docs/components/ads/Ads.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { $ads } = useNuxtApp()
+const uiPro = useState('uiProAd', () => Math.round(Math.random()))
+if (!useNuxtApp().isHydrating) {
+  uiPro.value = Math.round(Math.random())
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <AdsUIPro v-if="uiPro" />
+    <AdsFallback v-else-if="$ads.adBlocked.value" />
+    <AdsCarbon v-else :key="$route.path" />
+  </div>
+</template>
diff --git a/docs/components/ads/AdsCarbon.vue b/docs/components/ads/AdsCarbon.vue
@@ -0,0 +1,110 @@
+<template>
+  <div ref="carbonads" class="Carbon border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-white/5" />
+</template>
+
+<script setup lang="ts">
+const carbonads = ref(null)
+
+onMounted(() => {
+  if (carbonads.value) {
+    const script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIPK7W&placement=contentnuxtcom')
+    script.setAttribute('id', '_carbonads_js')
+    carbonads.value.appendChild(script)
+  }
+})
+</script>
+
+<style lang="postcss">
+.dark .Carbon {
+  min-height: 220px;
+  .carbon-text {
+    @apply text-gray-400;
+
+    &:hover {
+      @apply text-gray-200;
+    }
+  }
+}
+
+.light .Carbon {
+  .carbon-text {
+    @apply text-gray-600;
+
+    &:hover {
+      @apply text-gray-800;
+    }
+  }
+}
+
+.Carbon {
+  @apply p-3 flex flex-col max-w-full;
+
+  @screen sm {
+    @apply max-w-xs;
+  }
+
+  @screen lg {
+    @apply mt-0;
+  }
+
+  #carbonads span {
+    @apply flex flex-col justify-between;
+
+    .carbon-wrap {
+      @apply flex flex-col;
+
+      flex: 1;
+
+      @media (min-width: 320px) {
+        @apply flex-row;
+      }
+
+      @screen lg {
+        @apply flex-col;
+      }
+
+      .carbon-img {
+        @apply flex items-start justify-center mb-4;
+
+        @media (min-width: 320px) {
+          @apply mb-0;
+        }
+
+        @screen lg {
+          @apply mb-4;
+        }
+      }
+
+      .carbon-text {
+        @apply flex-1 text-sm w-full m-0 text-left block;
+
+        &:hover {
+          @apply no-underline;
+        }
+
+        @media (min-width: 320px) {
+          @apply ml-4;
+        }
+
+        @screen lg {
+          @apply ml-0;
+        }
+      }
+    }
+  }
+
+  img {
+    @apply w-full;
+  }
+
+  & .carbon-poweredby {
+    @apply ml-2 text-xs text-right text-gray-400 block pt-2;
+
+    &:hover {
+      @apply no-underline text-gray-500;
+    }
+  }
+}
+</style>
diff --git a/docs/components/ads/AdsFallback.vue b/docs/components/ads/AdsFallback.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="nui-support-nuxt">
+    <div>
+      <p class="pt-2 m-0 font-bold sm:text-sm text-gray-900 dark:text-white">
+        Nuxt needs you!
+      </p>
+      <p class="pb-2 m-0 leading-normal text-gray-600 dark:text-white sm:text-xs">
+        By allowing nuxt.com on your Ad-Blocker, you support our work and help us financially.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.nui-support-nuxt {
+  @apply py-2 px-4 rounded-md bg-gray-100 dark:bg-white dark:bg-opacity-10 flex flex-row w-full items-center mt-4;
+}
+
+@screen sm {
+  .nui-support-nuxt {
+    @apply flex-col w-40 mt-0;
+  }
+}
+</style>
diff --git a/docs/components/ads/AdsUIPro.vue b/docs/components/ads/AdsUIPro.vue
@@ -0,0 +1,16 @@
+<template>
+  <UPageCard to="https://ui.nuxt.com/pro?utm_source=nuxtcontent_website&utm_medium=banner" target="_blank" :ui="{ header: { padding: 'p-0 sm:p-0' }, rounded: 'rounded', body: { padding: 'p-2 sm:p-2', base: 'text-center' } }">
+    <template #header>
+      <UColorModeImage dark="https://ui.nuxt.com/_ipx/s_1152x720/templates/dashboard3.png" light="https://ui.nuxt.com/_ipx/s_1152x720/templates/dashboard2.png" alt="Nuxt UI Pro" />
+    </template>
+    <div class="inline-flex gap-1 my-2">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 inline-block" fill="none" viewBox="0 0 83 16"><path fill="currentColor" d="M30.7412 16.0001c.1728 0 .32-.1433.32-.32V8.24002s.4.72001 1.12 1.91998l3.12 5.3601c.1428.2992.4595.48.72.48h2.16V4h-2.16c-.1438 0-.32.11953-.32.32v7.52l-1.44-2.55997L31.3812 4.4c-.1402-.2487-.4417-.4-.72-.4h-2.08v12.0001h2.16ZM58.6613 7.36002h1.04c.2651 0 .48-.21491.48-.48V4.8h2.2401v2.56002h2.16v1.92001h-2.16V12.72c0 .8401.4046 1.2001 1.12 1.2001h1.04v2.08h-1.36c-1.8442 0-3.0401-1.1943-3.0401-3.2001V9.28003h-1.52V7.36002ZM47.8613 7.36002V12.32c0 1.1203-.4206 2.0648-1.04 2.7201-.6194.6552-1.4747.96-2.64.96-1.1653 0-2.1007-.3048-2.7201-.96-.6088-.6553-1.04-1.5998-1.04-2.7201V7.36002h1.28c.273 0 .5416.04976.7201.24.1784.17967.24.28521.24.56V12.32c0 .6447.0365 1.043.32 1.3601.2834.3064.6331.4 1.2.4.5774 0 .8365-.0936 1.12-.4.2834-.3171.32-.7154.32-1.3601V8.16002c0-.27479.0615-.44976.24-.64.1568-.16714.3222-.16321.56-.16.0328.00044.1268 0 .16 0h1.28ZM54.6613 11.52l2.72-4.15998h-2.08c-.2621 0-.495.09406-.64.32l-1.28 1.92001-1.2-1.84001c-.1449-.22594-.4579-.4-.72-.4h-2l2.72 4.07998-2.96 4.5601h2.08c.26 0 .4946-.2571.64-.48l1.44-2.16 1.52 2.24c.1454.2229.38.4.64.4h2.08l-2.96-4.4801Z" /><path fill="#00DC82" d="M14.0211 16.0001h8.8801c.2834 0 .5546-.0996.8-.24.2454-.1405.4984-.3168.64-.56.1416-.2433.2401-.5192.24-.8001-.0001-.2809-.0982-.5567-.24-.7999l-6-10.32008c-.1417-.2432-.3147-.41959-.5601-.56001-.2453-.14041-.5966-.24-.88-.24-.2833 0-.5546.09959-.8.24-.2453.14042-.4183.31681-.56.56001l-1.52 2.64001-3.04-5.120214c-.1417-.243185-.3146-.499421-.56-.639815C10.1757.0196071 9.90447 0 9.6211 0c-.28336 0-.55458.0196071-.8.160001-.24542.140394-.49826.39663-.64.639815L.741056 13.6001c-.141843.2432-.159878.519-.160001.7999-.000123.2809.018372.5568.160001.8.141628.2433.394594.4196.640004.5601.2454.1404.51662.24.8.24h5.60003c2.21891 0 3.83401-.9954 4.96001-2.88l2.72-4.72005 1.44-2.48002 4.4001 7.52007h-5.8401l-1.44 2.56Zm-6.32001-2.56H3.78107L9.6211 3.36002l2.96 5.04003-1.9607 3.41805c-.74775 1.2228-1.60029 1.622-2.91931 1.622ZM77.2214 4.79981h-1.6c-.358 0-.6459-.00485-.88.24-.2341.23124-.16.36634-.16.72v5.51999c0 .8298-.1082 1.272-.48 1.6801-.3718.3944-.8426.56-1.6.56-.7436 0-1.3082-.1656-1.68-.56-.3718-.4081-.4-.8503-.4-1.6801V5.75982c0-.35367-.0059-.48877-.24-.72001-.2341-.24484-.522-.24-.88-.24h-1.52v6.47999c0 1.4419.4013 2.5967 1.2 3.4401.8125.8433 1.9914 1.28 3.52 1.28s2.7075-.4367 3.52-1.28c.8125-.8434 1.2-1.9982 1.2-3.4401V4.79981Z" /><path fill="#00DC82" fill-rule="evenodd" d="m80.5814 4.80167 1.6-.00187v10.3204c0 .3147-.0013.434-.24.6398-.2386.2178-.5949.2399-.96.2399h-1.5199v-1.5195l-.0001-4.0796V5.60153c0-.30911.0013-.43777.24-.63988.2256-.19098.515-.15998.88-.15998Z" clip-rule="evenodd" /></svg>
+      <UBadge variant="subtle" size="xs" class="text-[10px]">
+        PRO
+      </UBadge>
+    </div>
+    <p class="text-sm dark:text-gray-400 text-gray-500 pb-1">
+      Premium Vue Components for Nuxt applications.
+    </p>
+  </UPageCard>
+</template>
diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue
@@ -18,7 +18,7 @@ const navigation = inject('navigation')
           <template #left>
             <UAside>
               <template #top>
-                <UDocsSearchButton size="md" />
+                <UContentSearchButton size="md" />
               </template>
               <UNavigationTree :links="mapContentNavigation(navigation)" />
             </UAside>

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -55,11 +55,10 @@ export default defineNuxtConfig({
   },
   modules: [
     '@nuxt/content',
+    '@nuxt/fonts',
     '@nuxt/ui',
     '@nuxthq/studio',
     '@vueuse/nuxt',
-    '@nuxtjs/fontaine',
-    '@nuxtjs/google-fonts',
     'nuxt-og-image',
     '@nuxtjs/plausible'
   ],
@@ -71,18 +70,6 @@ export default defineNuxtConfig({
     icons: ['heroicons', 'simple-icons', 'ph']
   },
 
-  fontMetrics: {
-    fonts: ['DM Sans']
-  },
-
-  googleFonts: {
-    display: 'swap',
-    download: true,
-    families: {
-      'DM+Sans': [400, 500, 600, 700]
-    }
-  },
-
   hooks: {
     // Related to https://github.com/nuxt/nuxt/pull/22558
     // Adding all global components to the main entry

diff --git a/docs/package.json b/docs/package.json
@@ -12,6 +12,7 @@
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/simple-icons": "^1.1.94",
     "@nuxt/content": "^2.12.0",
+    "@nuxt/fonts": "^0.2.0",
     "@nuxt/ui-pro": "^1.0.2",
     "@nuxthq/studio": "^1.0.12",
     "@nuxtjs/fontaine": "^0.4.1",

diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
@@ -84,22 +84,22 @@ const ecosystemLinks = [
 
       <hr v-if="surround?.length">
 
-      <UDocsSurround :surround="surround" />
+      <UContentSurround :surround="surround" />
     </UPageBody>
 
     <template v-if="page.body?.toc?.links?.length" #right>
-      <UDocsToc :links="page.body.toc.links">
+      <UContentToc :links="page.body.toc.links">
         <template #bottom>
           <div class="hidden !mt-6 lg:block space-y-6">
             <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
             <UPageLinks title="Community" :links="communityLinks" />
             <UDivider type="dashed" />
             <UPageLinks title="Ecosystem" :links="ecosystemLinks" />
             <UDivider type="dashed" />
-            <AdsCarbon />
+            <Ads />
           </div>
         </template>
-      </UDocsToc>
+      </UContentToc>
     </template>
   </UPage>
 </template>
diff --git a/docs/plugins/adblock.ts b/docs/plugins/adblock.ts
@@ -0,0 +1,26 @@
+export default defineNuxtPlugin(() => {
+  const adBlocked = ref(false)
+
+  onNuxtReady(async () => {
+    if (await adsBlocked()) {
+      adBlocked.value = true
+    }
+  })
+
+  const adsBlocked = async () => {
+    return await $fetch('https://cdn.carbonads.com/carbon.js?serve=CWYIPK7W&placement=contentnuxtcom', {
+      method: 'HEAD',
+      mode: 'no-cors'
+    })
+      .then(() => false)
+      .catch(() => true)
+  }
+
+  return {
+    provide: {
+      ads: {
+        adBlocked
+      }
+    }
+  }
+})