chore: updated content (#45)

content/en/0.docs/3.features/5.meta-tags-seo.md

@@ -4,12 +4,19 @@ description: Nuxt.js lets you define all default meta tags for your application
 category: features
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/06_meta_tags_seo?fontsize=14&hidenavigation=1&theme=dark
 ---
+
 # Meta Tags and SEO
+
 Nuxt.js gives you 3 different ways to add meta data to your application:
+
+::div{.d-heading-description .leading-6}
+
 - Globally using the nuxt.config.js
 - Locally using the head as an object
 - Locally using the head as a function so that you have access to data and computed properties.
 
+::
+
 ---
 
 ### Global Settings

content/en/1.examples/1.routing/1.hello-world.md

@@ -3,6 +3,7 @@ title: Hello World
 description: Routing with NuxtLink component showing page rendered on server side and on client side
 category: routing
 ---
+
 # Hello World
 
 Routing with NuxtLink component showing page rendered on server side and on client side
@@ -17,4 +18,4 @@ In this example:
 Learn more in the Get Started book in the [Installation](/docs/get-started/installation) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/hello-world?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/hello-world?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/1.routing/2.active-link-classes.md

@@ -3,6 +3,7 @@ title: Active Link Classes
 description: Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link
 category: routing
 ---
+
 # Active Link Classes
 
 Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link
@@ -21,4 +22,4 @@ Learn more about [vue routers](https://router.vuejs.org/api/#exact-active-class)
 Learn more about active classes in the Features book in the [Nuxt Components](/docs/features/nuxt-components#link-classes) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/active-link-classes?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/active-link-classes?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}

content/en/1.examples/1.routing/3.dynamic-pages.md

@@ -3,6 +3,7 @@ title: Dynamic Pages
 description: Using dynamic pages to fetch data from an API and populate those pages
 category: routing
 ---
+
 # Dynamic Pages
 
 Using dynamic pages to fetch data from an API and populate those pages
@@ -21,4 +22,4 @@ In this example:
 Learn more in the Directory Structure book in the [pages](/docs/directory-structure/pages) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/dynamic-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2F_continent%2F_mountain.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/dynamic-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2F_continent%2F_mountain.vue&theme=dark&view=editor"}

content/en/1.examples/1.routing/4.nested-pages.md

@@ -3,6 +3,7 @@ title: Nested Pages
 description: How to use the Nuxt Child component to create parent and child pages.
 category: routing
 ---
+
 # Nested Pages
 
 How to use the Nuxt Child component to create parent and child pages.
@@ -21,4 +22,4 @@ In this example:
 Learn more in the Features book in the [Nuxt Components](/docs/features/nuxt-components#the-nuxtchild-component) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/nested-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2Fparent.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/nested-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2Fparent.vue&theme=dark&view=editor"}

content/en/1.examples/10.modules/1.local.md

@@ -3,6 +3,7 @@ title: Local Module
 description: Local Module for setting up a tunnel using ngrok
 category: modules
 ---
+
 # Local Module
 
 Local Module for setting up a tunnel using ngrok
@@ -19,4 +20,4 @@ In this example:
 Learn more in the Directory Structure book in the [modules](/docs/directory-structure/modules) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/local-module?fontsize=14&hidenavigation=1&module=%2Fmodules%2Fngrok%2Findex.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/local-module?fontsize=14&hidenavigation=1&module=%2Fmodules%2Fngrok%2Findex.js&theme=dark&view=editor"}

content/en/1.examples/10.modules/2.axios.md

@@ -3,6 +3,7 @@ title: Axios usage
 description: In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page
 category: modules
 ---
+
 # Axios usage
 
 In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page
@@ -26,4 +27,4 @@ Learn more about the [axios module](https://axios.nuxtjs.org/).
 Learn more in the Directory Structure book in the [nuxt-config](/docs/directory-structure/nuxt-config) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/axios-usage?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/axios-usage?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}

content/en/1.examples/2.data-fetching/1.async-data.md

@@ -3,6 +3,7 @@ title: asyncData Hook
 description: In this example we use asyncData to fetch our data from our API.
 category: dataFetching
 ---
+
 # asyncData Hook
 
 In this example we use asyncData to fetch our data from our API.
@@ -21,4 +22,4 @@ Learn more about the [http module](https://http.nuxtjs.org/).
 Learn more about the asyncData hook the Features book in the [Data Fetching](/docs/features/data-fetching) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/async-data-hook?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/async-data-hook?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/2.data-fetching/2.fetch-hook.md

@@ -3,6 +3,7 @@ title: fetch Hook
 description: In this example we use the fetch hook to fetch data from components and from pages
 category: dataFetching
 ---
+
 # fetch Hook
 
 In this example we use the fetch hook to fetch data from components and from pages
@@ -25,4 +26,4 @@ Learn more about the [http module](https://http.nuxtjs.org/).
 Learn more about the fetch hook in the Features book in the [Data Fetching](/docs/features/data-fetching) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/fetch-hook?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FMountains.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/fetch-hook?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FMountains.vue&theme=dark&view=editor"}

content/en/1.examples/3.assets-management/1.pre-processors.md

@@ -3,6 +3,7 @@ title: Pre-processors
 description: Configuration your application to use pug and sass with style resources to easily add variables to all components.
 category: assetManagement
 ---
+
 # Pre-processors
 
 Configuration your application to use pug and sass with style resources to easily add variables to all components.
@@ -25,4 +26,4 @@ In this example:
 Learn more in the Features book in the [Configuration](/docs/features/configuration#pre-processors) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/pre-processors?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/pre-processors?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/3.assets-management/2.webpack-assets.md

@@ -3,6 +3,7 @@ title: webpack Assets
 description: Use the assets folder to add css, images and fonts to your application
 category: assetManagement
 ---
+
 # webpack Assets
 
 Use the assets folder to add css, images and fonts to your application
@@ -25,4 +26,4 @@ In this example:
 Learn more in the Directory Structure book in the [Assets](/docs/directory-structure/assets) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/webpack-assets?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/webpack-assets?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/4.transitions/1.transitions.md

@@ -3,6 +3,7 @@ title: Nuxt transitions
 description: Adding default and custom transitions to your pages and layouts
 category: transitions
 ---
+
 # Nuxt transitions
 
 Adding default and custom transitions to your pages and layouts
@@ -20,4 +21,4 @@ In this example:
 Learn more in the Features book in the [Transitions](/docs/features/transitions) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/transitions/nuxt-transitions?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/transitions/nuxt-transitions?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}

content/en/1.examples/5.seo/1.html-head.md

@@ -3,6 +3,7 @@ title: SEO HTML Head
 description: In this example we use the head property to show how to get good SEO.
 category: seo
 ---
+
 # SEO HTML Head
 
 In this example we use the head property to show how to get good SEO.
@@ -25,4 +26,4 @@ Learn more about the options available for `head`, in the [vue-meta documentat
 Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-html-head?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-html-head?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}

content/en/1.examples/5.seo/2.twitter-og.md

@@ -3,6 +3,7 @@ title: SEO Twitter and Open Graph
 description: In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media.
 category: seo
 ---
+
 # SEO Twitter and Open Graph
 
 In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media.
@@ -25,4 +26,4 @@ Learn more about the options available for `head`, in the [vue-meta documentat
 Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-twitter-og?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FSocialHead.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-twitter-og?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FSocialHead.vue&theme=dark&view=editor"}

content/en/1.examples/6.loading/1.customize-nuxt-loading.md

@@ -3,6 +3,7 @@ title: Customize Nuxt Loading
 description: Create a custom loading component to replace the default loader
 category: loading
 ---
+
 # Customize Nuxt Loading
 
 Create a custom loading component to replace the default loader
@@ -19,4 +20,4 @@ In this example:
 Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-nuxt-loading?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-nuxt-loading?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}

content/en/1.examples/6.loading/2.customize-loading-indicator.md

@@ -3,6 +3,7 @@ title: Customize Nuxt Loading Indicator
 description: Customize the Nuxt Loading Indicator for when ssr is set to false
 category: loading
 ---
+
 # Customize Nuxt Loading Indicator
 
 Customize the Nuxt Loading Indicator for when ssr is set to false
@@ -20,4 +21,4 @@ In this example:
 Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-loading-indicator?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-loading-indicator?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}

content/en/1.examples/6.loading/3.custom-loading-component.md

@@ -3,6 +3,7 @@ title: Custom Loading Component
 description: Create a custom loading component, modify the default loader as well as the spinner for spas
 category: loading
 ---
+
 # Custom Loading Component
 
 Create a custom loading component, modify the default loader as well as the spinner for spas
@@ -21,4 +22,4 @@ In this example:
 Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/custom-loading-component?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FLoadingBar.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/custom-loading-component?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FLoadingBar.vue&theme=dark&view=editor"}

content/en/1.examples/7.miscellaneous/1.layouts.md

@@ -3,6 +3,7 @@ title: Layouts
 description: Using layouts to show different ways to structure your page
 category: miscellaneous
 ---
+
 # Layouts
 
 Using layouts to show different ways to structure your page
@@ -19,4 +20,4 @@ In this example:
 Learn more in the Concepts book in the [Views](/docs/concepts/views) chapter or in the Directory Structure book in the [Layouts](/docs/directory-structure/layouts) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/layouts?fontsize=14&hidenavigation=1&module=%2Fpages%2Fprofile.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/layouts?fontsize=14&hidenavigation=1&module=%2Fpages%2Fprofile.vue&theme=dark&view=editor"}

content/en/1.examples/7.miscellaneous/2.lazy-loading-components.md

@@ -3,6 +3,7 @@ title: Lazy Loading Components
 description: Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components
 category: miscellaneous
 ---
+
 # Lazy Loading Components
 
 Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components
@@ -24,4 +25,4 @@ In this example:
 Learn more in the Directory Structure book in the [Components](/docs/directory-structure/components) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/lazy-loading-components?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/lazy-loading-components?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/7.miscellaneous/3.vuex-store.md

@@ -3,6 +3,7 @@ title: Vuex Store
 description: In the first example we show how the store works using a todo app
 category: miscellaneous
 ---
+
 # Vuex Store
 
 In the first example we show how the store works using a todo app
@@ -19,4 +20,4 @@ In this example:
 Learn more in the Directory Structure book in the [store](/docs/directory-structure/store) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/7.miscellaneous/4.helpers.md

@@ -3,6 +3,7 @@ title: Nuxt Helpers
 description: Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady
 category: miscellaneous
 ---
+
 # Nuxt Helpers
 
 Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady
@@ -25,4 +26,4 @@ In this example:
 Learn more in the Concepts book in the [Context and Helpers](/docs/concepts/context-helpers#helpers) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/nuxt-helpers?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/nuxt-helpers?fontsize=14&hidenavigation=1&theme=dark&view=editor"}

content/en/1.examples/8.middlewares/1.router.md

@@ -3,6 +3,7 @@ title: Router Middleware
 description: Using router middleware to set a class to the body so we can then style differently depending on the route
 category: middleware
 ---
+
 # Router Middleware
 
 Using router middleware to set a class to the body so we can then style differently depending on the route
@@ -23,4 +24,4 @@ In this example:
 Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#router-middleware) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/router-middleware?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/router-middleware?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}

content/en/1.examples/8.middlewares/2.named.md

@@ -3,6 +3,7 @@ title: Named Middleware
 description: Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated
 category: middleware
 ---
+
 # Named Middleware
 
 Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated
@@ -23,4 +24,4 @@ In this example:
 Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#named-middleware) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/named-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fnamed-middleware.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/named-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fnamed-middleware.vue&theme=dark&view=editor"}

content/en/1.examples/8.middlewares/3.anonymous.md

@@ -3,6 +3,7 @@ title: Anonymous Middleware
 description: Using anonymous middleware to show the analytics of how many times a user visits a page.
 category: middleware
 ---
+
 # Anonymous Middleware
 
 Using anonymous middleware to show the analytics of how many times a user visits a page.
@@ -19,4 +20,4 @@ In this example:
 Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#anonymous-middleware) chapter.
 ::
 
-:code-sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/anonymous-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fanonymous-middleware.vue&theme=dark&view=editor"}
+:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/anonymous-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fanonymous-middleware.vue&theme=dark&view=editor"}