How to show a formatted preview on a nextjs blog

One thing I really wanted was to be able to show a list of the first initial posts fully expanded or at least with a decent preview.

When I had tried gatsby, I could only get a description by duplicating the content from the start of the post and putting it in a 'description' field. This would then also lose all its formatting and look unprofessional.

One way I had kind of got it working was to simply paginate the homepage and show the first 6-10 posts in full. But this meant that if some were especially long they would clog up the homepage.

I tried setting a word or character limit and counting the total numbers of characters in the post, but then I realised I couldn't simply 'cut' x characters from the markdown or resulting html, since there was a risk I could cut in the middle of some formatting, and have a phrase like this _word....

I thought about adding an optional description field if I wanted to show a preview, and then falling back to showing the whole post if I didn't put one there. But I still wanted more flexibility than this and not to have to duplicate my content or try to work out how to escape everything in the description field.

What I wanted was the feature where you added a 'more' tag at some point in the markdown, and have everything after that be hidden and a 'read more' link to appear at the bottom of the preview. I searched and searched but couldn't find a markdown package that supported this.

In the end I realised this was simple enough to do by parsing the markdown string directly, so I gave up trying to find a library and just manually sliced the markdown string based on the presence of the tag.

I still need to paginate the homepage, but that can wait till I've got enough posts to actually need pagination #lean.