From cc0e8ae299131ae6616a5d473520eae02e96610d Mon Sep 17 00:00:00 2001 From: Lightling Date: Mon, 13 May 2024 17:36:55 -0400 Subject: [PATCH] period no longer handled by template and repurposed as subtitle --- libs/types/src/config/globals.d.ts | 2 +- libs/types/src/config/routing.d.ts | 6 +++ .../src/content/templates/project-list.d.ts | 7 ++- .../components/inflators/descriptionList.ts | 48 +++++++++---------- projects/frontend/src/main.vue | 6 ++- projects/frontend/src/utilities/dom.ts | 9 ---- .../src/views/project/project-tile.vue | 13 ++--- .../src/views/project/project-view.vue | 8 +++- 8 files changed, 49 insertions(+), 50 deletions(-) diff --git a/libs/types/src/config/globals.d.ts b/libs/types/src/config/globals.d.ts index 71aa5ab..3571ec9 100644 --- a/libs/types/src/config/globals.d.ts +++ b/libs/types/src/config/globals.d.ts @@ -5,7 +5,7 @@ import type { WarningModal } from './warnings' /** * Defines global values for the site. */ -type SiteGlobals = { +export type SiteGlobals = { header: HeaderEntry[] id: string stylesheetUrls: string[] diff --git a/libs/types/src/config/routing.d.ts b/libs/types/src/config/routing.d.ts index 04b0148..30f3af6 100644 --- a/libs/types/src/config/routing.d.ts +++ b/libs/types/src/config/routing.d.ts @@ -67,3 +67,9 @@ export type RouteDefinition = * Defines the collection of routes the app uses */ export type RouteCollection = { [key: string]: RouteDefinition } + +export interface RoutedWindow extends Window { + routeConfig: RouteDefinition + routeSubConfig: any + routeContentConfig: any +} diff --git a/libs/types/src/content/templates/project-list.d.ts b/libs/types/src/content/templates/project-list.d.ts index 492f9ee..a22ea26 100644 --- a/libs/types/src/content/templates/project-list.d.ts +++ b/libs/types/src/content/templates/project-list.d.ts @@ -1,4 +1,3 @@ -import type { DateRange } from '../dateRange' import type { EntryTagCollection } from '../entryTag' /** @@ -11,10 +10,10 @@ export type ProjectListingInfo = { * Caption displayed below the title of the project on the projects page */ caption?: string - /** - * When defined, the period will be displayed as {from} - {to} + /**[Supports Markdown] + * Optional subtitle for the project */ - period?: DateRange + subtitle?: string /**[Supports Markdown] * Information to summarize a project */ diff --git a/projects/frontend/src/components/inflators/descriptionList.ts b/projects/frontend/src/components/inflators/descriptionList.ts index 782e22d..fa4417c 100644 --- a/projects/frontend/src/components/inflators/descriptionList.ts +++ b/projects/frontend/src/components/inflators/descriptionList.ts @@ -1,7 +1,5 @@ import type { ProjectListingInfo } from '@goldenwere/static-web-templates-types' -import { getFormattedPeriod } from 'src/utilities/dom' - /** * Queries for description list nodes and inflates them with extra functionality * @param _window the reference to the window @@ -21,32 +19,32 @@ export class DescriptionListElement { constructor(_element: HTMLDListElement, _projectInfo?: ProjectListingInfo) { this.element = _element - if (!!_projectInfo) { - this._inflatePeriod(_projectInfo) - } + // if (!!_projectInfo) { + // this._inflatePeriod(_projectInfo) + // } this._inflateTags() } - /** - * Searches for the presence of a .period element wrapping around
and
, - * and inflates the inner
element by replacing the first instance of $PERIOD with formatted period - * @param _projectInfo the project info in which the project's time period is defined. - */ - _inflatePeriod = (_projectInfo: ProjectListingInfo) => { - const periodWrapper = this.element.querySelector('.period') - if (!!periodWrapper) { - if (!!_projectInfo.period) { - const periodDescriptionElement = periodWrapper.querySelector('dd') - if (!!periodDescriptionElement) { - periodDescriptionElement.innerHTML = periodDescriptionElement.innerHTML.replace('$PERIOD', getFormattedPeriod(_projectInfo.period)) - } else { - console.warn('Found a .period element but not an inner dd element to format on. The .period class should be on a div wrapping around
and
') - } - } else { - console.warn('Found a .period element but the project information is missing a period.') - } - } - } + // /** + // * Searches for the presence of a .period element wrapping around
and
, + // * and inflates the inner
element by replacing the first instance of $PERIOD with formatted period + // * @param _projectInfo the project info in which the project's time period is defined. + // */ + // _inflatePeriod = (_projectInfo: ProjectListingInfo) => { + // const periodWrapper = this.element.querySelector('.period') + // if (!!periodWrapper) { + // if (!!_projectInfo.period) { + // const periodDescriptionElement = periodWrapper.querySelector('dd') + // if (!!periodDescriptionElement) { + // periodDescriptionElement.innerHTML = periodDescriptionElement.innerHTML.replace('$PERIOD', getFormattedPeriod(_projectInfo.period)) + // } else { + // console.warn('Found a .period element but not an inner dd element to format on. The .period class should be on a div wrapping around
and
') + // } + // } else { + // console.warn('Found a .period element but the project information is missing a period.') + // } + // } + // } /** * Searches for the presence of a .tags element wrapping around
and
, diff --git a/projects/frontend/src/main.vue b/projects/frontend/src/main.vue index 152abd5..5bb9a1d 100644 --- a/projects/frontend/src/main.vue +++ b/projects/frontend/src/main.vue @@ -7,12 +7,14 @@ import { injectStylesheet } from 'src/utilities/dom' import { storage } from './utilities/fetch' import { useRouteStore } from 'src/routes' -import type { WarningModal } from '@goldenwere/static-web-templates-types' +import type { RoutedWindow, WarningModal } from '@goldenwere/static-web-templates-types' import HeaderLink from 'src/components/shared/header-link.vue' import ThemePicker from 'src/components/shared/theme-picker.vue' import WarningPrompt from 'src/components/shared/warning-prompt.vue' +declare const window: RoutedWindow + const router = useRouter() const routeStore = useRouteStore() const globalConfig = routeStore._globals @@ -80,6 +82,8 @@ const refresh = async () => { storageId.value = `${globalConfig.id}::${currentRoute.path}` routeId.value = routeStore._routes[currentRoute.path].id + window.routeConfig = {...routeConfig} + determineWarning() determineStylesheets(routeConfig.stylesheetUrls) scrollTo({ diff --git a/projects/frontend/src/utilities/dom.ts b/projects/frontend/src/utilities/dom.ts index 7c7c5d5..c32c88c 100644 --- a/projects/frontend/src/utilities/dom.ts +++ b/projects/frontend/src/utilities/dom.ts @@ -39,12 +39,3 @@ export const findFirstMatchingChild = ( element: ParentNode, ...selectors: strin }) return returnElement } - -/** - * Formats the period object into a readable string - * @param period the period to format - * @returns the formatted string - */ -export const getFormattedPeriod = (period: DateRange) => { - return `${period.from}${!!period.to ? ' - ' + period.to : ''}` -} diff --git a/projects/frontend/src/views/project/project-tile.vue b/projects/frontend/src/views/project/project-tile.vue index 85d29ef..1e0a9be 100644 --- a/projects/frontend/src/views/project/project-tile.vue +++ b/projects/frontend/src/views/project/project-tile.vue @@ -5,7 +5,6 @@ import type { ProjectListingInfo, } from '@goldenwere/static-web-templates-types' -import { getFormattedPeriod } from 'src/utilities/dom' import { getCurrentRoute } from 'src/utilities/vuetils' const props = defineProps<{ @@ -16,13 +15,10 @@ const props = defineProps<{ const currentRoute = getCurrentRoute() const { thumbnailBackground, thumbnailBackgroundSize } = props.info -const period = computed(() => (!!props.info.period - ? getFormattedPeriod(props.info.period) - : undefined -)) const caption = computed(() => marked.parse(props.info.caption || '')) const summary = computed(() => marked.parse(props.info.summary || '')) const title = computed(() => marked.parse(props.info.title || '')) +const subtitle = computed(() => marked.parse(props.info.subtitle || ''))