Improve get-started section in docs.

packages/embla-carousel-docs/src/components/Hero/HeroUsps.tsx

@@ -76,12 +76,10 @@ export const HeroUsps = () => {
         </LinkCard>
       </Usp>
       <Usp>
-        <LinkCard to="/get-started/typescript/">
+        <LinkCard to="/examples/generator/">
           <div>
-            <UspHeader>Fully Typed</UspHeader>
-            <UspText>
-              Built-in types because it is written in TypeScript.
-            </UspText>
+            <UspHeader>Carousel generator</UspHeader>
+            <UspText>Create your own customized carousel in no time.</UspText>
           </div>
         </LinkCard>
       </Usp>

packages/embla-carousel-docs/src/content/pages/api/plugins.mdx

@@ -126,7 +126,7 @@ export const EmblaCarousel = () => {
 
 ### Global options
 
-Most plugins allows you to set **global options** that will be applied to all instances. This allows for overriding the default plugin options with your own:
+All [official plugins](/plugins/) allows you to set **global options** that will be applied to all instances. This allows for overriding the default plugin options with your own:
 
 <Tabs groupId="library">
 <TabsItem label="Vanilla" value="vanilla">

packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx

@@ -1,7 +1,7 @@
 ---
 title: CDN
 description: Learn how to setup Embla Carousel using a CDN.
-order: 5
+order: 4
 date: 2021-02-21
 ---
 
@@ -46,36 +46,36 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
 }
 ```
 
-## Adding JavaScript
+## Accessing the carousel API
 
-Now you're ready to add some **JavaScript** magic to give life to your first Embla Carousel. Make sure to place your script **after** the CDN `script` tag. Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` function.
+Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](/api/).
 
-```html
+```html{6}
 <script type="text/javascript">
   var emblaNode = document.querySelector('.embla')
   var options = { loop: false }
-
   var embla = EmblaCarousel(emblaNode, options)
+
+  console.log(emblaApi.slideNodes()) // Access API
 </script>
 ```
 
 ## Adding plugins
 
-When adding plugins, you need to make sure that the script that activates your carousel is placed **after** the script tag that loads the Embla Carousel core package and the plugins:
+Start by including the plugin you want to use. In this example, we're going to include the [Autoplay](/plugins/autoplay/) plugin:
 
-```html
+```html{2}
 <script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
 <script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
 ```
 
-Plugins included from a CDN will be **prefixed with EmblaCarousel**. Here's an example that shows how to add plugins to your carousel:
+Plugins included from a CDN will be **prefixed** with **EmblaCarousel**. Here's an example that shows how to add the [Autoplay](/plugins/autoplay/) plugin to your carousel:
 
-```html
+```html{4-5}
 <script type="text/javascript">
   var emblaNode = document.querySelector('.embla')
   var options = { loop: false }
-  var plugins = [EmblaCarouselAutoplay()] // Plugins
-
+  var plugins = [EmblaCarouselAutoplay()]
   var embla = EmblaCarousel(emblaNode, options, plugins)
 </script>
 ```

packages/embla-carousel-docs/src/content/pages/get-started/module.mdx

@@ -66,29 +66,46 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
 
 Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](/api/).
 
-```js
+```js{7}
 import EmblaCarousel from 'embla-carousel'
 
 const emblaNode = document.querySelector('.embla')
 const options = { loop: false }
-
 const emblaApi = EmblaCarousel(emblaNode, options)
 
 console.log(emblaApi.slideNodes()) // Access API
 ```
 
 ## Adding plugins
 
+Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
 Embla Carousel accepts an optional **plugin array** as the thrid argument. Here's a basic example of how to make use of it:
 
-```js
+```js{6-7}
 import EmblaCarousel from 'embla-carousel'
 import Autoplay from 'embla-carousel-autoplay'
 
 const emblaNode = document.querySelector('.embla')
 const options = { loop: false }
-const plugins = [Autoplay()] // Plugins
-
+const plugins = [Autoplay()]
 const emblaApi = EmblaCarousel(emblaNode, options, plugins)
 ```
 

packages/embla-carousel-docs/src/content/pages/get-started/react.mdx

@@ -102,7 +102,26 @@ export const EmblaCarousel = () => {
 
 ## Adding plugins
 
-The `useEmblaCarousel` hook also accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an array like so:
+Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
+The `useEmblaCarousel` hook accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an **array** like so:
 
 ```jsx{3,6}
 import React, { useEffect } from 'react'

packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx

@@ -96,7 +96,26 @@ The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options
 
 ## Adding plugins
 
-The `emblaCarouselSvelte` action parameter also accepts [plugins](/plugins/). Note that plugins need to be passed in an array like so:
+Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
+The `emblaCarouselSvelte` action parameter accepts [plugins](/plugins/). Note that plugins need to be passed in an **array** like so:
 
 ```html{3,6,9}
 <script>

packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx

@@ -114,7 +114,26 @@ The `emblaCarouselVue` function takes the Embla Carousel [options](/api/options/
 
 ## Adding plugins
 
-The `emblaCarouselVue` function also accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an array like so:
+Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
+The `emblaCarouselVue` function accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an **array** like so:
 
 ```html{13,17}
 <template>

packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx

@@ -16,6 +16,8 @@ import { TabsItem } from 'components/Tabs/TabsItem'
 
 This plugin is used to extend Embla Carousel with **auto height** functionality. It changes the height of the carousel container to fit the height of the highest slide in view.
 
+---
+
 ## Installation
 
 First you need to install the **npm package** and save it to your dependencies:
@@ -82,10 +84,12 @@ import AutoHeight from 'embla-carousel-auto-height'
 const autoHeightOptions = { destroyHeight: 'auto' } // Options
 
 const embla = EmblaCarousel(emblaRoot, { loop: false }, [
-  AutoHeight(autoHeightOptions), // Add plugin with options
+  AutoHeight(autoHeightOptions) // Add plugin with options
 ])
 ```
 
+---
+
 ### destroyHeight
 
 Type: <BrandPrimaryText>`CSSStyleDeclaration.height`</BrandPrimaryText>  

packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx

@@ -126,10 +126,10 @@ When enabled, autoplay will pause when a mouse pointer enters the Embla Carousel
 Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
 Default: <BrandSecondaryText>`true`</BrandSecondaryText>
 
----
-
 When enabled, autoplay will stop when a focusable element inside the carousel recieves focus. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is `false`, autoplay will resume when the user leaves focus.
 
+---
+
 ### stopOnLastSnap
 
 Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
@@ -146,6 +146,8 @@ Default: <BrandSecondaryText>`null`</BrandSecondaryText>
 
 The node that should respond to user interactions like [stopOnMouseEnter](/plugins/autoplay/#stoponmouseenter) and [stopOnInteraction](/plugins/autoplay/#stoponinteraction).
 
+---
+
 ## Methods
 
 The Autoplay plugin exposes a set of **useful methods** which lets you control it. Assuming you've passed the plugin to the Embla Carousel constructor, a method is called like demonstrated below:
@@ -190,6 +192,8 @@ Returns: <BrandSecondaryText>`boolean`</BrandSecondaryText>
 
 Returns a boolean whether autoplay is playing or not.
 
+---
+
 ## Events
 
 Below follows an exhaustive list of all Autoplay plugin events together with information about how they work. Attach event listeners like so: