Skip to content

Mirror Directus Content and Schema into Astro Components, blocks #8

Premises

  1. Directus serves as the single source of truth for content as well as types.
  2. Astro works on intermediate markdown files where fields from the database are represented as typed frontmatter

Outlook

Future extensions can intercept (and alter) either the markdown+schema or the Directus data.

Alternative

With MDXRemote (directus/astro example here), we can skip the intermediate step of mirroring the data to a Content Collection.

Advantages:

  • Straightforward to implement now
  • No duplication of data; shorter pipeline; less potential points of stale data

Disadvantages:

  • Uses React instead of Astro for custom component rendering
  • Exiting the interesting Astro islands territory (?)

Apis and formats

  • Directus has a Client SDK for syncing items in a collection.
  • Directus has an openAPI3 interface for querying the schema of the database.
  • I have integrated a library that turns the openAPI3 schema into a typescript definition.
  • Astro Content Collections are directories with mdx files plus a type Schema file enabling typechecking and helpful error messages. [Announcement] [Docs]
  • The Schema needs to be declared in the zod language.

To Implement

  • 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

Gotchas

@resilien/directus-to-markdown produces errors. I have integrated a subset, but the ideal outcome would be a PR:

  • directus-to-markdown works with Astro 2.3
  • directus-to-markdown works with Content Collections:
    • Generates a directory inside content/ per collection
    • Generates a single content/config.ts with the Schema translated into zod
    • (optional) skips files that are already up-to-date? -> #11 (closed)
Edited by Flupsi