fix: don't nest `<a>` elements in tag list

[wackbyte]

Closes #171. This matches other implementations of the demo.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
realworld	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 1, 2024 8:50pm

[benmccann]

I don't know. I kind of like that the tags are links. But maybe we could convert it from a list to some other type of element such as a button or something

[wackbyte]

such as a button or something

Interactive content includes <button>.

I had tried structuring it more like this...

<div class="preview-link">
    <h1><a href="...">{article.title}</a></h1>
    <p><a href="...">{article.description}</a></p>
    <span><a href="...">Read more...</a></span>
    <ul class="tag-list">
        {#each article.tagList as tag}
            <li class="tag-default tag-pill tag-outline"><a href="...">{tag}</a></li>
        {/each}
    </ul>
</div>

...which would function identically, but the provided stylesheet does not support this structure.

It's really unfortunate that we have to fight the shortcomings of the stylesheet so much—for example, ArticleMeta's "Delete Article" button is not inline with the previous button because the stylesheet does not expect a <form> here (one way this can be resolved is by using display: contents on the form). Another example is in Comment—the stylesheet expects an <i> in .mod-options if I remember correctly, but since we must use a <button> in the <form>, the desired style is copied verbatim at the bottom of the file.

[wackbyte]

Closing because this must be (and is, not accounting for alternative solutions) covered by #175 in order for the site to build with Svelte 5.