Speakerdeck content in Plone (@plone-collective/volto-speakerdeck)

Add decks from Speakerdeck in your Plone site

✨ Features

🎥 Watch Demo Video

• Embed Speakerdeck presentations: Add a Volto block that allows you to embed presentations hosted on Speakerdeck directly into your Plone site pages.
• Easy integration: Simply paste the Speakerdeck URL and the block handles the embedding automatically.
• Responsive display: Presentations are displayed responsively, adapting to different screen sizes.

Note: For interactive examples and detailed documentation, check out the Storybook.

📦 Installation

Installing @plone-collective/volto-speakerdeck on your project requires Volto 18 or above.

Adding this package as a dependency

To add @plone-collective/volto-speakerdeck to your project, locate your project's policy package (typically found in the packages folder) and edit its package.json file.

Add @plone-collective/volto-speakerdeck under dependencies:

"dependencies": {
    "@plone-collective/volto-speakerdeck": "*"
}

Then add @plone-collective/volto-speakerdeck to the addons array:

"addons": [
  "@plone-collective/volto-speakerdeck"
]

Running the installation

After adding @plone-collective/volto-speakerdeck to your project, re-run the installation with:

make install

And start the project with:

make start

✅ Test installation

Visit http://localhost:3000/ in a browser, login, and check the Speakerdeck block is available.

🛠️ 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).

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• nvm
• Node.js and pnpm 24
• Make
• Git
• Docker (optional)

Installation 🔧

1. Clone this repository, then change your working directory.

   git clone git@github.com:collective/volto-speakerdeck.git
   cd volto-speakerdeck
   

2. Install this code base.

   make install
   

Make convenience commands

Run make help to list the available commands.

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.

make install

🚀 Start developing

Start the backend.

make backend-docker-start

In a separate terminal session, start the frontend.

make start

🧹 Lint code

Run ESlint, Prettier, and Stylelint in analyze mode.

make lint

💅 Format code

Run ESlint, Prettier, and Stylelint in fix mode.

make format

🌐 i18n

Extract the i18n messages to locales.

make i18n

🧪 Unit tests

Run unit tests.

make test

🤖 Run Cypress tests

Run each of these steps in separate terminal sessions.

In the first session, start the frontend in development mode.

make acceptance-frontend-dev-start

In the second session, start the backend acceptance server.

make acceptance-backend-start

In the third session, start the Cypress interactive test runner.

make acceptance-test

📄 License

The project is licensed under the MIT license.

Credits and acknowledgements 🙏

Generated using Cookieplone (0.9.10) and cookieplone-templates (dd13073) on 2026-01-20 13:59:44.590638. A special thanks to all contributors and supporters!