Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/landingpage

docs/src/demos/Examples/Book/index.vue

@@ -109,6 +109,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -266,6 +266,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Examples/Community/index.vue

@@ -147,6 +147,15 @@ export default {
   > * + * {
     margin-top: 0.75em;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
 }
 
 .mention {

docs/src/demos/Examples/Default/index.vue

@@ -141,6 +141,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Examples/Formatting/index.vue

@@ -124,6 +124,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Examples/MarkdownShortcuts/index.vue

@@ -65,6 +65,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Examples/Tables/index.vue

@@ -4,56 +4,56 @@
       insertTable
     </button>
 
-    <template v-if="editor.isActive('table')">
-      <button @click="editor.chain().focus().addColumnBefore().run()" v-if="editor.can().addColumnBefore()">
+    <template>
+      <button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
         addColumnBefore
       </button>
-      <button @click="editor.chain().focus().addColumnAfter().run()" v-if="editor.can().addColumnAfter()">
+      <button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
         addColumnAfter
       </button>
-      <button @click="editor.chain().focus().deleteColumn().run()" v-if="editor.can().deleteColumn()">
+      <button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
         deleteColumn
       </button>
-      <button @click="editor.chain().focus().addRowBefore().run()" v-if="editor.can().addRowBefore()">
+      <button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
         addRowBefore
       </button>
-      <button @click="editor.chain().focus().addRowAfter().run()" v-if="editor.can().addRowAfter()">
+      <button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
         addRowAfter
       </button>
-      <button @click="editor.chain().focus().deleteRow().run()" v-if="editor.can().deleteRow()">
+      <button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
         deleteRow
       </button>
-      <button @click="editor.chain().focus().deleteTable().run()" v-if="editor.can().deleteTable()">
+      <button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
         deleteTable
       </button>
-      <button @click="editor.chain().focus().mergeCells().run()" v-if="editor.can().mergeCells()">
+      <button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
         mergeCells
       </button>
-      <button @click="editor.chain().focus().splitCell().run()" v-if="editor.can().splitCell()">
+      <button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
         splitCell
       </button>
-      <button @click="editor.chain().focus().toggleHeaderColumn().run()" v-if="editor.can().toggleHeaderColumn()">
+      <button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
         toggleHeaderColumn
       </button>
-      <button @click="editor.chain().focus().toggleHeaderRow().run()" v-if="editor.can().toggleHeaderRow()">
+      <button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
         toggleHeaderRow
       </button>
-      <button @click="editor.chain().focus().toggleHeaderCell().run()" v-if="editor.can().toggleHeaderCell()">
+      <button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
         toggleHeaderCell
       </button>
-      <button @click="editor.chain().focus().mergeOrSplit().run()" v-if="editor.can().mergeOrSplit()">
+      <button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
         mergeOrSplit
       </button>
-      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" v-if="editor.can().setCellAttribute('colspan', 2)">
+      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" :disabled="!editor.can().setCellAttribute('colspan', 2)">
         setCellAttribute
       </button>
-      <button @click="editor.chain().focus().fixTables().run()" v-if="editor.can().fixTables()">
+      <button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
         fixTables
       </button>
-      <button @click="editor.chain().focus().goToNextCell().run()" v-if="editor.can().goToNextCell()">
+      <button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
         goToNextCell
       </button>
-      <button @click="editor.chain().focus().goToPreviousCell().run()" v-if="editor.can().goToPreviousCell()">
+      <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
         goToPreviousCell
       </button>
     </template>
@@ -94,15 +94,9 @@ export default {
         TableCell,
       ],
       content: `
-        <h1>
-          Fun with tables
-        </h1>
         <p>
-          Greeks were the first people to use a table as a dining place. Not sure why they put their plates on a computer display, but I don’t care. If you want to create your own table, tiptap got you covered. No matter, what you want to do with those tables.
+          Have you seen our tables? They are amazing!
         </p>
-        <h2>
-          Amazing features
-        </h2>
         <ul>
           <li>tables with rows, headers and cells</li>
           <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
@@ -145,6 +139,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
@@ -232,7 +235,6 @@ export default {
 }
 
 .tableWrapper {
-  padding: 1rem 0;
   overflow-x: auto;
 }
 

docs/src/demos/Guide/Content/ExportHTML/index.vue

@@ -121,6 +121,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/demos/Guide/Content/ExportJSON/index.vue

@@ -128,6 +128,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

docs/src/docPages/api/schema.md

@@ -145,6 +145,17 @@ Node.create({
 })
 ```
 
+For some cases where you want features that aren’t available in marks, for example a node view, try if an inline node would work:
+
+```js
+Node.create({
+  name: 'customInlineNode',
+  group: 'inline',
+  inline: true,
+  content: 'text*',
+})
+```
+
 #### Atom
 Nodes with `atom: true` aren’t directly editable and should be treated as a single unit. It’s not so likely to use that in a editor context, but this is how it would look like:
 

docs/src/docPages/guide/content.md

@@ -66,13 +66,22 @@ Use this interactive example to fiddle around:
 
 <demo name="Guide/Content/ExportHTML" :show-source="false"/>
 
+### Option 3: Y.js
+Our editor has amazing support for Y.js, which is amazing to add [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing).
+
+Internally, Y.js stores a history of all changes. That can be in the browser, on a server, synced with other connected clients, or on a USB stick. But, it’s important to know that Y.js needs those stored changes. A simple JSON document is not enough to merge changes.
+
+Sure, you can import existing JSON documents to get started and get a JSON out of Y.js, but that’s more like an import/export format. It won’t be your single source. That’s important to consider when adding Y.js for one of the mentioned use cases.
+
+That said, it’s amazing and we’re about to provide an amazing backend, that makes all that a breeze.
+
 ### Not an option: Markdown
 Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
 
 * Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
 * There are enough packages to convert HTML to Markdown and vice-versa.
 * Markdown standards vary.
-* tiptap’s strength is cutomization, that doesn’t work very well with Markdown
+* tiptap’s strength is cutomization, that doesn’t work very well with Markdown.
 
 You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
 
@@ -120,3 +129,7 @@ If you’re migrating existing content to tiptap we would recommend to get your
 We’re about to go through a few cases to help with that, for example we provide a PHP package to convert HTML to a compatible JSON structure: [ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror).
 
 Share your experiences with us! We’d like to add more information here.
+
+## Security
+
+There’s no reason to use on or the other for security reasons.

docs/src/docPages/guide/getting-started.md

@@ -6,11 +6,11 @@
 tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows, but here is the general one. The following steps should help you to integrate tiptap in your JavaScript project.
 
 ## Alternative Guides
-* [Vue CLI](/guide/getting-started/vue-cli)
-* [Nuxt.js](/guide/getting-started/nuxtjs)
+* [Vue CLI](/guide/getting-started/vue)
+* [Nuxt.js](/guide/getting-started/nuxt)
 * [React](/guide/getting-started/react) (Draft)
 * [Svelte](/guide/getting-started/svelte) (Draft)
-* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
+* [Alpine.js](/guide/getting-started/alpine) (Draft)
 * [Livewire](/guide/getting-started/livewire) (Draft)
 
 ## Requirements

docs/src/docPages/guide/getting-started/alpine.md

@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
+
 TODO
 
 https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419

docs/src/docPages/guide/getting-started/intertia.md

@@ -2,6 +2,11 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Inertia.js](https://inertiajs.com/) project.
+
+## toc
+
 TODO
 
 ## Introduction

docs/src/docPages/guide/getting-started/livewire.md

@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
+
 TODO
 
 editor.blade.php

docs/src/docPages/guide/getting-started/next.md

@@ -0,0 +1,10 @@
+# Next.js
+
+## toc
+
+## Introduction
+The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
+
+TODO
+
+<demo name="React" mode="react" />

docs/src/docPages/guide/getting-started/nextjs.md

@@ -1,7 +0,0 @@
-# Next.js
-
-## toc
-
-TODO
-
-<demo name="React" mode="react" />

docs/src/docPages/guide/getting-started/nuxt.md

@@ -3,7 +3,7 @@
 ## toc
 
 ## Introduction
-The following guide describes how to integrate tiptap with your Nuxt.js project.
+The following guide describes how to integrate tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
 
 ## Requirements
 * [Node](https://nodejs.org/en/download/) installed on your machine

docs/src/docPages/guide/getting-started/react.md

@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [React](https://reactjs.org/) project.
+
 TODO
 
 <demo name="React" mode="react" />

docs/src/docPages/guide/getting-started/svelte.md

@@ -1,5 +1,10 @@
 # Svelte
 
+## toc
+
+## Introduction
+The following guide describes how to integrate tiptap with your Svelte project.
+
 TODO
 
 Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
@@ -15,7 +20,7 @@ App.svelte
 
 Editor.svelte
 ```html
-<script>
+<script type="module">
 	import { onMount } from 'svelte'
 	import { Editor } from '@tiptap/core'
   import { defaultExtensions } from '@tiptap/starter-kit'
@@ -44,3 +49,4 @@ Editor.svelte
 {/if}
 
 <div bind:this={element} />
+```

docs/src/docPages/guide/getting-started/vue.md

@@ -1,30 +1,16 @@
-# Vue CLI
+# Vue.js
 
 ## toc
 
 ## Introduction
-The following guide describes how to integrate tiptap with your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step.
+The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
 
 ## Requirements
 * [Node](https://nodejs.org/en/download/) installed on your machine
+* [Vue CLI](https://cli.vuejs.org/) installed on your machine
 * Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started)
 
-## 1. Install Vue CLI (optional)
-Vue CLI aims to be the standard tooling baseline for the Vue ecosystem, and helps to create new projects quickly. If you’re working with Vue a lot, chances are you have this installed already. Just skip this step then.
-
-Here is how you could install (or update) it:
-
-```bash
-# with npm
-npm install -g @vue/cli
-
-# with Yarn
-yarn global add @vue/cli
-```
-
-From now on, the `vue` command is available globally. Test it with `vue --version`, this should output the current version.
-
-## 2. Create a project (optional)
+## 1. Create a project (optional)
 If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
 
 For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
@@ -37,7 +23,7 @@ vue create tiptap-example
 cd tiptap-example
 ```
 
-## 3. Install the dependencies
+## 2. Install the dependencies
 Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component.
 
 ```bash
@@ -50,7 +36,7 @@ yarn add @tiptap/core @tiptap/vue-starter-kit
 
 If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
 
-## 4. Create a new component
+## 3. Create a new component
 To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
 
 This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
@@ -88,7 +74,7 @@ export default {
 </script>
 ```
 
-## 5. Add it to your app
+## 4. Add it to your app
 Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
 
 ```html
@@ -112,7 +98,7 @@ export default {
 
 You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
 
-## 6. Use v-model (optional)
+## 5. Use v-model (optional)
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
 
 <demo name="Guide/GettingStarted/VModel" />

docs/src/docPages/overview/installation.md

@@ -3,10 +3,20 @@
 ## toc
 
 ## Introduction
-You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
+Depending on how your development setup looks like, there are a few different ways to install tiptap. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use it without any front-end framework. Choose the way that fits your workflow and start building cool things!
 
-## Option 1: Vanilla JavaScript
-Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.
+## Integration guides
+* [Vue.js](/guide/getting-started/vue)
+* [Nuxt.js](/guide/getting-started/nuxt)
+* [React](/guide/getting-started/react) (Draft)
+* [Svelte](/guide/getting-started/svelte) (Draft)
+* [Alpine.js](/guide/getting-started/alpine) (Draft)
+* [Livewire](/guide/getting-started/livewire) (Draft)
+
+Don’t see your framework here? That shouldn’t stop you from installing tiptap. Just use the Vanilla JavaScript version, that should work fine, too.
+
+## Vanilla JavaScript
+Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can use that version to connect tiptap with other frameworks not mentioned here, too.
 
 ```bash
 # with npm
@@ -16,7 +26,7 @@ npm install @tiptap/core @tiptap/starter-kit
 yarn add @tiptap/core @tiptap/starter-kit
 ```
 
-Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
+Great, that’s all you need for now. Here is the boilerplate code to start your first tiptap instance:
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -29,45 +39,8 @@ new Editor({
 })
 ```
 
-## Option 2: Vue.js
-To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
-
-```bash
-# with npm
-npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
-
-# with Yarn
-yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
-```
-
-Create a new component and add the following content to get a basic version of tiptap:
-
-<demo name="Overview/Installation" />
-
-### Nuxt.js
-Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
-
-[Read more](https://nuxtjs.org/api/components-client-only)
-
-## Option 3: CodeSandbox
-CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
-
-<iframe
-  src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
-  style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
-  title="tiptap-issue-template"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-></iframe>
-
-It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster.
-
-
-## Option 4: CDN (Draft)
-To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN. We use two different provides:
-
-### Skypack (ES Modules)
-Skypack enables you to use ES modules, which should be supported in all modern browsers. The packages are smaller, that’s great, too. So here is how to use it:
+## CDN
+For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN builds. Here are the few lines of code you need to get started:
 
 ```html
 <!doctype html>
@@ -89,27 +62,14 @@ Skypack enables you to use ES modules, which should be supported in all modern b
 </html>
 ```
 
-### ~~Unpkg (UMD, deprecated)~~
-We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it:
+## CodeSandbox
+CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
 
-```html
-<!doctype html>
-<head>
-  <meta charset="utf-8">
-  <script src="https://unpkg.com/@tiptap/core@latest"></script>
-  <script src="https://unpkg.com/@tiptap/starter-kit@latest"></script>
-</head>
-<body>
-  <div class="element"></div>
-  <script>
-    const { Editor } = window['@tiptap/core']
-    const { defaultExtensions } = window['@tiptap/starter-kit']
-    const editor = new Editor({
-      element: document.querySelector('.element'),
-      extensions: defaultExtensions(),
-      content: '<p>Your content.</p>',
-    })
-  </script>
-</body>
-</html>
-```
+<iframe
+  src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
+  style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
+  title="tiptap-issue-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
+It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug easily, and release a fix faster.

docs/src/links.yaml

@@ -4,11 +4,11 @@
       link: /overview/installation
     - title: Upgrade Guide
       link: /overview/upgrade-guide
-    - title: Contributing
-      link: /overview/contributing
     - title: Become a sponsor
       link: /sponsor
       type: sponsor
+    - title: Contributing
+      link: /overview/contributing
 
 - title: Examples
   link: /examples
@@ -48,13 +48,13 @@
       link: /guide/getting-started
       items:
         - title: Vue.js 2
-          link: /guide/getting-started/vue-cli
+          link: /guide/getting-started/vue
           skip: true
         - title: Nuxt.js
-          link: /guide/getting-started/nuxtjs
+          link: /guide/getting-started/nuxt
           skip: true
         - title: Inertia.js
-          link: /guide/getting-started/intertiajs
+          link: /guide/getting-started/intertia
           type: draft
           skip: true
         - title: React
@@ -62,7 +62,7 @@
           type: draft
           skip: true
         - title: Next.js
-          link: /guide/getting-started/nextjs
+          link: /guide/getting-started/next
           type: draft
           skip: true
         - title: Svelte
@@ -70,7 +70,7 @@
           type: draft
           skip: true
         - title: Alpine.js
-          link: /guide/getting-started/alpinejs
+          link: /guide/getting-started/alpine
           type: draft
           skip: true
         - title: Livewire