docs: add some funny random hero images

Author: d-biehl

docs/.vitepress/theme/components/RandomHeroImage.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { withBase } from "vitepress";
+
+type HeroImage = {
+  src: string;
+  alt: string;
+};
+
+const HERO_IMAGES: HeroImage[] = [
+  { src: "/robotcode-toy-tray.png", alt: "RobotCode figurines on a tray" },
+  { src: "/robotcode-vintage.png", alt: "Vintage RobotCode poster" },
+  { src: "/robotcode-vintage-new.png", alt: "New vintage RobotCode artwork" },
+  { src: "/robotcode-golf.png", alt: "RobotCode playing golf" },
+  { src: "/robotcode-golf.png", alt: "RobotCode playing golf" },
+  { src: "/robotcode-rock.png", alt: "RobotCode playing rock music" },
+  { src: "/robotcode-soccer.png", alt: "RobotCode playing soccer" },
+  //   { src: "/robotcode-vintage-christmas.png", alt: "Festive RobotCode postcard" },
+];
+
+const hero = ref<HeroImage>(HERO_IMAGES[0]);
+
+const pickRandomHero = () => {
+  if (HERO_IMAGES.length <= 1) {
+    return;
+  }
+  const index = Math.floor(Math.random() * HERO_IMAGES.length);
+  hero.value = HERO_IMAGES[index];
+};
+
+onMounted(() => {
+  pickRandomHero();
+});
+</script>
+
+<template>
+  <div class="random-hero">
+    <img class="VPImage image-src" :src="withBase(hero.src)" :alt="hero.alt" loading="eager" decoding="async" />
+  </div>
+</template>
+
+<style scoped>
+.random-hero {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.image-src {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -4,6 +4,7 @@ import type { Theme } from "vitepress";
 import { inBrowser } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
+import RandomHeroImage from "./components/RandomHeroImage.vue";
 import "./style.css";
 import "lite-youtube-embed/src/lite-yt-embed.css";
 
@@ -14,11 +15,11 @@ if (inBrowser) {
 
 export default {
   extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    });
-  },
+  Layout: () =>
+    h(DefaultTheme.Layout, null, {
+      // Render a randomized hero image each time the page loads in the browser.
+      "home-hero-image": () => h(RandomHeroImage),
+    }),
   enhanceApp({ app, router, siteData }) {
     // ...
     enhanceAppWithTabs(app);

docs/index.md

@@ -6,7 +6,7 @@ hero:
   text: Robot Framework IDE & CLI, the friendly way.
   tagline: Language server, debugger, analyzer, REPL, and shareable profiles for IDE & CI
   image:
-    src: /robotcode-vintage.png
+    src: /robotcode-toy-tray.png
     alt: RobotCode Logo
   actions:
     - theme: brand