Merge branch 'aws:main' into 32teeth/fix/long-word-wrapping

Author: 32teeth

README.md

@@ -1,40 +1,60 @@
+
 # Mynah UI
-### *A Data & Event Drivent Chat Interface Library for Browsers and Webviews*
+> *A Data & Event Driven Chat Interface Library for Browsers and Webviews*
 
-### [Live Demo](https://aws.github.io/mynah-ui/)
-### [API Docs](https://aws.github.io/mynah-ui/api-doc/index.html)
+[![PR](https://github.com/aws/mynah-ui/actions/workflows/new_pr.yml/badge.svg?branch=main)](https://github.com/aws/mynah-ui/actions/workflows/new_pr.yml)
+[![Beta](https://github.com/aws/mynah-ui/actions/workflows/beta.yml/badge.svg?branch=main)](https://github.com/aws/mynah-ui/actions/workflows/beta.yml)
+[![Publish](https://github.com/aws/mynah-ui/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/aws/mynah-ui/actions/workflows/publish.yml)
+[![Deploy](https://github.com/aws/mynah-ui/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/aws/mynah-ui/actions/workflows/deploy.yml)
 
-As you can understand from the title too, **Mynah UI** is a **_data and event_** driven chat interface for browsers and webviews on IDEs or any platform which supports latest web technologies which is also used by Amazon Q for [VSCode](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode) and [JetBrains](https://plugins.jetbrains.com/plugin/11349-aws-toolkit--amazon-q-codewhisperer-and-more) comes together with AWS Toolkit extension.
+**Mynah UI** is a **_data and event_** driven chat interface designed for browsers and webviews on IDEs or any platform supporting the latest web technologies. It is utilized by Amazon Q for [VSCode](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode) and [JetBrains](https://plugins.jetbrains.com/plugin/11349-aws-toolkit--amazon-q-codewhisperer-and-more), and is included with the AWS Toolkit extension.
 
-Since it is not depending on any framework or a UI library, you can use it inside any web based project without a hassle. Reason behind that decision is to keep it highly configurable for theming to support various use cases. It works standalone, you just need to tell it where to render on the DOMTree.
+Mynah UI operates independently of any framework or UI library, enabling seamless integration into any web-based project. This design choice ensures high configurability for theming, supporting various use cases. It functions as a standalone solution, requiring only a designated rendering location within the DOMTree.
 
-Please continue with one of the following guides:
+## Table of contents
+- [Quick links](#quick-links)
+- [Setup, configuration and use](#setup-configuration-and-use)
+  - [Guides and documentation](#guides-and-documentation)
+  - [Preview](#preview)
+- [Supported Browsers](#supported-browsers)
+- [Security](#security)
+- [License](#license)
 
-## How to setup, configure and use Mynah UI
-### [Startup Guide](./docs/STARTUP.md)
-### [Constructor Properties](./docs/PROPERTIES.md)
-### [Configuration](./docs/CONFIG.md)
-### [How to use MynahUI](./docs/USAGE.md)
-### [Data Model](./docs/DATAMODEL.md)
-### [Styling Configuration](./docs/STYLING.md)
+### Quick links
+* [Live Demo](https://aws.github.io/mynah-ui/)
+* [API Docs](https://aws.github.io/mynah-ui/api-doc/index.html)
 
-and
+### Setup, configuration and use
 
-### [Developer Guidelines (Contribution)](./docs/DEVELOPER.md)
+>[!TIP]
+> Local environment quick start
+ ```console
+ git clone [email protected]:aws/mynah-ui.git
+ cd mynah-ui
+ npm run dev
+```
 
-<p align="center">
-  <img src="./docs/img/splash.gif" alt="MynahUI" style="max-width:1280px; width:100%;border: 1px solid #e0e0e0;">
-</p>
+#### Guides and documentation
+Please refer to the following guides:
 
-## Supported browsers
-**Mynah UI** <em>-because of it's extensive css structure-</em> only supports ever-green browsers including webkit based WebUI renderers.
+* [Startup guide](./docs/STARTUP.md)
+* [Constructor properties](./docs/PROPERTIES.md)
+* [Configuration](./docs/CONFIG.md)
+* [Usage](./docs/USAGE.md)
+* [Data model](./docs/DATAMODEL.md)
+* [Styling](./docs/STYLING.md)
+* [Developer guidelines (contribution)](./docs/DEVELOPER.md)
 
+#### Preview
+![Preview](./docs/img/splash.gif)
 
-## Security
+### Supported Browsers
 
-See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.
+**Mynah UI** <em>- due to its extensive CSS structure -</em> supports only evergreen browsers, including WebKit-based WebUI renderers.
 
-## License
+## Security
 
-This project is licensed under the Apache-2.0 License.
+See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.
 
+# License
+[Apache 2.0 License.](LICENSE)

example/README.md

@@ -1,33 +1,60 @@
-# Mynah UI Example (IDE look&feel)
+
+# Mynah UI Example (IDE look & feel)
+
+## Project Description
+
+Mynah UI Example provides an interactive environment to demonstrate the features and capabilities of the Mynah UI library. This example mimics an IDE look and feel to showcase live changes and dynamic updates as you modify the UI library.
+
+## Table of Contents
+
+- [Setup, configuration and use](#setup-configuration-and-use)
+- [How to use the project](#how-to-use-the-project)
+- [Supported browsers](#supported-browsers)
+- [Additional information](#additional-information)
+
+### Setup, configuration and use
 
 To start the example, simply run the following script through your terminal in the root folder.
 
-```console
-npm install && npm run watch & cd ./example && npm install && npm run watch
+>[!TIP]
+> Local environment quick start
+ ```bash
+ # local git already cloned
+ npm run dev
 ```
 
-After the whole script runs, go to the folder `./example/dist` and open `index.html` in your favorite ever-green borwser. 
+After the script runs, open your browser and go to `http://localhost:9000` to see the example.
+
+#### Preview
+![Preview](./docs/img/splash.gif)
+
+The steps in the script are as follows:
+- First, it cleans the project by removing `dist` and `node_modules` directories.
+- Then, it installs the dependencies.
+- After that, it builds the project.
+- Finally, it serves the example on port 9000 using `live-server`.
+- It will open a browser at `http://127.0.0.1:9000`.
 
-The steps in the script as follows:
-- First we're installing dependencies for the `mynah-ui`
-- After that we're running the `mynah-ui` in watch mode since we're gonna use it lively, which means that whenever you change something on the mynah-ui library, it will take affect directly on the example app running
-- Now we're going into the `./example` folder and installing the dependencies of the example app.
-- After all, we're running the example in watch mode, to be able to see the changes take affeect immediately after we do the changes and refresh the browser tab.
+### How to use the project
 
-If you check the dependencies of the example, you'll see that mynah-ui dependency is connected to the parent folder. Which allows us to use the mynah-ui directly from the parent folder instead of a npm dependency. 
+If you check the dependencies of the example, you'll see that the mynah-ui dependency is connected to the parent folder, which allows us to use the mynah-ui directly from the parent folder instead of an npm dependency.
 
-If you want, you can run `mynah-ui` and example scripts in separate terminals to see their watch processes separetely. 
+If you want, you can run `mynah-ui` and example scripts in separate terminals to see their watch processes separately.
 
-If you just need the builded version (no need to watch the changes) simply run the below and open the `index.html` inside `./example/dist` folder in your browser.
+If you just need the built version (no need to watch for changes), simply run the below and open the `index.html` inside the `./example/dist` folder in your browser.
 
-From your root folder;
+From your root folder:
 ```console
 npm install && npm run build && cd ./example && npm install && npm run build
 ```
 
 ### Supported browsers
-**Mynah UI** <em>-because of it's extensive css structure-</em> only supports ever-green browsers including webkit based WebUI renderers.
 
----
+**Mynah UI** <em>-because of its extensive CSS structure-</em> only supports evergreen browsers, including WebKit-based WebUI renderers.
+
+### Additional information
+
+Please check the root folder [README.md](../README.md) for usage guidelines, license information, and other helpful guides.
 
-#### Please do check the root folder [README.md](../README.md) for the usage guidelines, license information and other helpful guides.
+# License
+[Apache 2.0 License.](../LICENSE)