Add video to homepage hero (#26)

* Add video to homepage hero

* Add Layout with video

* Update version

* Update lockfile

* Fix text overlapping with video

* Autoplay, loop and mute video

* Improve responsive design

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,27 @@
+<script setup>
+import DefaultTheme from "vitepress/theme";
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #home-hero-image>
+      <video autoplay loop muted src="/video.mp4" class="video" />
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style scoped>
+.video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-height: 192px;
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  .video {
+    max-height: unset;
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,4 +1,8 @@
 import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
 import "./custom.css";
 
-export default DefaultTheme;
+export default {
+  ...DefaultTheme,
+  Layout: Layout,
+};

docs/index.md

@@ -4,7 +4,9 @@ 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.
+  tagline: |
+    An ESLint plugin for writing SQL queries
+    in a type-safe way.
   image:
     src: /ts-pg-logo.svg
     alt: ts-safeql

docs/package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "devDependencies": {
     "@algolia/client-search": "4.14.2",
-    "vitepress": "1.0.0-alpha.13",
+    "vitepress": "1.0.0-alpha.49",
     "vue": "3.2.39"
   }
 }