diff --git a/libs/types/src/content/templates/blog-list.d.ts b/libs/types/src/content/templates/blog-list.d.ts index e51c5ad..4c5286f 100644 --- a/libs/types/src/content/templates/blog-list.d.ts +++ b/libs/types/src/content/templates/blog-list.d.ts @@ -1,6 +1,6 @@ import type { DateRange } from '../dateRange' import type { EntryTagCollection } from '../entryTag' -import type { EntryWithConfig, EntryWithContent } from './shared' +import type { ListWithEntries } from './shared' /** * This describes aditional information about a blog entry @@ -8,6 +8,9 @@ import type { EntryWithConfig, EntryWithContent } from './shared' * 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 @@ -21,18 +24,22 @@ export type BlogEntry = { * The title of the blog entry */ title: string + /** + * Information regarding the thumbnail + */ thumbnail?: { + /** + * Sets the inline-styles for the thumbnail + */ style: CSSStyleDeclaration } -} - -export type BlogEntries = { [key: string]: - & EntryWithContent - & EntryWithConfig + /** + * URL to the markdown document of the blog entry + */ + url: string } export type BlogList = { - entries: BlogEntries tags?: EntryTagCollection removeFromView?: boolean -} +} & ListWithEntries diff --git a/libs/types/src/content/templates/shared.d.ts b/libs/types/src/content/templates/shared.d.ts index 98047df..f8514b6 100644 --- a/libs/types/src/content/templates/shared.d.ts +++ b/libs/types/src/content/templates/shared.d.ts @@ -1,19 +1,33 @@ /** - * Denotes a listing entry that contains content, - * which can be defined either directly in the list - * or be defined in a separate file + * 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, + * and the value is the entry config itself + * (defined as `T` based on the type of the entries in the implemented list) */ -export type EntryWithContent = { - content?: string - contentUrl?: string -} +export type ListEntry = { [key: string]: T } /** - * Denotes a listing entry that contains config, - * which can be defined either directly in the list - * or be defined in a separate file + * Defines entries that are fetched from remote config files. + * Stored in key-value format where the key is the id of the entry, + * and the value is the url to the config file. */ -export type EntryWithConfig = { - config?: T - configUrl?: string +export type ListRemoteEntries = { [key: string]: string } + +/** + * Defines a list-type template that has config entries defined by id. + * One of two must be defined: `entries` or `embeddedEntries`. + * Both can be defined and used simultaneously. + * Note that in the case of an `id` collision + * (i.e. both `entries` and `embeddedEntries` have an entry with the same id), + * the implemented behavior should pick the `embeddedEntry` + */ +export type ListWithEntries = { + /** + * Entries that will be fetched from remote config files + */ + entries?: ListRemoteEntries + /** + * Entries that are embedded directly in the list config + */ + embeddedEntries?: ListEntry } diff --git a/libs/types/src/index.d.ts b/libs/types/src/index.d.ts index ba332e7..912396f 100644 --- a/libs/types/src/index.d.ts +++ b/libs/types/src/index.d.ts @@ -10,4 +10,5 @@ export * from './content/link' export * from './content/templates/blog-list' export * from './content/templates/gallery-list' +export * from './content/templates/shared' export * from './content/templates/templateType' diff --git a/projects/frontend/src/utilities/fetch.ts b/projects/frontend/src/utilities/fetch.ts index 7eeaf23..2ed1138 100644 --- a/projects/frontend/src/utilities/fetch.ts +++ b/projects/frontend/src/utilities/fetch.ts @@ -1,11 +1,10 @@ import DOMPurify from 'dompurify' import { marked } from 'marked' import yaml from 'js-yaml' - import type { - EntryWithConfig, - EntryWithContent, -} from '@goldenwere/mackenzii-types/src/content/templates/shared' + ListEntry, + ListWithEntries, +} from '@goldenwere/mackenzii-types' /** * Config used for DOMPurify. @@ -129,33 +128,57 @@ export const fetchAndParseMarkdown = async (path: string) => { } /** - * Fetches content for an entry - * @param entry the entry whose content should be fetched - * @returns the markdown content for the entry + * Fetches all the entry configs from a given list + * @param list the list to fetch configs from + * @returns the resolved configs */ -export const fetchContent = async (entry: EntryWithContent) => { - if (!!entry.content) { - return entry.content - } else if (!!entry.contentUrl) { - return fetchAndParseMarkdown(entry.contentUrl) - } +export const fetchConfigsFromList = async (list: ListWithEntries): Promise<{ + ids: string[] + entries: ListEntry +}> => { + return new Promise(async (resolve, reject) => { + let ids: string[] = [] + let entries: ListEntry = {} + if (!!list.entries) { + ids = ids.concat(Object.keys(list.entries)) + const allEntries = await Promise.all(ids.map(async id => ({ + entry: await fetchAndParseYaml(list.entries[id]), + id, + }))) + allEntries.forEach((entry) => { + entries[entry.id] = entry.entry + }) + } + if (!!list.embeddedEntries) { + ids = ids.concat(Object.keys(list.embeddedEntries)) + entries = { + ...entries, + ...list.embeddedEntries, + } + } - return '' + resolve({ + entries, + ids, + }) + }) } /** - * Fetches config for an entry - * @param entry the entry whose config should be fetched - * @returns the config object for the entry + * Fetches the config for a given id from the given list + * @param list the list to query from + * @param id the id to query for + * @returns the resolved config */ -export const fetchConfig = async (entry: EntryWithConfig) => { - if (!!entry.config) { - return entry.config as T - } else if (!!entry.configUrl) { - return fetchAndParseYaml(entry.configUrl) as T - } - - return {} as T +export const fetchConfigByIdFromList = async (list: ListWithEntries, id: string): Promise => { + return new Promise(async (resolve, reject) => { + if (!!list.embeddedEntries && list.embeddedEntries[id]) { + resolve(list.embeddedEntries[id]) + } else if (!!list.entries && list.entries[id]) { + const config = await fetchAndParseYaml(list.entries[id]) + resolve(config) + } + }) } /** diff --git a/projects/frontend/src/views/blog/blog-list.vue b/projects/frontend/src/views/blog/blog-list.vue index 9c388fd..f3eab25 100644 --- a/projects/frontend/src/views/blog/blog-list.vue +++ b/projects/frontend/src/views/blog/blog-list.vue @@ -6,7 +6,7 @@ import type { BlogListDefinition, } from '@goldenwere/mackenzii-types' -import { fetchAndParseYaml, fetchConfig } from 'src/utilities/fetch' +import { fetchAndParseYaml, fetchConfigsFromList } from 'src/utilities/fetch' import { getCurrentRoute } from 'src/utilities/vuetils' import { useRouteStore } from 'src/routes' @@ -51,12 +51,11 @@ const viewPath = computed(() => `${currentRoute.path}/view`) } onMounted(async () => { - config.value = await fetchAndParseYaml(routeConfig.config) - entryIds.value = Object.keys(config.value.entries) - for (let i = 0; i < entryIds.value.length; ++i) { - const id = entryIds.value[i] - entries.value[id] = await fetchConfig(config.value.entries[id]) - } + let listConfig = await fetchAndParseYaml(routeConfig.config) + const list = await fetchConfigsFromList(listConfig) + config.value = listConfig + entryIds.value = list.ids + entries.value = list.entries document.title = routeConfig.fullTitle ready.value = true }) diff --git a/projects/frontend/src/views/blog/blog-view.vue b/projects/frontend/src/views/blog/blog-view.vue index 71fa32d..3d7f81a 100644 --- a/projects/frontend/src/views/blog/blog-view.vue +++ b/projects/frontend/src/views/blog/blog-view.vue @@ -7,7 +7,7 @@ import type { RoutedWindow, } from '@goldenwere/mackenzii-types' -import { fetchAndParseYaml, fetchConfig, fetchContent } from 'src/utilities/fetch' +import { fetchAndParseMarkdown, fetchAndParseYaml, fetchConfigByIdFromList } from 'src/utilities/fetch' import { getCurrentRoute } from 'src/utilities/vuetils' import { useRouteStore } from 'src/routes' @@ -29,8 +29,8 @@ const routeSubConfig = routeStore._routes[currentRoute.path] onMounted(async () => { const config = await fetchAndParseYaml(routeConfig.config) - info.value = await fetchConfig(config.entries[currentRoute.query.id as string]) - const md = await fetchContent(config.entries[currentRoute.query.id as string]) + info.value = await fetchConfigByIdFromList(config, currentRoute.query.id as string) + const md = await fetchAndParseMarkdown(info.value.url) content.value = md document.title = routeSubConfig.fullTitle?.replace('$ENTRY', info.value.title) routeStore.setBreadcrumbs(currentRoute, info.value.title)