Add Video / 2nd Hero Image to Home Layout

[karlhorky]

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

Currently, the home layout only allows for a single image, which may not be enough for some projects (eg. https://www.safeql.dev/ ), who may want to have one large image and then also a video of the product, both in the upper hero section of the page.

Describe the solution you'd like

It would be nice to have a more customizable / flexible way to output arbitrary (html or markdown) content, eg what I tried with the tagline here:

---
layout: home

hero:
  name: SafeQL
  text: Write SQL Queries With Confidence
  tagline: SafeQL is an ESLint plugin for writing SQL queries in a type-safe way.<br><br><video src="...">

Describe alternatives you've considered

If that's not an option, then having another configuration option like image2 would be an alternative.

Another alternative that I considered (but could not figure out) would be to somehow be able to extend ONLY this single section of that particular template, similar to what is being talked about here:

• https://github.com/vuejs/vitepress/issues/235
• https://github.com/vuejs/vitepress/issues/235#issuecomment-1178642033

Additional context

No response

Validations

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

[kiaking]

I like the idea of adding video feature, but unless we change the design I think user should choose either image or video, not both, for the Hero component. I don't think I can come up with a decent design where both logo and video fit nicely together (not enough space).

For the same reason, I'm not thinking of adding "image2" as well, because the design is not made for having 2 images.

So something like Nuxt Content site has is cool I think. https://content.nuxtjs.org

For more complex usage, such as having 2 images, should be done in customization as you mentioned. Because you need define how they're aligned, spaced, gaps, and such and it's way complicated to handle in config option 😅

But again, let's add Video feature!

I was thinking to support famous video platform like YouTube and Vimeo to embed it. But do you think <video> tag is required? Or embedding external video service URL is enough 👀

[brc-dd]

We can just provide a slot (#1062) with default content being the image. Users can then customize it to add video, etc.?

[kiaking]

Yes! For the customized image, I think that works. Video embedding I meant was, it would be cool if we can do this in frontmatter.

---
layout: home
video: https://youtube-url.com/...
---

And then the default theme will handle it and create beautiful looking component. Like it has Thumbnail and play button, and when user clicks it, it opens modal and make video decent amount of size and such 👀

But as you mentioned I think we can start from #1062 and I think it should cover many usecases 👍

[karlhorky]

Thanks for the feedback! I will watch #1062 :)

But do you think <video> tag is required? Or embedding external video service URL is enough 👀

It would be nice to have the flexibility of a <video> tag if possible. Although I do think that some users would embed an external video as well.

[karlhorky]

Now that @g4rry420's https://github.com/vuejs/vitepress/pull/1528 PR has been merged and https://github.com/vuejs/vitepress/issues/1062 has been closed, does this offer a way to also include a <video> tag in this slot?

I'm still pretty new to VitePress - would it be possible to get an example of how to do this?

Thanks to @g4rry420 and @brc-dd for the PR and merge!

[brc-dd]

Refer this: https://vitepress.dev/guide/extending-default-theme#layout-slots

<script setup>
import DefaultTheme from 'vitepress/theme'
</script>

<template>
  <DefaultTheme.Layout>
    <template #home-hero-image>
      Put your video here ...
    </template>
  </DefaultTheme.Layout>
</template>

[karlhorky]

@brc-dd thanks! I've implemented over here:

• ts-safeql/safeql@cef3b5d (#26)

This is part of this PR:

• https://github.com/ts-safeql/safeql/pull/26

[karlhorky]

Oh, the deploy preview for that does not show the video, did I do something wrong?

I thought it would take place of the image on the right. Or maybe VitePress 1.0.0-alpha.13 is too old and needs to be updated? 🤔

Here's my fork / branch: https://github.com/karlhorky/safeql/tree/add-video-to-homepage

[brc-dd]

I think you forgot to bump vitepress' version there?

[karlhorky]

Looks like it's working, thanks!!

https://user-images.githubusercontent.com/1935696/224289567-de011e5e-3f78-48af-b75f-47452ddef485.mp4

Closing this issue.