Add animated example

docs/src/components/CodeSample.tsx

@@ -19,7 +19,9 @@ export function CodeSample(props: CodeSampleProps) {
 
   function onClick() {
     if (highlight) {
-      const driverObj = driver();
+      const driverObj = driver({
+        ...config
+      });
       driverObj.highlight(highlight);
     } else if (tour) {
       const driverObj = driver({

docs/src/content/guides/animated-tour.mdx

@@ -0,0 +1,48 @@
+---
+title: "Animated Tour"
+groupTitle: "Examples"
+sort: 2
+---
+
+import { CodeSample } from "../../components/CodeSample.tsx";
+
+The following example shows how to create a simple tour with a few steps. Click the button below the code sample to see the tour in action.
+
+<CodeSample
+  heading={'Basic Animated Tour'}
+  config={{
+    animate: true,
+    showButtons: ['next', 'previous'],
+  }}
+  tour={[
+    { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
+    { element: '.line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
+    { element: '.line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
+    { element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
+    { element: '.line:nth-child(14)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
+    { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+    { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
+  ]}
+  id={"tour-example"}
+  client:load
+>
+  ```js
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
+
+  const driverObj = driver({
+    showProgress: true,
+    steps: [
+      { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
+      { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
+      { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
+      { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
+      { element: 'code .line:nth-child(14)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
+      { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+      { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
+    ]
+  });
+
+  driver.drive();
+  ```
+</CodeSample>

docs/src/pages/index.astro

@@ -4,6 +4,9 @@ import { FeatureMarquee } from "../components/FeatureMarquee";
 import Container from "../components/Container.astro";
 import UsecaseItem from "../components/UsecaseItem.astro";
 import { ExampleButton } from "../components/examples/ExampleButton";
+import { getFormattedStars } from "../lib/github";
+
+const starCount = getFormattedStars('kamranahmedse/driver.js');
 ---
 <BaseLayout>
   <div class="bg-yellow-300">
@@ -92,7 +95,7 @@ import { ExampleButton } from "../components/examples/ExampleButton";
             <a href="https://github.com/kamranahmedse/driver.js"
                target="_blank"
                class="flex items-center font-bold text-2xl rounded-xl py-3 px-5 bg-yellow-300 border-black hover:bg-yellow-400">
-              <span class="mr-3 inline-flex items-center"><img src="/star.svg" alt="Hero Image" class="h-7 mr-2" /> 14.7k</span>
+              <span class="mr-3 inline-flex items-center"><img src="/star.svg" alt="Hero Image" class="h-7 mr-2" /> { starCount }</span>
               GitHub Stars
             </a>
             <a href="/docs/installation"