On this blog sometimes it's just me writing, and sometimes I use AI. Often I'll take the AI and add my own edits.
To be transparent I decided to create an author, "Art Intellig". So then I need to format the author CMS list like this
By Art Intellig and Jonny Holden
<div class="flex flex-row">
<p>By <template v-for="author in item.authorsItems"> <span v-text="author.name" class="last:after:content-[''] before:content-['\00a0'] after:content-['\00a0''and']">Author</span></p>
</template> </div>
Note: In Tailwind, content-['_'] should create a blank space, but in Versoly it doesn't work. So we have to use the CSS non-breaking space \00a0, like \ in HTML.
For semantic HTML, we want everything in a single paragraph, <p>. The author.name is then wrapped in a <span>.
I need a space after By and after each name. I've used a pseudo class before:content-['\00a0'] to add a space before each name, which gives the effect I'm looking for. (Sometimes, you do the opposite of what you initially think!)
Next I want the word and between each author, but not after the last author. I've used the pseudo class after:content-['\00a0''and']. Note that each item in the class is in it's own '_' single quote marks.
To remove the and from after the last name we've got last:after:content-[''] which will override any other after:.