fix(app): conditionally access globals (#99)

* conditionally access globals

* add some more conditional global access

* some more optional rendering for globals

components/Logo.vue

@@ -2,7 +2,7 @@
 const appConfig = useAppConfig();
 
 const logo = computed(() => {
-	return appConfig.globals.logo_on_dark_bg;
+	return appConfig.globals?.logo_on_dark_bg;
 });
 
 const props = defineProps({

components/navigation/MobileMenu.vue

@@ -69,7 +69,7 @@ watch(
 					<NuxtLink href="/">
 						<Logo class="h-6 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" class="pb-4 mt-2">
+					<VText v-if="globals?.tagline" class="pb-4 mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>

components/navigation/TheFooter.vue

@@ -68,7 +68,7 @@ const { data: form } = await useAsyncData(
 					<NuxtLink href="/">
 						<Logo class="h-8 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" text-color="light" class="mt-2">
+					<VText v-if="globals?.tagline" text-color="light" class="mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>
@@ -106,7 +106,7 @@ const { data: form } = await useAsyncData(
 		<div class="pt-6 mx-auto border-t dark:border-t-gray-700 max-w-7xl md:flex md:items-center md:justify-between">
 			<div class="flex items-center justify-center space-x-6 md:order-last md:mb-0">
 				<NuxtLink
-					v-for="link in globals.social_links"
+					v-for="link in globals?.social_links"
 					:key="link.url"
 					:href="link.url"
 					class="w-6 h-6 text-white"
@@ -119,7 +119,9 @@ const { data: form } = await useAsyncData(
 			<div class="mt-8 md:mt-0 md:order-1">
 				<span class="mt-2 text-gray-600 dark:text-gray-400">
 					Copyright © 1988 - {{ new Date().getFullYear() }}
-					<NuxtLink href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">{{ globals.title }}.</NuxtLink>
+					<NuxtLink v-if="globals?.title" href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">
+						{{ globals.title }}.
+					</NuxtLink>
 					All rights reserved.
 				</span>
 				<!-- You're free to remove this footer if you want. But we'd appreciate it if you keep the credits. -->

components/navigation/TheHeader.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const {
-	theme,
-	globals: { title },
-} = useAppConfig();
+const { theme, globals } = useAppConfig();
 
 const {
 	data: navigation,
@@ -54,7 +51,7 @@ const {
 		<div class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
 			<NuxtLink href="/" class="py-2">
 				<Logo class="h-6 text-white" />
-				<span class="sr-only">{{ title }}</span>
+				<span v-if="globals?.title" class="sr-only">{{ globals.title }}</span>
 			</NuxtLink>
 			<nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
 				<NavigationMenuItem v-for="item in navigation?.items" :key="item.id" :item="item" />

pages/[...permalink].vue

@@ -190,7 +190,7 @@ const metadata = computed(() => {
 	return {
 		title: pageData?.seo?.title ?? pageData?.title ?? undefined,
 		description: pageData?.seo?.meta_description ?? pageData?.summary ?? undefined,
-		image: globals.og_image ? fileUrl(globals.og_image) : undefined,
+		image: globals?.og_image ? fileUrl(globals.og_image) : undefined,
 		canonical: pageData?.seo?.canonical_url ?? url,
 	};
 });