Skip to content

README.md

Latest commit

 

History

History
264 lines (185 loc) · 8.55 KB

README.md

File metadata and controls

264 lines (185 loc) · 8.55 KB

🎨 Social Blocks for Volto (@kitconcept/volto-social-blocks)

Embed social media content from 14 different platforms directly into your Plone pages with Volto.

npm CI

✨ Features

🎥 Watch Demo Video

Demo

This addon provides 14 Volto blocks to embed content from popular social media platforms:

  • 🎵 Apple Music - Embed songs, albums, and playlists from Apple Music
  • 🦋 Bluesky - Embed posts from the Bluesky social network
  • 👥 Facebook - Embed Facebook posts and videos
  • 📸 Flickr - Embed photos and albums from Flickr
  • 📷 Instagram - Embed Instagram posts (photos and videos)
  • 💼 LinkedIn - Embed LinkedIn posts
  • 🐘 Mastodon - Embed toots from Mastodon instances
  • 📌 Pinterest - Embed Pinterest pins and boards
  • 🎧 SoundCloud - Embed audio tracks and playlists from SoundCloud
  • 🎶 Spotify - Embed Spotify tracks, albums, playlists, and podcasts
  • 🧵 Threads - Embed posts from Meta's Threads platform
  • 🎬 TikTok - Embed TikTok videos
  • 𝕏 X/Twitter - Embed posts (formerly Twitter)
  • 🎮 Twitch - Embed Twitch videos and streams

Key Features

  • Easy integration: Simply paste the URL and the block handles the embedding automatically
  • Responsive display: All embeds adapt to different screen sizes
  • Privacy options: Support for GDPR-compliant consent management
  • Flexible styling: Configure alignment and sizes for each embed
  • Live preview: See the embedded content directly in the Volto editor

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

📦 Installation

Installing @kitconcept/volto-social-blocks requires Volto 18 or above.

🚀 Adding this package as a dependency

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

Add @kitconcept/volto-social-blocks under dependencies:

"dependencies": {
    "@kitconcept/volto-social-blocks": "*"
}

Then add @kitconcept/volto-social-blocks to the addons array:

"addons": [
  "@kitconcept/volto-social-blocks"
]

🚀 Starting the project

After adding @kitconcept/volto-social-blocks to your project, run the installation:

make install

Then start the development server:

make start

✅ Test installation

Visit http://localhost:3000/ in a browser, login, and check the new blocks should be available.

🔒 Custom Privacy Consent Notice

You can register a custom React component to check for privacy consent and show the user a prompt to confirm accessing external services. This is particularly useful to meet European GDPR requirements.

config.registerComponent({
  name: 'CheckPrivacyConsent',
  component: IfConfirm,  // use your own component here
});

The @kitconcept/volto-dsgvo-banner addon provides one possible implementation of the CheckPrivacyConsent component.

📚 Available Blocks

Supported Platforms

Platform Block Name Content Types
Apple Music applemusic Songs, albums, playlists
Bluesky bluesky Posts
Facebook facebook Posts, videos
Flickr flickr Photos, albums
Instagram instagram Posts (photos/videos)
LinkedIn linkedin Posts
Mastodon mastodon Toots
Pinterest pinterest Pins, boards
SoundCloud soundcloud Tracks, playlists
Spotify spotify Tracks, albums, playlists, podcasts
Threads threads Posts
TikTok tiktok Videos
X/Twitter tweet Posts
Twitch twitch Videos, streams

Development

The development of this add-on is done in isolation using a new approach with pnpm workspaces and latest mrs-developer and other Volto core improvements. It requires pnpm and Volto 18 or higher.

✅ Prerequisites

🔧 Installation

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

    git clone git@github.com:kitconcept/volto-social-blocks.git
cd volto-social-blocks

  2. Install this code base.

    make install

🎯 Make 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
ci-acceptance-test-run-all       With a single command, run backend, frontend, and Cypress tests in headless mode for CI
ci-acceptance                    Alias for ci-acceptance-test-run-all
ci-acceptence                    Backward-compatible alias (common typo)

🔧 Development environment setup

Install all package requirements:

make install

🚀 Start developing

Start the backend in one terminal:

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

🌍 Internationalization (i18n)

Extract i18n messages to locales:

make i18n

🧪 Unit tests

Run unit tests:

make test

🎯 Run Cypress acceptance tests

Run each command in separate terminal sessions:

Terminal 1: Start the frontend in development mode:

make acceptance-frontend-dev-start

Terminal 2: Start the backend acceptance server:

make acceptance-backend-start

Terminal 3: Start the Cypress interactive test runner:

make acceptance-test

💡 Credits

The development of this add-on was sponsored by kitconcept GmbH.

kitconcept GmbH

📄 License

The project is licensed under the MIT license.