Allow list of details in VPFeature

[mariusheine]

Is your feature request related to a problem? Please describe.

I want to display a list of detail items for a feature inside the home layout of the default theme.

Describe the solution you'd like

Just make the details of a feature string | string[]. Example:

features:

  - title: A
    details:
      - detail 1
      - detail 2
      - detail 3

When a list of detail items is provided these items should be rendered as an unordered list

<template v-if="details">
  <ul v-if="Arrays.isArray(details)">
    <li v-for="(detail, index) of details" :key="index">{{detail}}</li>
  </ul>
  <p v-else class="details" v-html="details"></p>
</template

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Not super optimal, but since you can write HTML already, you can do:

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: |
      <ul>
      <li>detail 1</li>
      <li>detail 2</li>
      <li>detail 3</li>
      </ul>
---

<style>
/* move to separate file if you want - https://vitepress.dev/guide/extending-default-theme#customizing-css */
.VPFeatures ul {
  padding-left: 1.2rem;
  list-style: disc;
}
</style>

https://stackblitz.com/edit/vite-j4beubv6?file=docs/index.md

If there is much demand we can consider adding it. Till then this workaround should be fine IMO.

[mariusheine]

@brc-dd Thx for the hint. We have been trying it and everything worked nicely in the dev environment but as soon as we did the production build and started the page in the preview mode the lists were not displayed. In the console there was a hydration mismatch error. Surprisingly when going to another page and back to the homepage via the navigation the lists have been rendered.

Do you have an idea what could be the issue? I will try to do a small reproduction repo soon.

[brc-dd]

Ah, right. details: ... is rendered in a p element, adding ul to p is not allowed by HTML.

[mariusheine]

@brc-dd I adjusted you stackblitz to show the issue: https://stackblitz.com/edit/vite-giofccun

Just run pnpm docs:build && pnpm docs:preview

Following the links will show the lists when you come back to the start page.

[brc-dd]

Bit hacky, but if you don't need it often, you can do this:

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: |
      <span role="list">
      <span role="listitem">detail 1</span>
      <span role="listitem">detail 2</span>
      <span role="listitem">detail 3</span>
      </span>
---

<style>
.VPFeatures span[role=list] {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  padding: 0 1rem;
}

.VPFeatures span[role=listitem]:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--vp-c-text-1);
}
</style>

https://stackblitz.com/edit/vite-j4beubv6?file=docs/index.md

[mariusheine]

@brc-dd Yeah of course this might work but it is really bad in terms of accesibility, semantics and basically the styling (e.g. if we enable tailwinds prose styles)

Of course we could use it but using my approach feels more compliant with the whole html standard.

[mariusheine]

@brc-dd Thx a lot!