dgrammatiko
diff --git a/‎dist/index.html‎
Lines changed: 33 additions & 5 deletions b/‎dist/index.html‎
Lines changed: 33 additions & 5 deletions
diff --git a/‎dist/assets/index-CLtdk9yj.js‎ ‎dist/index.js‎dist/assets/index-CLtdk9yj.js renamed to dist/index.js b/‎dist/assets/index-CLtdk9yj.js‎ ‎dist/index.js‎dist/assets/index-CLtdk9yj.js renamed to dist/index.js
diff --git a/‎package.json‎
Lines changed: 2 additions & 1 deletion b/‎package.json‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎vite.config.js‎
Lines changed: 15 additions & 0 deletions b/‎vite.config.js‎
Lines changed: 15 additions & 0 deletions
@@ -6,10 +6,6 @@
   <title>QR Element</title>
   <meta name="description" content="A simple QR Code Web Component">
   <style>
-    :root {
-      color-scheme: dark light;
-    }
-
     /** Prevent CLS */
     qr-element {
       display: block;
@@ -26,8 +22,31 @@
         }
       }
     }
+
+    /** basic page styling */
+    :root {
+      color-scheme: dark light;
+    }
+
+    a {
+      color: lightblue;
+    }
+
+    body {
+      margin-inline-start: auto;
+      margin-inline-end: auto;
+      max-width: 30rem;
+    }
+
+    ul {
+      padding: 1rem;
+      background-color: #333;
+      list-style-type: none;
+      display: flex;
+      gap: 2rem;
+    }
   </style>
-  <script type="module" crossorigin src="/assets/index-CLtdk9yj.js"></script>
+  <script type="module" crossorigin src="./index.js"></script>
 </head>
 <body>
   <h1>Rendering a QR code</h1>
@@ -44,5 +63,14 @@ <h2>change the size passing the px to the width attribute</h2>
 
   <h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
   <qr-element class="blue" input="https://dgrammatiko.dev"></qr-element>
+
+  <hr>
+
+  <ul>
+    <li><a href="https://github.com/dgrammatiko/qr-element">Github repo</a></li>
+    <li><a href="https://github.com/dgrammatiko/qr-element">NPM package</a></li>
+    <li><a href="https://dgrammatiko.dev">by dGrammatiko</a></li>
+  </ul>
+
 </body>
 </html>
@@ -4,7 +4,8 @@
   "description": "Creates a QR image",
   "main": "src/index.mjs",
   "scripts": {
-    "dev": "npx vite"
+    "dev": "npx vite",
+    "build": "npx vite build --config ./vite.config.js"
   },
   "dependencies": {
     "headless-qr": "^1.0.3"
 
@@ -0,0 +1,15 @@
+export default {
+	base: './',
+	root: './',
+	build: {
+		// emptyOutDir: false
+		outDir: './dist',
+		rollupOptions: {
+			output: {
+				assetFileNames: '[name].[ext]',
+				chunkFileNames: '[name].[ext]',
+				entryFileNames: '[name].js',
+			},
+		},
+	},
+};