chore: release 0.9.0 (#543)

* 📝 (docs) update docs; add algolia docsearch in configuration * fix(layout): fix parents order in layout inheritance * fix: add fixed width to mobile aside (#515) * fix: multiple regressions (#516) * fix: margins for docs content * fix: multiple issues * feat: enhanced i18n (#517) * fix(Link): support locale path & improve attrs * fix(contentLocalePath): handle locale prefix * 🐛 (link) fix blank reeference (props.blank) * 🔖 (0.8.6) release 0.8.6 * 🐛 (prose-code-inline) allow line break (#519) * fix: scrollspy & scroll to top on click for Releases (#522) * fix: restrict inline syntax (#526) * fix: restrict inline syntax * fix: allow inline syntax inside span & links * feat: auto collapse when click on another section (#527) * init pr * ✨ (aside) restore collapse state on section toggle Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🐛 (nuxtjs.org) small responsive/sizing fixes * fix: prose nested lists (#529) * fix: prose nested lists * cleanup * fix: multiple style issues (#523) * fix: code block issues * update filename shortcut * feat: support slot to show between children (#525) * feat: support slot to show between children * fix: do not add `between` slot between inline nodes * feat: inline SVG logo on production (#528) * feat: inline svg icon on production * fix: import * chore: cleanup * feat: improve logo management, add default Logo component and shortcuts * chore: remove @nuxtjs/svg * chore: simplify markup Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> * feat: SandBox Component (#518) * feat: SandBox Component * chore: minor fix * feat: init Tabs component; refactor CodeGroup * update Sandbox UI Co-authored-by: Sergey Bedritsky <sergey.bedritsky@gmail.com> * 📦 (deps) upgrade dependencies * 🐛 (aside) fix aside navigation collapsing * 🐛 (aside) fix social icons spacing at the right place * 🔖 (0.8.7) release 0.8.7 * 📦 (deps) upgrade deps (nuxt-image) * 🐛 (sandbox) fix sandbox component * feat: add custom scrollbar (#534) * fix: update mobile toc overflow from scroll to auto (#532) * 🔖 (0.8.8) release 0.8.8 * 📝 (deployment) update deployment to add npm cache * 🔖 (0.8.9) release 0.8.9 * 🐛 (aside) hover color only in large on aside nav item * init AppBanner (#536) * init AppBanner * ✨ (banner) edit defaults * 📝 (config) update configuration with banner arg Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🔖 (0.8.10) release 0.8.10 * 🔖 (0.8.11) release 0.8.11 * 🐛 (docs) update docs links (avoid errors while building..) * fix: Releases content overflow (#537) * fix: Releases content overflow * 🐛 (releases) only apply overflow-x-hidden Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🐛 (content) fix content links avoiding a longer build * 🔖 (0.8.12) release 0.8.12 * chore: reduce UX issues (lazy loading and jump) * fix: currentNav updated after page change Also disabled smart prefetch for lazy components in the meantime * chore: add isAsync too * fix: revert back to old collapse logic (#539) * ⏪ (collapse) revert back to old collapse logic * 🐛 (navigation) preserve uncollapsing for first visited category * 📌 (deps) pin vue to 2.6.14 * 🐛 (twitter) fix twitter component import * fix: set variables on SSR from asyncData * 🔖 (0.8.13) release 0.8.13 * 🔖 (0.8.14) release 0.8.14 * fix: resolve flash issue using render fucntion instead of template (#541) * feat: Docus loading screen * 🔖 (0.8.15) release 0.8.15 * fix: tokenise blogpost (#540) * feat: change slot definition (#535) * feat: change slot definition * feat: front matter style data * chore: update docs * docs: fix docs * chore: refactor data tokenizer * fix: typo * fix: invalid line detection * feat: use remark-github (#538) * feat(admin): admin improvements (#524) * wip: components playground * fix: switch to nuxt module for components preview * refactor(admin): modulize preview * refactor(admin): folder structure * chore: typo * feat(admin): embed windicss-analysis * chore: update notes * feat: config tab * feat: preview navigate to editor * fix(admin): reuse utils instance for windi analysis * chore: update deps * feat(admin): entry for windi analyzer * chore: clean up * Apply suggestions from code review Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> * 🚨 (lint) no-console fix * chore: cleanup vite fix Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> Co-authored-by: Ahad Birang <farnabaz@gmail.com> Co-authored-by: Sergey Bedritsky <sergey.bedritsky@gmail.com> Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
nuxt-themes · Jul 12, 2021 · 0567c4b · 0567c4b · vercel · Jul 12, 2021
1 parent faef8fb
commit 0567c4b
Show file tree

Hide file tree

Showing 96 changed files with 1,871 additions and 852 deletions.
diff --git a/docs/components/AppFooter.vue b/docs/components/AppFooter.vue
@@ -26,19 +26,7 @@
             aria-label="NuxtJS"
             href="https://nuxtjs.org"
             target="_blank"
-            class="
-              text-sm
-              flex
-              items-center
-              font-medium
-              p-1
-              text-gray-500
-              transition-colors
-              duration-200
-              dark:text-gray-500
-              hover:text-gray-700
-              dark:hover:text-gray-400
-            "
+            class="text-sm flex items-center font-medium p-1 d-icon"
           >
             <IconNuxt class="w-5 h-5" />
           </a>
@@ -47,19 +35,7 @@
             aria-label="Vue Telescope"
             href="https://vuetelescope.com"
             target="_blank"
-            class="
-              text-sm
-              flex
-              items-center
-              font-medium
-              p-1
-              text-gray-500
-              transition-colors
-              duration-200
-              dark:text-gray-500
-              hover:text-gray-700
-              dark:hover:text-gray-400
-            "
+            class="text-sm flex items-center font-medium p-1 d-icon"
           >
             <IconVueTelescope class="w-5 h-5" />
           </a>

diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg width="707" height="169" viewBox="0 0 707 169" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M196.387 36.674h45.549c10.55 0 19.907 1.972 28.072 5.917s14.495 9.54 18.99 16.788c4.495 7.248 6.743 15.734 6.743 25.458 0 9.724-2.248 18.21-6.743 25.458-4.495 7.247-10.825 12.843-18.99 16.788-8.165 3.945-17.522 5.917-28.072 5.917h-45.549V36.674zm44.448 74.584c8.257 0 14.862-2.34 19.816-7.018 5.045-4.679 7.568-11.146 7.568-19.403 0-8.257-2.523-14.724-7.568-19.403-4.954-4.679-11.559-7.018-19.816-7.018h-17.201v52.842h17.201zm105.432 22.98c-7.981 0-15.183-1.651-21.605-4.953-6.421-3.303-11.467-7.89-15.136-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.339 1.789-13.944 5.367-19.815 3.669-5.871 8.669-10.413 14.999-13.623 6.422-3.303 13.669-4.954 21.742-4.954s15.321 1.65 21.742 4.954c6.422 3.21 11.422 7.752 15 13.623 3.577 5.78 5.366 12.385 5.366 19.815 0 7.431-1.789 14.082-5.366 19.954-3.578 5.871-8.578 10.458-15 13.761-6.421 3.302-13.669 4.953-21.742 4.953zm0-20.778c4.587 0 8.348-1.56 11.284-4.679 2.936-3.211 4.403-7.614 4.403-13.21 0-5.505-1.467-9.817-4.403-12.936-2.936-3.119-6.697-4.678-11.284-4.678-4.587 0-8.348 1.56-11.284 4.678-2.936 3.12-4.403 7.431-4.403 12.935 0 5.597 1.467 10 4.403 13.211 2.936 3.119 6.697 4.679 11.284 4.679zm92.338 20.778c-8.257 0-15.642-1.651-22.155-4.953-6.514-3.303-11.605-7.89-15.275-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.43 1.789-14.036 5.367-19.815 3.67-5.871 8.761-10.413 15.275-13.623 6.513-3.303 13.898-4.954 22.155-4.954 8.44 0 15.733 1.834 21.879 5.504 6.147 3.578 10.505 8.578 13.073 15l-20.228 10.32c-3.395-6.697-8.348-10.045-14.862-10.045-4.679 0-8.578 1.56-11.697 4.678-3.027 3.12-4.541 7.431-4.541 12.935 0 5.597 1.514 10 4.541 13.211 3.119 3.119 7.018 4.679 11.697 4.679 6.514 0 11.467-3.349 14.862-10.046l20.228 10.321c-2.568 6.422-6.926 11.467-13.073 15.137-6.146 3.578-13.439 5.366-21.879 5.366zm123.234-75.822V133h-24.907v-7.981c-2.753 3.027-6.055 5.321-9.908 6.88-3.853 1.56-7.936 2.339-12.248 2.339-9.632 0-17.338-2.843-23.118-8.531-5.688-5.688-8.532-14.22-8.532-25.595V58.416h26.146v37.43c0 5.596 1.055 9.678 3.165 12.247 2.11 2.569 5.183 3.853 9.22 3.853 4.128 0 7.477-1.422 10.045-4.266 2.661-2.936 3.991-7.385 3.991-13.348V58.416h26.146zm43.95 75.822a82.948 82.948 0 01-18.44-2.064c-6.055-1.467-10.917-3.348-14.587-5.642l7.844-17.889c3.394 2.11 7.431 3.807 12.11 5.092 4.678 1.192 9.311 1.789 13.898 1.789 4.22 0 7.202-.413 8.945-1.239 1.835-.917 2.752-2.202 2.752-3.853 0-1.651-1.101-2.798-3.303-3.44-2.11-.734-5.504-1.422-10.183-2.064-5.963-.734-11.054-1.697-15.274-2.89-4.129-1.193-7.706-3.394-10.734-6.605-3.027-3.211-4.541-7.706-4.541-13.486 0-4.77 1.422-8.99 4.266-12.66 2.844-3.761 6.972-6.697 12.385-8.807 5.504-2.201 12.063-3.302 19.678-3.302 5.412 0 10.779.55 16.1 1.65 5.321 1.102 9.77 2.661 13.348 4.68l-7.844 17.751c-6.605-3.67-13.76-5.504-21.467-5.504-4.128 0-7.155.504-9.082 1.514-1.926.917-2.89 2.155-2.89 3.715 0 1.743 1.055 2.981 3.165 3.715 2.11.642 5.597 1.33 10.459 2.064 6.146.918 11.238 1.973 15.274 3.165 4.037 1.193 7.523 3.395 10.459 6.606 3.027 3.119 4.541 7.522 4.541 13.21 0 4.679-1.422 8.899-4.266 12.66-2.844 3.67-7.064 6.559-12.66 8.669-5.505 2.11-12.156 3.165-19.953 3.165zm58.583-.275c-3.119 0-5.78-1.055-7.982-3.165-2.201-2.201-3.302-4.954-3.302-8.256 0-3.395 1.055-6.147 3.165-8.257 2.202-2.11 4.908-3.165 8.119-3.165 3.211 0 5.871 1.055 7.981 3.165 2.202 2.11 3.303 4.862 3.303 8.257 0 3.302-1.101 6.055-3.303 8.256-2.202 2.11-4.862 3.165-7.981 3.165z"
+      fill="currentColor"
+    />
+    <mask id="a" fill="#fff">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z"
+      />
+    </mask>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z"
+      fill="currentColor"
+    />
+    <path
+      d="M0 147.438h-.527v.526H0v-.526zM73.719-.527C32.714-.527-.527 32.714-.527 73.72H.527C.527 33.296 33.296.527 73.719.527V-.527zm74.245 74.246c0-41.005-33.24-74.246-74.245-74.246V.527c40.423 0 73.192 32.769 73.192 73.192h1.053zm-74.245 74.245c41.005 0 74.245-33.24 74.245-74.245h-1.053c0 40.423-32.769 73.192-73.192 73.192v1.053zm-73.719 0h73.719v-1.053H0v1.053zm-.527-74.245v73.719H.527V73.719H-.527zm82.742 0c0-9.094-7.372-16.466-16.466-16.466v1.053c8.512 0 15.413 6.9 15.413 15.413h1.053zM65.749 90.184c9.094 0 16.466-7.372 16.466-16.465h-1.053c0 8.512-6.9 15.412-15.413 15.412v1.053zM49.283 73.72c0 9.093 7.372 16.465 16.466 16.465v-1.053c-8.512 0-15.413-6.9-15.413-15.412h-1.053zM65.75 57.253c-9.094 0-16.466 7.372-16.466 16.466h1.053c0-8.513 6.9-15.413 15.413-15.413v-1.053zm47.818 1.053c8.513 0 15.413 6.9 15.413 15.413h1.053c0-9.094-7.372-16.466-16.466-16.466v1.053zM98.155 73.719c0-8.513 6.9-15.413 15.412-15.413v-1.053c-9.093 0-16.465 7.372-16.465 16.466h1.053zm15.412 15.412c-8.512 0-15.412-6.9-15.412-15.412h-1.053c0 9.093 7.372 16.465 16.465 16.465v-1.053zM128.98 73.72c0 8.512-6.9 15.412-15.413 15.412v1.053c9.094 0 16.466-7.372 16.466-16.465h-1.053z"
+      fill="#000"
+      mask="url(#a)"
+    />
+  </svg>
+</template>
diff --git a/docs/content/1.get-started/1.installation.md b/docs/content/1.get-started/1.installation.md
@@ -71,11 +71,12 @@ yarn dev
 
 The development server will listen on [http://localhost:4000](http://localhost:4000)
 
-Checkout the [Deployment](/feature/deployment) section when you are ready to publish your documentation.
+Checkout the [Deployment](/features/deployment) section when you are ready to publish your documentation.
 
 ## Demo
 
 ::video-player{loop playsinline controls}
+---
 sources:
 - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
   type: video/webm

diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
@@ -42,6 +42,10 @@ export default {
     url: 'https://github.com',
     apiUrl: 'https://api.github.com/repos'
   },
+  algolia: {
+    indexName: 'your_index_name',
+    apiKey: 'your_api_key'
+  },
   theme: {
     header: {
       title: false,
@@ -69,15 +73,19 @@ export default {
 | `contentDir` | `String` | The path of your website content directory. |
 | `theme` | `Object` | Your theme configuration, see [here](/theme/settings) for default theme. |
 | **Layout** | | |
-| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader by default. |
-| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter by default. |
-| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid by default. |
-| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside by default. |
-| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation by default. |
-| :icon-git-hub{class="inline w-4 -mt-0.5"} **GitHub Module** | | |
+| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader. |
+| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter. |
+| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid. |
+| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside. |
+| `layout.banner` | `Boolean` | If set to `true`, it will show the AppBanner. |
+| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation. |
+| :icon-git-hub{class="inline w-4 -mt-0.5"} **GitHub** | | |
 | `github.repo` | `String` | Your project repository. |
 | `github.branch` | `String` | The branch to link. |
 | `github.dir` | `String` | The directory in which Docus lives in that repository. |
 | `github.releases` | `Boolean\|String` | If set to true, Docus will fetch Github releases. If set to a string, Docus will use it as the target repository to fetch releases. |
 | `github.url` | `String` | The root URL of GitHub. (set by default) |
 | `github.apiUrl` | `String` | The API URL of GitHub. (set by default) |
+| :icon-algolia{class="inline w-4 -mt-0.5"} **DocSearch** |
+| `algolia.indexName` | `String` | The name of your [DocSearch](https://docsearch.algolia.com) index. |
+| `algolia.apiKey` | `String` | Your [DocSearch](https://docsearch.algolia.com) API key. |
diff --git a/docs/content/2.writing/1.my-first-page.md b/docs/content/2.writing/1.my-first-page.md
@@ -42,6 +42,7 @@ Using our custom syntax, you can easily add and configure components into your p
 ... Front-matter 👆
 
 ::block-hero
+---
 cta:
   - Get started
   - /get-started/installation
@@ -51,10 +52,10 @@ secondary:
 snippet: npx degit nuxtlabs/docus-starter#main docs
 ---
 
----title
+#title
 The next big thing
 
----description
+#description
 The favorite package of your favorite package.
 ::
 ```

diff --git a/docs/content/2.writing/2.syntax.md b/docs/content/2.writing/2.syntax.md
@@ -54,6 +54,7 @@ There is a few things to know about it:
 
   // YAML Method
   ::card
+  ---
   icon: IconNuxt
   description: Harness the full power of Nuxt and the Nuxt ecosystem.
   iconClass: 'text-hex-00DC82' 
@@ -86,6 +87,7 @@ There is a few things to know about it:
     ::
 
     ::card
+    ---
     icon: IconNuxt
     description: Harness the full power of Nuxt and the Nuxt ecosystem.
     iconClass: 'text-hex-00DC82' 
@@ -162,13 +164,14 @@ There is a few things to know about it:
 
   ```md [Code]
   ::card
+  ---
   icon: IconNuxt
   title: A complex card.
   ---
 
   Default slot
 
-  ---description
+  #description
   ::alert
     Description slot
   ::
@@ -189,13 +192,14 @@ There is a few things to know about it:
 
   ::code-block{label="Preview" preview}
     ::card
+    ---
     icon: IconNuxt
     title: A complex card.
     ---
 
     Default slot
 
-    ---description
+    #description
     ::alert
     Description slot
     ::
@@ -209,13 +213,14 @@ There is a few things to know about it:
 
   ```md [Code]
   ::card
-    icon: IconNuxt
-    title: A complex card.
+  ---
+  icon: IconNuxt
+  title: A complex card.
   ---
 
   Default slot
 
-  ---description
+  #description
     ::alert
       Description slot
     ::
@@ -224,13 +229,14 @@ There is a few things to know about it:
 
   ::code-block{label="Preview" preview}
     ::card
-      icon: IconNuxt
-      title: A complex card.
+    ---
+    icon: IconNuxt
+    title: A complex card.
     ---
 
     Default slot
 
-    ---description
+    #description
       ::alert
         Description slot
       ::
@@ -244,13 +250,14 @@ There is a few things to know about it:
 
   ```md [Code]
   ::card
-    icon: IconNuxt
-    title: A complex card.
+  ---
+  icon: IconNuxt
+  title: A complex card.
   ---
 
   Default slot
 
-  ---description
+  #description
     :::alert
       Description slot
     :::
@@ -259,13 +266,14 @@ There is a few things to know about it:
 
   ::code-block{label="Preview" preview}
     ::card
-      icon: IconNuxt
-      title: A complex card.
+    ---
+    icon: IconNuxt
+    title: A complex card.
     ---
 
     Default slot
 
-    ---description
+    #description
       :::alert
         Description slot
       :::

diff --git a/docs/content/2.writing/example-page.md b/docs/content/2.writing/example-page.md
@@ -7,6 +7,7 @@ layout:
 ---
 
 ::block-hero
+---
 cta:
   - Get started
   - /get-started/installation
@@ -16,10 +17,10 @@ secondary:
 snippet: npx degit nuxtlabs/docus-starter#main docs
 ---
 
----title
+#title
 The next big thing
 
----description
+#description
 The favorite package of your favorite package.
 ::
 

diff --git a/docs/content/3.features/3.assets.md b/docs/content/3.features/3.assets.md
@@ -73,6 +73,7 @@ Docus includes a **Video Player** component.
 
   ```markdown [Markdown]
   ::video-player{loop playsinline controls}
+  ---
   sources:
   - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
     type: video/webm
@@ -87,6 +88,7 @@ Docus includes a **Video Player** component.
 
   ::code-block{label="Preview"}
   ::video-player{loop playsinline controls}
+  ---
   sources:
   - src: https://res.cloudinary.com/nuxt/video/upload/q_auto/v1612886404/docus/docus-vercel_wwaryz.webm
     type: video/webm

diff --git a/docs/content/3.features/5.deployment.md b/docs/content/3.features/5.deployment.md
@@ -102,6 +102,7 @@ jobs:
         uses: actions/setup-node@v2.1.2
         with:
           node-version: ${{ matrix.node }}
+          cache: npm
 
       - name: Install dependencies
         run: yarn

diff --git a/docs/content/3.features/6.extend.md b/docs/content/3.features/6.extend.md
@@ -43,6 +43,7 @@ export default {
 ```
 
 ::alert
+---
 type: success
 ---
 That's it! Deploy your project and enjoy Plausible.

diff --git a/docs/content/3.features/7.migration.md b/docs/content/3.features/7.migration.md
@@ -148,6 +148,7 @@ You might also need to follow the migration guide from [WindiCSS](https://windic
 Visit [Configuration](/get-started/configuration) page to update your configuration files with Docus features.
 
 ::alert
+---
 type: success
 ---
 

diff --git a/docs/content/4.theme/2.components.md b/docs/content/4.theme/2.components.md
@@ -183,23 +183,23 @@ Cross-reference other files within your documentation (such as example code you
 
 :props{of="components/atoms/InjectContent"}
 
-## `code-sandbox`
+## `sandbox`
 
-[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/CodeSandbox.vue)
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/Sandbox.vue)
 
-Embed CodeSandbox easily in your documentation with great performances, using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport.
+Embed CodeSandbox/StackBlitz easily in your documentation with great performances, using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport.
 
 ::code-group
   ::code-block{label="Preview" active preview}
-    :code-sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
+    :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
   ::
 
   ```md [Code]
-  :code-sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
+  :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
   ```
 ::
 
-:props{of="components/atoms/CodeSandbox"}
+:props{of="components/atoms/Sandbox"}
 
 ## `tweet`
 

diff --git a/docs/content/5.templates/1.pre-launch.md b/docs/content/5.templates/1.pre-launch.md
@@ -10,6 +10,7 @@ layout:
 
 
 ::pre-launch-hero
+---
 title: Awesome startup
 description: Pretty long awesome startup description
 cta:

diff --git a/docs/content/5.templates/2.pricing.md b/docs/content/5.templates/2.pricing.md
@@ -4,7 +4,7 @@ footer: false
 ---
 
 ::pricing-block
-
+---
 plans:
   monthly:
     base: true