Skip to content

Preview of JX components with slots in a MD file #6

Description

@GoOz

Hello @jpsca 👋

Let me set the context first.

So I'm using WriteADoc to build a documentation for a design system using Jx components. The doc is in the design system's repository but the components are outside the docs folder.

To get the components working within the doc I add their folder to the catalog by adding to the docs.py:

components_path = Path(__file__).parent.parent / "path" / "to" / "components"
docs.catalog.add_folder(components_path)

Then in every *.md file I explicitly import the component I need in the frontmatter:

---
title: My page
imports:
  Button: "actionables/button/button.jx"
---

And, still in .md file, when I call the component <Button /> it appears (I handle the styles import differently because of internal stuff but still, it works).
So far so good then.

But if my component has slots and I want use them to make a preview like this:

<Button>
  {% fill prefix %}
  foobar
  {% endfill %}
  label
</Button>

Everything but the slot is interpreted, the slot part is actually considered as a string and display like this in the preview.

it does makes sense though, since a .md is not a jinja2 template file, but I was wondering if, by any chance, you had a workaround in mind. A wrapper maybe to tell the markdown parser to treat that as a full JX component and not text or something.

Thanks for your input.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions