docs

docs/.vitepress/cache/deps/_metadata.json

@@ -7,25 +7,25 @@
     "vue": {
       "src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "e5124be0",
+      "fileHash": "62ce1fc5",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "8532cc50",
+      "fileHash": "2e0aa744",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "9bb290f8",
+      "fileHash": "78dce1ab",
       "needsInterop": false
     },
     "vitepress > @vueuse/integrations/useFocusTrap": {
       "src": "../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
       "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
-      "fileHash": "536f754f",
+      "fileHash": "d5bf3ae8",
       "needsInterop": false
     },
     "vitepress > mark.js/src/vanilla.js": {
@@ -43,7 +43,7 @@
     "@theme/index": {
       "src": "../../../node_modules/vitepress/dist/client/theme-default/index.js",
       "file": "@theme_index.js",
-      "fileHash": "97946048",
+      "fileHash": "35da2138",
       "needsInterop": false
     },
     "@royalfig/share-button": {

docs/.vitepress/config.mts

@@ -1,19 +1,18 @@
+
 import { defineConfig } from "vitepress";
-// import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-	// vite: {
-	//   plugins: [
-	//     vue({
-	//       template: {
-	//         compilerOptions: {
-	//           // treat all tags with a dash as custom elements
-	//           isCustomElement: (tag) => tag.includes('-')
-	//         }
-	//       }
-	//     })
-	//   ]
-	// },
+  vue: {
+    template: {
+      compilerOptions: {
+        // treat all tags with a dash as custom elements
+        isCustomElement: (tag) => tag.includes('-')
+      }
+    }
+  },
+
+
 	title: "Share Button ",
 	description: "A custom web component for seamless sharing",
 	head: [
@@ -29,7 +28,7 @@ export default defineConfig({
       border: 1px solid var(--vp-c-divider);
       border-radius: 8px;
   }`,
-		],
+		]
 	],
 	themeConfig: {
 		// https://vitepress.dev/reference/default-theme-config
@@ -62,6 +61,7 @@ export default defineConfig({
 					{ text: "Color", link: "/examples/color" },
 					{ text: "Text", link: "/examples/text" },
 					{ text: "Networks", link: "/examples/networks" },
+					{ text: "Icons only", link: "/examples/atomic" },
 				],
 			},
 		],

docs/examples/atomic.md

@@ -14,4 +14,8 @@ To enable individual buttons, use the `atomic` attribute.
 
 <div class="sb-container">
 <share-button atomic></share-button>
-</div>
+</div>
+
+<script>
+    import "@royalfig/share-button"
+</script>

docs/examples/color.md

@@ -25,5 +25,5 @@ title: Color
 </div>
 
 <script>
-import "@royalfig/share-button"
-</script>
+    import "@royalfig/share-button"
+</script>

docs/examples/networks.md

@@ -29,4 +29,8 @@ To customize networks and their order, use the `networks` attribute and pass in
 
 ::: tip Hey there!
 Don't see a network you want to use? File a GitHub issue to get it added!
-:::
+:::
+
+<script>
+    import "@royalfig/share-button"
+</script>

docs/examples/text.md

@@ -25,4 +25,8 @@ To omit text altogether, use the `circle` attribute. The button will render with
 
 ::: tip Icon
 Use the [`icon`](/examples/icon.md) attribute to change the icon.
-:::
+:::
+
+<script>
+    import "@royalfig/share-button"
+</script>

docs/index.md

@@ -23,4 +23,3 @@ features:
     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
 
-<share-button></share-button>