@mashroom-content/mashroom-content-markdown-renderer-app

Mashroom Content Markdown Renderer App

Plugin for Mashroom Server, a Microfrontend Integration Platform. Part of the Mashroom Content extension.

This Portal App renders Markdown content from a Headless CMS and also provides the possibility to update/create content directly as Administrator.

Features

• Images are automatically optimized for the target devices (and converted to webp/avif if possible)
• Server-side rendering for SEO
• Simple integration of Videos from the local media library, Youtube or Vimeo
• Extra CSS per instance which will only be applied to the content

Markdown extensions

• Supports Github Flavored Markdown (e.g. tables)
• Supports Markdown Directives:

:::div{class=my-class}

her my text

:::

Or:

::a[My Link]{href=/goto target=_blank}

• A bunch of custom extensions such as:

::vimeo{id=612710291 privateKey=dba51808e0}
::youtube{id=z9eoubnO-pE}
::video{src=/url-to-my-video}
::button{href=/url-to-navigate-to target=_blank}

• And the built-in possibility to jump to specific elements like this:

::h2[My header]{id=myHeader}

Jump to it with:

::a[Jump]{gotoId=myHeader}

or

::button[Jump]{gotoId=myHeader}

Usage

If node_modules/@mashroom is configured as plugin path just add @mashroom-content/mashroom-content-markdown-renderer-app as dependency.

After that you can Drag the App Mashroom Display onto any page via Admin Toolbar.

Important note: This App assumes a content type markdown exists and has the following structure:

{
    "title": "My content",
    "content": "Here some **markdown** content"
}

If you need to change that globally you can override it in your Mashroom config file like this:

{
    "plugins": {
        "Mashroom Content Markdown Renderer App": {
            "appConfig": {
                "contentType": "markdown",
                "contentProp": "content",
                "titleProp": "title"
            }
        }
    }
}

• contentType: The content type (Default: markdown)
• contentProp: The property that contains the actual content (Default: content)
• titleProp: The property that contains the title (Default: title)