npm

dgrammatiko · dgrammatiko · commit 24995faa3d60 · 2025-02-03T10:21:04.000+02:00
diff --git a/index.html b/index.html
@@ -46,6 +46,9 @@
       display: flex;
       gap: 2rem;
     }
+    .none {
+      display: grid;
+    }
   </style>
 </head>
 <body>
@@ -66,9 +69,16 @@ <h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
 
   <hr>
 
+  <div>
+    <h2>How to:</h2>
+    <ul class="none">
+      <li>Add the script tag <code>&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@dgrammatiko/qr-element/+esm">&lt;/script></code></li>
+      <li>Add the element tag <code>&lt;qr-element input="some string" width="300px">&lt;/qr-element></code></li>
+    </ul>
+  </div>
   <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://www.npmjs.com/package/@dgrammatiko/qr-element">NPM package</a></li>
     <li><a href="https://dgrammatiko.dev">by dGrammatiko</a></li>
   </ul>
 
diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
-  "name": "qr-element",
+  "name": "@dgrammatiko/qr-element",
   "version": "1.0.0",
   "description": "Creates a QR image",
   "main": "src/index.mjs",
+  "type": "module",
   "scripts": {
     "dev": "npx vite",
     "build": "npx vite build --config ./vite.config.js"
@@ -11,5 +12,18 @@
     "headless-qr": "^1.0.3"
   },
   "license": "MIT",
-  "author": "Dimitris Grammatikogiannis"
+  "author": "Dimitris Grammatikogiannis",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dgrammatiko/qr-element.git"
+  },
+  "keywords": [
+    "QR-code",
+    "Web-component",
+    "vanilla",
+    "javascript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }
