diff --git a/docs/classic-ui/mockup.md b/docs/classic-ui/mockup.md index a68167cd3..1ec463f1a 100644 --- a/docs/classic-ui/mockup.md +++ b/docs/classic-ui/mockup.md @@ -30,7 +30,7 @@ pip install plonecli --user Create an add-on package with `plonecli`. ```shell -plonecli add project.addon +plonecli create addon project.addon ``` This will create a package `project.addon`, which you can install in your Plone site. @@ -52,6 +52,88 @@ You can check the full list of available features using the `-l` parameter: plonecli -l ``` +## Create a custom pattern + +To create a custom {term}`pattern` in your add-on, use the `mockup_pattern` {term}`bobtemplate`. + +```shell +cd project.addon +plonecli add mockup_pattern +``` + +Next, enter your pattern name without the `pat-` prefix +In the following example, its name is `testpattern`. + +```shell +--> Pattern name (without “pat-” prefix) [my-pattern]: testpattern +``` + +This creates the necessary JavaScript resources and webpack configuration for you, as shown in the following file system tree diagram. + +```text +... +├── resources +| ├── pat-testpattern +| | ├── documentation.md +| | ├── testpattern.js +| | ├── testpattern.scss +| | ├── testpattern.test.js +│ ├── bundle.js +│ ├── index.html +│ ├── index.js +├── package.json +├── webpack.config.js +... +``` + +All your pattern JavaScript code goes into {file}`resources/pat-testpattern/testpattern.js`. +SCSS files can be imported, too, since webpack provides the `sass-loader` module. + +Next, install the npm packages using {term}`yarn`. + +```shell +yarn install +``` + +When you finish writing your JavaScript code, you have to build the bundle with the following command. + +```shell +yarn build +``` + +This creates the webpack chunks, the JavaScript bundle files, and a demo browser view in your add-on package. + +```text +... +├── src +| ├── project +| | ├── addon +| | | ├── browser +| | | | ├── static +| | | | | ├── bundles +| | | | | | ├── chunks +| | | | | | ├── addon-remote.min.js +| | | | | | ├── addon-remote.min.js.map +| | | | | | ├── addon.min.js +| | | | | | ├── addon.min.js.map +| | | | ├── pattern-demo.pt +``` + +There is also an XML file in {file}`src/project/addon/profiles/default/registry/bundles.xml` which registers the {file}`addon-remote.min.js` in the resources registry. + +```{important} +You must re-import your profile with an upgrade step if you installed your add-on in Plone before adding the pattern. +Uninstall, then re-install, the add-on in the control panel. +Alternatively you can write a GenericSetup upgrade step. +``` + +You can access the demo browser view in your browser with `http://localhost:8080/Plone/@@addon-pattern-demo`. +Alternatively you can implement it in your own templates by adding the CSS class `pat-testpattern` to an HTML tag, such as an `img` tag. + +```html + +``` + ## References diff --git a/docs/glossary.md b/docs/glossary.md index bdc61a89d..ed4b20897 100644 --- a/docs/glossary.md +++ b/docs/glossary.md @@ -441,6 +441,17 @@ Mockup Mockup provides the JavaScript stack for Classic UI. [View Mockup's patterns](https://plone.github.io/mockup/), based on Patternslib. +bobtemplate +bobtemplates +bobtemplates.plone + `bobtemplates.plone` provides {term}`mr.bob` templates to generate packages for Plone projects. + The {term}`plonecli` command line client provides a developer-friendly interface to `bobtemplates.plone`. + +mr.bob + [`mr.bob`](https://mrbob.readthedocs.io/en/latest/) is a tool that takes a directory skeleton, copies over its directory structure to a target folder, and can use the Jinja2 (or some other) templating engine to dynamically generate the files. + Additionally, it can ask you questions needed to render the structure, or provide a configuration file to answer them. + +Pattern Patterns Patternslib [Patterns](https://patternslib.com/), or Patternslib, is a toolkit that enables designers to build rich interactive prototypes without the need for writing any JavaScript.