Skip to content
Snippets Groups Projects

Astro and MDX files from Directus

Last edited by Flupsi

https://docs.astro.build/en/guides/markdown-content/#mdx-features

I am currently experimenting with Astro: https://github.com/upsiflu/astro-blog

graph TD
    A[CMS] --> B{Data Model - Directus}
    B -->|Client Sdk| C(Content with frontmatter mirroring all Data Model fields)
    B -->|OpenAPI3| D(Type definitions for all fields)
    C -->|mdx files| E[Static site]
    D -->|zod schema file| E
    F[Ecobytes Components] --> E

Integration with Directus

Collections: Directus -> Astro [Announcement] [Docs]

  • Each published .mdx is written into the directory content/<Collection>.
  • All fields are written into the frontmatter.
  • Field types downloaded from Directus' AOS API will be converted to zod schemas and written into content/config.ts

Static site: Local .mdx files -> Html server

  • Astro will build pages from these.
  • When writing a page in the Directus editor, you can use predefined components.
  • Drafts can be specified with the draft: true MD(x) frontmatter directive and will be automatically hidden by Astro. (TODO: Check what the corresponding convention in Directusland is, and if we can translate losslessly)
  • If each site has a unique slug, we can realise a flat sitemat for authored content (in addition to a hierarchical sitemap where we can have logbook/x). TODO: Who should generate the slugs? (a) Directus, adding a non-writable field via a flow (b) Astro, using some slug library (c) the author, via a writeable field that only allows url-safe characters? I'm leaning towards (a) for consistency and uniqueness guarantees, and to establish directus as single-source-of-truth.

Customization

Defining blocks and components in the CMS is preferrable to hardcoding them in .astro. Directus can edit .mdx files, and Astro can do a lot with these, so we get the following features to allow block customization and composition:

  1. Tag renderer: Astro can override renderers for individual tags. For example, we can replace the default realisation of \*\*\* as <hr> by something else, for example an .astro component.
  2. Custom composable blocks: We can define a directory /block to let CMS users author MDX fragments that can be reused in pages or other components, reducing the reliance on hardcoded .astro templates. Combined with (1.), we can expose a subset of the tag renderers as customizable .mdx files living in a /tag directory.
  3. Markdown/.mdx plugins: Astro supports third-party remark and rehype plugins.

Astro features

Multilingual Content and Ui

Template/Ui i18n

I found https://astro-i18next.yassinedoghri.com/\\\\\\\\ which seems amazing for Ui and template localization (time, date, pluralization etc.) but what about blog posts that are available in several languages?

Multilingual Content

How does the Directus Editor handle multilingual text?

Problem description:

https://github.com/directus/directus/discussions/10362

Workaround:

https://blog.lunarbyte.io/2021/08/11/directus-content-translations/

Issue discussion:

https://github.com/directus/directus/discussions/6654