Improve the documents.

threefoldtech · Sep 21, 2023 · 05b77b2 · 05b77b2
1 parent 29c608a
commit 05b77b2
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 18 deletions.
diff --git a/packages/UI/docs/pdf_viewer.md b/packages/UI/docs/pdf_viewer.md
@@ -4,33 +4,72 @@
 
 1. [Introduction](#introduction)
 2. [Usage](#usage)
-   - [Build the PDF Signer](#build-the-pdf-signer)
+   - [Building the PDF Signer](#building-the-pdf-signer)
    - [Example of Usage](#example-of-usage)
    - [Using Providers and Extensions](#using-providers-and-extensions)
 
 ## Introduction
 
-The PDF Signer Web Component is a user-friendly PDF viewer that simplifies the process of signing PDF documents and sending them to a specified endpoint. This component is designed to make PDF signing and processing straightforward for your web applications.
+The PDF Signer Web Component simplifies the process of signing PDF documents and sending them to a specified endpoint. This user-friendly PDF viewer is designed to make PDF signing and processing straightforward for your web applications.
 
 **Key features:**
 
 - Load and view PDF files from a provided URL.
-- Enable users to sign PDF documents easily.
+- Easily sign PDF documents.
 - Seamlessly submit signed documents to a designated endpoint.
 
 ## Usage
 
-### Build the PDF Signer
+### Building the PDF Signer
 
 To use the PDF Signer Web Component, follow these steps:
 
 1. Clone the `tfgrid-sdk-ts` repository.
+
 2. Navigate to the `repository/packages/UI` directory.
+
 3. Run `yarn build` to generate the required distribution files.
+
 4. Locate the `dist` folder created in the previous step.
-5. Copy the `threefold-ui.umd.js` file and include it in your project's HTML files.
+
+5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+
+```html
+<body>
+  <!-- Include the PDF Signer component script -->
+  <script src="./threefold-ui.umd.js"></script>
+</body>
+```
+
 6. Copy the `dist/tailwind.css` file and use it for styling.
 
+```html
+<head>
+  <!-- Include the style and logo files -->
+  <link rel="stylesheet" href="./tailwind.css" />
+</head>
+```
+
+7. Include the `pdf-signer` custom element tag in your HTML file as follows:
+
+```html
+<body>
+  <pdf-signer
+    dest="http://localhost:3000/"
+    pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+    network="main"
+  />
+</body>
+```
+
+8. The `pdf-signer` HTML tag accepts three parameters:
+
+- `dest`: The destination where the signed script should be sent. Refer to [this document](./server_verification.md) for more information, and you can find a [server example here](../examples/server-example/).
+
+- `pdfUrl`: This is the PDF URL you want to sign its content.
+
+- `network`: This is required only if you decide to use the `threefoldConnectorProvider`. It points to the network of your account in the extension.
+
 ### Example of Usage
 
 Here's an example of how to use the PDF Signer Web Component in your HTML file:
@@ -60,21 +99,21 @@ Here's an example of how to use the PDF Signer Web Component in your HTML file:
 </html>
 ```
 
-In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent, also for the `<network>` should match one of the following networks `[main, test, qa, dev]`.
+In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent. Also, for the `<network>`, use one of the following network options: `[main, test, qa, dev]`.
 
 Feel free to customize the HTML structure and styles to match your application's design and requirements.
 
-**now you can serve your HTML file on any live-server plugin.**
+**Now you can serve your HTML file on any live-server plugin.**
 
 ### Using Providers and Extensions
 
-The PDF Signer Web Component now supports providers/extensions for enhanced functionality. You can choose between two providers:
+The PDF Signer Web Component now supports providers and extensions for enhanced functionality. You can choose between two providers:
 
-- **threefoldSignerProvider**: A basic provider that requires a mnemonic provided in the [.env](../.env).
+- **threefoldSignerProvider**: A basic provider that requires a mnemonic provided in the [.env](../.env) file.
 
 - **threefoldConnectorProvider**: An extension that connects to the Threefold Connector extension for enhanced capabilities.
 
-To specify the provider/extension to use, you can set an environment variable in your project. For example, to use the `threefoldSignerProvider`, set the following environment variable:
+To specify the provider or extension to use, you can set an environment variable in your project. For example, to use the `threefoldSignerProvider`, set the following environment variable:
 
 ```bash
 VITE_MNEMONIC="<your_mnemonic_here>"
@@ -91,6 +130,6 @@ The component will automatically detect the environment variable and use the sel
 
 By adding this flexibility, you can choose the provider/extension that best fits your project's requirements.
 
-**Note**: If you choose to use the `threefoldConnectorProvider` extension, make sure it is installed and configured properly in your environment.
+**Note**: If you choose to use the `threefoldConnectorProvider` extension, make sure it is properly installed and configured in your environment.
 
 Now, you can seamlessly integrate PDF signing into your web application using the PDF Signer Web Component with your preferred provider/extension.
diff --git a/packages/UI/docs/script_editor.md b/packages/UI/docs/script_editor.md
@@ -10,26 +10,59 @@
 
 ## Introduction
 
-The Script Editor Web Component is a versatile tool that allows developers to seamlessly integrate a code editor into their web applications. It offers features like script management and code copying, making it ideal for building code-related applications or platforms.
+The Script Editor Web Component is a powerful tool that enables developers to seamlessly integrate a code editor into their web applications. It offers essential features such as script management and code copying, making it an ideal choice for building code-related applications or platforms.
 
 **Key features:**
 
-- Support for managing scripts.
-- Code copying.
+- Script management support.
+- Code copying functionality.
 
 ## Usage
 
 ### Building the Script Editor
 
-To create an instance of the Script Editor, you need to build the package first and then copy the generated `dist` folder into your project:
+To create an instance of the Script Editor, follow these steps:
 
 1. Clone the `tfgrid-sdk-ts` repository.
+
 2. Navigate to the `repository/packages/UI` directory.
+
 3. Run `yarn build` to generate the required distribution files.
+
 4. Locate the `dist` folder created in the previous step.
-5. Copy the `threefold-ui.umd.js` file and include it in your project's HTML files.
+
+5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+
+```html
+<body>
+  <!-- Include the Script Editor component script -->
+  <script src="./threefold-ui.umd.js"></script>
+</body>
+```
+
 6. Copy the `dist/tailwind.css` file and use it for styling.
 
+```html
+<head>
+  <!-- Include the style and logo files -->
+  <link rel="stylesheet" href="./tailwind.css" />
+</head>
+```
+
+7. Include the `script-editor` custom element tag in your HTML file as follows:
+
+```html
+<body>
+  <script-editor dest="http://localhost:3000/" network="main" />
+</body>
+```
+
+8. The `script-editor` HTML tag accepts two parameters:
+
+   - `dest`: The destination where the signed script should be sent. Refer to [this document](./server_verification.md) for more information, and you can find a [server example here](../examples/server-example/).
+
+   - `network`: This is required only if you decide to use the `threefoldConnectorProvider`. It points to the network of your account in the extension.
+
 ### Example of Usage
 
 Here's an example of how to use the Script Editor Web Component in your HTML file:
@@ -60,7 +93,7 @@ In the example above, replace `<dest>` and `<network>` with the actual destinati
 
 Feel free to customize the HTML structure and styles to match your application's design and requirements.
 
-**now you can serve your HTML file on any live-server plugin.**
+**Now you can serve your HTML file on any live-server plugin.**
 
 ### Using Providers and Extensions
 

diff --git a/packages/UI/docs/web_component.md b/packages/UI/docs/web_component.md
@@ -22,7 +22,7 @@ $ tfgrid-sdk-ts/packages/UI: yarn build
 
 ```sh
 $ tfgrid-sdk-ts/packages/UI: cd ...
-$ tfgrid-sdk-ts: cp packages/UI/dist packages/UI/src/examples/html-tag-example/
+$ tfgrid-sdk-ts: cp packages/UI/dist packages/UI/examples/html-tag-example/
 ```
 
 4. Run the `index.html` file in a local server and navigate to it. This will allow you to test and interact with the `<pdf-signer />` and `<script-editor />` tags within your web application.