Social Media support for Plone 🚀

Overview 📚

This repository provides social media components for Plone and Volto.

It includes:

• plonegovbr.socialmedia: A Python package for Plone Dexterity behaviors.
• @plonegovbr/volto-social-media: A React package for Volto components and widgets.

Quick Start 🏁

Prerequisites ✅

Ensure you have the following installed:

• UV 🐍 (Python dependency manager)
• Node.js 22 🟩
• pnpm 🧶 (JavaScript package manager)
• Docker 🐳 (Containerized environment)

Installation 🔧

1. Clone the repository:

git clone [email protected]:plonegovbr/social-media.git
cd social-media

2. Install all dependencies:

make install

Fire Up the Servers 🔥

1. Create a new Plone site:

make backend-create-site

2. Start the Backend (Plone) at http://localhost:8080/:

make backend-start

3. In a separate terminal, start the Frontend (Volto) at http://localhost:3000/:

make frontend-start

Voilà! Your Plone site should now be live. 🎉

Local Stack Deployment 📦

Deploy a full local Docker Compose stack with:

• Backend (Plone)
• Frontend (Volto)
• Traefik Router
• Postgres Database

Run:

make stack-start
make stack-create-site

Your site will be available at http://social-media.localhost. 🌐

Project Structure 🏗️

This monorepo contains:

Path	Package	Description
backend/	plonegovbr.socialmedia	Python package for Plone behaviors
frontend/	@plonegovbr/volto-social-media	React package for Volto components

Code Quality Assurance 🧐

Checking the code

Run:

make check

This will verify code formatting, linting, and quality for both backend and frontend.

Formatting the code

Run:

make format

Section	Tool	Description	Config File
Backend	Ruff	Python formatting and imports sorting	backend/pyproject.toml
Backend	zpretty	XML and ZCML formatting	--
Frontend	ESLint	JavaScript/TypeScript lint fixing	frontend/.eslintrc.js
Frontend	Prettier	JavaScript/TypeScript formatting	frontend/.prettierrc
Frontend	Stylelint	Stylesheet (CSS/LESS/SASS) formatting	frontend/.stylelintrc

Formatters can also be run individually inside backend/ and frontend/.

Linting the codebase

Run:

make lint

Section	Tool	Description	Config File
Backend	Ruff	Python code linting and import sorting	backend/pyproject.toml
Backend	Pyroma	Python package metadata checking	--
Backend	check-python-versions	Python versions metadata checking	--
Backend	zpretty	XML and ZCML structure checking	--
Frontend	ESLint	JavaScript/TypeScript lint checking	frontend/.eslintrc.js
Frontend	Prettier	JavaScript/TypeScript formatting checking	frontend/.prettierrc
Frontend	Stylelint	CSS/LESS/SASS linting	frontend/.stylelintrc

Linters can also be run separately inside backend/ and frontend/.

Internationalization 🌐

Extract and sync i18n messages:

make i18n

This will update translation files for both Plone (backend) and Volto (frontend).

Credits & Acknowledgements 🙏

Maintained by the PloneGov-Br Community 🇧🇷❤️.