docs: update examples

Signed-off-by: James Chien <james@numbersprotocol.io>
numbersprotocol · Nov 10, 2023 · 0a7a21f · 0a7a21f
1 parent 6bf25c6
commit 0a7a21f
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -11,13 +11,38 @@
 
 ## Usage
 
-### HTML
+### Using with vanilla HTML
 
-See the [example html](dev/index.html).
+The most simple way of adding Capture Eye to a webpage is by importing via CDN and add the component tag:
 
-To run a dev server and view the example HTML in browser, run `npm run dev`.
+```html
+<head>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye/capture-eye.bundled.js"></script>
+</head>
+<body>
+  <capture-eye nid="bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou" prefetch="true">
+    <img width=600px src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou" />
+  </capture-eye>
+</body>
+```
+
+For a full example, see the [example html](dev/index.html).
+
+To run a development server and view the example HTML in your browser, execute the following command:
+
+```bash
+npm run dev
+```
 
-### React
+You can also try out the component using the [interactive playground](https://playcode.io/capture_eye_demo).
+
+### Using with React
+
+To add Capture Eye to a React application, first install the packages:
+
+```bash
+npm i @numbersprotocol/capture-eye @lit/react
+```
 
 Add the following code to define a React component for Capture Eye:
 
@@ -45,6 +70,67 @@ Use the CaptureEyeComponent in JSX:
 </CaptureEyeComponent>
 ```
 
+### Using with Angular
+
+To add Capture Eye to an Angular application, first install the packages:
+
+```bash
+npm i @numbersprotocol/capture-eye @webcomponents/webcomponentsjs
+```
+
+Add the webcomponents loader to the `script` section in `angular.json`:
+
+```json
+...
+"scripts": [
+  "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
+],
+...
+```
+
+Make sure `CUSTOM_ELEMENTS_SCHEMA` is set in your module:
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  ...
+})
+```
+
+Finally, import the Capture Eye package in your `*.component.ts` and add the `<capture-eye nid="..."></capture-eye>` template tag to your component:
+
+```ts
+import '@numbersprotocol/capture-eye';
+```
+
+```html
+<capture-eye nid="bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou" prefetch="true">
+  <img width=600px src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou" />
+</capture-eye>
+```
+
+### Using with Vue
+
+For Vue users, the usage is similar to use native HTML elements. The official Vue doc provides a guide on [Using Vue with Web Components](https://vuejs.org/guide/extras/web-components.html).
+
+To add Capture Eye to a SFC, simply import the Capture Eye package in the script setup and add the component tag in the template:
+
+```vue
+<script setup>
+import '@numbersprotocol/capture-eye'
+</script>
+
+<template>
+  <main>
+    <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy" prefetch="true">
+    <img width=600 src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou" />
+    </capture-eye>
+  </main>
+</template>
+```
+
+
 ### Component attributes
 
 | Attribute Name  | Required | Description                                                                                                   | Example                                              |

diff --git a/dev/index.html b/dev/index.html
@@ -15,20 +15,18 @@
     </style>
   </head>
   <body>
-    <p>Sample webpage title</p>
-
-    <p>Example #1: using example Nid</p>
+    <p>Example: Capture Eye</p>
     <capture-eye
-      nid="bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"
+      nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
       prefetch="true"
     >
       <img
         width="600px"
-        src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"
+        src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
       />
     </capture-eye>
 
-    <p>Example #2: using image Nid</p>
+    <p>Example: asset data not found</p>
     <capture-eye
       nid="bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i"
     >
@@ -37,19 +35,5 @@
         src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i"
       />
     </capture-eye>
-
-    <p>Example #3: using video Nid</p>
-    <capture-eye
-      nid="bafybeicfoianboszadzqqauo6y4pvadc564zwmebfaryswcshiimsb5qz4"
-      prefetch="true"
-    >
-      <video controls width="300px">
-        <source
-          src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeicfoianboszadzqqauo6y4pvadc564zwmebfaryswcshiimsb5qz4"
-        />
-      </video>
-    </capture-eye>
-
-    <p>Sample webpage footer</p>
   </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8" />
     <title>&lt;capture-eye> Demo</title>
-    <script type="module" src="capture-eye.bundled.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye/capture-eye.bundled.js"></script>
     <style>
       p {
         border: solid 1px blue;
@@ -13,20 +13,18 @@
     </style>
   </head>
   <body>
-    <p>Sample webpage title</p>
-
-    <p>Example #1: using example Nid</p>
+    <p>Example: Capture Eye</p>
     <capture-eye
-      nid="bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"
+      nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
       prefetch="true"
     >
       <img
         width="600px"
-        src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"
+        src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
       />
     </capture-eye>
 
-    <p>Example #2: using image Nid</p>
+    <p>Example: asset data not found</p>
     <capture-eye
       nid="bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i"
     >
@@ -35,19 +33,5 @@
         src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i"
       />
     </capture-eye>
-
-    <p>Example #3: using video Nid</p>
-    <capture-eye
-      nid="bafybeicfoianboszadzqqauo6y4pvadc564zwmebfaryswcshiimsb5qz4"
-      prefetch="true"
-    >
-      <video controls width="300px">
-        <source
-          src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeicfoianboszadzqqauo6y4pvadc564zwmebfaryswcshiimsb5qz4"
-        />
-      </video>
-    </capture-eye>
-
-    <p>Sample webpage footer</p>
   </body>
 </html>