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

begin refactoring lists

Browse source 
- async fetching of list entries is now done when the tile is mounted for blog-lists
- started removing recursion from galleries
This commit is contained in:
lightling 2024-07-30 22:01:03 -04:00
parent 51e720fc29
commit 650df38f6c
Signed by: lightling
GPG key ID: F1F29650D537C773
7 changed files with 111 additions and 348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
libs/types/src/content/templates/blog-list.d.ts vendored
View file

@ -1,45 +1,12 @@
import type { DateRange } from '../dateRange'
import type { EntryTagCollection } from '../entryTag'
import type { ListWithEntries } from './shared'
import type { MediaEntry } from './shared'
/**
* This describes aditional information about a blog entry
* This describes additional information about a blog entry
* to display when listing the entry on the blog-list page.
* At minimum, the title should be specified.
*/
export type BlogEntry = {
/**
* Specifies the date of the blog entry
*/
date?: DateRange | string | number
/**[Supports Markdown]
* Information to summarize an entry
*/
description?: string
/**
* Tags that correspond to filters on the blog-list page if defined
*/
tags?: string[]
/**[Supports Markdown]
* The title of the blog entry
*/
title: string
/**
* Information regarding the thumbnail
*/
thumbnail?: {
/**
* Sets the inline-styles for the thumbnail
*/
style: CSSStyleDeclaration
}
/**
* URL to the markdown document of the blog entry
*/
url: string
}
export type BlogList = {
tags?: EntryTagCollection
removeFromView?: boolean
} & ListWithEntries<BlogEntry>
} & MediaEntry

85
libs/types/src/content/templates/gallery-list.d.ts vendored
View file

@ -1,83 +1,22 @@
import type { EntryTagCollection } from '../entryTag'
import type { ListWithEntries } from './shared'
import type { MediaEntry } from './shared'
/**
* A partial definition of a {@link GalleryEntry}
* which defines the properties of an entry
* that can be passed down from a top-level entry down to its variants
* Defines the supported formats for a gallery entry
*/
export type GalleryEntryInheritedProperties = {
/**
* css background applied to the image (useful for transparent images)
*/
background?: string
/**
* [SUPPORTS MARKDOWN] a place for the siteowner to describe the entry
*/
description?: string
/**
* a key-value pair set of general-purpose fields to additionally describe the entry
* @example entry.fields = {
* 'date': '1960/01/01',
* 'rating': 'general',
* }
*/
fields?: Record<string, string>
/**
* array of tag-ids that apply to the art;
* this is used to allow a visitor to filter out entries of a specific tag
* @see {@link GalleryList.tags}
*/
tags: string[]
/**
* css background applied to the thumbnail (useful for transparent images)
*/
thumbnailBackground?: string
/**
* the position of the thumbnail;
* this will be applied as css `object-position`
*/
thumbnailPosition?: string
/**
* the title of the entry
*/
title: string | null | undefined
/**
* any content warnings that apply to the entry,
* which will be used to apply the `.warning` classname
* to the DOM of a gallery tile
* and will be displayed with the tile
*/
warning?: string
} & ListWithEntries<GalleryEntryInheritedProperties>
export type GalleryEntryFormat =
| 'image'
/**
* Defines an entry in a gallery that can be displayed in a tiled manner
* and can be clicked by a visitor to display its variants or the entry itself if there are none
* This describes additional information about a gallery entry
* to display when listing the entry on the gallery-list page.
*/
export type GalleryEntry = GalleryEntryInheritedProperties & {
export type GalleryEntry = {
/**
* the url to the thumbnail to show for the entry in the gallery tile
* The kind of media the entry is
*/
thumbnailUrl?: string
format: GalleryEntryFormat
/**
* the url to the entry itself
* URL to the markdown document of the gallery entry
*/
url?: string
}
/**
* Defines the model of the `GalleryList` template
*/
export type GalleryList = {
/**
* the tags to use for filtering entries
*/
tags?: EntryTagCollection
/**
* whether or not tag filtering removes entries completely from view;
* if false, they will apply a class selector instead
* in order to manually style (CSS filtering/opacity/etc.)
*/
removeFromView?: boolean
} & ListWithEntries<GalleryEntry>
url: string
} & MediaEntry

63
libs/types/src/content/templates/shared.d.ts vendored
View file

@ -1,3 +1,6 @@
import type { DateRange } from '../dateRange'
import type { EntryTagCollection } from '../entryTag'
/**
* Defines entries that are already fetched or are embedded directly in the list.
* Stored in key-value format where the key is the id of the entry,
@ -32,9 +35,61 @@ export type ListWithEntries<T> = {
embeddedEntries?: ListEntries<T>
}
export type ListEntriesWithNestedEntries<T> = { [key: string]: T & ListWithEntries<T> }
/**
* The resolved instance of a list, which will flatten
*/
export type ResolvedListEntries<T> = ListEntries<Promise<T>>
export type ListWithNestedEntries<T> = {
entries?: ListRemoteEntries
embeddedEntries?: ListEntriesWithNestedEntries<T>
/**
* Defines a list that supports tagging the entries
*/
export type ListWithTags<T> = {
/**
* the tags to use for filtering entries
*/
tags?: EntryTagCollection
/**
* whether or not tag filtering removes entries completely from view;
* if false, they will apply a class selector instead
* in order to manually style (CSS filtering/opacity/etc.)
*/
removeFromView?: boolean
} & ListWithEntries<T>
/**
* Defines an entry with common media-related fields
*/
export type MediaEntry = {
/**
* Specifies the date of the entry
*/
date?: DateRange | string | number
/**[Supports Markdown]
* Information to summarize an entry
*/
description?: string
/**
* Tags that correspond to filters on the list page if defined
*/
tags?: string[]
/**[Supports Markdown]
* The title of the entry
*/
title: string
/**
* Information regarding the thumbnail
*/
thumbnail?: {
/**
* Sets the inline-styles for the thumbnail
*/
style: CSSStyleDeclaration
}
/**
* any content warnings that apply to the entry,
* which will be used to apply the `.warning` classname
* to the DOM of a tile
* and will be displayed with the tile
*/
warning?: string
}

67
projects/frontend/src/utilities/fetch.ts
View file

@ -3,9 +3,8 @@ import { marked } from 'marked'
import yaml from 'js-yaml'
import type {
ListEntries,
ListEntriesWithNestedEntries,
ListWithEntries,
ListWithNestedEntries,
ResolvedListEntries,
} from '@goldenwere/mackenzii-types'
import { useRouteStore } from 'src/routes'
@ -151,29 +150,24 @@ export const fetchAndParseMarkdown = async (path: string) => {
* @param list the list to fetch configs from
* @returns the resolved configs
*/
export const fetchConfigsFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>): Promise<{
export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise<{
ids: string[]
entries: ListEntries<T> | ListEntriesWithNestedEntries<T>
entries: ResolvedListEntries<T>
}> => {
return new Promise(async (resolve, reject) => {
let ids: string[] = []
let entries: ListEntries<T> = {}
let entries: ResolvedListEntries<T> = {}
if (!!list.entries) {
ids = ids.concat(Object.keys(list.entries))
const allEntries = await Promise.all(ids.map(async id => ({
entry: await fetchAndParseYaml<T>((list.entries!)[id]),
id,
})))
allEntries.forEach((entry) => {
entries[entry.id] = entry.entry
ids.forEach(id => {
entries[id] = fetchAndParseYaml<T>((list.entries!)[id])
})
}
if (!!list.embeddedEntries) {
ids = ids.concat(Object.keys(list.embeddedEntries))
entries = {
...entries,
...list.embeddedEntries,
}
ids.forEach(id => {
entries[id] = new Promise((resolve) => resolve(list.embeddedEntries![id]))
})
}
resolve({
@ -189,7 +183,7 @@ export const fetchConfigsFromList = async <T>(list: ListWithEntries<T> | ListWit
* @param id the id to query for
* @returns the resolved config
*/
export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>, id: string): Promise<T> => {
export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: string): Promise<T> => {
return new Promise(async (resolve, reject) => {
if (!!list.embeddedEntries && list.embeddedEntries[id]) {
resolve(list.embeddedEntries[id])
@ -200,47 +194,6 @@ export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | List
})
}
export const fetchNestedConfigs = async <T>(
list: ListWithNestedEntries<T>,
idsByDepth: string[],
proccessCallback?: (parent: ListEntriesWithNestedEntries<T>, child: ListEntriesWithNestedEntries<T>) => ListEntriesWithNestedEntries<T>,
): Promise<ListWithNestedEntries<T>> => {
/* DOCUMENT STRUCTURE:
...listConfig
entries:
'key1': 'url'
...entryConfig (T)
entries:
'key1-1': 'url'
...entryConfig (T)
embeddedEntries:
'key1-2':
...entryConfig (T)
embeddedEntries:
'key2':
...entryConfig (T)
embeddedEntries:
'key2-1':
...entryConfig (T)
idsByDepth STRUCTURE:
[ 'key1', 'key2-1' ]
*/
return new Promise(async (resolve, reject) => {
let idsToLoop = [ ...idsByDepth ]
let current = await fetchConfigByIdFromList(list, idsToLoop.shift()!) as ListEntriesWithNestedEntries<T>
if (idsToLoop.length > 0) {
let next = await fetchNestedConfigs(current as any, idsToLoop) as ListEntriesWithNestedEntries<T>
if (!!proccessCallback) {
next = proccessCallback(current, next)
}
resolve(next)
} else {
resolve(current)
}
})
}
/**
* Fetches content type from an image
* @param path the path of the file to check

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

@ -1,9 +1,10 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import type {
BlogList,
BlogEntry,
BlogListDefinition,
ListWithTags,
ResolvedListEntries,
} from '@goldenwere/mackenzii-types'
import { fetchAndParseYaml, fetchConfigsFromList } from 'src/utilities/fetch'
@ -13,16 +14,18 @@ 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 = { [idOrTitle: string]: BlogEntry & {
type BlogDisplayedEntries = ResolvedListEntries<BlogEntry & {
/**
* specifies whether the entry is hidden by the tags selected by a visitor
*/
isHidden?: boolean
}}
}>
const entryIds = ref([] as string[])
const entries = ref({} as BlogDisplayedEntries)
@ -38,14 +41,14 @@ const viewPath = computed(() => `${currentRoute.path}/view`)
* updates the visibility state of the current entries
* @param tagsToggled: the tags currently toggled in the filter panel
*/
const onToggledTagsChanged = (tagsToggled: string[]) => {
const onToggledTagsChanged = async (tagsToggled: string[]) => {
if (tagsToggled.length < 1) {
Object.keys(entries.value).forEach(entryId => {
entries.value[entryId].isHidden = false
Object.keys(entries.value).forEach(async entryId => {
(await entries.value[entryId]).isHidden = false
})
} else {
Object.keys(entries.value).forEach(entryId => {
entries.value[entryId].isHidden = !entries.value[entryId].tags?.some(own => tagsToggled.includes(own))
Object.keys(entries.value).forEach(async entryId => {
(await entries.value[entryId]).isHidden = !(await entries.value[entryId]).tags?.some(own => tagsToggled.includes(own))
})
}
}
@ -72,11 +75,11 @@ onMounted(async () => {
)
BlogTile(
v-if='!entries[id].isHidden || !config.removeFromView'
v-bind='entries[id]'
:class='{ hidden: entries[id].isHidden && !config.removeFromView }'
:id='id'
:viewPath='viewPath'
:isInternal='true'
:entry='entries[id]'
)
Transition
FilterPanel(

18
projects/frontend/src/views/blog/blog-tile.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { marked } from 'marked'
import { getFormattedDate } from 'src/utilities/parse'
import type {
@ -10,13 +10,19 @@ const props = defineProps<{
id: string,
viewPath: string,
isInternal: boolean,
} & BlogEntry>()
entry: Promise<BlogEntry>
}>()
const { thumbnail } = props
const description = computed(() => marked.parse(props.description || ''))
const date = computed(() => !!props.date ? getFormattedDate(props.date) : null)
const title = computed(() => marked.parse(props.title || ''))
const resolved = ref({} as BlogEntry)
const thumbnail = computed(() => resolved.value.thumbnail)
const description = computed(() => marked.parse(resolved.value.description || ''))
const date = computed(() => !!resolved.value.date ? getFormattedDate(resolved.value.date) : null)
const title = computed(() => marked.parse(resolved.value.title || ''))
const href = computed(() => `${props.viewPath}?id=${props.id}`)
onMounted(async () => {
resolved.value = await props.entry
})
</script>
<template lang="pug">

164
projects/frontend/src/views/gallery/gallery-list.vue
View file

@ -1,166 +1,11 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type {
GalleryEntry,
GalleryList,
GalleryListDefinition,
} from '@goldenwere/mackenzii-types'
import { type RouteRecordRaw, useRouter } from 'vue-router'
import { amendVariantsWithDefaults, _amendVariantWithDefaults } from './gallery-utilities'
import { fetchAndParseYaml, fetchNestedConfigs, fetchConfigsFromList, storage } 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 GalleryTile from './gallery-tile.vue'
/**
* 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 GalleryDisplayedEntries = { [idOrTitle: string]: GalleryEntry & {
/**
* specifies whether the entry is hidden by the tags selected by a visitor
*/
isHidden?: boolean
}}
const props = defineProps<{
variants: string[]
}>()
/**
* Wraps around the path of variant ids to ensure there are not any issues
* @param variants the array of variant ids
*/
const validateVariantPath = (variants?: string[]) => {
return !!variants && variants[0] !== '' ? variants : null
}
const currentRoute = getCurrentRoute()
const routeStore = useRouteStore()
const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition & RouteRecordRaw
const globalConfig = routeStore._globals
const storageId = `${globalConfig.id}`
const router = useRouter()
let config: GalleryList = null!
const ready = ref(false)
const galleryReady = ref(false)
const filterPanelRef = ref(null as typeof FilterPanel | null)
const entries = ref({} as GalleryDisplayedEntries)
let variants = validateVariantPath(props.variants)
const hasWarnings = ref(false)
const hideWarnings = defineModel('showWarnings', { type: Boolean })
const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
/**
* Handles updating the displayed entries in the list
*/
const onDisplayEntries = async () => {
resetTags()
galleryReady.value = false
if (!!variants) {
const value = await fetchNestedConfigs<GalleryEntry>(config, variants, _amendVariantWithDefaults)
const children = (await fetchConfigsFromList(value)).entries
entries.value = amendVariantsWithDefaults(value, children)
} else {
const value = await fetchConfigsFromList<GalleryEntry>(config)
entries.value = value.entries
}
hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
setTimeout(() => galleryReady.value = true)
}
/**
* Handler for the tile clicked event;
* handles navigating to the gallery-view route to display the entry selected
* @param clickEvent.event the event context which invoked this handler
* @param clickEvent.id the id of the tile that was clicked
*/
const onTileClicked = (clickEvent: { event: Event, id: string }) => {
const { event, id } = clickEvent
const entry = entries.value[id]
event.preventDefault()
if (!!entry.entries || !!entry.embeddedEntries) {
const newPath = !!variants
? `${(variants || []).join(';')};${id}`
: id
router.push({ name: routeConfig.name, query: { v: newPath }})
variants = newPath.split(';')
onDisplayEntries()
} else if (!!variants) {
router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants || []).join(';')};${id}` }})
} else {
router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${id}` }})
}
}
/**
* Handler for the back button which appears when navigated into entry variants;
* navigates upward one level from the currently displayed variants
*/
const onNavigateBack = (event: Event) => {
event.preventDefault()
let newPath: string | null = variants!.slice(0, variants!.length - 1).join(';')
if (newPath === '') {
router.push({ name: routeConfig.name})
variants = null
} else {
router.push({ name: routeConfig.name, query: { v: newPath }})
variants = validateVariantPath(newPath?.split(';'))
}
onDisplayEntries()
}
/**
* Handler for the toggle for hiding/showing warnings;
* updates localstorage with the state of the checkbox
* so that it is saved between page loads
* @param event the event context which invoked this handler
*/
const onHideWarningsToggled = (event: Event) => {
storage.write(`${storageId}::hideWarnings`, (event.target as HTMLInputElement).checked)
}
/**
* 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 = (tagsToggled: string[]) => {
if (tagsToggled.length < 1) {
Object.keys(entries.value).forEach(entryId => {
entries.value[entryId].isHidden = false
})
} else {
Object.keys(entries.value).forEach(entryId => {
entries.value[entryId].isHidden = !entries.value[entryId].tags?.some((own: string) => tagsToggled.includes(own))
})
}
}
/**
* Resets the `hidden` state of entries
* and the `tagsToggled` array
*/
const resetTags = () => {
if (!!filterPanelRef.value) {
filterPanelRef.value.resetTags()
}
Object.keys(entries.value).forEach(entryId => {
entries.value[entryId].isHidden = false
})
}
onMounted(async () => {
ready.value = false
config = await fetchAndParseYaml<GalleryList>(routeConfig.config)
document.title = routeConfig.fullTitle
hideWarnings.value = storage.read(`${storageId}::hideWarnings`) || false
onDisplayEntries()
ready.value = true
})
</script>
@ -171,11 +16,6 @@ onMounted(async () => {
.navigation(
v-if='ready'
)
button.input(
v-if='variants?.length > 0'
@click='onNavigateBack($event)'
)
span Back
.input.labeled-checkbox(
v-if='hasWarnings'
)
@ -191,7 +31,7 @@ onMounted(async () => {
)
Transition
FilterPanel(
v-if='galleryReady && !!config.tags'
v-if='ready && !!config.tags'
:ref='filterPanelRef'
:tags='config.tags'
@toggledTagsChanged='onToggledTagsChanged($event)'