docs(examples): use stackblitz to display examples

docs/.vitepress/components/Example.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue'
+import sdk from '@stackblitz/sdk'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  view: {
+    type: String,
+    default: 'preview',
+  },
+  clickToLoad: {
+    type: Boolean,
+    default: false,
+  },
+  hideNavigation: {
+    type: Boolean,
+    default: true,
+  },
+  forceEmbedLayout: {
+    type: Boolean,
+    default: true,
+  },
+  openFile: {
+    type: String,
+    default: 'src/App.vue',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: [String, Number],
+    default: 350,
+  },
+})
+
+const el = ref(null)
+const error = ref(null)
+
+const embedProject = () => {
+  if (!el.value) {
+    return
+  }
+  try {
+    sdk.embedProjectId(el.value, props.id, {
+      forceEmbedLayout: props.forceEmbedLayout,
+      openFile: props.openFile,
+      hideNavigation: props.hideNavigation,
+      height: props.height,
+      width: props.width,
+      view: props.view,
+      clickToLoad: props.clickToLoad,
+    })
+    error.value = null
+  } catch (e) {
+    error.value = 'Failed to embed project. Please try again.'
+    console.error(e)
+  }
+}
+
+onMounted(embedProject)
+</script>
+
+<template>
+  <div>
+    <div v-if="error" class="error-message">{{ error }}</div>
+    <div
+      v-else
+      :style="{ width: props.width, height: `${props.height}px` }"
+      ref="el"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>

docs/.vitepress/config.js

@@ -18,7 +18,7 @@ module.exports = {
         text: 'Introduction',
         items: [
           { text: 'Getting Started', link: '/getting-started' },
-          { text: 'Configs', link: '/configs' },
+          { text: 'Config', link: '/config' },
           { text: 'Examples', link: '/examples' },
         ],
       },

docs/api/methods.md

@@ -33,9 +33,9 @@ Slide to the previous slide
 
 Update `slideWidth` value based on `itemsToShow` and the current carousel width
 
-## updateBreakpointsConfigs()
+## updateBreakpointsConfig()
 
-Update the current carousel configs based on `breakpoints` settings and screen width
+Update the current carousel config based on `breakpoints` settings and screen width
 
 ## updateSlidesData()
 
@@ -46,16 +46,16 @@ Update all the slide related date includes:
 - `maxSlide`
 - `minSlide`
 
-## initDefaultConfigs()
+## initDefaultConfig()
 
 Init carousel default configurations
 
 ## restartCarousel()
 
 Restart the carousel settings and data, internally it calls:
 
-- `initDefaultConfigs`
+- `initDefaultConfig`
 - `resetAutoplay`
-- `updateBreakpointsConfigs`
+- `updateBreakpointsConfig`
 - `updateSlidesData`
 - `updateSlideWidth`

docs/configs.md → docs/config.md

@@ -1,4 +1,4 @@
-# Configs
+# Config
 
 
 ## Available Props