Improve get started guide

Author: davidjerleke

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

@@ -7,20 +7,21 @@ date: 2024-01-05
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Angular
 
 Start by installing the Embla Carousel Angular **npm package** and add it to your dependencies.
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-angular --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-angular
@@ -33,9 +34,12 @@ Start by installing the Embla Carousel Angular **npm package** and add it to you
 
 Embla Carousel provides the handy `EmblaCarouselDirective` **standalone** directive for seamless integration with Angular. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
 
-```typescript highlight={15}
+```ts highlight={15}
 import { AfterViewInit, Component, ViewChild } from '@angular/core'
-import { EmblaCarouselDirective, EmblaCarouselType } from 'embla-carousel-angular'
+import {
+  EmblaCarouselDirective,
+  EmblaCarouselType
+} from 'embla-carousel-angular'
 
 @Component({
   selector: 'app-carousel',
@@ -48,21 +52,21 @@ import { EmblaCarouselDirective, EmblaCarouselType } from 'embla-carousel-angula
       </div>
     </div>
   `,
-  imports: [ EmblaCarouselDirective ],
+  imports: [EmblaCarouselDirective],
   standalone: true
 })
 export class CarouselComponent implements AfterViewInit {
   @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective
-  
+
   private emblaApi?: EmblaCarouselType
   private options = { loop: false }
 
   ngAfterViewInit() {
     this.emblaApi = this.emblaRef.emblaApi
   }
 }
-
 ```
+
 ## Styling the carousel
 
 The element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
@@ -84,22 +88,31 @@ The element with the classname `embla` is needed to cover the scroll overflow. I
 
 The `emblaCarousel` directive takes the Embla Carousel [options](/api/options/) as part of its inputs. Additionally, you can access the [API](/api/) by using the `@ViewChild` decorator to access the carousel in `AfterViewInit` hook。
 
-**ATTENTION**: Calling the following embla APIs directly will trigger too much ChangeDetection, which will lead to serious performance issues.
+<Admonition type="warning">
+  **Warning**: Calling the following embla APIs directly will trigger too much
+  ChangeDetection, which will lead to serious performance issues.
+
+<br />
 
 - `emblaApi.on()`
 - `emblaApi.scrollNext()`
 - `emblaApi.scrollPrev()`
 - `emblaApi.scrollTo()`
 
+</Admonition>
+
 Consider using the following methods which are wrapped with `ngZone.runOutsideAngular()`:
 
 - `EmblaCarouselDirective.scrollPrev()`
 - `EmblaCarouselDirective.scrollNext()`
 - `EmblaCarouselDirective.scrollTo()`
 
-```typescript highlight={7,19,24-26}
+```ts highlight={7,19,24-26}
 import { AfterViewInit, Component, ViewChild } from '@angular/core'
-import { EmblaCarouselDirective, EmblaCarouselType } from 'embla-carousel-angular'
+import {
+  EmblaCarouselDirective,
+  EmblaCarouselType
+} from 'embla-carousel-angular'
 
 @Component({
   selector: 'app-carousel',
@@ -112,29 +125,32 @@ import { EmblaCarouselDirective, EmblaCarouselType } from 'embla-carousel-angula
       </div>
     </div>
   `,
-  imports: [ EmblaCarouselDirective ],
+  imports: [EmblaCarouselDirective],
   standalone: true
 })
 export class CarouselComponent implements AfterViewInit {
   @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective
-  
+
   private emblaApi?: EmblaCarouselType
   private options = { loop: false }
 
   ngAfterViewInit() {
     this.emblaApi = this.emblaRef.emblaApi
   }
 }
-
 ```
 
 ## Listening the carousel events
 
 The `emblaCarousel` directive also provides a custom event: `emblaChange` that forwards embla events, also wrapped in `ngZone.runOutsideAngular`. You need to listen by passing the specified event names into `subscribeToEvents` input on demand.
 
-```typescript highlight={11,12,30,44-46}
+```ts highlight={11,12,30,44-46}
 import { AfterViewInit, Component, ViewChild } from '@angular/core'
-import { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla-carousel-angular'
+import {
+  EmblaCarouselDirective,
+  EmblaCarouselType,
+  EmblaEventType
+} from 'embla-carousel-angular'
 
 @Component({
   selector: 'app-carousel',
@@ -153,12 +169,12 @@ import { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla
       </div>
     </div>
   `,
-  imports: [ EmblaCarouselDirective ],
+  imports: [EmblaCarouselDirective],
   standalone: true
 })
 export class CarouselComponent implements AfterViewInit {
   @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective
-  
+
   private emblaApi?: EmblaCarouselType
   private options = { loop: false }
 
@@ -174,34 +190,31 @@ export class CarouselComponent implements AfterViewInit {
     'reInit',
     'resize',
     'scroll'
-  ];
+  ]
 
   onEmblaChanged(event: EmblaEventType): void {
-    console.log(`Embla event triggered: ${event}`);
+    console.log(`Embla event triggered: ${event}`)
   }
 
   ngAfterViewInit() {
     this.emblaApi = this.emblaRef.emblaApi
   }
 }
-
 ```
 
-
 ## 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">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
@@ -210,13 +223,14 @@ Start by installing the plugin you want to use. In this example, we're going to
   </TabsItem>
 </Tabs>
 
-
 The `emblaCarousel` directive inputs also accepts [plugins](/plugins/). Note that plugins need to be passed in an array like so:
 
-
-```typescript highlight={3,8,24}
+```ts highlight={3,8,24}
 import { AfterViewInit, Component, ViewChild } from '@angular/core'
-import { EmblaCarouselDirective, EmblaCarouselType } from 'embla-carousel-angular'
+import {
+  EmblaCarouselDirective,
+  EmblaCarouselType
+} from 'embla-carousel-angular'
 import Autoplay from 'embla-carousel-autoplay'
 
 @Component({
@@ -230,12 +244,12 @@ import Autoplay from 'embla-carousel-autoplay'
       </div>
     </div>
   `,
-  imports: [ EmblaCarouselDirective ],
+  imports: [EmblaCarouselDirective],
   standalone: true
 })
 export class CarouselComponent implements AfterViewInit {
   @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective
-  
+
   private emblaApi?: EmblaCarouselType
   public options = { loop: false }
   public plugins = [Autoplay()]
@@ -244,7 +258,6 @@ export class CarouselComponent implements AfterViewInit {
     this.emblaApi = this.emblaRef.emblaApi
   }
 }
-
 ```
 
 Congratulations! You just created your first Embla Carousel component.