create types lib

libs/types/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@goldenwere/static-web-templates-types",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "types": "src/index.d.ts",
+  "main": "src/index.d.ts"
+}

libs/types/src/content/globals.d.ts

@@ -0,0 +1,14 @@
+import { HeaderEntry } from './navigation'
+import { SiteThemeList } from './themes'
+import { WarningModal } from './warnings'
+
+/**
+ * Defines global values for the site.
+ */
+type SiteGlobals = {
+  header: HeaderEntry[]
+  id: string
+  stylesheetUrls: string[]
+  themes: SiteThemeList
+  warning: WarningModal
+}

libs/types/src/content/navigation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Defines an entry in the app header.
+ * Optionally recursive by defining children instead of path.
+ */
+export type HeaderEntry = {
+  displayName: string
+} & ({
+  path: string
+  target?:
+    | '_self'
+    | '_blank'
+    | '_parent'
+    | '_top'
+    | '_unfencedTop'
+} | {
+  children: HeaderEntry[]
+})

libs/types/src/content/routing.d.ts

@@ -0,0 +1,77 @@
+import { WarningModal } from './warnings'
+
+
+/**
+ * Defines the available `views` that can be used to set up routes.
+ * Each `Template` has different configuration options
+ */
+export type Template = 
+  | 'markdown'
+  | 'project-list'
+  | 'gallery-list'
+
+/**
+ * Defines the shared options for a route
+ */
+export type SharedRouteDefinition = {
+  id: string
+  scriptUrl?: string
+  stylesheetUrls: string[]
+  template: Template
+  title: string
+  warning: boolean | WarningModal
+}
+
+/**
+ * Defines a content-based route
+ */
+export type ContentfulRouteDefintion = SharedRouteDefinition & {
+  content: string
+}
+
+/**
+ * Defines a config-based route
+ */
+export type ConfigfulRouteDefinition = SharedRouteDefinition & {
+  config: string
+}
+
+/**
+ * Defines the config for a route using the `markdown` {@link Template}
+ */
+export type MarkdownDefinition = ContentfulRouteDefintion & {
+  template: 'markdown'
+}
+
+/**
+ * Defines the config for a route using the `project-list` {@link Template}
+ */
+export type ProjectListDefinition = ConfigfulRouteDefinition & {
+  template: 'project-list'
+  view: {
+    stylesheetUrls: string[]
+  }
+}
+
+/**
+ * Defines the config for a route using the `gallery-list` {@link Template}
+ */
+export type GalleryListDefinition = ConfigfulRouteDefinition & {
+  template: 'gallery-list'
+  view: {
+    stylesheetUrls: string[]
+  }
+}
+
+/**
+ * Defines all available route definitions
+ */
+export type RouteDefinition =
+  | MarkdownDefinition
+  | ProjectListDefinition
+  | GalleryListDefinition
+
+/**
+ * Defines the collection of routes the app uses
+ */
+export type RouteCollection = { [key: string]: RouteDefinition }

libs/types/src/content/themes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Defines a stylesheet the site uses for applying a theme
+ */
+export type SiteTheme = {
+  displayName?: string
+  type: SiteThemeType
+  url: string
+}
+
+/**
+ * Defines a list of themes the site uses
+ */
+export type SiteThemeList = { [id: string]: SiteTheme }
+
+/**
+ * Defines what kind of theme a specified theme is
+ * for the purposes of determining a default theme
+ * based on the system/browser setting of the visitor
+ */
+export type SiteThemeType =
+  | 'dark'
+  | 'light'
+  | 'dark_hc'
+  | 'light_hc'

libs/types/src/content/warnings.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Defines the structure of the warning modal that shows when a route has a content warning of some sort.
+ */
+export type WarningModal = {
+  prompt: string
+  leave: {
+    url: string,
+    text: string,
+  },
+  acknowledge: string,
+  remember: string,
+}

libs/types/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './content/globals'
+export * from './content/navigation'
+export * from './content/routing'
+export * from './content/themes'
+export * from './content/warnings'

package-lock.json

@@ -8,9 +8,13 @@
       "name": "@goldenwere/static-web-templates",
       "version": "0.0.0",
       "workspaces": [
-        "projects/*"
+        "projects/*",
+        "libs/*"
       ]
     },
+    "libs/types": {
+      "version": "0.0.0"
+    },
     "node_modules/@asamuzakjp/dom-selector": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-2.0.2.tgz",
@@ -442,6 +446,10 @@
       "resolved": "projects/sites",
       "link": true
     },
+    "node_modules/@goldenwere/static-web-templates-types": {
+      "resolved": "libs/types",
+      "link": true
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -3346,6 +3354,7 @@
       "name": "@goldenwere/static-web-templates-frontend",
       "version": "0.0.0",
       "devDependencies": {
+        "@goldenwere/static-web-templates-types": "*",
         "@types/dompurify": "3.0.5",
         "@types/js-yaml": "4.0.9",
         "@types/node": "18.16.x",
@@ -3377,6 +3386,10 @@
       "devDependencies": {
         "symlink-dir": "6.0.0"
       }
+    },
+    "projects/types": {
+      "version": "0.0.0",
+      "extraneous": true
     }
   }
 }

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "workspaces": [
-    "projects/*"
+    "projects/*",
+    "libs/*"
   ]
 }

projects/frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@goldenwere/static-web-templates-types": "*",
     "@types/dompurify": "3.0.5",
     "@types/js-yaml": "4.0.9",
     "@types/node": "18.16.x",

projects/frontend/src/components/shared/header-link.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type HeaderEntry } from 'content/routes.js'
+import { type HeaderEntry } from '@goldenwere/static-web-templates-types'
 import { useRouteStore } from 'src/routes'
 
 const props = defineProps<{

projects/frontend/src/components/shared/warning-prompt.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import type { WarningModal } from '@goldenwere/static-web-templates-types'
 
 import { storage } from 'src/utilities/fetch'
 
-import type { WarningModal } from 'content/routes.js'
 
 import EmbedableContent from './embedable-content.vue'
 

projects/frontend/src/content-env.d.ts

@@ -1,151 +1,14 @@
 declare module 'content/routes.js' {
-  /**
-   * Defines the structure of the warning modal that shows when a route has a content warning of some sort.
-   */
-  export type WarningModal = {
-    prompt: string
-    leave: {
-      url: string,
-      text: string,
-    },
-    acknowledge: string,
-    remember: string,
-  }
-
-  /**
-   * Defines the available `views` that can be used to set up routes.
-   * Each `Template` has different configuration options
-   */
-  type Template = 
-    | 'markdown'
-    | 'project-list'
-    | 'gallery-list'
-
-  /**
-   * Defines the shared options for a route
-   */
-  type SharedRouteDefinition = {
-    id: string
-    scriptUrl?: string
-    stylesheetUrls: string[]
-    template: Template
-    title: string
-    warning: boolean | WarningModal
-  }
-
-  /**
-   * Defines a content-based route
-   */
-  type ContentfulRouteDefintion = SharedRouteDefinition & {
-    content: string
-  }
-
-  /**
-   * Defines a config-based route
-   */
-  type ConfigfulRouteDefinition = SharedRouteDefinition & {
-    config: string
-  }
-
-  /**
-   * Defines the config for a route using the `markdown` {@link Template}
-   */
-  type MarkdownDefinition = ContentfulRouteDefintion & {
-    template: 'markdown'
-  }
-
-  /**
-   * Defines the config for a route using the `project-list` {@link Template}
-   */
-  type ProjectListDefinition = ConfigfulRouteDefinition & {
-    template: 'project-list'
-    view: {
-      stylesheetUrls: string[]
-    }
-  }
-
-  /**
-   * Defines the config for a route using the `gallery-list` {@link Template}
-   */
-  type GalleryListDefinition = ConfigfulRouteDefinition & {
-    template: 'gallery-list'
-    view: {
-      stylesheetUrls: string[]
-    }
-  }
-
-  /**
-   * Defines all available route definitions
-   */
-  type RouteDefinition =
-    | MarkdownDefinition
-    | ProjectListDefinition
-    | GalleryListDefinition
-
-  /**
-   * Defines the collection of routes the app uses
-   */
-  type RouteCollection = { [key: string]: RouteDefinition }
+  import type {
+    RouteCollection,
+    SiteGlobals,
+  } from '@goldenwere/static-web-templates-types'
 
   /**
    * The routes the app uses
    */
   const routes: RouteCollection
 
-  /**
-   * Defines an entry in the app header.
-   * Optionally recursive by defining children instead of path.
-   */
-  type HeaderEntry = {
-    displayName: string
-  } & ({
-    path: string
-    target?:
-      | '_self'
-      | '_blank'
-      | '_parent'
-      | '_top'
-      | '_unfencedTop'
-  } | {
-    children: HeaderEntry[]
-  })
-
-  /**
-   * Defines what kind of theme a specified theme is
-   * for the purposes of determining a default theme
-   * based on the system/browser setting of the visitor
-   */
-  type SiteThemeType =
-    | 'dark'
-    | 'light'
-    | 'dark_hc'
-    | 'light_hc'
-
-  /**
-   * Defines a stylesheet the site uses for applying a theme
-   */
-  type SiteTheme = {
-    displayName?: string
-    type: SiteThemeType
-    url: string
-  }
-
-  /**
-   * Defines a list of themes the site uses
-   */
-  type SiteThemeList = { [id: string]: SiteTheme }
-  
-  /**
-   * Defines global values for the site.
-   */
-  type SiteGlobals = {
-    header: HeaderEntry[]
-    id: string
-    stylesheetUrls: string[]
-    themes: SiteThemeList
-    warning: WarningModal
-  }
-
   /**
    * Global values the site uses.
    */

projects/frontend/src/main.vue

@@ -7,7 +7,7 @@ import { injectStylesheet } from 'src/utilities/dom'
 import { storage } from './utilities/fetch'
 import { useRouteStore } from 'src/routes'
 
-import type { WarningModal } from 'content/routes.js'
+import type { 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'

projects/frontend/src/routes.ts

@@ -1,15 +1,14 @@
 import { defineStore } from 'pinia'
 import { type RouteRecordRaw } from 'vue-router'
+import { routes, siteGlobals } from 'content/routes.js'
 import {
-  routes,
-  siteGlobals,
   type GalleryListDefinition,
   type HeaderEntry,
   type ProjectListDefinition,
   type RouteDefinition,
   type SiteGlobals,
   type Template,
-} from 'content/routes.js'
+} from '@goldenwere/static-web-templates-types'
 
 const markdownBody = () => import ('./views/markdown/markdown.vue')
 const projectListBody = () => import ('./views/project/project-list.vue')

projects/frontend/src/views/gallery/gallery-list.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { type GalleryListDefinition } from '@goldenwere/static-web-templates-types'
 import { type RouteRecordRaw, useRouter } from 'vue-router'
 
 import type { GalleryDisplayedEntries, GalleryList } from './gallery'
-import { type GalleryListDefinition } from 'content/routes.js'
 import { amendVariantsWithDefaults } from './gallery-utilities'
 import { fetchAndParseYaml, storage } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'

projects/frontend/src/views/gallery/gallery-view.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { type GalleryListDefinition } from '@goldenwere/static-web-templates-types'
 
 import type { GalleryEntry, GalleryList } from './gallery'
-import { type GalleryListDefinition } from 'content/routes.js'
 import { amendVariantsWithDefaults, getTitleFromEntryOrId } from './gallery-utilities'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'

projects/frontend/src/views/markdown/markdown.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { type MarkdownDefinition } from '@goldenwere/static-web-templates-types'
 
 import EmbedableContent from 'src/components/shared/embedable-content.vue'
 
-import { type MarkdownDefinition } from 'content/routes.js'
 import { fetchAndParseMarkdown } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'

projects/frontend/src/views/project/project-list.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { type ProjectListDefinition } from '@goldenwere/static-web-templates-types'
 
 import type { ProjectList, ProjectListingInfo } from './project'
-import { type ProjectListDefinition } from 'content/routes.js'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'

projects/frontend/src/views/project/project-view.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { type ProjectListDefinition } from '@goldenwere/static-web-templates-types'
 
 import type { ProjectList, ProjectListingInfo } from './project'
-import { type ProjectListDefinition } from 'content/routes.js'
 import { fetchAndParseMarkdown, fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'