content warning prompt for routes

src/components/shared/warning-prompt.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import { storage } from 'src/utilities/fetch'
+
+import type { WarningModal } from 'content/routes.js'
+
+import EmbedableContent from './embedable-content.vue'
+
+const props = defineProps<{
+  storageId: string
+  warning: WarningModal
+}>()
+
+const emits = defineEmits<{
+  (e: 'acknowledged'): void
+  (e: 'canceled'): void
+}>()
+
+const router = useRouter()
+const rememberChecked = defineModel('rememberChecked', { type: Boolean })
+
+const onLeave = (event: Event) => {
+  event.preventDefault()
+  router.push({ path: props.warning?.leave?.url || '/' })
+}
+
+const onAcknowledge = (event: Event) => {
+  event.preventDefault()
+  console.log(rememberChecked.value)
+  if (rememberChecked.value) {
+    storage.write(`${props.storageId}::rememberWarning`, true)
+  }
+
+  emits('acknowledged')
+}
+</script>
+
+<template lang="pug">
+.warning-prompt
+  EmbedableContent(
+    :content='warning.prompt'
+  )
+  .actions
+    button(
+      @click='onLeave($event)'
+    )
+      span {{ warning.leave.text }}
+    button(
+      @click='onAcknowledge($event)'
+    )
+      span {{ warning.acknowledge }}
+    .input.labeled-checkbox
+      label(
+        for='warning-prompt-checkbox'
+      ) {{ warning.remember }}
+      input(
+        type='checkbox'
+        name='warning-prompt-checkbox'
+        id='warning-prompt-checkbox'
+        v-model='rememberChecked'
+      )
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/content-env.d.ts

@@ -1,4 +1,17 @@
 declare module 'content/routes.js' {
+  /**
+   * Defines the structure of the warning modal that shows when a route has a content warning of some sort.
+   */
+  export type WarningModal = {
+    prompt: string
+    leave: {
+      url: string,
+      text: string,
+    },
+    acknowledge: string,
+    remember: string,
+  }
+
   /**
    * Defines the available `views` that can be used to set up routes.
    * Each `Template` has different configuration options
@@ -16,6 +29,7 @@ declare module 'content/routes.js' {
     stylesheetUrls: string[]
     template: Template
     title: string
+    warning: boolean | WarningModal
   }
 
   /**
@@ -88,6 +102,19 @@ declare module 'content/routes.js' {
   } | {
     children: HeaderEntry[]
   })
+  
+  /**
+   * Defines global values for the site.
+   */
+  type SiteGlobals = {
+    id: string
+    warning: WarningModal
+  }
+
+  /**
+   * Global values the site uses.
+   */
+  const siteGlobals: SiteGlobals
 
   /**
    * The header the app uses.

src/main.vue

@@ -3,26 +3,51 @@ import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getCurrentRoute } from 'src/utilities/vuetils'
+import { storage } from './utilities/fetch'
 import { useRouteStore } from 'src/routes'
 
-import HeaderLink from 'src/components/shared/header-link.vue'
+import type { WarningModal } from 'content/routes.js'
 
-const ready = ref(false)
+import HeaderLink from 'src/components/shared/header-link.vue'
+import WarningPrompt from 'src/components/shared/warning-prompt.vue'
 
 const router = useRouter()
 const routeStore = useRouteStore()
 const headerConfig = routeStore._header
+const globalConfig = routeStore._globals
 
-const refresh = async () => {
-  const currentRoute = getCurrentRoute()
-  const routeConfig = routeStore._routes[currentRoute.path]
+let currentRoute = getCurrentRoute()
+let routeConfig = routeStore._routes[currentRoute.path]
+let rememberWarning = false
 
+const ready = ref(false)
+const acknowledged = ref(false)
+const storageId = ref('')
+const warning = ref({} as WarningModal)
+
+const determineWarning = () => {
+  if (!routeConfig.warning || routeStore.doesRouteRememberWarning(currentRoute.path)) {
+    acknowledged.value = true
+    return
+  }
+  rememberWarning = storage.read(`${storageId.value}::rememberWarning`) || false
+  if (rememberWarning) {
+    acknowledged.value = true
+    routeStore.rememberRouteWarning(currentRoute.path)
+    return
+  }
+  warning.value = routeConfig.warning === true 
+    ? globalConfig.warning
+    : routeConfig.warning
+}
+
+const determineStylesheets = (stylesheetUrls?: string[]) => {
   const staleStylesheets = document.head.querySelectorAll('link[rel="stylesheet"]')
   staleStylesheets.forEach(stylesheet => {
     document.head.removeChild(stylesheet)
   })
 
-  routeConfig?.stylesheetUrls?.forEach(stylesheet => {
+  stylesheetUrls?.forEach(stylesheet => {
     const newElement = document.createElement('link')
     newElement.setAttribute('rel', 'stylesheet')
     newElement.setAttribute('href', stylesheet)
@@ -30,12 +55,29 @@ const refresh = async () => {
   })
 }
 
+const refresh = async () => {
+  ready.value = false
+  acknowledged.value = false
+  currentRoute = getCurrentRoute()
+  routeConfig = routeStore._routes[currentRoute.path]
+  storageId.value = `${globalConfig.id}::${currentRoute.path}`
+
+  determineWarning()
+  determineStylesheets(routeConfig.stylesheetUrls)
+
+  ready.value = true
+}
+
+const onAcknowledgedWarning = () => {
+  acknowledged.value = true
+  routeStore.rememberRouteWarning(currentRoute.path)
+}
+
 onMounted(async () => {
   await refresh()
   router.afterEach(async (to, from) => {
     await refresh()
   })
-  ready.value = true
 })
 </script>
 
@@ -49,11 +91,19 @@ onMounted(async () => {
         v-for='entry in headerConfig'
         :entry='entry'
       )
-  #main-entry(
+  main(
     v-if='ready'
   )
-    main
+    #main-entry(
+      v-if='acknowledged'
+    )
       router-view
+    WarningPrompt(
+      v-else
+      :storageId='storageId'
+      :warning='warning'
+      @acknowledged='onAcknowledgedWarning()'
+    )
 </template>
 
 <style scoped lang="sass">

src/routes.ts

@@ -1,6 +1,16 @@
 import { defineStore } from 'pinia'
-import { type RouteRecordRaw, type Router } from 'vue-router'
-import { header, routes, type HeaderEntry, type ProjectListDefinition, type RouteDefinition, type Template, GalleryListDefinition } from 'content/routes.js'
+import { type RouteRecordRaw } from 'vue-router'
+import {
+  header,
+  routes,
+  siteGlobals,
+  type GalleryListDefinition,
+  type HeaderEntry,
+  type ProjectListDefinition,
+  type RouteDefinition,
+  type SiteGlobals,
+  type Template,
+} from 'content/routes.js'
 
 const markdownBody = () => import ('./views/markdown.vue')
 const projectListBody = () => import ('./views/project-list.vue')
@@ -52,9 +62,17 @@ export const useRouteStore = defineStore('routeStore', {
   state: () => ({
     _header: [] as HeaderEntry[],
     _routes: {} as Record<string, RouteRecordRaw & RouteDefinition>,
+    _globals: {} as SiteGlobals,
+    
+    _routesAlreadyWarned: {} as Record<string, boolean>
   }),
   actions: {
-
+    doesRouteRememberWarning(route: string) {
+      return this._routesAlreadyWarned[route]
+    },
+    rememberRouteWarning(route: string) {
+      this._routesAlreadyWarned[route] = true
+    }
   },
 })
 
@@ -73,6 +91,7 @@ export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[]) =>
     }
   })
   routeStore._header = header
+  routeStore._globals = siteGlobals
 }
 
 export type RouteStoreDefinition = Omit<