React app loading lots of markdown/html fragments with images

@vicmortelmans wrote:

Hi,

I’m building my first app in Ionic with React and Capacitor. It consists of a single page with navigation based on accordion and carousel components. I’ve set up a skeleton app that looks very promising. The actual content is available as a set of 100+ markdown files (or if that would work out better, converted to html fragments). They contain images, also 100+ in number.

The problem has two levels: 1) importing the content files and 2) importing the images.

A component like react-markdown will render a markdown string, but how to load it from a local file? And what if there’s not one file, but a folder full of files, which I’d like to load dynamically based on a list of filenames? And if that works out, how to make sure the the images that it refers to can also be packaged as local files?

I did quite some reading, and so far it looks like this is not a real React use case. I did find a few solutions, but they all relied on webpack (and its require.context() feature), but that’s not coming with Ionic, if I’m right?

Maybe I should follow a completely different approach, but note that my site is 100% static, so starting with databases to store my content is overkill. Also, I like the fact that I have the content source as markdown, for if I need to edit it.

What direction should I follow? As a fallback, I was thinking of storing all markdown and images as strings (base64 for the images) in a big json container, but that’s quite silly and hard to maintain, not?

Best regards,
Vic

PS. the entry form guides me to an older post: https://forum.ionicframework.com/t/best-practice-for-pre-loading-an-all-offline-app-with-data-600-images/91765/9. Using the File plugin. Just to get my head around, if this works, how should I make sure that all my markdown and image files are packaged? Just putting them in src/ without an import or require in the code won’t work, will it? The post says ‘store them in your assets folder’, but is this public/assets or build/assets? Must I manually copy and maintain the files there? A bit of background info about the packaging process would be helpful and I didn’t find it so far…

Posts: 1

Participants: 1

Read full topic