Integrate Mockup's documentation

[thet]

This integrated the Mockup's pattern documentation in Plone documentation.

This PR uses the branch from: plone/mockup#1345

I'm not sure if this is OK as-is. I need a review and some suggestions.

The Mockup documentation was built for 11ty and the demos are interactable. These live interactions do not work within Plone documentation. I'm thinking of changing the list of Patterns in the README.md of Mockup to not directly include them but to point to the live demo on https://plone.github.io/mockup/

I have some questions:

• Can I add a custom JavaScript tag to include the Mockup bundle in the Mockup section? That way we could directly include the Pattern demos in the Plone documentation instead of pointing to an external website.
• Is there a way to render some info only on github and other only for the Plone documentation?
• What else should I change to make this Mockup docs integration useful?

[netlify]

✅ Deploy Preview for 6-docs-plone-org ready!

Name	Link
🔨 Latest commit	c60310d
🔍 Latest deploy log	https://app.netlify.com/sites/6-docs-plone-org/deploys/65cdbfa3d3d11c0008003901
😎 Deploy Preview	https://deploy-preview-1548--6-docs-plone-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stevepiercy]

• Can I add a custom JavaScript tag to include the Mockup bundle in the Mockup section? That way we could directly include the Pattern demos in the Plone documentation instead of pointing to an external website.

Yes. You can place any valid HTML inside a MyST page.

<script type="text/javascript" src="/mockup/dist/mockup/bundle.min.js"></script>

• Is there a way to render some info only on github and other only for the Plone documentation?

How do you render the HTML on GitHub? If you use Sphinx to build the HTML, you can use the ifconfig directive and pass an argument into the build. For example:

```{ifconfig} context in ("github",)
GitHub only content
```
```{ifconfig} context in ("plone",)
Plone only content
```

def setup(app):
    app.add_config_value("context", "", "env")

[thet]

• Is there a way to render some info only on github and other only for the Plone documentation?

How do you render the HTML on GitHub? If you use Sphinx to build the HTML, you can use the ifconfig directive and pass an argument into the build. For example:

I meant the default Markdown rendering on GitHub where no external tools are involved. Like https://github.com/plone/mockup/blob/improve-docs/README.md

[stevepiercy]

@thet have a look at what we do with Volto widgets.

https://6.docs.plone.org/storybook/

https://github.com/plone/documentation/blob/6.0/Makefile#L240-L242

I think doing something similar with Mockup would be useful. We could host it under https://6.docs.plone.org/mockup or https://6.docs.plone.org/patternslib, whatever makes sense. I'm not sure that importing only the README is worth it.

I meant the default Markdown rendering on GitHub where no external tools are involved. Like https://github.com/plone/mockup/blob/improve-docs/README.md

GitHub uses GitHub Flavored Markdown and some internal tool to render Markdown to HTML, but it is not something we can use. Its specification does not mention any kind of conditional include or exclude. MyST supports conditional includes.

Please let me know your thoughts. Thank you!

[petschki]

LGTM!

[stevepiercy]

I think using a git submodule is not the best way forward for a single file. It currently requires manual updating with an annoying sequence of commands, as GitHub does not support automatic cross-repo updates.

I think I would prefer that the documentation be moved out of the README, and maintained in the plone/documentation repo, with a link in the README to the Plone 6 docs. Then we could use MyST syntax, instead of only limited GitHub's Markdown flavor.

I would really like to host the demo under docs.plone.org, too.

Let's discuss during the next Classic UI Team meeting the options to move this forward.

[stevepiercy]

Per the Classic UI Team meeting, this is the direction we want to pursue:

#1548 (comment)

@fredvd and @stevepiercy will look at the CI from mockup and try to update it appropriately. This will require using a submodule for the repo.

We should also have a wayfinding page so that users can find the mockup demo.