diff --git a/README.md b/README.md index 63877d3e46..9327b2f737 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,30 @@ You can build your own or choose from the community released ones: You can try a Volto online demo at [https://demo.plone.org/](https://demo.plone.org/). +## Monorepo structure + +Since version 18.0.0-alpha4, the Volto core repository has had the shape of a monorepo, where "mono" means "single" and "repo" is short for "repository". +This means that several apps and libraries related to each other are stored in the same repository. +They are managed together but released individually. +This allows the code to be shared effectively, and unifies tracking of changes across all of the apps and libraries. + +| Package | Location | +|---|---| +| [`@plone/client`](https://www.npmjs.com/package/@plone/client) | [`packages/client`](https://github.com/plone/volto/tree/main/packages/client#readme) | +| [`@plone/components`](https://www.npmjs.com/package/@plone/components) | [`packages/components`](https://github.com/plone/volto/tree/main/packages/components#readme) | +| [`@plone/generator-volto`](https://www.npmjs.com/package/@plone/generator-volto) | [`packages/generator-volto`](https://github.com/plone/volto/tree/main/packages/generator-volto#readme) | +| [`@plone/helpers`](https://www.npmjs.com/package/@plone/helpers) | [`packages/helpers`](https://github.com/plone/volto/tree/main/packages/helpers#readme) | +| [`@plone/providers`](https://www.npmjs.com/package/@plone/providers) | [`packages/providers`](https://github.com/plone/volto/tree/main/packages/providers#readme) | +| [`@plone/registry`](https://www.npmjs.com/package/@plone/registry) | [`packages/registry`](https://github.com/plone/volto/tree/main/packages/registry#readme) | +| [`@plone/scripts`](https://www.npmjs.com/package/@plone/scripts) | [`packages/scripts`](https://github.com/plone/volto/tree/main/packages/scripts#readme) | +| [`@plone/types`](https://www.npmjs.com/package/@plone/types) | [`packages/types`](https://github.com/plone/volto/tree/main/packages/types#readme) | +| none | [`packages/volto-guillotina`](https://github.com/plone/volto/tree/main/packages/volto-guillotina) | +| [`@plone/volto-slate`](https://www.npmjs.com/package/@plone/volto-slate) | [`packages/volto-slate`](https://github.com/plone/volto/tree/main/packages/volto-slate#readme) | +| [`@plone/volto-testing`](https://www.npmjs.com/package/@plone/volto-testing) | [`packages/volto-testing`](https://github.com/plone/volto/tree/main/packages/volto-testing) | + +See also [Monorepo structure](https://6.docs.plone.org/volto/contributing/developing-core.html#monorepo-structure). + + ## Create a Volto project To start a new project using Volto, follow the [Plone installation documentation](https://6.docs.plone.org/install/create-project.html). diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md index ae5e32cc76..0f156cf8a9 100644 --- a/docs/source/configuration/settings-reference.md +++ b/docs/source/configuration/settings-reference.md @@ -464,7 +464,7 @@ querystringSearchGet Please test this setting properly before enabling in a production site. cssLayers - If you want to use CSS layers in Volto styling, it's possible to define them making sure that they are defined and applied at the very top level of the page (head tag). + To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `` tag. By using this configuration, you can pass the layer list definition as an array: ```js diff --git a/docs/source/contributing/developing-core.md b/docs/source/contributing/developing-core.md index f0ffb5462e..ace0d1de63 100644 --- a/docs/source/contributing/developing-core.md +++ b/docs/source/contributing/developing-core.md @@ -42,32 +42,35 @@ The workspaces are located in the `packages` or `apps` folder. ### Folder layout Volto has the following folder structure. +The package `volto` is the core code of Volto. ```text -(volto-monorepo)/ +/ ├─ apps/ -│ ├─ plone │ ├─ nextjs │ ├─ remix -│ └─ rr7 +│ ├─ rr7 +│ ├─ vite +│ └─ vite-ssr +├─ ... ├─ packages/ -│ ├─ volto +│ ├─ blocks │ ├─ client │ ├─ components -│ ├─ registry -│ ├─ types │ ├─ coresandbox │ ├─ generator-volto +│ ├─ helpers +│ ├─ providers +│ ├─ registry │ ├─ scripts +│ ├─ slots +│ ├─ theming │ ├─ tsconfig +│ ├─ types +│ ├─ volto │ ├─ volto-guillotina │ ├─ volto-slate │ └─ volto-testing -├─ .gitignore -├─ package.json -├─ pnpm-workspace.yaml -├─ turbo.json -├─ tsconfig.json ├─ ... ``` diff --git a/packages/components/README.md b/packages/components/README.md index ba7a55d313..136e6b09c4 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -64,7 +64,7 @@ You can override them in your classes while maintaining them for others. ### CSS layers -This package use CSS layers to provide a way to style the components in a more flexible way. +This package uses CSS layers to style the components in a more flexible way. It uses the `plone-components` layer name to scope all the CSS declarations in the package. The basic styling uses the nested `plone-components.base` named layer. You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way. @@ -72,7 +72,7 @@ You can use the `plone-components` layer to override the basic styling, or use t ### Quanta This package also features the Quanta components. -These components use the basic styling as a baseline, extending them to achieve Quanta look and feel. +These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel. They also extend the basic React components in a composable way. The Quanta styling is scoped in the `plone-components.quanta` named layer. diff --git a/packages/components/news/6539.bugfix b/packages/components/news/6539.bugfix new file mode 100644 index 0000000000..b64e94c1ea --- /dev/null +++ b/packages/components/news/6539.bugfix @@ -0,0 +1 @@ +Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh diff --git a/packages/components/news/6542.internal b/packages/components/news/6542.internal new file mode 100644 index 0000000000..7aa5606de1 --- /dev/null +++ b/packages/components/news/6542.internal @@ -0,0 +1 @@ +Update `@plone/components`'s URLs in its `package.json`. @stevepiercy diff --git a/packages/components/package.json b/packages/components/package.json index 3ca411ac97..a7296a7611 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -11,10 +11,10 @@ "version": "3.0.0", "repository": { "type": "git", - "url": "http://github.com/plone/components.git" + "url": "http://github.com/plone/volto.git" }, "bugs": { - "url": "https://github.com/plone/components/issues" + "url": "https://github.com/plone/volto/issues" }, "type": "module", "files": [ diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx index 8ddefc56b6..13c0095184 100644 --- a/packages/components/src/stories/Introduction.mdx +++ b/packages/components/src/stories/Introduction.mdx @@ -11,8 +11,8 @@ The purpose of this package is to provide an agnostic set of baseline components ## Usage -Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app. -Use pnpm in case you are adding them a Volto add-on/workspace: +You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app. +If you add the components to a Volto add-on or workspace, use pnpm, as shown. ```shell pnpm add @plone/components @@ -56,15 +56,15 @@ import '@plone/components/src/styles/basic/TextField.css'; ### CSS layers -This package use CSS layers to provide a way to style the components in a more flexible way. +This package uses CSS layers to style the components in a more flexible way. It uses the `plone-components` layer name to scope all the CSS declarations in the package. The basic styling uses the nested `plone-components.base` named layer. You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way. -## Quanta +### Quanta This package also features the Quanta components. -These components use the basic styling as a baseline, extending them to achieve Quanta look and feel. +These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel. They also extend the basic React components in a composable way. The Quanta styling is scoped in the `plone-components.quanta` named layer. diff --git a/packages/types/news/6539.feature b/packages/types/news/6539.feature new file mode 100644 index 0000000000..4bad8ad4c9 --- /dev/null +++ b/packages/types/news/6539.feature @@ -0,0 +1 @@ +Added the typing for the new `cssLayers` configuration object setting. @sneridagh diff --git a/packages/volto/.gitignore b/packages/volto/.gitignore index 6d1cc045b4..fdb83bb779 100644 --- a/packages/volto/.gitignore +++ b/packages/volto/.gitignore @@ -10,6 +10,7 @@ eslint.xml yarn-error.log build .changelog.draft +.registry.loader.js # yarn 3 .pnp.* diff --git a/packages/volto/news/6539.feature b/packages/volto/news/6539.feature new file mode 100644 index 0000000000..1e91372fc7 --- /dev/null +++ b/packages/volto/news/6539.feature @@ -0,0 +1 @@ +Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh diff --git a/packages/volto/news/6542.documentation b/packages/volto/news/6542.documentation new file mode 100644 index 0000000000..cff61771b4 --- /dev/null +++ b/packages/volto/news/6542.documentation @@ -0,0 +1 @@ +Add monorepo structure to the README. Update the monorepo structure file tree. @stevepiercy