From 896e3293b6bf2cd49cc21ebe1b306979bf3b3f27 Mon Sep 17 00:00:00 2001 From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> Date: Thu, 11 Jul 2024 17:33:28 -0400 Subject: [PATCH] update readme --- README.md | 95 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index f0eb70a..96b3baa 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,46 @@ -# NEAR BOS Web Component ( custom element ) + + + -This is a Proof of Concept of embedding a NEAR BOS widget into any web application as a Web Component / Custom element. +
-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. +

near bos web component

-```html - - - - - - Near social - - - - -

NEAR BOS embeddable custom element

- - - -``` - -## Setup & Development +

+ Easily embed a near social widget into any web app and deploy to web4. +

-Initialize repo: +
-```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 -``` +
+ Via CDN -Production build: +Include the following script tags in your HTML: -```cmd -yarn prod +```html + + ``` -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 + + +
+ +Once included, you can use the web component in your HTML: + +```html + ``` ## 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

hello world

"`) @@ -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: