Updated README + added Screenshot (gif) and Screencast.

Author: Humanaice

README.md

@@ -1,15 +1,29 @@
 # Volto iFrame Block (@kitconcept/volto-iframe-block)
 
-volto-iframe-block: Volto Add-on
+A Volto add-on that provides an iFrame block for embedding external URLs in a Plone/Volto page.
 
 [![npm](https://img.shields.io/npm/v/@kitconcept/volto-iframe-block)](https://www.npmjs.com/package/@kitconcept/volto-iframe-block)
 [![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://kitconcept.github.io/volto-iframe-block/)
 [![Code analysis checks](https://github.com/kitconcept/volto-iframe-block/actions/workflows/code.yml/badge.svg)](https://github.com/kitconcept/volto-iframe-block/actions/workflows/code.yml)
 [![Unit tests](https://github.com/kitconcept/volto-iframe-block/actions/workflows/unit.yml/badge.svg)](https://github.com/kitconcept/volto-iframe-block/actions/workflows/unit.yml)
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://kitconcept.com/kitconcept-white.svg">
+  <img width="300" alt="kitconcept, GmbH" src="https://kitconcept.com/kitconcept-black.svg">
+</picture>
+
+## Screenshot
+
+<img alt="Volto iFrame Block" src="https://github.com/user-attachments/assets/bda10986-2785-4a96-9c82-fcd4c45e8b87">
+
+## Screencast
+
+https://github.com/user-attachments/assets/6f5c85ca-4c09-4574-9bfa-6f1d106ba7c1
+
 ## Features
 
-<!-- List your awesome features here -->
+- **iFrame block** — Registers an `iframe` block that allows editors to embed any external URL inside an `<iframe>` on a Volto page.
+- **URL allowlist** — Supports a configurable `validUrls` list to restrict which URLs editors are permitted to embed, preventing misuse.
 
 ## Installation
 
@@ -84,6 +98,125 @@ Visit http://localhost:3000/ in a browser, login, and check the awesome new feat
 config.blocks.blocksConfig.iframe.validUrls = [''];
 ```
 
+## Development
+
+The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.
+For this reason, it only works with pnpm and Volto 18 (currently in alpha).
+
+### Pre-requisites
+
+-   [Node.js](https://6.docs.plone.org/install/create-project.html#node-js)
+-   [Make](https://6.docs.plone.org/install/create-project.html#make)
+-   [Docker](https://6.docs.plone.org/install/create-project.html#docker)
+
+### Make convenience commands
+
+Run `make help` to list the available commands.
+
+```text
+help                             Show this help
+install                          Installs the add-on in a development environment
+start                            Starts Volto, allowing reloading of the add-on during development
+build                            Build a production bundle for distribution of the project with the add-on
+i18n                             Sync i18n
+ci-i18n                          Check if i18n is not synced
+format                           Format codebase
+lint                             Lint, or catch and remove problems, in code base
+release                          Release the add-on on npmjs.org
+release-dry-run                  Dry-run the release of the add-on on npmjs.org
+test                             Run unit tests
+ci-test                          Run unit tests in CI
+backend-docker-start             Starts a Docker-based backend for development
+storybook-start                  Start Storybook server on port 6006
+storybook-build                  Build Storybook
+acceptance-frontend-dev-start    Start acceptance frontend in development mode
+acceptance-frontend-prod-start   Start acceptance frontend in production mode
+acceptance-backend-start         Start backend acceptance server
+ci-acceptance-backend-start      Start backend acceptance server in headless mode for CI
+acceptance-test                  Start Cypress in interactive mode
+ci-acceptance-test               Run cypress tests in headless mode for CI
+```
+
+### Development environment set up
+
+Install package requirements.
+
+```shell
+make install
+```
+
+### Start developing
+
+Start the backend.
+
+```shell
+make backend-docker-start
+```
+
+In a separate terminal session, start the frontend.
+
+```shell
+make start
+```
+
+### Lint code
+
+Run ESlint, Prettier, and Stylelint in analyze mode.
+
+```shell
+make lint
+```
+
+### Format code
+
+Run ESlint, Prettier, and Stylelint in fix mode.
+
+```shell
+make format
+```
+
+### i18n
+
+Extract the i18n messages to locales.
+
+```shell
+make i18n
+```
+
+### Unit tests
+
+Run unit tests.
+
+```shell
+make test
+```
+
+### Run Cypress tests
+
+Run each of these steps in separate terminal sessions.
+
+In the first session, start the frontend in development mode.
+
+```shell
+make acceptance-frontend-dev-start
+```
+
+In the second session, start the backend acceptance server.
+
+```shell
+make acceptance-backend-start
+```
+
+In the third session, start the Cypress interactive test runner.
+
+```shell
+make acceptance-test
+```
+
 ## License
 
-The project is licensed under the MIT license.
+The project is licensed under the MIT license.
+
+## Credits and Acknowledgements 🙏
+
+Crafted with care by **[kitconcept GmbH](https://kitconcept.com)**. A special thanks to all contributors and supporters!

packages/volto-iframe-block/news/6.internal

@@ -0,0 +1 @@
+Updated README + added Screenshot (gif) and Screencast. @humanaice