Goldenwere/mackenzii
Goldenwere/mackenzii
1
0
Fork 0
Code Activity Actions

merge blog-list and gallery-list

Browse source
This commit is contained in:
lightling 2024-08-14 02:12:16 -04:00
parent e2c0ed1b06
commit 96f6032b85
3 changed files with 48 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
projects/frontend/src/routes.ts
View file

@ -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,
'gallery-list': galleryListBody,
'blog-list': mediaListBody,
'gallery-list': mediaListBody,
}
export const createRoutes = (): RouteRecordRaw[] => {

92
projects/frontend/src/views/blog/blog-list.vue
View file

@ -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>

60
projects/frontend/src/views/gallery/gallery-list.vue → projects/frontend/src/views/shared/media-list.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import type {
GalleryEntry,
GalleryListDefinition,
ConfigfulRouteDefinition,
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 config = ref(null as GalleryList | null)
const routeConfig = routeStore._routes[currentRoute.path] as ConfigfulRouteDefinition
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) {
@ -66,17 +81,20 @@ const hideWarnings = defineModel('hideWarnings', { type: Boolean })
}
onMounted(async () => {
let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
const list = await fetchConfigsFromList<GalleryEntry>(listConfig)
let listConfig = await fetchAndParseYaml<MediaList>(routeConfig.config)
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'