chore: add book callout in official docs

Author: galvez

docs/.vitepress/theme/HLM.vue

@@ -0,0 +1,39 @@
+<template>
+  <a class="hlm-callout" href="https://hire.jonasgalvez.com.br/happy-little-monoliths">
+    <span>The book is out!</span>
+    <img src="/cover-hlm.png">
+  </a>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.hlm-callout {
+  display: block;
+  margin-right: 2em;
+  margin-bottom: 3em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  span {
+    display: block;
+    margin-left: 0;
+    background: #e51784;
+    border-radius: 50px;
+    padding: 10px 20px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 14px;
+    margin-bottom: 1em;
+    align-self: flex-start;
+    @media (max-width: 960px) {
+      align-self: unset;      
+    }
+  }
+  img {
+    border: 3px solid #e51784;
+    width: 250px;
+  }
+}
+</style>

docs/.vitepress/theme/components/VPHero.vue

@@ -3,6 +3,7 @@ import { type Ref, inject } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
+import HLM from '../HLM.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -24,6 +25,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 <template>
   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
     <div class="container">
+      <HLM />
       <div class="main">
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
@@ -95,6 +97,10 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   order: 2;
   flex-grow: 1;
   flex-shrink: 0;
+  padding-top: 2.5em;
+  @media (max-width: 960px) {
+    padding-top: unset;
+  }
 }
 
 .VPHero.has-image .container {
@@ -114,7 +120,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   }
 
   .VPHero.has-image .main {
-    max-width: 592px;
+    max-width: 482px;
   }
 }
 

docs/.vitepress/theme/without-fonts.ts

@@ -1,3 +1,5 @@
+import { h } from 'vue'
+
 import './styles/vars.css'
 import './styles/base.css'
 import './styles/utils.css'
@@ -25,11 +27,16 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue'
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+import HLM from './HLM.vue'
 
 export { useSidebar } from './composables/sidebar'
 
 const theme: Theme = {
-  Layout,
+  Layout() {
+    return h(Layout, null, {
+      // 'home-hero-before': () => h(HLM),
+    })
+  },
   enhanceApp: ({ app }) => {
     app.component('Badge', VPBadge)
   }

docs/cover-hlm.png

@@ -5,20 +5,17 @@ layout: home
 hero:
   name: "@fastify/vite"
   text: "Titans Combined"
-  tagline: Cleanly and elegantly integrate <b><a href="https://fastify.dev/" target="_blank">Fastify</a></b> and <b><a href="https://vitejs.dev/" target="_blank">Vite</a></b> to create a <b>minimal</b>, <b>low overhead</b>, <b>blazing fast™</b> setup for <b>full stack monoliths</b>.
+  tagline: Cleanly and elegantly integrate <b><a href="https://fastify.dev/" target="_blank">Fastify</a></b> and <b><a href="https://vitejs.dev/" target="_blank">Vite</a></b> to create a <b>minimal</b>, <b>low overhead</b> setup for <b>full stack monoliths</b>.
   actions:
     - theme: brand
       text: Get Started
       link: /guide/getting-started
     - theme: brand
-      text: "@fastify/vue"
+      text: "Vue"
       link: /vue/index
     - theme: brand
-      text: "@fastify/react"
+      text: "React"
       link: /react/index
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/fastify/fastify-vite
   image:
     src: /fastify-vite.svg
     alt: "@fastify/vite"