Merge pull request #1677 from plone/merge-1275-bits

Merge PR #1275 useful bits

Author: stevepiercy

docs/classic-ui/mockup.md

@@ -3,16 +3,39 @@ myst:
   html_meta:
     "description": "Mockup together with Patternslib are used to build the UI toolkit for Classic UI, a frontend for Plone."
     "property=og:description": "Mockup together with Patternslib are used to build the UI toolkit for Classic UI, a frontend for Plone."
-    "property=og:title": "Mockup"
-    "keywords": "Mockup, Patternslib, Classic UI, frontend, Plone"
+    "property=og:title": "Mockup and Patternslib"
+    "keywords": "Mockup, Patternslib, Classic UI, plonecli, bobtemplates.plone, mr.bob, frontend, Plone"
 ---
 
-(mockup-label)=
+(mockup-and-patternslib-label)=
 
-# Mockup
+# Mockup and Patternslib
 
 {term}`Mockup` together with {term}`Patternslib` are used to build the UI toolkit for {term}`Classic UI`, a frontend for Plone.
 
 View the [interactive documentation of Mockup](https://plone.github.io/mockup/).
 
-For more information, visit the [Mockup repository on GitHub](https://github.com/plone/mockup).
+
+## Get started
+
+[bobtemplates.plone](https://github.com/plone/bobtemplates.plone) provides [mr.bob](https://mrbob.readthedocs.io/en/latest/) templates to generate packages for Plone projects.
+[plonecli](https://github.com/plone/plonecli) provides a command line client for bobtemplates.plone.
+
+Install plonecli into your Python user packages to make it available to all your projects.
+
+```shell
+pip install plonecli --user
+```
+
+Create a theme package add-on with {term}`plonecli`.
+
+```shell
+plonecli add mockup_pattern
+```
+
+
+## References
+
+-   {ref}`v60-mockup-resource-registry-label` in Plone 6.0
+-   [Mockup repository on GitHub](https://github.com/plone/mockup)
+-   [Patternslib](https://patternslib.com/)

docs/classic-ui/module-federation.md

@@ -59,24 +59,24 @@ const package_json_patternslib = require("@patternslib/patternslib/package.json"
 Then find the following line.
 
 ```js
-    config = patternslib_config(env, argv, config, ["@plone/mockup"]);
+config = patternslib_config(env, argv, config, ["@plone/mockup"]);
 ```
 
 Below this line add the following.
 
 ```js
-    config.plugins.push(
-        mf_config({
-            name: "myaddon",
-            filename: "myaddon-remote.min.js",
-            remote_entry: config.entry["myaddon.min"],
-            dependencies: {
-                ...package_json_patternslib.dependencies,
-                ...package_json_mockup.dependencies,
-                ...package_json.dependencies,
-            },
-        })
-    );
+config.plugins.push(
+    mf_config({
+        name: "myaddon",
+        filename: "myaddon-remote.min.js",
+        remote_entry: config.entry["myaddon.min"],
+        dependencies: {
+            ...package_json_patternslib.dependencies,
+            ...package_json_mockup.dependencies,
+            ...package_json.dependencies,
+        },
+    })
+);
 ```
 
 Replace the name `myaddon` with your add-on bundle's unique name.
@@ -93,7 +93,7 @@ To preserve compatibility with older add-ons and JavaScript implementations, the
 Constructs like the following still work:
 
 ```js
-    (function($) {
-        // JS code which uses $
-    })(jQuery);
+(function($) {
+    // JS code which uses $
+})(jQuery);
 ```

docs/classic-ui/static-resources.md

@@ -14,6 +14,10 @@ myst:
 We often want to ship a website with a static resource, such as an image, icon, CSS, or JavaScript file.
 For this, we need to register static resources.
 
+```{seealso}
+For some additional implementation information, see {ref}`classic-ui-theming-from-scratch-theme-label`.
+```
+
 
 (classic-ui-static-resources-registering-label)=
 
@@ -96,4 +100,4 @@ The following attributes are available for registering a static resource:
 
 ## Loading order of resources
 
-`depends` is used to define the loading order of resources, by specifying the name of the depending bundle.
+`depends` is used to define the loading order of resources by specifying the name of the depending bundle.

docs/classic-ui/theming/from-scratch.md

@@ -25,6 +25,8 @@ Theming based on a filesystem package without any dependency.
 -   No Diazo needed
 
 
+(classic-ui-theming-from-scratch-package-label)=
+
 ## Theme package
 
 -   Create a theme package as explained here.
@@ -33,6 +35,8 @@ Theming based on a filesystem package without any dependency.
 -   Static files
 
 
+(classic-ui-theming-from-scratch-static-files-label)=
+
 ## Static files
 
 Register directory to keep static files
@@ -49,6 +53,9 @@ Directory: `src/plonetheme/munich/browser/static`
     />
 ```
 
+
+(classic-ui-theming-from-scratch-theme-label)=
+
 ## Theme
 
 ### Manifest
@@ -161,7 +168,7 @@ To do so, follow this guide.
 -   Add a script in {file}`package.json` to compile the CSS.
 
     ```json
-      "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"
+    "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"
     ```
 
     ```{tip}