Docs/fix/broken links (#450)

* docs: fix broken links

* docs: fix blog posts links and surrounding href

* fix: links on images and title + support category prop

* docs: update links in learn section

* fix: learn everything link

nuxtjs.org/components/BlogpostList.vue

@@ -9,7 +9,7 @@
         :description="post.description"
         :image="post.imgUrl"
         :slug="post.slug"
-        :tags="post.tags"
+        :category="post.category"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
           <div class="flex items-center">

nuxtjs.org/components/ContentCardTemplate.vue

@@ -1,24 +1,25 @@
 <template>
-  <NuxtLink
-    tag="article"
-    :to="slug"
-    class="flex flex-col cursor-pointer shadow rounded-lg overflow-hidden dark:bg-secondary-darkest"
-  >
-    <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
-      <NuxtImg :src="image" width="864" height="378" :alt="title" />
+  <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}`">
+        <NuxtImg :src="image" width="864" height="378" :alt="title" />
+      </NuxtLink>
     </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="slug">{{ title }}</NuxtLink>
+      <NuxtLink :to="`/blog/${slug}`">{{ title }}</NuxtLink>
     </h1>
     <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
     <slot name="footer" />
-  </NuxtLink>
+  </article>
 </template>
 
 <script>
@@ -45,6 +46,10 @@ export default defineComponent({
     tags: {
       type: Array,
       default: () => []
+    },
+    category: {
+      type: String,
+      default: ''
     }
   }
 })

nuxtjs.org/components/HomeLearnGuides.vue

@@ -24,20 +24,10 @@
               :image="`/img/home/learn/guides/${guide.icon}.svg`"
               :title="guide.title"
               :description="guide.description"
+              :to="guide.to"
             />
           </div>
         </template>
-
-        <template #button>
-          <SectionButton
-            to="#"
-            aria-label="Learn more"
-            size="sm"
-            class="bg-primary text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
-          >
-            Learn more
-          </SectionButton>
-        </template>
       </SectionContent>
     </template>
   </HomeSection>
@@ -52,17 +42,20 @@ export default defineComponent({
       {
         title: 'Usage',
         description: 'Learn Nuxt concepts and features from beginning to mastery.',
-        icon: 'gem-usage'
+        icon: 'gem-usage',
+        to: '/docs/get-started/installation'
       },
       {
         title: 'Internals',
         description: "Dive deep into Nuxt internals to extend your application's behavior.",
-        icon: 'gem-internals'
+        icon: 'gem-internals',
+        to: '/docs/internals-glossary/context'
       },
       {
         title: 'API References',
         description: 'Discover all properties and their options when you need a complete overview.',
-        icon: 'gem-api'
+        icon: 'gem-api',
+        to: '/docs/configuration-glossary/configuration-alias'
       }
     ]
 

nuxtjs.org/components/HomeLearnMaster.vue

@@ -26,7 +26,7 @@
         <template #button>
           <div class="w-full self-start">
             <SectionButton
-              to="#"
+              to="/docs/get-started/installation"
               aria-label="Learn everything"
               size="sm"
               class="bg-primary text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"

nuxtjs.org/components/SectionContentItem.vue

@@ -4,7 +4,8 @@
       <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">{{ description }}</p>
+    <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>
 
@@ -24,6 +25,10 @@ export default defineComponent({
     description: {
       type: String,
       default: ''
+    },
+    to: {
+      type: String,
+      default: ''
     }
   }
 })

nuxtjs.org/content/.1.learn/0.get-started/11.upgrading.md

@@ -16,7 +16,7 @@ export default {
 
 ## Getting Started
 
-1. Check the [release notes](/guide/release-notes) for the version you wish to upgrade to see if there are any additional instructions for that particular release.
+1. Check the [release notes](/releases) for the version you wish to upgrade to see if there are any additional instructions for that particular release.
 2. Update the version specified for the `nuxt` package in your `package.json` file.
 
 After this step instructions vary depending upon whether you are using Yarn or NPM. _[Yarn](https://yarnpkg.com/en/docs/usage) is the preferred package manager for working with Nuxt as it is the development tool which tests have been written against._

nuxtjs.org/content/.1.learn/1.usage/6.middleware.md

@@ -69,7 +69,7 @@ questions:
 
 The `middleware` directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layout).
 
-Shared middleware should be placed in the  `middleware/`  directory. The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). You can also define page-specific middleware by using a function directly, see [anonymous middleware](/docs/components-glossary/pages-middleware#anonymous-middleware).
+Shared middleware should be placed in the  `middleware/`  directory. The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). You can also define page-specific middleware by using a function directly, see [anonymous middleware](/examples/middleware-anonymous).
 
 A middleware receives [the context](/docs/internals-glossary/context) as the first argument.
 

nuxtjs.org/content/.1.learn/3.api/1.configuration/head.md

@@ -25,7 +25,7 @@ export default {
 
 To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties).
 
-You can also use `head` as a function in your components to access the component data through `this` ([read more](/docs/components-glossary/pages-head)).
+You can also use `head` as a function in your components to access the component data through `this` ([read more](/docs/components-glossary/head)).
 
 <alert type="info">
 

nuxtjs.org/content/0.docs/1.get-started/4.commands.md

@@ -165,7 +165,7 @@ npm run generate --fail-on-error
 ## What's next?
 
 ::alert{type="next"}
-Read our [Deployment Guides](/docs/deployment/deploying-to-21yunbox) to find examples for deployments to popular hosts.
+Read our [Deployment Guides](/docs/deployment/21yunbox) to find examples for deployments to popular hosts.
 ::
 
 </div>

nuxtjs.org/content/0.docs/1.get-started/6.upgrading.md

@@ -14,7 +14,7 @@ export default {
 
 ## Getting Started
 
-1. Check the [release notes](/docs/release-notes) for the version you wish to upgrade to see if there are any additional instructions for that particular release.
+1. Check the [release notes](/releases) for the version you wish to upgrade to see if there are any additional instructions for that particular release.
 2. Update the version specified for the `nuxt` package in your `package.json` file.
 
 After this step instructions vary depending upon whether you are using Yarn or npm. _[Yarn](https://yarnpkg.com/en/docs/usage) is the preferred package manager for working with Nuxt as it is the development tool which tests have been written against._

nuxtjs.org/content/0.docs/4.directory-structure/7.middleware.md

@@ -8,7 +8,7 @@ csb_link_named: https://codesandbox.io/embed/github/nuxt-academy/guides-examples
 csb_link_router: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/09_middleware_router?fontsize=14&hidenavigation=1&theme=dark
 ---
 
-Shared middleware should be placed in the  `middleware/`  directory. The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). You can also define page-specific middleware by using a function directly, see [anonymous middleware](/docs/components-glossary/pages-middleware#anonymous-middleware).
+Shared middleware should be placed in the  `middleware/`  directory. The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). You can also define page-specific middleware by using a function directly, see [anonymous middleware](/examples/middleware-anonymous).
 
 A middleware receives [the context](/docs/internals-glossary/context) as the first argument.
 

nuxtjs.org/content/0.docs/4.directory-structure/9.pages.md

@@ -144,7 +144,7 @@ See more on layouts in our [Views](/docs/concepts/views#layouts) chapter.
 
 ### loading
 
-If set to false, prevents a page from automatically calling `this.$nuxt.$loading.finish()` as you enter it and `this.$nuxt.$loading.start()` as you leave it, allowing you to manually control the behavior, as [this example](/examples/custom-loading-component) shows.
+If set to false, prevents a page from automatically calling `this.$nuxt.$loading.finish()` as you enter it and `this.$nuxt.$loading.start()` as you leave it, allowing you to manually control the behavior, as [this example](/examples/loading/custom-loading-component) shows.
 
 ```js{}[pages/index.vue]
 export default {

nuxtjs.org/content/0.docs/5.configuration-glossary/13.configuration-head.md

@@ -25,7 +25,7 @@ export default {
 
 To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties).
 
-You can also use `head` as a function in your components to access the component data through `this` ([read more](/docs/components-glossary/pages-head)).
+You can also use `head` as a function in your components to access the component data through `this` ([read more](/docs/components-glossary/head)).
 
 ::alert{type="info"}
 To avoid duplicated meta tags when used in child component, set up a unique identifier with the `hid` key for your meta elements ([read more](https://vue-meta.nuxtjs.org/api/#tagidkeyname)).

nuxtjs.org/content/2.blog/1.case-study-livementor.md

@@ -52,7 +52,7 @@ The Firebase plus Nuxt combo made it much better.
 
 ### What is your favorite feature?
 
-The first feature that made us choose Nuxt was the project's architecture. Be it file-based routing or folder separation, it all fits in an intuitive way. Just dropping a file in your [pages/](/docs/2.x/directory-structure/pages) folder without having to configure a router is a must.
+The first feature that made us choose Nuxt was the project's architecture. Be it file-based routing or folder separation, it all fits in an intuitive way. Just dropping a file in your [pages/](/docs/directory-structure/pages) folder without having to configure a router is a must.
 
 At the moment, we use Vuex a lot, but we're thinking about moving a little bit away from it by leveraging the Composition API.
 

nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md

@@ -2,7 +2,7 @@
 template: blog-post
 title: 'Build a dev.to clone with Nuxt new fetch'
 description: Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI.
-imgUrl: blog/build-dev-to-clone-with-nuxt-new-fetch/main.jpeg?cover=new
+imgUrl: blog/build-dev-to-clone-with-nuxt-new-fetch/main.jpeg
 imgCredits: Patrick Mueller
 imgCreditsUrl: https://unsplash.com/@pietyo
 date: 2020-04-08
@@ -35,7 +35,7 @@ sources:
   <a href="https://github.com/bdrtsky/nuxt-dev-to-clone" target="_blank" rel="noopener nofollow">Source</a>
 </p>
 
-This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](/docs/2.x/components-glossary/pages-fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/blog/understanding-how-fetch-works-in-nuxt-2-12).
+This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](/docs/components-glossary/pages-fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/blog/understanding-how-fetch-works-in-nuxt-2-12).
 
 Here’s the high-level outline of how we will build our dev.to clone using `fetch` hook. We will:
 
@@ -81,7 +81,7 @@ To keep it simple, for communication with the DEV API we will use native JavaScr
 
 If you are an experienced developer you can skip this part and [get straight to the point](#developing-the-application).
 
-Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](/docs/2.x/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:
+Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](/docs/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:
 
 ```
 npx create-nuxt-app nuxt-dev-to-clone
@@ -94,7 +94,7 @@ Let’s install necessary packages and discuss how we will build our app next.
 
 ### CSS Styles
 
-For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](/docs/2.x/features/configuration#pre-processors) run:
+For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](/docs/features/configuration#pre-processors) run:
 
 ::code-group
 ```bash [Yarn]
@@ -122,7 +122,7 @@ Now tell Nuxt to use it by adding this code to `nuxt.config.js`
 buildModules: ['@nuxtjs/style-resources']
 ```
 
-Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](/docs/2.x/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.
+Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](/docs/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.
 
 Let’s define our design tokens as SCSS variables, put them in `~/assets/styles/tokens.scss` and tell `@nuxtjs/style-resources` to load them by adding to `nuxt.config.js`
 
@@ -166,7 +166,7 @@ To keep the frontend app fast and simple we will use only two dependencies, both
 - [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) by [Guillaume Chau](https://twitter.com/Akryum), for effective detecting elements in viewport with IntersectionObserver and trigger lazy loading. Only 1.6kB gzipped
 - [vue-content-placeholders](https://github.com/michalsnik/vue-content-placeholders) by [Michał Sajnóg](https://twitter.com/michalsnik), for showing nicely animated placeholders for UI elements while content is fetching. Only 650B gzipped.
 
-Let’s add them as Nuxt [plugins](/docs/2.x/configuration-glossary/configuration-plugins), by creating two files.
+Let’s add them as Nuxt [plugins](/docs/configuration-glossary/configuration-plugins), by creating two files.
 
 ```js{}[vue-observe-visibility.client.js]
 import Vue from 'vue'
@@ -193,11 +193,11 @@ plugins: [
 
 ## Developing the Application
 
-Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](/docs/2.x/components-glossary/pages-fetch).
+Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](/docs/components-glossary/pages-fetch).
 
 ### URL structure
 
-Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/2.x/concepts/views#pages) folder should look like this:
+Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/concepts/views#pages) folder should look like this:
 
 ```
 ├── index.vue
@@ -209,12 +209,12 @@ Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/2.x/
     └── index.vue
 ```
 
-We will have 2 [static pages](/docs/2.x/get-started/routing#automatic-routes):
+We will have 2 [static pages](/docs/get-started/routing#automatic-routes):
 
 - `index.vue`: latest articles about Nuxt.js will be listed
 - `top.vue`: most popular articles for last year period.
 
-For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](/docs/2.x/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:
+For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](/docs/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:
 
 - `_username/index.vue` - user profile page with list of his published articles
 - `_username/_article.vue` - this is where article, author profile and comments will be rendered

nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md

@@ -2,7 +2,7 @@
 template: blog-post
 title: 'Understanding how fetch works in Nuxt 2.12'
 description: Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.
-imgUrl: blog/understanding-how-fetch-works-in-nuxt-2-12/main.jpeg?cover=new
+imgUrl: blog/understanding-how-fetch-works-in-nuxt-2-12/main.jpeg
 imgCredits: Rahul Bhosale
 imgCreditsUrl: https://unsplash.com/@rahul_design
 date: 2020-04-06

nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md

@@ -2,7 +2,7 @@
 template: blog-post
 title: 'Nuxt: From Terminal to Browser'
 description: How we changed the developer experience to stop switching between the terminal and browser.
-imgUrl: blog/nuxtjs-from-terminal-to-browser/main.jpeg?cover=new
+imgUrl: blog/nuxtjs-from-terminal-to-browser/main.jpeg
 imgCredits: Dave Ruck
 imgCreditsUrl: https://unsplash.com/@daveruck
 date: 2019-06-04

nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md

@@ -2,7 +2,7 @@
 template: blog-post
 title: Introducing Smart Prefetching
 description: 'Starting from Nuxt v2.4.0, Nuxt.js will automagically prefetch the code-splitted pages linked with a nuxt-link when visible in the viewport by default.'
-imgUrl: blog/introducing-smart-prefetching/main.jpeg?cover=new
+imgUrl: blog/introducing-smart-prefetching/main.jpeg
 imgCredits: Mateus Maia
 imgCreditsUrl: https://unsplash.com/@mateusmaia
 date: 2019-01-28
@@ -28,4 +28,4 @@ Demos are online and we recommend you to try it out to feel the difference:
 - No prefetching (v2.3): [https://nuxt-no-prefetch.surge.sh](https://nuxt-no-prefetch.surge.sh)
 - With prefetching (v2.4): [https://nuxt-prefetch.surge.sh](https://nuxt-prefetch.surge.sh)
 
-You can learn more about this feature in the [`<nuxt-link>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component) section of the documentation.
+You can learn more about this feature in the [`<nuxt-link>`](/docs/features/nuxt-components#the-nuxtlink-component) section of the documentation.