Include custom app header (#233)

src/components/AppFooter/AppFooter.vue

@@ -6,6 +6,7 @@
     <SanitizedHTML
       class="flex flex-col max-w-screen-xl mx-auto p-4 lg:p-8"
       :html="instanceStore.customFooter"
+      :addTags="['style']"
     />
   </footer>
 </template>

src/components/CustomAppHeader/CustomAppHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="custom-app-header bg-transparent-black-100">
+    <SanitizedHTML
+      :html="instanceStore?.customHeader ?? ''"
+      :addTags="['style']"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { useInstanceStore } from "@/stores/instanceStore";
+import SanitizedHTML from "../SanitizedHTML/SanitizedHTML.vue";
+
+const instanceStore = useInstanceStore();
+</script>
+<style scoped></style>

src/components/SanitizedHTML/SanitizedHTML.vue

@@ -4,23 +4,28 @@
 </template>
 <script setup lang="ts">
 import DOMPurify from "dompurify";
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 const props = withDefaults(
   defineProps<{
     html: string;
     removeInlineStyles?: boolean;
+    addTags?: string[];
   }>(),
   {
     removeInlineStyles: false,
+    addTags: () => [],
   }
 );
 
 const sanitizeConfig = {
   FORBID_ATTR: props.removeInlineStyles ? ["style"] : [],
-  ADD_TAGS: ["iframe"],
+  ADD_TAGS: ["iframe", ...props.addTags],
+  // needed for <style> tags
+  // https://github.com/cure53/DOMPurify/issues/257#issuecomment-346384997
+  FORCE_BODY: props.addTags?.includes("style"),
 };
 
-const sanitizedHtml = computed(() =>
-  DOMPurify.sanitize(props.html, sanitizeConfig)
-);
+const sanitizedHtml = computed(() => {
+  return DOMPurify.sanitize(props.html, sanitizeConfig);
+});
 </script>

src/layouts/DefaultLayout.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="top" class="min-h-screen pt-18 flex flex-col">
     <SkipNavLink href="#main" />
+    <slot name="custom-header" />
     <AppHeader class="app-header top-0 w-full z-20 sticky left-0" />
 
     <main id="main" class="flex-1 flex flex-col" tabindex="-1">
       <slot />
     </main>
+    <slot name="footer" />
     <Transition name="fade">
       <a
         v-show="showScrollToTop"
@@ -24,6 +26,7 @@ import AppHeader from "@/components/AppHeader/AppHeader.vue";
 import { ChevronUpIcon } from "@/icons";
 import { useWindowScroll } from "@vueuse/core";
 import SkipNavLink from "@/components/SkipNavLink/SkipNavLink.vue";
+import { useInstanceStore } from "@/stores/instanceStore";
 
 const { y: scrollY } = useWindowScroll();
 

src/pages/HomePage/HomePage.vue

@@ -1,5 +1,8 @@
 <template>
   <DefaultLayout>
+    <template #custom-header>
+      <CustomAppHeader v-if="instanceStore.customHeader" />
+    </template>
     <SignInRequiredNotice
       v-if="isReady && !canSearchAndBrowse && !instanceStore.isLoggedIn"
       class="my-8 mx-4"
@@ -61,6 +64,7 @@ import FeaturedAssetCard from "@/components/FeaturedAssetCard/FeaturedAssetCard.
 import SignInRequiredNotice from "./SignInRequiredNotice.vue";
 import Notification from "@/components/Notification/Notification.vue";
 import AppFooter from "@/components/AppFooter/AppFooter.vue";
+import CustomAppHeader from "@/components/CustomAppHeader/CustomAppHeader.vue";
 
 const page = ref<StaticContentPage | null>(null);
 const instanceStore = useInstanceStore();

src/pages/StaticContentPage/StaticContentPage.vue

@@ -1,5 +1,8 @@
 <template>
   <DefaultLayout>
+    <template #custom-header>
+      <CustomAppHeader v-if="instanceStore.customHeader" />
+    </template>
     <div
       v-if="page"
       class="static-page__content p-4 lg:p-8 mx-auto flex-1 w-full max-w-screen-xl"
@@ -11,17 +14,23 @@
         <SanitizedHTML :html="page.content ?? ''" class="w-full" />
       </div>
     </div>
-    <AppFooter />
+    <template #footer>
+      <AppFooter v-if="instanceStore.customFooter" />
+    </template>
   </DefaultLayout>
 </template>
 <script setup lang="ts">
 import DefaultLayout from "@/layouts/DefaultLayout.vue";
+import CustomAppHeader from "@/components/CustomAppHeader/CustomAppHeader.vue";
 import SanitizedHTML from "@/components/SanitizedHTML/SanitizedHTML.vue";
 import AppFooter from "@/components/AppFooter/AppFooter.vue";
 import { ref, watch } from "vue";
 import { ApiStaticPageResponse } from "@/types";
+import { useInstanceStore } from "@/stores/instanceStore";
 import api from "@/api";
 
+const instanceStore = useInstanceStore();
+
 const props = defineProps<{
   pageId: number;
 }>();

src/stores/instanceStore.ts

@@ -35,6 +35,7 @@ const createState = () => ({
     userCanSearchAndBrowse: false,
     templates: [],
   }),
+  customHeader: ref<string | null>(null),
   customFooter: ref<string | null>(null),
 });
 
@@ -89,6 +90,7 @@ const actions = (state: ReturnType<typeof createState>) => ({
       state.collections.value = normalizeAssetCollections(
         apiResponse.collections
       );
+      state.customHeader.value = apiResponse.customHeader;
       state.customFooter.value = apiResponse.customFooter;
 
       // add id to searchable field object from api response

src/types/index.ts

@@ -521,6 +521,7 @@ export interface ApiInstanceNavResponse {
   templates: Record<number, string>; // { templateId: templateName }
   featuredAssetId: string; // featured asset for homepage
   featuredAssetText: string; // text appearing above the featured asset
+  customHeader: string | null; // html
   customFooter: string | null; // html
 }