diff --git a/README.md b/README.md index 5f05292..24d37e8 100644 --- a/README.md +++ b/README.md @@ -1,60 +1,65 @@ -# Tech Conference for Plone πŸš€ +# Tech Event Support for Plone πŸš€ + +Monorepo for building tech event sites (conference/symposium/seminar) with Plone 6 and Volto. + +- Backend: [collective.techevent](https://pypi.org/project/collective.techevent) (Plone add-on) provides content types, behaviors, and REST endpoints (e.g., /@schedule, /@sponsors). +- Frontend: [@plone-collective/volto-techevent](https://www.npmjs.com/package/@plone-collective/volto-techevent) (Volto add-on) provides the UI: views, blocks, schedule, sponsors, listings, etc. +- Relationship: + - The frontend requires the backend to be installed and activated in Plone. + - The backend is intended to be used with the Volto addon for the full UX. [![Built with Cookieplone](https://img.shields.io/badge/built%20with-Cookieplone-0083be.svg?logo=cookiecutter)](https://github.com/plone/cookieplone-templates/) [![CI](https://github.com/collective/tech-event/actions/workflows/main.yml/badge.svg)](https://github.com/collective/tech-event/actions/workflows/main.yml) -Support for implementing tech conference in a Plone site. ## 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) 22 -- [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) - +- 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 22 and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) +- [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. +1. Clone this repository, then change your working directory. ```shell git clone git@github.com:collective/tech-event.git cd tech-event ``` -2. Install this code base. +2. Install this code base. ```shell make install ``` - ### Fire Up the Servers πŸ”₯ -1. Create a new Plone site on your first run. +1. Create a new Plone site on your first run. ```shell make backend-create-site ``` -2. Start the backend at http://localhost:8080/. +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/. +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! πŸŽ‰ +VoilΓ ! Your Plone site should be live and kicking! πŸŽ‰ ### Local Stack Deployment πŸ“¦ @@ -75,19 +80,18 @@ And... you're all set! Your Plone site is up and running locally! πŸš€ ## Project Structure πŸ—οΈ -This monorepo consists of the following distinct sections: +This monorepo consists of the following sections: -- **backend**: Houses the API and Plone installation, utilizing pip instead of buildout, and includes a policy package named collective.techevent. -- **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 repo (excluding existing addons 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. +- backend + - Python package collective.techevent (Plone add-on) + - Provides content types (Talk, Keynote, Training, Presenter, Schedule, Sponsor, etc.), behaviors, and REST endpoints (/@schedule, /@sponsors) + - Intended to be used with the Volto addon for the UI +- frontend + - Volto addon @plone-collective/volto-techevent + - Provides blocks (Schedule, Sponsors, Packages), views, listings, and integrations + - Requires the backend add-on to be installed in Plone +- docs + - Project documentation ## Code Quality Assurance 🧐 @@ -99,7 +103,7 @@ make check ### Format the codebase -To format the codebase, it is possible to run `format`: +To format the codebase, run: ```shell make format @@ -107,32 +111,33 @@ 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) | +| 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. +Formatters can also be run within the backend or frontend folders. ### Linting the codebase -or `lint`: - ```shell +To lint the codebase, run: + +```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. +| 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 | Checks JS / TypeScript formatting | [`frontend/.prettierrc`](./frontend/.prettierrc) | +| frontend | Stylelint | Checks styles (CSS, Less, Sass) formatting | [`frontend/.stylelintrc`](./frontend/.stylelintrc) | + +Linters can be run individually within the backend or frontend folders. ## Internationalization 🌐 diff --git a/backend/README.md b/backend/README.md index 9b196aa..8102065 100644 --- a/backend/README.md +++ b/backend/README.md @@ -1,25 +1,102 @@ -# collective.techevent +# Tech Event Support for Plone (collective.techevent) -Support for implementing tech conference in a Plone site. +Content types, behaviors, and REST endpoints to build tech event sites (conference/symposium/seminar) in Plone. + +Important: This backend package requires a Volto frontend with the addon `@plone-collective/volto-techevent` installed. The frontend consumes the endpoints and provides the UI for schedules, sessions, sponsors, and more. ## Features -TODO: List our awesome features +### Content types + +#### Event root +- Tech Event: Represents an event edition. Available if the site supports multiple editions, otherwise the Plone Site acts as the event root. + +#### Location +- **Venue**: Location where the event takes place. +- **Room**: A room/auditorium inside a venue. + +#### Event schedule +- **Schedule**: Folderish content to organize the event schedule. +- **Keynote**: Main presentation of the event. +- **Talk**: A session presentation. +- **Training**: A training/tutorial. +- **Open Space**: Open space session. +- **Lightning Talks**: Lightning talks session (supports listing each short presentation). +- **Meeting**: Meetings (e.g., Plone Foundation Annual Membership Meeting). +- **Slot**: Generic slot in the schedule (Registration, Group Photo, Party, etc.). +- **Break**: Coffee break or lunch time slot. +- **Presenter**: Presenter profile. + +#### Sponsor support +- **SponsorsDB**: Folderish container for sponsoring information. +- **SponsorLevel**: Sponsoring package/level available for the event. +- **Sponsor**: Sponsor/supporter entry. + +### Behaviors +- `collective.techevent.event_settings`: Event configuration; marks content as IEventRoot. +- `collective.techevent.schedule`: Scheduling support for content items. +- `collective.techevent.session`: Basic session information. +- `collective.techevent.presenter_roles`: Presenter roles on a content item. + +### REST endpoints +- `/@schedule` (on event root): Returns the complete event schedule. +- `/@sponsors` (on event root): Lists all sponsors, grouped by package level. + +## See it in action + +- [Python Cerrado 2025](https://2025.pythoncerrado.org) +- [Plone Conference 2025](https://2025.ploneconf.org) +- [Python Brasil 2025](https://2025.pythonbrasil.org.br) ## Installation -Install collective.techevent with uv. +Considering you have a Plone project created with latest `cookieplone`, add `collective.techevent` as a dependency on the `backend/pyproject.toml`. -```shell -uv add collective.techevent +```toml +[project] +dependencies = [ + # ...existing dependencies... + "collective.techevent", +] ``` -Create the Plone site. +Then run the installation with: ```shell -make create-site +make install ``` +Load the package ZCML (if not using auto-include) in dependencies.zcml: + +```xml + + + + + +``` + +Ensure the GenericSetup profile is installed (e.g., from your policy package metadata.xml): + +```xml + + + 1000 + + + profile-collective.techevent:default + + +``` + +Create your Plone site as usual and install the β€œTech Event” add-on in the Add-ons control panel if not auto-installed. + +### Frontend requirement + +This package is intended to be used with a Volto frontend: +- Install @plone-collective/volto-techevent in your Volto app. +- The Volto addon integrates with the endpoints and content types provided here. + ## Contribute - [Issue tracker](https://github.com/collective/tech-event/issues) @@ -39,7 +116,6 @@ make create-site ```shell git clone git@github.com:collective/tech-event.git - cd tech-event/backend ``` 2. Install this code base. @@ -48,39 +124,9 @@ make create-site make install ``` - -### Add features using `plonecli` or `bobtemplates.plone` - -This package provides markers as strings (``) that are compatible with [`plonecli`](https://github.com/plone/plonecli) and [`bobtemplates.plone`](https://github.com/plone/bobtemplates.plone). -These markers act as hooks to add all kinds of features through subtemplates, including behaviors, control panels, upgrade steps, or other subtemplates from `bobtemplates.plone`. -`plonecli` is a command line client for `bobtemplates.plone`, adding autocompletion and other features. - -To add a feature as a subtemplate to your package, use the following command pattern. - -```shell -make add -``` - -For example, you can add a content type to your package with the following command. - -```shell -make add content_type -``` - -You can add a behavior with the following command. - -```shell -make add behavior -``` - -```{seealso} -You can check the list of available subtemplates in the [`bobtemplates.plone` `README.md` file](https://github.com/plone/bobtemplates.plone/?tab=readme-ov-file#provided-subtemplates). -See also the documentation of [Mockup and Patternslib](https://6.docs.plone.org/classic-ui/mockup.html) for how to build the UI toolkit for Classic UI. -``` - ## License -The project is licensed under GPLv2. +GPLv2 ## Credits and acknowledgements πŸ™ diff --git a/backend/news/+metadata.internal b/backend/news/+metadata.internal new file mode 100644 index 0000000..3ed848f --- /dev/null +++ b/backend/news/+metadata.internal @@ -0,0 +1 @@ +Update package metadata. @ericof diff --git a/backend/news/+readme.documentation b/backend/news/+readme.documentation new file mode 100644 index 0000000..4a29f73 --- /dev/null +++ b/backend/news/+readme.documentation @@ -0,0 +1 @@ +Update README file. @ericof diff --git a/backend/pyproject.toml b/backend/pyproject.toml index 03e3f60..7d95dd6 100644 --- a/backend/pyproject.toml +++ b/backend/pyproject.toml @@ -12,6 +12,8 @@ keywords = [ "CMS", "Plone", "Python", + "Conference", + "Event", ] classifiers = [ "Development Status :: 3 - Alpha", diff --git a/docs/README.md b/docs/README.md index ab60c82..70b1aad 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,6 @@ -# Tech Conference for Plone +# Tech Event Support for Plone -Documentation for Tech Conference for Plone. +Documentation for Tech Event Support for Plone. Support for implementing tech conference in a Plone site. This project provides a Sphinx-based documentation environment for your Plone project, powered by the [Plone Sphinx Theme](https://github.com/plone/plone-sphinx-theme). @@ -59,7 +59,7 @@ make help ``` -## Customize the Tech Conference for Plone documentation +## Customize the Tech Event Support for Plone documentation This section provides how-to guidance to customize your documentation. diff --git a/docs/docs/concepts/index.md b/docs/docs/concepts/index.md index 9101ea3..814bc96 100644 --- a/docs/docs/concepts/index.md +++ b/docs/docs/concepts/index.md @@ -1,10 +1,10 @@ --- myst: html_meta: - "description": "Tech Conference for Plone concepts" - "property=og:description": "Tech Conference for Plone concepts" - "property=og:title": "Tech Conference for Plone concepts" - "keywords": "Plone, Tech Conference for Plone, concepts" + "description": "Tech Event Support for Plone concepts" + "property=og:description": "Tech Event Support for Plone concepts" + "property=og:title": "Tech Event Support for Plone concepts" + "keywords": "Plone, Tech Event Support for Plone, concepts" --- # Concepts diff --git a/docs/docs/conf.py b/docs/docs/conf.py index 4e35c66..f02fd24 100644 --- a/docs/docs/conf.py +++ b/docs/docs/conf.py @@ -1,5 +1,5 @@ # Configuration file for the Sphinx documentation builder. -# Tech Conference for Plone build configuration file +# Tech Event Support for Plone build configuration file # -- Path setup -------------------------------------------------------------- @@ -19,7 +19,7 @@ # -- Project information ----------------------------------------------------- -project = "Tech Conference for Plone" +project = "Tech Event Support for Plone" author = "PloneGov-BR" trademark_name = "collective" now = datetime.now() @@ -177,7 +177,7 @@ # }, ], "logo": { - "text": "Tech Conference for Plone", + "text": "Tech Event Support for Plone", }, "navigation_with_keys": True, "path_to_docs": "docs/docs", @@ -286,7 +286,7 @@ ogp_site_url = "https://MY_READTHEDOCS_PROJECT_SLUG.readthedocs.io/" ogp_description_length = 200 ogp_image = "https://MY_READTHEDOCS_PROJECT_SLUG/_static/MY_LOGO.svg" -ogp_site_name = "Tech Conference for Plone Documentation" +ogp_site_name = "Tech Event Support for Plone Documentation" ogp_type = "website" ogp_custom_meta_tags = [ '', @@ -321,7 +321,7 @@ # -- Options for HTML help output ------------------------------------------------- # Output file base name for HTML help builder. -htmlhelp_basename = "Tech Conference for PloneDocumentation" +htmlhelp_basename = "Tech Event Support for PloneDocumentation" # -- Options for LaTeX output ------------------------------------------------- @@ -331,8 +331,8 @@ latex_documents = [ ( "index", - "Tech Conference for PloneDocumentation.tex", - "Tech Conference for Plone Documentation", + "Tech Event Support for PloneDocumentation.tex", + "Tech Event Support for Plone Documentation", "collective community", "manual", ), diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index 6c7db7b..3ac92c0 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -7,7 +7,7 @@ myst: "keywords": "Plone, documentation, glossary, term, definition" --- -This glossary provides example terms and definitions relevant to **Tech Conference for Plone**. +This glossary provides example terms and definitions relevant to **Tech Event Support for Plone**. Support for implementing tech conference in a Plone site. ```{note} diff --git a/docs/docs/how-to-guides/index.md b/docs/docs/how-to-guides/index.md index a5a1e78..6bff956 100644 --- a/docs/docs/how-to-guides/index.md +++ b/docs/docs/how-to-guides/index.md @@ -1,10 +1,10 @@ --- myst: html_meta: - "description": "Tech Conference for Plone how-to guides" - "property=og:description": "Tech Conference for Plone how-to guides" - "property=og:title": "Tech Conference for Plone how-to guides" - "keywords": "Plone, Tech Conference for Plone, how-to, guides" + "description": "Tech Event Support for Plone how-to guides" + "property=og:description": "Tech Event Support for Plone how-to guides" + "property=og:title": "Tech Event Support for Plone how-to guides" + "keywords": "Plone, Tech Event Support for Plone, how-to, guides" --- # How-to guides diff --git a/docs/docs/index.md b/docs/docs/index.md index 182f3c5..f42a4ad 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -3,13 +3,13 @@ myst: html_meta: "description": "Support for implementing tech conference in a Plone site." "property=og:description": "Support for implementing tech conference in a Plone site." - "property=og:title": "Tech Conference for Plone" - "keywords": "Tech Conference for Plone, documentation, Support for implementing tech conference in a Plone site." + "property=og:title": "Tech Event Support for Plone" + "keywords": "Tech Event Support for Plone, documentation, Support for implementing tech conference in a Plone site." --- -# Tech Conference for Plone +# Tech Event Support for Plone -Welcome to the documentation for Tech Conference for Plone! +Welcome to the documentation for Tech Event Support for Plone! Support for implementing tech conference in a Plone site. This scaffold provides a ready-to-use environment for creating comprehensive documentation for {term}`Plone` projects, based on {term}`Plone Sphinx Theme`. diff --git a/docs/docs/reference/index.md b/docs/docs/reference/index.md index d4a7272..1d1cf27 100644 --- a/docs/docs/reference/index.md +++ b/docs/docs/reference/index.md @@ -1,10 +1,10 @@ --- myst: html_meta: - "description": "Tech Conference for Plone Reference" - "property=og:description": "Tech Conference for Plone Reference" - "property=og:title": "Tech Conference for Plone Reference" - "keywords": "Plone, _Tech Conference for Plone,_ reference" + "description": "Tech Event Support for Plone Reference" + "property=og:description": "Tech Event Support for Plone Reference" + "property=og:title": "Tech Event Support for Plone Reference" + "keywords": "Plone, _Tech Event Support for Plone,_ reference" --- # Reference diff --git a/docs/docs/tutorials/index.md b/docs/docs/tutorials/index.md index 5f78652..884c7a1 100644 --- a/docs/docs/tutorials/index.md +++ b/docs/docs/tutorials/index.md @@ -1,10 +1,10 @@ --- myst: html_meta: - "description": "Tech Conference for Plone Tutorials" - "property=og:description": "Tech Conference for Plone Tutorials" - "property=og:title": "Tech Conference for Plone Tutorials" - "keywords": "Plone, Tech Conference for Plone, tutorials" + "description": "Tech Event Support for Plone Tutorials" + "property=og:description": "Tech Event Support for Plone Tutorials" + "property=og:title": "Tech Event Support for Plone Tutorials" + "keywords": "Plone, Tech Event Support for Plone, tutorials" --- # Tutorials diff --git a/docs/pyproject.toml b/docs/pyproject.toml index 9b9d212..9b19535 100644 --- a/docs/pyproject.toml +++ b/docs/pyproject.toml @@ -2,7 +2,7 @@ name = "Tech_Conference_for_Plone_Documentation" description = "Support for implementing tech conference in a Plone site." keywords = [ - "Tech Conference for Plone", + "Tech Event Support for Plone", "documentation", "Plone", "DiΓ‘taxis", diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 7945894..916a011 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -22,7 +22,7 @@ FROM plone/frontend-prod-config:${VOLTO_VERSION} LABEL maintainer="PloneGov-BR " \ org.label-schema.name="tech-event-frontend" \ - org.label-schema.description="Tech Conference for Plone frontend image." \ + org.label-schema.description="Tech Event Support for Plone frontend image." \ org.label-schema.vendor="PloneGov-BR" COPY --from=builder /app/ /app/ diff --git a/frontend/README.md b/frontend/README.md index 7a34f92..b36b8cd 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,45 +1,137 @@ -# Tech Conference for Plone (@plone-collective/volto-techevent) +# Tech Event Support for Plone (@plone-collective/volto-techevent) -Content types to represent a tech event (Conference / Symposium / Seminars) in a Plone site. +Volto components to implement a tech event (conference / symposium / seminar) frontend for the Plone CMS. -[![npm](https://img.shields.io/npm/v/volto-techevent)](https://www.npmjs.com/package/@plone-collective/volto-techevent) +[![npm](https://img.shields.io/npm/v/@plone-collective/volto-techevent)](https://www.npmjs.com/package/@plone-collective/volto-techevent) [![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://collective.github.io/tech-event/) [![CI](https://github.com/collective/tech-event/actions/workflows/main.yml/badge.svg)](https://github.com/collective/tech-event/actions/workflows/main.yml) ## Features - +### Content type views -## Installation +- `Keynote`, `Talk`, `Training`, `Open Space` +- `Lightning Talks` +- `Presenter` +- `Break`, `Slot`, `Meeting` +- `Sponsor` + +The content types `Venue`, `Room`, `SponsorsDB`, `SponsorLevel`, and `Schedule` use blocks. + +### Blocks +- **Schedule Block**: present the schedule of a day β€” or multiple days β€” of the event. +- **Packages and Sponsors**: list sponsors grouped by package level. +- **Package Comparison**: comparison of package level benefits. +- **Package Benefits**: list benefits of a package level. +- **Sponsors List**: list of sponsors for a package level. -To install your project, you must choose the method appropriate to your version of Volto. +### Grid listing variations +- Content types: Talk, Training, Keynote, Presenter +### Actions and reducers +- Support for sponsors and registration endpoints. -Add `@plone-collective/volto-techevent` to your `package.json`. +## See it in action + +- [Python Cerrado 2025](https://2025.pythoncerrado.org) +- [Plone Conference 2025](https://2025.ploneconf.org) +- [Python Brasil 2025](https://2025.pythonbrasil.org.br) + +## Installation + +To install this addon a project, add `@plone-collective/volto-techevent` to the `package.json` to the main package of your project. ```json +"addons": { + "@plone-collective/volto-techevent" +}, "dependencies": { "@plone-collective/volto-techevent": "*" } ``` -Add `@plone-collective/volto-techevent` to your `volto.config.js`. +Ensure `@kitconcept/volto-light-theme` as the default theme on your project by editing `volto.config.js`. ```javascript -const addons = ['@plone-collective/volto-techevent']; +const theme = '@kitconcept/volto-light-theme'; ``` -## Test installation +### Backend add-on -Visit http://localhost:3000/ in a browser, login, and check the awesome new features. +`@plone-collective/volto-techevent` requires the installation of its sibling add-on, `collective.techevent` on the backend. +### Test installation -## Development +Visit http://localhost:3000/ in a browser, login, and check the awesome new features. -The development of this add-on is done in isolation using pnpm workspaces, the latest `mrs-developer`, and other Volto core improvements. -For these reasons, it only works with pnpm and Volto 18. +## Customize it in your project + +The easiest way to customize the design of this package is by using CSS Custom Properties (CSS variables). +Override these variables in your project's theme (for example, src/theme/theme.css or app.less). + +```css +:root { + /* SponsorTile */ + --techevent-sponsortile-background-main: transparent; + --techevent-sponsortile-min-width: 200px; + --techevent-sponsortile-max-width: 400px; + --techevent-sponsortile-align-items: center; + --techevent-sponsortile-justify-content: center; + --techevent-sponsortile-border-width: 1px; + --techevent-sponsortile-border-style: solid; + /* --techevent-sponsortile-border-color: ; */ + --techevent-sponsortile-border-radius: 0.5rem; + --techevent-sponsortile-margin: 0.5rem; + /* --techevent-sponsortile-box-shadow: 0px 3px 16px 0px #000; */ + --techevent-sponsortile-padding: 7px; + + /* SponsorTile (hover) */ + --techevent-sponsortile-hover-border-width: 1px; + --techevent-sponsortile-hover-border-style: solid; + /* --techevent-sponsortile-hover-border-color: ; */ + --techevent-sponsortile-hover-border-radius: 0.5rem; + --techevent-sponsortile-hover-margin: 0.5rem; + /* --techevent-sponsortile-hover-box-shadow: 0px 3px 16px 0px #000; */ + + /* SponsorLevel */ + /* Title */ + /* --techevent-sponsorlevel-title-color: ; */ + /* --techevent-sponsorlevel-title-border-color: ; */ + /* --techevent-sponsorlevel-title-before-background: ; */ + --techevent-sponsorlevel-title-padding: 0 0 1rem 0; + --techevent-sponsorlevel-title-margin: 1.2rem 0; + --techevent-sponsorlevel-title-border-bottom-style: solid; + --techevent-sponsorlevel-title-border-bottom-width: 1px; + --techevent-sponsorlevel-title-before-height: 3px; + --techevent-sponsorlevel-title-before-width: 400px; + + /* Presenter */ + /* PresenterCategory */ + --techevent-presenter-category-background-color: #ccc; + --techevent-presenter-category-color: #000; + + --techevent-vocabulary-foreground-color: #fff; + /* Track foreground color */ + --techevent-session-track-foreground-color: #fff; + + /* Schedule */ + --techevent-schedule-color: rgb(1, 106, 173); + --techevent-schedule-border-color: #ccc; + --techevent-schedule-room-color: #000; + --techevent-schedule-secondary-color: #ccc; + --techevent-schedule-reverse-color: #fff; + --techevent-schedule-gap: 2px; + + /* SessionTile */ + --techevent-sessionTile-background-color: #ecebeb; + --techevent-sessionTile-color: #000; +} +``` +## Contribute + +This add-on is developed with pnpm workspaces and targets Volto 18. It requires pnpm for development. ### Prerequisites βœ… @@ -52,50 +144,40 @@ For these reasons, it only works with pnpm and Volto 18. ### Installation πŸ”§ -1. Clone this repository, then change your working directory. +1. Clone this repository, then change your working directory. ```shell git clone git@github.com:collective/tech-event.git - cd tech-event/frontend + cd tech-event ``` -2. Install this code base. +2. Install this code base. ```shell make install ``` - ### Make convenience commands Run `make help` to list the available Make commands. - -### Set up development environment - -Install package requirements. - -```shell -make install -``` - ### Start developing Start the backend. ```shell -make backend-docker-start +make backend-start ``` In a separate terminal session, start the frontend. ```shell -make start +make frontend-start ``` ### Lint code -Run ESlint, Prettier, and Stylelint in analyze mode. +Run ESLint, Prettier, and Stylelint in check mode. ```shell make lint @@ -103,7 +185,7 @@ make lint ### Format code -Run ESlint, Prettier, and Stylelint in fix mode. +Run ESLint, Prettier, and Stylelint in fix mode. ```shell make format @@ -111,7 +193,7 @@ make format ### i18n -Extract the i18n messages to locales. +Extract translation messages. ```shell make i18n @@ -125,28 +207,6 @@ 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. - -```shell -make acceptance-frontend-dev-start -``` - -In the second session, start the backend acceptance server. - -```shell -make acceptance-backend-start -``` - -In the third session, start the Cypress interactive test runner. - -```shell -make acceptance-test -``` - ## License The project is licensed under the MIT license. diff --git a/frontend/packages/volto-techevent/news/+metadata.internal b/frontend/packages/volto-techevent/news/+metadata.internal new file mode 100644 index 0000000..3ed848f --- /dev/null +++ b/frontend/packages/volto-techevent/news/+metadata.internal @@ -0,0 +1 @@ +Update package metadata. @ericof diff --git a/frontend/packages/volto-techevent/news/+readme.documentation b/frontend/packages/volto-techevent/news/+readme.documentation new file mode 100644 index 0000000..4a29f73 --- /dev/null +++ b/frontend/packages/volto-techevent/news/+readme.documentation @@ -0,0 +1 @@ +Update README file. @ericof diff --git a/frontend/packages/volto-techevent/package.json b/frontend/packages/volto-techevent/package.json index beb1861..007baab 100644 --- a/frontend/packages/volto-techevent/package.json +++ b/frontend/packages/volto-techevent/package.json @@ -1,7 +1,7 @@ { "name": "@plone-collective/volto-techevent", "version": "1.0.0-alpha.23", - "description": "Support for implementing tech conference in a Plone site.", + "description": "Volto components to implement a tech event (conference / symposium / seminar) frontend for the Plone CMS.", "main": "src/index.ts", "license": "MIT", "keywords": [ diff --git a/news/+readme.documentation b/news/+readme.documentation new file mode 100644 index 0000000..4a29f73 --- /dev/null +++ b/news/+readme.documentation @@ -0,0 +1 @@ +Update README file. @ericof