An open API service indexing awesome lists of open source software.

https://github.com/kitconcept/volto-light-theme


https://github.com/kitconcept/volto-light-theme

Last synced: 4 months ago
JSON representation

Awesome Lists containing this project

README

          


kitconcept, GmbH

# Volto Light Theme

[![NPM](https://img.shields.io/npm/v/@kitconcept/volto-light-theme.svg)](https://www.npmjs.com/package/@kitconcept/volto-light-theme)

[![PyPI](https://img.shields.io/pypi/v/kitconcept.voltolighttheme)](https://pypi.org/project/kitconcept.voltolighttheme/)
[![PyPI - Python Version](https://img.shields.io/pypi/pyversions/kitconcept.voltolighttheme)](https://pypi.org/project/kitconcept.voltolighttheme/)
[![PyPI - Plone Versions](https://img.shields.io/pypi/frameworkversions/plone/kitconcept.voltolighttheme)](https://pypi.org/project/kitconcept.voltolighttheme/)

[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/main.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)

[![GitHub contributors](https://img.shields.io/github/contributors/kitconcept/volto-light-theme)](https://github.com/kitconcept/volto-light-theme)
[![GitHub Repo stars](https://img.shields.io/github/stars/kitconcept/volto-light-theme?style=social)](https://github.com/kitconcept/volto-light-theme)

Volto Light Theme (VLT) mission is to serve as a foundation for kitconcept's future projects, following the release of Plone 6.
It incorporates feedback from the company's clients and Plone community from the last few years of projects and the success stories in the UI/UX side.
It aims to be future-proof, keeping it aligned with the upcoming Volto and Plone 7 vision in terms of theming strategy decided by the Plone community.

## Demo ๐ŸŒŽ

You can try VLT online in: [https://light-theme.kitconcept.io/](https://light-theme.kitconcept.io/)

## Documentation ๐Ÿ“–

You can find the documentation of this package at https://volto-light-theme.readthedocs.io.

## Upgrade ๐Ÿš€

See a detailed upgrade guide at https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html.

## Developing ๐Ÿ

### 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:

```sh
git clone git@github.com:kitconcept/volto-light-theme.git
cd volto-light-theme
```

2. Install dependencies for both Backend and Frontend:

```sh
make install
```

### Fire Up the Servers ๐Ÿ”ฅ

1. Start the **Backend** (Plone) at [http://localhost:8080/](http://localhost:8080/):

```sh
make backend-start
```

2. In a new terminal, start the **Frontend** (Volto) at [http://localhost:3000/](http://localhost:3000/):

```sh
make frontend-start
```

๐ŸŽ‰ Your Plone development environment is now live!

## Trying Volto Light Theme with Docker ๐Ÿ“ฆ

This setup includes:

- **Prebuilt Docker images** for Backend and Frontend ๐Ÿ–ผ๏ธ
- **A complete stack** with a Traefik router and a Postgres database ๐Ÿ—ƒ๏ธ
- **Accessible at** [http://voltolighttheme.localhost](http://voltolighttheme.localhost) ๐ŸŒ

To start the Docker-based environment, without cloning this repository, follow these steps:

### Download docker-compose.yml

On your computer, create a new folder and download the current `docker-compose.yml`:

```sh
mkdir try-vlt
cd try-vlt
curl -L -o docker-compose.yml https://raw.githubusercontent.com/kitconcept/volto-light-theme/refs/heads/main/docker-compose.yml
```

Then start the stack using:

```sh
docker compose up -d
```

Once the backend image is running, create a Plone site with:

```sh
docker compose exec backend './docker-entrypoint.sh create-site'
```

๐Ÿš€ Your Plone site is now up and running locally!

## Contributing ๐Ÿค

Contributions are welcome! If you find any issues or want to suggest improvements, please check out:

- [Source Code](https://github.com/kitconcept/volto-light-theme/) ๐Ÿ’ป
- [Issue Tracker](https://github.com/kitconcept/volto-light-theme/issues) ๐Ÿ›

Every pull request requires a [Change log entry](https://6.docs.plone.org/contributing/index.html#change-log-entry). The location of the `news` folder is the following:

- **backend**: `backend/news`
- **frontend**: `frontend/packages/volto-light-theme/news`

### Project Structure ๐Ÿ—๏ธ

This monorepo hosts two packages:

- **backend/**: Python package `kitconcept.voltolighttheme` providing Dexterity behaviors and example content.
- **frontend/**: React package `@kitconcept/volto-light-theme` providing the theme.

### Code Quality Assurance ๐Ÿง

Ensure your code follows best practices by running the following commands:

- **Format the codebase**:

```sh
make format
```

- **Lint the code for errors and adherence to Plone standards**:

```sh
make lint
```

You can also run these commands separately in the `backend` or `frontend` folders.

### Internationalization ๐ŸŒ

Easily generate translation files for both Plone and Volto:

```sh
make i18n
```

## Credits & Acknowledgements ๐Ÿ™

This package is developed and maintained by [kitconcept GmbH](https://kitconcept.com) โค๏ธ.