Fix errors preventing green build and dev server startup

Author: webstackdev

public/logo.png

@@ -38,6 +38,9 @@ export const registerWebComponent = async (tagName = TestWebComponent.registered
   defineCustomElement(tagName, TestWebComponent)
 }
 
+// Backwards compatibility with older component script usage
+export const registerTestWebComponent = registerWebComponent
+
 export const webComponentModule: WebComponentModule<TestWebComponent> = {
   registeredName: TestWebComponent.registeredName,
   componentCtor: TestWebComponent,

src/components/Test/webComponent.ts

@@ -12,6 +12,14 @@
  * - README.md (update theme documentation if needed)
  */
 
+import themeConfig from '@content/themes.json'
+
+// @TODO: add tooltip that makes use of the description field
+
+interface ThemeColors {
+  backgroundOffset: string
+}
+
 /**
  * Theme object interface
  */
@@ -26,6 +34,8 @@ export interface Theme {
   category?: 'core' | 'seasonal' | 'custom'
   /** Boolean flag for temporary/seasonal themes */
   seasonal?: boolean
+  /** Theme color settings used by head/meta scripts */
+  colors: ThemeColors
 }
 
 /**
@@ -39,37 +49,16 @@ export interface DefaultTheme {
 /**
  * Available themes configuration
  */
-export const themes: Theme[] = [
-  {
-    id: 'light',
-    name: 'Light',
-    description: 'Clean light theme with blue accents',
-    category: 'core',
-  },
-  {
-    id: 'dark',
-    name: 'Dark',
-    description: 'Dark theme with navy background',
-    category: 'core',
-  },
-  // Example of seasonal theme (uncomment and customize):
-  // {
-  //   id: 'holiday',
-  //   name: 'Holiday',
-  //   description: 'Festive red and green theme for the holidays',
-  //   category: 'seasonal',
-  //   seasonal: true
-  // }
-]
-
-/**
- * Default theme configuration
- */
-export const defaultTheme: DefaultTheme = {
-  id: 'light',
-  prefersDarkScheme: false,
+interface ThemeConfig {
+  themes: Theme[]
+  defaultTheme: DefaultTheme
 }
 
+const themeData = themeConfig as ThemeConfig
+
+export const themes = themeData.themes
+export const defaultTheme = themeData.defaultTheme
+
 /**
  * Get theme by ID
  */

src/components/ThemePicker/server.ts

@@ -199,20 +199,6 @@ const testimonialCollection = defineCollection({
  * - The `components/Head/client.ts` to set the window.metaColors global variable that iss used to swap out the previous <meta> element when the theme is changed (`id` and `colors.backgroundOffset` properties only)
  */
 
-/** @NOTE: These need to be kept in sync with `src/styles/themes.css` and `src/lib/themes.ts` */
-const themesSchema = z.object({
-  id: z.enum(['default', 'dark']),
-  name: z.enum(['Light', 'Dark']),
-  colors: z.object({
-    backgroundOffset: z.string(),
-  }),
-})
-
-const themesCollection = defineCollection({
-  loader: file('./src/content/themes.json'),
-  schema: themesSchema,
-})
-
 /**
  * Downloads
  */
@@ -253,5 +239,4 @@ export const collections = {
   downloads: downloadsCollection,
   services: servicesCollection,
   testimonials: testimonialCollection,
-  themes: themesCollection,
 }

src/content.config.ts

@@ -1,16 +1,26 @@
 {
-  "default": {
-    "id": "default",
-    "name": "Light",
-    "colors": {
-      "backgroundOffset": "#e2e2e2"
-    }
+  "defaultTheme": {
+    "id": "light",
+    "prefersDarkScheme": false
   },
-  "dark": {
-    "id": "dark",
-    "name": "Dark",
-    "colors": {
-      "backgroundOffset": "#00386d"
+  "themes": [
+    {
+      "id": "light",
+      "name": "Light",
+      "description": "Clean light theme with blue accents",
+      "category": "core",
+      "colors": {
+        "backgroundOffset": "#e2e2e2"
+      }
+    },
+    {
+      "id": "dark",
+      "name": "Dark",
+      "description": "Dark theme with navy background",
+      "category": "core",
+      "colors": {
+        "backgroundOffset": "#00386d"
+      }
     }
-  }
+  ]
 }

src/content/themes.json

@@ -3,14 +3,20 @@
  * Returns the web app manifest for progressive web app functionality
  */
 import contactData from '@content/contact.json'
-import themes from '@content/themes.json'
+import themeConfig from '@content/themes.json'
 
 /**
  * GET endpoint for the web app manifest
  * @returns Response with manifest JSON
  */
 export function GET() {
-  const defaultTheme = themes.default
+  const defaultThemeId = themeConfig.defaultTheme.id
+  const defaultTheme =
+    themeConfig.themes.find(theme => theme.id === defaultThemeId) || themeConfig.themes[0]
+
+  if (!defaultTheme) {
+    throw new Error('No themes configured in themes.json; unable to build manifest.json')
+  }
   /* eslint-disable camelcase */
   const manifest = {
     lang: 'en_US',