https://github.com/kitconcept/volto-contact-block
https://github.com/kitconcept/volto-contact-block
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kitconcept/volto-contact-block
- Owner: kitconcept
- Created: 2025-11-03T08:45:18.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-22T13:56:02.000Z (6 months ago)
- Last Synced: 2025-12-24T00:50:20.029Z (6 months ago)
- Language: JavaScript
- Size: 5.23 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# volto contact block 🚀
[](https://github.com/plone/cookieplone-templates/)
[](https://github.com/psf/black)
[](https://github.com/kitconcept/volto-contact-block/actions/workflows/main.yml)
Contact block by kitconcept
## Quick Start 🏁
### Prerequisites ✅
- An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
- [uv](https://6.docs.plone.org/install/create-project-cookieplone.html#uv)
- [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)
- [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 24
- [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
- [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
- [Docker](https://docs.docker.com/get-started/get-docker/) (optional)
### Installation 🔧
1. Clone this repository, then change your working directory.
```shell
git clone git@github.com:kitconcept/volto-contact-block.git
cd volto-contact-block
```
2. Install this code base.
```shell
make install
```
### Fire Up the Servers 🔥
1. Create a new Plone site on your first run.
```shell
make backend-create-site
```
2. Start the backend at http://localhost:8080/.
```shell
make backend-start
```
3. In a new shell session, start the frontend at http://localhost:3000/.
```shell
make frontend-start
```
Voila! Your Plone site should be live and kicking! 🎉
### Local Stack Deployment 📦
Deploy a local Docker Compose environment that includes the following.
- Docker images for Backend and Frontend 🖼️
- A stack with a Traefik router and a PostgreSQL database 🗃️
- Accessible at [http://volto-contact-block.localhost](http://volto-contact-block.localhost) 🌐
Run the following commands in a shell session.
```shell
make stack-create-site
make stack-start
```
And... you're all set! Your Plone site is up and running locally! 🚀
## Project structure 🏗️
This monorepo consists of the following distinct sections:
- **backend**: Houses the API and Plone installation, utilizing pip instead of buildout, and includes a policy package named kitconcept.contactblock.
- **frontend**: Contains the React (Volto) package.
- **devops**: Encompasses Docker stack, Ansible playbooks, and cache settings.
- **docs**: Scaffold for writing documentation for your project.
### Why this structure? 🤔
- All necessary codebases to run the site are contained within the repository (excluding existing add-ons for Plone and React).
- Specific GitHub Workflows are triggered based on changes in each codebase (refer to .github/workflows).
- Simplifies the creation of Docker images for each codebase.
- Demonstrates Plone installation/setup without buildout.
## Code quality assurance 🧐
To check your code against quality standards, run the following shell command.
```shell
make check
```
### Format the codebase
To format and rewrite the code base, ensuring it adheres to quality standards, run the following shell command.
```shell
make format
```
| Section | Tool | Description | Configuration |
| --- | --- | --- | --- |
| backend | Ruff | Python code formatting, imports sorting | [`backend/pyproject.toml`](./backend/pyproject.toml) |
| backend | `zpretty` | XML and ZCML formatting | -- |
| frontend | ESLint | Fixes most common frontend issues | [`frontend/.eslintrc.js`](.frontend/.eslintrc.js) |
| frontend | prettier | Format JS and Typescript code | [`frontend/.prettierrc`](.frontend/.prettierrc) |
| frontend | Stylelint | Format Styles (css, less, sass) | [`frontend/.stylelintrc`](.frontend/.stylelintrc) |
Formatters can also be run within the `backend` or `frontend` folders.
### Linting the codebase
or `lint`:
```shell
make lint
```
| Section | Tool | Description | Configuration |
| --- | --- | --- | --- |
| backend | Ruff | Checks code formatting, imports sorting | [`backend/pyproject.toml`](./backend/pyproject.toml) |
| backend | Pyroma | Checks Python package metadata | -- |
| backend | check-python-versions | Checks Python version information | -- |
| backend | `zpretty` | Checks XML and ZCML formatting | -- |
| frontend | ESLint | Checks JS / Typescript lint | [`frontend/.eslintrc.js`](.frontend/.eslintrc.js) |
| frontend | prettier | Check JS / Typescript formatting | [`frontend/.prettierrc`](.frontend/.prettierrc) |
| frontend | Stylelint | Check Styles (css, less, sass) formatting | [`frontend/.stylelintrc`](.frontend/.stylelintrc) |
Linters can be run individually within the `backend` or `frontend` folders.
## Internationalization 🌐
Generate translation files for Plone and Volto with ease:
```shell
make i18n
```
## Credits and acknowledgements 🙏
Generated using [Cookieplone (0.9.10)](https://github.com/plone/cookieplone) and [cookieplone-templates (96574af)](https://github.com/plone/cookieplone-templates/commit/96574af4136cae375cc74be36daed12df6ed6f82) on 2025-12-08 19:18:17.165395. A special thanks to all contributors and supporters!