Logo links to Developer Portal

Author: laurensgroeneveld

vuepress/docs/.vuepress/config.ts

@@ -25,7 +25,6 @@ export default defineUserConfig({
   ],
 
   theme: bccCodeTheme({
-    home: '/',
     logoDark: 'logoWhite.png',
     logo: 'logo.png',
     repo: 'bcc-code',

vuepress/docs/.vuepress/styles/index.scss

@@ -14,10 +14,6 @@ html.dark {
 }
 
 // Overwrite default theme styles
-.site-name  {
-  display: none;
-}
-
 .sidebar-heading {
   text-transform: capitalize;
 }

vuepress/docs/.vuepress/theme/components/NavbarBrand.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ClientOnly, withBase } from '@vuepress/client'
+import { computed, h } from 'vue'
+import type { FunctionalComponent } from 'vue'
+import { useDarkMode, useThemeLocaleData } from '@vuepress/theme-default/lib/client/composables/index'
+
+const themeLocale = useThemeLocaleData()
+const isDarkMode = useDarkMode()
+
+const navbarBrandLogo = computed(() => {
+  if (isDarkMode.value && themeLocale.value.logoDark !== undefined) {
+    return themeLocale.value.logoDark
+  }
+  return themeLocale.value.logo
+})
+const NavbarBrandLogo: FunctionalComponent = () => {
+  if (!navbarBrandLogo.value) return null
+  const img = h('img', {
+    class: 'logo',
+    src: withBase(navbarBrandLogo.value),
+    alt: "BCC",
+  })
+  if (themeLocale.value.logoDark === undefined) {
+    return img
+  }
+  // wrap brand logo with <ClientOnly> to avoid ssr-mismatch
+  // when using a different brand logo in dark mode
+  return h(ClientOnly, () => img)
+}
+</script>
+
+<template>
+  <a href="https://developer.bcc.no">
+    <NavbarBrandLogo />
+  </a>
+</template>

vuepress/docs/.vuepress/theme/theme.ts

@@ -14,6 +14,7 @@ export const bccCodeTheme = (options: DefaultThemeOptions): Theme => {
 
     alias: {
       '@theme/HomeFeatures.vue': path.resolve(__dirname, './components/HomeFeatures.vue'),
+      '@theme/NavbarBrand.vue': path.resolve(__dirname, './components/NavbarBrand.vue'),
     },
   }
 };