Merge pull request FlowFuse#1026 from FlowFuse/workshop-advert

Events Banner - Allow for advertising of Dashboard events in the docs

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,17 @@
+<script setup>
+import AdvertBanner from '../../components/AdvertBanner.vue';
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #layout-top>
+        <AdvertBanner href="https://flowfuse.com/webinars/2024/workshop-dashboard/">
+            <b>Dashboard 2.0 Workshop: </b> Join us for a free workshop
+            on how to use Dashboard 2.0 in Node-RED on July 2nd - <span class="underline">Register Now</span>
+        </AdvertBanner>
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/dashboard.css

@@ -32,4 +32,8 @@ img + em {
 
 .vp-doc h3 {
     margin-bottom: 16px;
+}
+
+.underline {
+    text-decoration: underline;
 }

docs/.vitepress/theme/index.js

@@ -2,6 +2,9 @@ import DefaultTheme from 'vitepress/theme'
 import { onMounted, watch, nextTick } from 'vue';
 import { useRoute } from 'vitepress';
 import mediumZoom from 'medium-zoom';
+
+import Layout from './Layout.vue'
+
 // override options: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 import './dashboard.css'
 import './overlay.css'
@@ -12,7 +15,7 @@ import DynamicPropsTable from '../../components/DynamicPropsTable.vue'
 import ControlsTable from '../../components/ControlsTable.vue'
 
 export default {
-    extends: DefaultTheme,
+    Layout,
     setup() {
         const route = useRoute();
         const initZoom = () => {

docs/components/AdvertBanner.vue

@@ -0,0 +1,43 @@
+<template>
+    <a class="advert-banner" :href="href">
+        <slot></slot>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        href: {
+            type: String,
+            required: true
+        }
+    }
+}
+</script>
+
+<style>
+body {
+    --vp-layout-top-height: 42px;
+}
+.advert-banner {
+    height: var(--vp-layout-top-height);
+    line-height: var(--vp-layout-top-height);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--vp-c-flowfuse);
+    text-align: center;
+    color: var(--vp-button-brand-text);
+    z-index: 15;
+    font-size: 0.875rem;
+}
+.advert-banner:hover {
+    cursor: pointer;
+    background-color: var(--vp-c-flowfuse-dark);
+}
+.VPContent {
+    margin-top: var(--vp-layout-top-height);
+}
+
+</style>