update readme

NEARBuilders · Jul 11, 2024 · 896e329 · 896e329
1 parent 15d58e3
commit 896e329
Showing 1 changed file with 53 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,61 +1,46 @@
-# NEAR BOS Web Component ( custom element )
+<!-- markdownlint-disable MD014 -->
+<!-- markdownlint-disable MD033 -->
+<!-- markdownlint-disable MD041 -->
 
-This is a Proof of Concept of embedding a NEAR BOS widget into any web application as a Web Component / Custom element.
+<div align="center">
 
-Just load react production react bundles into your index.html as shown below, and use the `near-social-viewer` custom element to embed the BOS widget.
+  <h1>near bos web component</h1>
 
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Near social</title>
-    <script
-      defer="defer"
-      src="/runtime.REPLACE_WITH_BUNDLE_HASH.bundle.js"
-    ></script>
-    <script
-      defer="defer"
-      src="/main.REPLACE_WITH_BUNDLE_HASH.bundle.js"
-    ></script>
-  </head>
-  <body>
-    <h1>NEAR BOS embeddable custom element</h1>
-    <near-social-viewer></near-social-viewer>
-  </body>
-</html>
-```
-
-## Setup & Development
+  <p>
+    <strong>Easily embed a <a href="https://near.social" target="_blank">near social widget</a> into any web app and deploy to <a href="https://web4.near.page/" target="_blank">web4</a>.</strong>
+  </p>
 
-Initialize repo:
+</div>
 
-```cmd
-yarn
-```
+`near-social-viewer` is a [web component (custom element)](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) that implements the [near-social-vm](https://github.com/NearSocial/VM) for rendering code stored on-chain in the [SocialDB](https://github.com/NearSocial/social-db) smart contract (social.near). It is the simplest way to create your own [near social viewer](https://github.com/NearSocial/viewer) and it is the easiest method for embedding [Widgets](https://thewiki.near.page/near.social_widgets) into any web application.
 
-Start development version:
+## Usage
 
-```cmd
-yarn start
-```
+<details open>
+  <summary>Via CDN</summary>
 
-Production build:
+Include the following script tags in your HTML:
 
-```cmd
-yarn prod
+```html
+<script src="https://cdn.jsdelivr.net/npm/near-bos-webcomponent@latest/dist/runtime.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/near-bos-webcomponent@latest/dist/main.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script>
 ```
 
-Serve the production build:
+Be sure to replace "REPLACE_WITH_BUNDLE_HASH" with the respective hash, which can be found via the asset-manifest:
 
-```cmd
-yarn serve prod
+<https://cdn.jsdelivr.net/npm/near-bos-webcomponent@latest/dist/asset-manifest.json>
+
+</details>
+
+Once included, you can use the web component in your HTML:
+
+```html
+<near-social-viewer src="mob.near/widget/N" initialprops='{"hashtag": "build"}' />
 ```
 
 ## Attributes
 
-The `near-social-viewer` web component supports several attributes:
+The web component supports several attributes:
 
 * `src`: the src of the widget to render (e.g. `devs.near/widget/default`)
 * `code`: raw, valid, stringified widget code to render (e.g. `"return <p>hello world</p>"`)
@@ -80,6 +65,32 @@ To support specific features of the VM or an accompanying development server, pr
 }
 ```
 
+## Setup & Local Development
+
+Initialize repo:
+
+```cmd
+yarn
+```
+
+Start development version:
+
+```cmd
+yarn start
+```
+
+Production build:
+
+```cmd
+yarn prod
+```
+
+Serve the production build:
+
+```cmd
+yarn serve prod
+```
+
 ## Adding VM Custom Elements
 
 Since [NearSocial/VM v2.1.0](https://github.com/NearSocial/VM/blob/master/CHANGELOG.md#210), a gateway can register custom elements where the key is the name of the element, and the value is a function that returns a React component. For example: