feat: universal link (#469)

* ✨ (universal-link) implement UniversalLink component

* ✨ (content-card) update content card template w/ UniversalLink

* ✨ (lists) update lists components

* ✨ (header) update header navigation

* ✨ (universal-link) update current link components using universal link

* 🚨 (format) add a little space

* 🚨 (..) ..

* 📝 (docs) update docs content & components usage

* ✨ (link) update UniversalLink to Link; POW

* ✨ (blogpostlist) update href

* ✨ (headernavigation) update nuxtjs header nav; use <nav> instead of <div>

nuxtjs.org/components/AButton.vue

@@ -109,6 +109,7 @@ export default defineComponent({
     },
     isExternal() {
       if (!this.to) return false
+
       const isInternal = typeof this.to !== 'string' || (this.to.startsWith('/') && this.to.startsWith('//') === false)
 
       return !isInternal

nuxtjs.org/components/BlogpostList.vue

@@ -8,7 +8,7 @@
         :title="post.title"
         :description="post.description"
         :image="post.imgUrl"
-        :slug="post.slug"
+        :href="post.to"
         :category="post.category"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">

nuxtjs.org/components/ContentCardTemplate.vue

@@ -1,23 +1,30 @@
 <template>
   <article class="flex flex-col shadow rounded-lg overflow-hidden dark:bg-secondary-darkest">
     <div class="aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
-      <NuxtLink :to="`/blog/${slug}`">
+      <Link :to="href">
         <NuxtImg :src="image" width="864" height="378" :alt="title" />
-      </NuxtLink>
+      </Link>
     </div>
+
     <div v-if="tags.length" class="px-4 mb-1">
       <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm">
         <span>{{ tag }}</span>
         <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span>
       </span>
     </div>
+
     <div v-else-if="category" class="px-4 mb-1">
       <span class="text-gray-400 dark:text-cloud font-medium text-sm">{{ category }}</span>
     </div>
+
     <h1 class="font-bold text-body-xl mb-2 px-4">
-      <NuxtLink :to="`/blog/${slug}`">{{ title }}</NuxtLink>
+      <Link :to="href">
+        {{ title }}
+      </Link>
     </h1>
+
     <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
+
     <slot name="footer" />
   </article>
 </template>
@@ -39,7 +46,7 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    slug: {
+    href: {
       type: String,
       default: ''
     },

nuxtjs.org/components/HeaderNavigation.vue

@@ -1,58 +1,67 @@
 <template>
-  <div class="relative w-full h-full flex items-center justify-center">
-    <ul class="flex space-x-12 h-full">
-      <li
-        v-for="link in headerLinks"
-        :key="link.slug"
-        class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
-      >
-        <NuxtLink
-          :to="`/${link.slug}/${link.slug.includes('blog') ? '' : link.children[0].slug || ''}`"
-          :class="{
-            'text-primary': currentSlug === link.slug,
-            'hover:d-primary-text-hover': currentSlug !== link.slug
-          }"
-        >
-          {{ link.title }}
-        </NuxtLink>
-      </li>
-      <li class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center">
-        <NuxtLink to="/resources" class="hover:d-primary-text-hover"> Resources </NuxtLink>
-      </li>
-      <li class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center">
-        <a
-          href="https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link"
-          class="hover:d-primary-text-hover"
-          target="_blank"
-          rel="noopener"
-        >
-          Video Courses
-        </a>
-      </li>
-    </ul>
-  </div>
+  <nav class="relative w-full h-full flex items-center justify-center space-x-12">
+    <Link
+      v-for="{ title, href, slug } in links"
+      :key="slug"
+      class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
+      :to="href"
+      :class="{
+        'text-primary': currentSlug === slug,
+        'hover:d-primary-text-hover': currentSlug !== slug
+      }"
+    >
+      {{ title }}
+    </Link>
+  </nav>
 </template>
 
 <script>
-import { computed, defineComponent, useRoute, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'
 
 export default defineComponent({
+  props: {
+    links: {
+      type: Array,
+      required: false,
+      default: () => [
+        {
+          title: 'Docs',
+          slug: 'docs',
+          href: '/docs'
+        },
+        {
+          title: 'Examples',
+          slug: 'examples',
+          href: '/examples'
+        },
+        {
+          title: 'Resources',
+          slug: 'resources',
+          href: '/resources'
+        },
+        {
+          title: 'Blog',
+          slug: 'blog',
+          href: '/blog'
+        },
+        {
+          title: 'Video Courses',
+          slug: 'video-courses',
+          href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link'
+        }
+      ]
+    }
+  },
   setup() {
-    // @ts-ignore
-    const { $docus } = useContext()
-
     const route = useRoute()
-    const currentNav = computed(() => $docus.get({ depth: 1 }).links)
-    // computed
-    const headerLinks = computed(() => currentNav.value.filter(link => link.slug !== '' && link.children.length))
 
     const currentSlug = computed(() => {
       return route.value.path !== '/' && route?.value?.params?.pathMatch
         ? route.value.params.pathMatch.split('/')[0]
         : null
     })
+
     return {
-      headerLinks,
       currentSlug
     }
   }

nuxtjs.org/components/HomeDiscoverPartners.vue

@@ -50,6 +50,7 @@ export default defineComponent({
         .where({ tier: { $in: ['MVP Partners', 'Partners'] } })
         .fetch()
     })
+
     return {
       partners
     }

nuxtjs.org/components/MMarketingLink.vue

@@ -6,6 +6,7 @@
     :to="`${to}`"
   >
     {{ name }}
+
     <Component :is="icon" class="ml-2 h-5 w-5" />
 
     <span class="absolute -bottom-2 h-0.5 w-8 group-hover:w-full transition-all" :class="'bg-' + color" />

nuxtjs.org/components/ResourcesList.vue

@@ -2,18 +2,18 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, slug }, id) in resources"
+        v-for="({ title, description, image, href }, id) in resources"
         :key="id"
-        class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
+        :href="href"
       >
         <div slot="footer" class="px-4 mb-4">
-          <NuxtLink :to="slug" class="text-primary font-medium flex items-center"
-            ><span class="mr-2">Go to {{ title }}</span> <IconChevronRight class="w-4 h-4"
-          /></NuxtLink>
+          <Link class="text-primary font-medium flex items-center" :to="href">
+            <span class="mr-2">Go to {{ title }}</span>
+            <IconChevronRight class="w-4 h-4" />
+          </Link>
         </div>
       </ContentCardTemplate>
     </div>

nuxtjs.org/components/SectionContentItem.vue

@@ -3,8 +3,11 @@
     <slot name="image">
       <img class="mb-4" :src="image" :alt="`A ${title} image`" />
     </slot>
+
     <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">{{ title }}</h3>
+
     <p class="text-center text-sm lg:text-base dark:text-secondary-lightest mb-4">{{ description }}</p>
+
     <MMarketingLink v-if="to" color="primary-green" name="Learn more" icon="IconChevronRight" :to="to" />
   </div>
 </template>

nuxtjs.org/components/SponsorsBlock.vue

@@ -53,6 +53,7 @@ export default defineComponent({
         .where({ tier: { $in: ['MVP Partners', 'Partners'] } })
         .fetch()
     })
+
     return {
       partners
     }

nuxtjs.org/components/ThemesList.vue

@@ -2,13 +2,12 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, price, slug }, id) in themes"
+        v-for="({ title, description, image, price }, id) in themes"
         :key="id"
         class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
           <SectionButton to="#" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300">

nuxtjs.org/components/VideoCoursesList.vue

@@ -2,17 +2,21 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, tier, slug }, id) in videoCourses"
+        v-for="({ title, description, image, tier }, id) in videoCourses"
         :key="id"
         class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
         :tags="[tier]"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
-          <SectionButton to="#" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300">
+          <SectionButton
+            to="#"
+            size="md"
+            aria-label="Start course"
+            class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
+          >
             Start course
           </SectionButton>
         </div>

nuxtjs.org/content/0.docs/index.md

@@ -2,4 +2,5 @@
 title: Docs
 navigation:
   exclusive: true
+  redirect: /docs/get-started/installation
 ---

nuxtjs.org/content/3.resources/index.md

@@ -4,29 +4,30 @@ title: Resources
 ---
 
 ::simple-page-hero
-
 title: NuxtJS Resources
 description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
 ---
 ::
 
 ::resources-list
-
 resources:
   modules:
     title: Modules
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/jasebloor/1280x720
     slug: modules
-  themes: 
+    href: https://modules.nuxtjs.org
+  themes:
     title: Themes
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/remithorel/1280x720
     slug: themes
-  video-courses: 
+    href: /themes
+  video-courses:
     title: Video Courses
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/agk42/1280x720
     slug: video-courses
+    href: /video-courses
 ---
 ::

nuxtjs.org/content/index.md

@@ -115,13 +115,15 @@ From an Idea to a Masterpiece, guides show the path to become a Nuxter.
   to: '/docs/get-started/installation'
   ---
   ::
+
   ::section-content-item
   title: Internals
   description: "Dive deep into Nuxt internals to extend your application's behavior."
   image: /img/home/learn/guides/gem-internals.svg
   to: '/docs/internals-glossary/context'
   ---
   ::
+
   ::section-content-item
   title: API References
   description: 'Discover all properties and their options when you need a complete overview.'