Merge branch 'dev' of https://github.com/discours/discoursio-webapp into dev

.gitignore

@@ -1,4 +1,5 @@
 .devcontainer
+.pnpm-store
 dist/
 node_modules/
 npm-debug.log*

src/components/Feed/Placeholder/Placeholder.tsx

@@ -1,3 +1,10 @@
+/**
+ * Placeholder component displays different placeholder content based on type and mode.
+ *
+ * @param {PlaceholderProps} props - The properties for the component.
+ * @returns {JSX.Element | null} The rendered placeholder or null if data is missing.
+ */
+
 import { clsx } from 'clsx'
 import { For, Show, createMemo } from 'solid-js'
 
@@ -89,7 +96,21 @@ export const Placeholder = (props: PlaceholderProps) => {
   const { t } = useLocalize()
   const { session } = useSession()
 
-  const placeholderData = createMemo(() => data[props.type])
+  // dufok (^-^') mem for placeholder data without a fallback, it will be `undefined` if not found
+
+  const placeholderData = createMemo(() => {
+    const dataForType = data[props.type]
+    if (!dataForType) {
+      console.warn(`No placeholder data found for type: ${props.type}`)
+    }
+    return dataForType
+    // (^-^') No fallback to ensure it is empty when data is missing
+  })
+
+  // (^-^') Return null if no placeholder data is found
+  if (!placeholderData()) {
+    return null
+  }
 
   return (
     <div
@@ -100,17 +121,17 @@ export const Placeholder = (props: PlaceholderProps) => {
       )}
     >
       <div class={styles.placeholderCover}>
-        <img src={`/${placeholderData().image}`} alt={placeholderData().header} />
+        <img src={`/${placeholderData()?.image}`} alt={placeholderData()?.header} />
       </div>
       <div class={styles.placeholderContent}>
         <div>
-          <h3 innerHTML={t(placeholderData().header)} />
+          <h3 innerHTML={t(placeholderData()?.header)} />
-          <p innerHTML={t(placeholderData().text)} />
+          <p innerHTML={t(placeholderData()?.text)} />
         </div>
 
-        <Show when={placeholderData().profileLinks}>
+        <Show when={placeholderData()?.profileLinks}>
           <div class={styles.bottomLinks}>
-            <For each={placeholderData().profileLinks}>
+            <For each={placeholderData()?.profileLinks}>
               {(link) => (
                 <a href={link.href}>
                   <Icon name="link-white" class={styles.icon} />
@@ -133,7 +154,7 @@ export const Placeholder = (props: PlaceholderProps) => {
             </a>
           }
         >
-          <a class={styles.button} href={placeholderData().href}>
+          <a class={styles.button} href={placeholderData()?.href}>
             {t(
               session()?.access_token
                 ? placeholderData()?.buttonLabelAuthor || ''

src/routes/author/[slug]/[...tab].tsx

@@ -133,7 +133,12 @@ export default function AuthorPage(props: RouteSectionProps<AuthorPageProps>) {
   )
 
   return (
-    <ErrorBoundary fallback={(_err) => <FourOuFourView />}>
+    <ErrorBoundary
+      fallback={(_err) => {
+        console.error('ErrorBoundary caught an error', _err)
+        return <FourOuFourView />
+      }}
+    >
       <Suspense fallback={<Loading />}>
         <PageLayout
           title={title()}

vite.config.ts

@@ -28,7 +28,7 @@ export default {
       '@': path.resolve('./public'),
       '/icons': path.resolve('./public/icons'),
       '/fonts': path.resolve('./public/fonts'),
-      'bootstrap': path.resolve('./node_modules/bootstrap')
+      bootstrap: path.resolve('./node_modules/bootstrap')
     }
   },
   envPrefix: 'PUBLIC_',