migrate types to lib/types

libs/types/src/content/dateRange.ts

@@ -0,0 +1,4 @@
+export type DateRange = {
+  from: string
+  to: string
+}

libs/types/src/content/link.ts

@@ -0,0 +1,5 @@
+export interface Link {
+  caption?: string
+  href: string
+  target?: '_blank' | '_parent' | '_self' | '_top'
+}

libs/types/src/content/templates/gallery.d.ts

@@ -0,0 +1,126 @@
+/**
+ * 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
+ */
+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
+}
+
+/**
+ * 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
+ */
+export type GalleryEntry = GalleryEntryInheritedProperties & {
+  /**
+   * the url to the thumbnail to show for the entry in the gallery tile
+   */
+  thumbnailUrl?: string
+  /**
+   * the url to the entry itself
+   */
+  url?: string
+  /**
+   * optional variants for the entry;
+   * this is a recursive definition of {@link GalleryEntry entries}
+   * which can be navigated deeper into in a gallery
+   * in a manner like a folder in a file-based operating system
+   */
+  variants?: GalleryEntries
+}
+
+/**
+ * Defines the list of entries in a gallery,
+ * a key-value object where the value is the entry,
+ * and the key represents the id of a piece;
+ * it is important for this to be uniquely defined at minimum within
+ * the scope of the entry in relation to surrounding variants
+ * in order for the app to properly navigate through variants
+ * and ultimately the view page displaying the entry
+ */
+export type GalleryEntries = { [idOrTitle: string]: GalleryEntry }
+
+/**
+ * Defines a tag used by entries in a gallery
+ * used for filtering entries from view
+ */
+export type GalleryTag = {
+  /**
+   * specifies a category that the tag belongs to
+   * in order to optionally organize them in the view;
+   * if category is not specified, tags will be assigned
+   * "NoCategory" and organized into a section without a heading
+   * placed before any other sections formed by categories (if any)
+   */
+  category?: string
+  /**
+   * specifies the name that the tag will appear as in the DOM;
+   * if not specified, the id of the tag will be used in its place
+   */
+  displayName?: string
+}
+
+/**
+ * Defines the list of tags in a gallery,
+ * a key-value object where the value is the entry,
+ * and the key represents the id of a tag;
+ * the id of a tag must be unique,
+ * and the ids specified in a gallery entry must match
+ * the ids specified in `GalleryTags` in order for them to work effectively
+ */
+export type GalleryTags = { [id: string]: GalleryTag }
+
+/**
+ * Defines the model of the `GalleryList` template
+ */
+export type GalleryList = {
+  /**
+   * the entries to display in a gallery-list template
+   */
+  entries: GalleryEntries
+  /**
+   * the tags to use for filtering entries
+   */
+  tags: GalleryTags
+}

libs/types/src/content/templates/project.d.ts

@@ -0,0 +1,116 @@
+import { DateRange } from 'src/types/shared/dateRange'
+
+/**
+ * This describes aditional information about a project.
+ * to display when listing the project on the portfolio page.
+ * At minimum, the title should be specified.
+ */
+export type ProjectListingInfo = {
+  /**[Supports Markdown]
+   * Caption displayed below the title of the project on the projects page
+   */
+  caption?: string
+  /**
+   * When defined, the period will be displayed as {from} - {to}
+   */
+  period?: DateRange
+  /**[Supports Markdown]
+   * Information to summarize a project
+   */
+  summary?: string
+  /**
+   * Tags that correspond to project filters on the portfolio page if defined
+   */
+  tags?: string[]
+  /**[Supports Markdown]
+   * The title of the project
+   */
+  title: string
+  /**[CSS:background]
+   * Background image, repeat, attachment, and position for the project
+   */
+  thumbnailBackground?: string
+  /**[CSS:background-size]
+   * Background image size
+   */
+  thumbnailBackgroundSize?: string
+}
+
+/**
+ * This concatenates project files for entry within the store.
+ */
+export type ProjectStoreEntry = {
+  /**
+   * Content pulled from the projects' markdown (.md) file
+   */
+  content?: string
+
+  /**
+   * Listing information pulled from the projects' yaml (.yml) file
+   */
+  listing?: ProjectListingInfo
+}
+
+/**
+ * Defines a filter category in the filters panel
+ */
+export type ProjectFilterCategory = {
+  /**
+   * The heading of the category
+   */
+  heading: string
+  /**
+   * The filters associated with the category, or more categories
+   */
+  filters: FilterDefinition[] | ProjectFilterCategory[]
+}
+
+/**
+ * Defines a filter for a project
+ */
+export type FilterDefinition = {
+  /**
+   * The name to display in the filters panel
+   */
+  displayName: string
+  /**
+   * The tag which the filter corresponds to for when defined in {@link ProjectListingInfo.tags}
+   */
+  tag: string
+}
+
+/**
+ * Whenever a filter is toggled in the filters panel, this holds the data regarding that change
+ */
+export type FilterChangeEvent = {
+  /**
+   * The tag that the filter is associated with
+   */
+  tag: string
+  /**
+   * The toggle state of the filter
+   */
+  value: boolean
+}
+
+/**
+ * Defines the state of the filters panel
+ */
+export type FilterState = { [tag: string]: boolean }
+
+export type TagDefinition = {
+  displayName: string
+  className: string
+}
+
+export type Tag = 
+| TagDefinition
+| string
+
+export type ProjectList = {
+  projects: { [key: string]: {
+    config: string
+    content: string
+  }}
+  filters?: FilterDefinition[] | ProjectFilterCategory[]
+}

libs/types/src/index.d.ts

@@ -1,5 +1,11 @@
-export * from './content/globals'
-export * from './content/navigation'
-export * from './content/routing'
-export * from './content/themes'
-export * from './content/warnings'
+export * from './config/globals'
+export * from './config/navigation'
+export * from './config/routing'
+export * from './config/themes'
+export * from './config/warnings'
+
+export * from './content/dateRange'
+export * from './content/link'
+
+export * from './content/templates/gallery'
+export * from './content/templates/project'