Add video to homepage hero

[karlhorky]

Hey @Newbie012 👋 Just a quick PR adding the video from your tweet (not working yet!)

video.mp4

---

Ah, I guess VitePress's default theme's home layout doesn't support HTML in there (see screenshot below): vuejs/vitepress#1340

Hm, I'm not entirely sure what to do here. Happy to follow some suggestions!

Alternative: Switch out the large logo for a GIF instead... 🤔 VitePress would support this

[vercel]

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

Name	Status	Preview	Comments	Updated
safeql	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 10, 2023 at 10:15AM (UTC)

[karlhorky]

@Newbie012 any opinion on this here?

In vuejs/vitepress#1340 they say that they would like to support a video, but who knows when this feature will appear.

Maybe we could still add a video (screen recording) on the homepage in the meantime? I think it would show quickly and simply what SafeQL does. Even just using your original video from the tweet would be a great start!

[Newbie012]

I like the idea, although I think we should show a simpler and shorter videos with higher quality (the one in Twitter has a quite poor quality) that still emphasizes the power of this tool.

There's this tweet as well - https://twitter.com/CoEliya/status/1570051268294463490?s=20&t=zn3SAQUNODabhAgat7aN1A

[karlhorky]

Ok good, sounds fine to me. Is this second Twitter video good enough in your opinion? Do you have the original file at a higher quality still?

Do you know VitePress well? (eg. creating a custom theme / layout based on the home layout) If not, do you have an alternate suggestion for how we can add a video to the homepage?

[Newbie012]

We have a few options:

1. Wait for vitepress for official support.
2. Copy and edit https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPHero.vue and then use it instead.
3. Add the video to the bottom of the page.

Since I'm not in a hurry, then I wouldn't mind going with option one.

I think I have the original video with a higher quality.
I'll have to check.

[karlhorky]

Seems like VitePress supports this now!

• feat(theme): add home-hero-image slot vuejs/vitepress#1528
• Hero image slot  vuejs/vitepress#1062

Although I'm not super familiar with VitePress and extending slots - not sure exactly how to implement this. I've asked in vuejs/vitepress#1340 (comment)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 26c3ebb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[karlhorky]

@Newbie012 Added a Layout.vue according to the recommendation by @brc-dd over here:

• Add Video / 2nd Hero Image to Home Layout vuejs/vitepress#1340 (comment)

Maybe ready for review now?

[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? 🤔

[brc-dd]

@karlhorky Update lock files too.

[karlhorky]

Ok, CI is passing now, not sure what needs to be done to trigger another deploy...

[brc-dd]

A recommendation: Split tagline (docs/index.md) to multiple lines (currently it's overlapping with the video):

  tagline: |
    An ESLint plugin for writing SQL queries
    in a type-safe way.

[karlhorky]

Looks like it's working, thanks!! Thanks for the help and improvements @brc-dd ! 🙌

Kapture.2023-03-10.at.11.13.22.mp4

[brc-dd]

Cool, sorry for the delay in replying on that thread.

[karlhorky]

No worries, thanks for getting back to it!

[Newbie012]

Thanks everyone , it looks great 😃

[karlhorky]

Glad to help, thanks for the review and merge!