feat(home): added feature groups & ability to set title

[itsWindows11]

Resolves #2788.

This allows you to add multiple sections ("groups") for features, could be useful for highlighting reviews along with other stuff.

Examples:

Without grouping:

layout: home
features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...

With grouping:

layout: home
features:
  - title: Sample Group
    features:
      - icon: 🛠️
        title: Simple and minimal, always
        details: Lorem ipsum...
      - icon:
          src: /cool-feature-icon.svg
        title: Another cool feature
        details: Lorem ipsum...
      - icon:
          dark: /dark-feature-icon.svg
          light: /light-feature-icon.svg
        title: Another cool feature
        details: Lorem ipsum...
  - features:
      - icon: 🛠️
        title: Simple and minimal, always
        details: Lorem ipsum...
      - icon:
          src: /cool-feature-icon.svg
        title: Another cool feature
        details: Lorem ipsum...
      - icon:
          dark: /dark-feature-icon.svg
          light: /light-feature-icon.svg
        title: Another cool feature
        details: Lorem ipsum...

[kiaking]

Thanks for the PR! But please hold on, I would like to consider bit more on design aspect of this.

[Ephenodrom]

@kiaking @itsWindows11 This is quite good! But to get the most out of it I would recommend to add some kind of before and after element for each feature set. This would make it possible to add text / image, so you can create a full customized homepage.

[itsWindows11]

That's kind of outside the scope of this PR, to be honest. Could even switch to just Vue components but currently this is a simple method using Frontmatter to implement something like this.

[itsWindows11]

I think a more feasible solution to this might be to let people add in the feature sections themselves by exporting the feature related components but dunno if it'll replace the Frontmatter approach I worked on here.

[maggie44]

This is an excellent idea. I came looking before creating a feature request and seems like it’s already under consideration.

My two cents would be similar to that last comment. It could be kept simpler, at least initially if the features were in an array like in the grouping example above, but instead of adding a title field allowing inserting the features sections on to the page ourselves, features[0], features[1] etc. It’s not so user friendly but instead of adding complexity it opens up opportunity for customising for those who want it, and can then add pre and post sections in html, opening up more possibilities.

Think the yaml may need to be different too, using ‘features’ twice is a little confusing. Maybe tagging. Keeping in mind ideally without it being a breaking change. Any ideas?

[maggie44]

Playing around a little further, I had forgotten that after the features yaml there isn't markdown compatibility and it doesn't render html or vue in the frame the width of the rest of the page. Think that throws out the idea of custom building without larger changes.

I like the title idea, but I worry it may look a little odd having them all stacked underneath unless each section was the full height of the window. Otherwise you have your title and subtitle of the main page appear and a title of the features section or two peeking up from the bottom.