merge blog-list and gallery-list

projects/frontend/src/routes.ts

@@ -12,15 +12,14 @@ import type {
 } from '@goldenwere/mackenzii-types'
 
 const markdownBody = () => import ('./views/markdown/markdown.vue')
-const blogListBody = () => import ('./views/blog/blog-list.vue')
 const blogViewBody = () => import ('./views/blog/blog-view.vue')
-const galleryListBody = () => import ('./views/gallery/gallery-list.vue')
 const galleryViewBody = () => import ('./views/gallery/gallery-view.vue')
+const mediaListBody = () => import ('./views/shared/media-list.vue')
 
 export const templates: Record<TemplateType, () => Promise<any>> = {
   'markdown': markdownBody,
-  'blog-list': blogListBody,
+  'blog-list': mediaListBody,
-  'gallery-list': galleryListBody,
+  'gallery-list': mediaListBody,
 }
 
 export const createRoutes = (): RouteRecordRaw[] => {

projects/frontend/src/views/blog/blog-list.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import type {
-  BlogEntry,
-  BlogListDefinition,
-  ListWithTags,
-  ResolvedListEntries,
-} from '@goldenwere/mackenzii-types'
-
-import { fetchAndParseYaml, fetchConfigsFromList } from 'src/utilities/fetch'
-import { getCurrentRoute } from 'src/utilities/vuetils'
-import { useRouteStore } from 'src/routes'
-
-import FilterPanel from 'src/components/shared/filter-panel.vue'
-import BlogTile from './blog-tile.vue'
-
-type BlogList = ListWithTags<BlogEntry>
-
-/**
- * A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
- * in order for the app to effectively display the entries.
- */
-type BlogDisplayedEntries = ResolvedListEntries<BlogEntry & {
-  /**
-   * specifies whether the entry is hidden by the tags selected by a visitor
-   */
-  isHidden?: boolean
-}>
-
-const entries = ref({} as BlogDisplayedEntries)
-const ready = ref(false)
-const currentRoute = getCurrentRoute()
-const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path] as BlogListDefinition
-const config = ref(null as BlogList | null)
-const viewPath = computed(() => `${currentRoute.path}/view`)
-
-/**
- * Handler for a tag being selected;
- * updates the visibility state of the current entries
- * @param tagsToggled: the tags currently toggled in the filter panel
- */
-const onToggledTagsChanged = async (tagsToggled: string[]) => {
-  if (tagsToggled.length < 1) {
-    Object.keys(entries.value).forEach(async entryId => {
-      (await entries.value[entryId]).isHidden = false
-    })
-  } else {
-    Object.keys(entries.value).forEach(async entryId => {
-      (await entries.value[entryId]).isHidden = !(await entries.value[entryId]).tags?.some(own => tagsToggled.includes(own))
-    })
-  }
-}
-
-onMounted(async () => {
-  let listConfig = await fetchAndParseYaml<BlogList>(routeConfig.config)
-  const list = await fetchConfigsFromList<BlogEntry>(listConfig)
-  config.value = listConfig
-  entries.value = list.entries
-  document.title = routeConfig.fullTitle
-  ready.value = true
-})
-</script>
-
-<template lang="pug">
-.template.blog-list
-  Transition
-    .blog(
-      v-if='ready'
-    )
-      Transition(
-        v-for='(entry, id) in entries'
-      )
-        BlogTile(
-          v-if='!entry.isHidden || !config.removeFromView'
-          :class='{ hidden: entry.isHidden && !config.removeFromView }'
-          :id='id'
-          :viewPath='viewPath'
-          :isInternal='true'
-          :entry='entry'
-        )
-  Transition
-    FilterPanel(
-      v-if='ready && !!config.tags'
-      :tags='config.tags'
-      @toggledTagsChanged='onToggledTagsChanged($event)'
-    )
-</template>
-
-<style scoped lang="sass">
-
-</style>

projects/frontend/src/views/shared/media-list.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import type {
-  GalleryEntry,
+  ConfigfulRouteDefinition,
-  GalleryListDefinition,
   ListWithTags,
+  MediaEntry,
   ResolvedListEntries,
 } from '@goldenwere/mackenzii-types'
 import { fetchAndParseYaml, fetchConfigsFromList, storage } from 'src/utilities/fetch'
@@ -11,37 +11,52 @@ import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
 import FilterPanel from 'src/components/shared/filter-panel.vue'
-import GalleryTile from './gallery-tile.vue'
+import GalleryTile from '../gallery/gallery-tile.vue'
+import BlogTile from '../blog/blog-tile.vue'
 
-type GalleryList = ListWithTags<GalleryEntry>
+type MediaList = ListWithTags<MediaEntry>
 
 /**
- * A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
+ * A wrapper around {@link ResolvedListEntries} for the app's use only which adds additional fields
  * in order for the app to effectively display the entries.
  */
-type GalleryDisplayedEntries = ResolvedListEntries<GalleryEntry & {
+type DisplayedEntries = ResolvedListEntries<MediaEntry & {
   /**
    * specifies whether the entry is hidden by the tags selected by a visitor
    */
   isHidden?: boolean
 }>
 
-const entries = ref({} as GalleryDisplayedEntries)
 const ready = ref(false)
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition
+const routeConfig = routeStore._routes[currentRoute.path] as ConfigfulRouteDefinition
-const config = ref(null as GalleryList | null)
+
 const globalConfig = routeStore._globals
 const storageId = `${globalConfig.id}`
 const viewPath = computed(() => `${currentRoute.path}/view`)
-const hasWarnings = computed(async () => !!Object.values(entries.value).find(async other => !!(await other).warning))
+
+const config = ref(null as MediaList | null)
+const entries = ref({} as DisplayedEntries)
+const hasWarnings = ref(false)
 const hideWarnings = defineModel('hideWarnings', { type: Boolean })
+const template = ref(routeConfig.template)
+const className = computed(() => {
+  switch(template.value) {
+    case 'gallery-list': {
+      return 'gallery'
+    }
+    case 'blog-list':
+    default: {
+      return 'blog'
+    }
+  }
+})
 
 /**
  * Handler for a tag being selected;
  * updates the visibility state of the current entries
- * @param tagsToggled: the tags currently toggled in the filter panel
+ * @param tagsToggled the tags currently toggled in the filter panel
  */
  const onToggledTagsChanged = async (tagsToggled: string[]) => {
   if (tagsToggled.length < 1) {
@@ -61,22 +76,25 @@ const hideWarnings = defineModel('hideWarnings', { type: Boolean })
  * so that it is saved between page loads
  * @param event the event context which invoked this handler
  */
- const onHideWarningsToggled = (event: Event) => {
+const onHideWarningsToggled = (event: Event) => {
   storage.write(`${storageId}::hideWarnings`, (event.target as HTMLInputElement).checked)
 }
 
 onMounted(async () => {
-  let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
+  let listConfig = await fetchAndParseYaml<MediaList>(routeConfig.config)
-  const list = await fetchConfigsFromList<GalleryEntry>(listConfig)
+  const list = await fetchConfigsFromList<MediaEntry>(listConfig)
   config.value = listConfig
   entries.value = list.entries
   document.title = routeConfig.fullTitle
   ready.value = true
+  hasWarnings.value = !!(await Promise.all(Object.values(list.entries))).find(other => !!other.warning)
 })
 </script>
 
 <template lang="pug">
-.template.gallery-list
+.template(
+  :class='[template]'
+)
   Transition
     .navigation(
       v-if='ready'
@@ -101,14 +119,24 @@ onMounted(async () => {
       @toggledTagsChanged='onToggledTagsChanged($event)'
     )
   Transition
-    .gallery(
+    div(
       v-if='ready'
+      :class='[className]'
     )
       Transition(
         v-for='(entry, id) in entries'
       )
         GalleryTile(
-          v-if='!entry.isHidden || !config.removeFromView'
+          v-if='template === "gallery-list" && (!entry.isHidden || !config.removeFromView)'
+          :class='{ hidden: entry.isHidden && !config.removeFromView }'
+          :hideWarnings='hideWarnings'
+          :id='id'
+          :viewPath='viewPath'
+          :isInternal='true'
+          :entry='entry'
+        )
+        BlogTile(
+          v-else-if='template === "blog-list" && (!entry.isHidden || !config.removeFromView)'
           :class='{ hidden: entry.isHidden && !config.removeFromView }'
           :hideWarnings='hideWarnings'
           :id='id'