Splash.vue

<template>
  <component
    :is="as"
    class="tw-bg-cover tw-relative"
    :style="{ backgroundImage: `url('${selectedImage.image}')` }"
  >
    <slot />
    <a
      :href="selectedImage.source"
      target="_blank"
      class="tw-absolute tw-left-6 tw-bottom-6 tw-text-white tw-font-bold tw-no-underline"
      style="
        text-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
      "
    >
      {{ selectedImage.author }}
    </a>
  </component>
</template>

<script lang="ts" setup>
import * as splashImages from './_splash'
import { computed } from 'vue'
type ImageName = keyof typeof splashImages

const props = withDefaults(
  defineProps<{
    as?: string
    image?: ImageName | undefined
  }>(),
  {
    as: 'div',
    image: undefined,
  },
)

function randomKey<T extends object>(obj: T): keyof T {
  const keys = Object.keys(obj)
  return keys[(keys.length * Math.random()) << 0] as keyof T
}

const selectedImage = computed(() => splashImages[props.image ?? randomKey(splashImages)])
</script>