💡 RFC: fetchContent(blog/*.astro) support

[aut0poietic]

Background & Motivation

I want to be able to use complex (React, Vue, Lit) components in the content of a page that is a part of a collection (i.e. a blog posts).

Unfortunately, fetchContent() doesn't list anything other than .md files. .md files don't allow for complex (React, Vue, Lit, etc.) components in the content.

Sort of seems like I'm missing a detail.

Proposed Solution

Possible solutions

I'm not sure of the best way to implement this, but it might make sense to allow *.astro files to use front matter content in it's own code fence, or to expose a meta object (__content?) at some point in the code that fetchContent can use to assemble it's list.

Been hacking on this on my own, but not getting very far -- astro's been very resistant to my tinkering.

Thanks, and please feel free to smack me around if I'm missing something obvious.

Detailed Design

No response

Help make it happen!

• [ ] I am willing to submit a PR to implement this change.
• [X] I am willing to submit a PR to implement this change, but would need some guidance.
• [ ] I am not willing to submit a PR to implement this change.

[aut0poietic]

In a weird twist, I actually got the behavior I was looking for, but it may actually be a bug (but an awesome one). 🐛

Using the default blog example, I accidentally created a test-post.astro file and a test-post.md file -- so two files with the same name and different extensions. Surprisingly, Astro used the *.md file in the list returned by fetchContent() but rendered the *.astro file to HTML.

Taking that a step further, used the result from calling Astro.fetchContent('./test-post.md) and fed the first item in the array to the BlogPost's content property.

It all actually works. I'm sort of afraid it won't a minute from now, but there is is if anyone wants to experiment.

[Pjaerr]

I would really love for this to implemented, either this or if something comes out of https://github.com/snowpackjs/astro/issues/491

I realise Astro is really early on and I think something will definitely come out of the components in markdown RFC so I can sit tight for the time being but just adding my +1

[drwpow]

I want to be able to use complex (React, Vue, Lit) components in the content of a page that is a part of a collection (i.e. a blog posts).

Can you give a more detailed code example of what you’re trying to do? Today, you can use components within markdown (or if your current usecase isn’t supported today we will support it soon). You can also render whatever you’d like within collection .map()s, components included. So I think I’m missing what you’re shooting for; a brief example would help.

Using the default blog example, I accidentally created a test-post.astro file and a test-post.md file -- so two files with the same name and different extensions. Surprisingly, Astro used the *.md file in the list returned by fetchContent() but rendered the *.astro file to HTML.

That’s definitely clever! But we can’t guarantee that will always work going forward 😅

[aut0poietic]

Hey @drwpow, thanks for the reply.

I'll create a new test blog (my current Astro-based project is completely broken) and see if I'm just missing something silly -- I swear the docs mentioned no React/Vue/Lit/Astro components in markdown when I was looking into how to import a component into an *.md file.

May take a day or so for me to get to but wanted you to know I didn't abandon the RFC.

[aut0poietic]

Hey, didn't take me a day at all. :)

So, my problem may be just the documentation or my understanding how Markdown Pages work in Astro. The docs on Markdown Pages read:

Astro treats any .md files inside of the /src/pages directory as pages. These pages are processed as plain markdown files and do not support components.

That lead me to believe that complex component content in a Markdown Page wasn't possible.

What I'm after

I'm after rich content in a blog post -- islands of small React/Vue/Lit components in with my Markdown or Astro pages.

Imagine I've got a VR scene I built in Unity and I want to write about how I created it, along with examples of the process I used to create it. Imagine that I've built a little React/Vue/Lit/Astro component (let's use an Astro component and call it <UnityScene/>) that displays a preview and loads the scene when the user clicks it and allows them to toggle between control schemes (for web, phone and VR headset).

The <UnityScene/> should be something I import into a post on demand -- I wouldn't import the component into a post where I'm writing about cat pictures or a recipe, or a recipe for cooking cat pictures.

If I were doing this in a Markdown Page It might look something like:

---
title: '360 Video Panorama in Unity'
publishDate: 'Tuesday, August 17 2021'
layout: '../../layouts/BlogPost.astro'
---
import UnityScene from '../../components/unity-scene.astro';

# Unity 360 VR

<UnityScene src="..."/>

...

I'm not advocating the method of import, just the ability. I think this is how MDX flavored imports work so I tried that first.

Using a .astro page just works. So the solution ( in my head ) was to use .astro pages for the pages for blog articles. Unfortunately, Astro.fetchContent() can only list *.md files -- which was the source of the RFC.

I used a Unity example, but it's pretty contrived: I can think of a lot of things I'd want to use the same way: An interactive gallery using images from my vacation to, you know, blog about my vacation. Interactive coding examples (like Code Pen, only instructional) for teaching concepts. It's not really one thing, but all the things in a blog post. ;-)

Is the documentation wrong and this sort of embedding possible in Markdown Pages?

[jasikpark]

Ah, I made an issue #1142 that's probably a duplicate of this - @drwpow i think my example might explain the usecase a bit better if I understand correctly - this would be an interesting way to implement #491

[aut0poietic]

Yup @jasikpark, sounds like the goal is the same. I wasn't sure which was more in line with Astro's goals: .astro with frontmatter(-like) meta and support in fetchContent, or .md files with full component support.

[FredKSchott]

Closing in favor of #1142. @aut0poietic would love your continued thoughts in that issue!