Merge pull request #1560 from hey-api/docs/announcement

docs: add announcement component

.github/workflows/ci.yml

@@ -54,5 +54,5 @@ jobs:
         run: pnpm test:e2e
 
       - name: Publish preview packages
-        if: matrix.node-version == '22.11.0' && matrix.os == 'ubuntu-latest'
+        if: github.event_name == 'pull_request' && matrix.node-version == '22.11.0' && matrix.os == 'ubuntu-latest'
         run: ./scripts/publish-preview-packages.sh ${{ github.event.pull_request.base.ref }}

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,89 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme';
+
+const { Layout } = DefaultTheme;
+</script>
+
+<template>
+  <Layout>
+    <template #layout-top>
+      <div class="announcement">
+        <span>
+          Request a feature<span class="hide-sm"> for your business</span>
+        </span>
+        <a
+          aria-label="Send an email to Lubos"
+          href="mailto:[email protected]?subject=Priority%20Feature%20Request"
+          target="_blank"
+        >
+          Let's Talk
+        </a>
+      </div>
+    </template>
+  </Layout>
+</template>
+
+<style scoped>
+.announcement {
+  align-items: center;
+  background-color: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+  column-gap: 1.5rem;
+  display: flex;
+  font-size: var(--announcement-font-size);
+  height: var(--announcement-height);
+  justify-content: center;
+  left: 0;
+  line-height: 1;
+  min-height: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 31;
+}
+
+.announcement > a {
+  background-color: var(--vp-button-brand-bg);
+  border-radius: 4px;
+  color: var(--vp-button-brand-text);
+  font-size: 0.8em;
+  font-weight: 600;
+  padding: 0.4em 0.75em;
+}
+
+@media (width < 720px) {
+  .hide-sm {
+    display: none;
+  }
+}
+
+@media (width >= 720px) {
+  .show-sm {
+    display: none;
+  }
+}
+</style>
+
+<style>
+:root {
+  --announcement-font-size: 0.875rem;
+  --announcement-height: 2.25rem;
+  --vp-layout-top-height: var(--announcement-height);
+  --vp-nav-height: 48px;
+}
+
+@media (width < 960px) {
+  aside.VPSidebar {
+    top: 0 !important;
+  }
+}
+
+@media (width >= 1200px) {
+  :root {
+    --announcement-height: 2.5rem;
+  }
+}
+</style>

docs/.vitepress/theme/index.js → docs/.vitepress/theme/index.ts

@@ -1,6 +1,13 @@
 // eslint-disable-next-line simple-import-sort/imports
+import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
+
 // custom CSS must be imported after default theme to correctly apply styles
 import './custom.css';
 
-export default DefaultTheme;
+import Layout from './Layout.vue';
+
+export default {
+  Layout,
+  extends: DefaultTheme,
+} satisfies Theme;