fix(build): support custom logos

histoire-dev · Feb 17, 2022 · 7c7eec6 · 7c7eec6
1 parent bdd8f09
commit 7c7eec6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/packages/histoire/src/client/app/components/HomeView.vue b/packages/histoire/src/client/app/components/HomeView.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { histoireConfig } from '../util/config.js'
+import { histoireConfig, customLogos } from '../util/config.js'
 import HistoireLogo from '../assets/histoire.svg'
 
-const logoUrl = computed(() => histoireConfig.theme?.logo?.square ?? HistoireLogo)
+const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : HistoireLogo)
 </script>
 
 <template>

diff --git a/packages/histoire/src/client/app/components/app/AppLogo.vue b/packages/histoire/src/client/app/components/app/AppLogo.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { isDark } from '../../util/dark'
 import { computed } from 'vue'
-import { histoireConfig } from '../../util/config.js'
+import { histoireConfig, customLogos } from '../../util/config.js'
 
 import HistoireLogoDark from '../../assets/histoire-text-dark.svg'
 import HistoireLogoLight from '../../assets/histoire-text.svg'
 
 const logoUrl = computed(() => {
  if (isDark.value) {
- return histoireConfig.theme.logo?.dark ?? HistoireLogoDark
+ return histoireConfig.theme.logo?.dark ? customLogos.dark : HistoireLogoDark
  }
- return histoireConfig.theme.logo?.light ?? HistoireLogoLight
+ return histoireConfig.theme.logo?.light ? customLogos.light : HistoireLogoLight
 })
 
 const altText = computed(() => histoireConfig.theme.title + ' logo')

diff --git a/packages/histoire/src/client/app/util/config.ts b/packages/histoire/src/client/app/util/config.ts
@@ -1,5 +1,6 @@
 import type { HistoireConfig } from '../../../node/config'
 // @ts-expect-error virtual module
-import configRaw from '$histoire-config'
+import { config as configRaw, logos as logosRaw } from '$histoire-config'
 
 export const histoireConfig: HistoireConfig = configRaw
+export const customLogos: HistoireConfig['theme']['logo'] = logosRaw
diff --git a/packages/histoire/src/node/plugin.ts b/packages/histoire/src/node/plugin.ts
@@ -102,7 +102,14 @@ if (import.meta.hot) {
  return `export default () => {}`
  }
  if (id === RESOLVED_CONFIG_ID) {
- return `export default ${JSON.stringify(ctx.config)}`
+ let js = `export const config = ${JSON.stringify(ctx.config)}\n`
+ if (ctx.config.theme?.logo) {
+ for (const key in ctx.config.theme.logo) {
+ js += `import Logo_${key} from '${ctx.config.theme.logo[key]}'\n`
+ }
+ }
+ js += `export const logos = {${Object.keys(ctx.config.theme?.logo ?? {}).map(key => `${key}: Logo_${key}`).join(', ')}}\n`
+ return js
  }
  if (id === RESOLVED_THEME_ID) {
  let css = '*, ::before, ::after {'