From 698828699ef5e8f87e2df6480d2358b7c6a2c69a Mon Sep 17 00:00:00 2001
From: Marin <51886896+mar1@users.noreply.github.com>
Date: Sat, 28 Dec 2024 14:51:52 +0100
Subject: [PATCH] Fixing rendering for null values

---
 src/components/CharacterDetail.astro | 164 ++++++++++++++++-----------
 src/pages/characters/[id].astro      |   4 +
 src/pages/index.astro                |   2 +-
 src/utils/characters.ts              |  24 +++-
 4 files changed, 119 insertions(+), 75 deletions(-)

diff --git a/src/components/CharacterDetail.astro b/src/components/CharacterDetail.astro
index 28d189e..2fcced8 100644
--- a/src/components/CharacterDetail.astro
+++ b/src/components/CharacterDetail.astro
@@ -1,5 +1,5 @@
 ---
-import type { Character } from '../types/character';
+import type { Character } from "../types/character";
 
 interface Props {
   character: Character;
@@ -12,82 +12,110 @@ const { character } = Astro.props;
   <h1 class="text-3xl font-bold mb-6">{character.name}</h1>
 
   <!-- Bio Section -->
-  <section class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Bio</h2>
-    <ul class="space-y-2">
-      {character.bio.map((line) => (
-        <li class="text-gray-700">{line}</li>
-      ))}
-    </ul>
-  </section>
+  {
+    character.bio && character.bio.length > 0 && (
+      <section class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">Bio</h2>
+        <ul class="space-y-2">
+          {character.bio.map((line) => (
+            <li class="text-gray-700">{line}</li>
+          ))}
+        </ul>
+      </section>
+    )
+  }
 
   <!-- Lore Section -->
-  <section class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Lore</h2>
-    <ul class="space-y-2">
-      {character.lore.map((line) => (
-        <li class="text-gray-700">{line}</li>
-      ))}
-    </ul>
-  </section>
+  {
+    character.lore && character.lore.length > 0 && (
+      <section class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">Lore</h2>
+        <ul class="space-y-2">
+          {character.lore.map((line) => (
+            <li class="text-gray-700">{line}</li>
+          ))}
+        </ul>
+      </section>
+    )
+  }
 
   <!-- Knowledge Section -->
-  <section class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Knowledge</h2>
-    <div class="flex flex-wrap gap-2">
-      {character.knowledge.map((item) => (
-        <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full">
-          {item}
-        </span>
-      ))}
-    </div>
-  </section>
+  {
+    character.knowledge && character.knowledge.length > 0 && (
+      <section class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">Knowledge</h2>
+        <div class="flex flex-wrap gap-2">
+          {character.knowledge.map((item) => (
+            <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full">
+              {item}
+            </span>
+          ))}
+        </div>
+      </section>
+    )
+  }
 
   <!-- Style Section -->
-  <section class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Style</h2>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <div>
-        <h3 class="font-medium mb-2">General</h3>
-        <ul class="space-y-1">
-          {character.style.all.map((style) => (
-            <li class="text-gray-700">{style}</li>
-          ))}
-        </ul>
-      </div>
-      <div>
-        <h3 class="font-medium mb-2">Chat</h3>
-        <ul class="space-y-1">
-          {character.style.chat.map((style) => (
-            <li class="text-gray-700">{style}</li>
-          ))}
-        </ul>
-      </div>
-      <div>
-        <h3 class="font-medium mb-2">Post</h3>
-        <ul class="space-y-1">
-          {character.style.post.map((style) => (
-            <li class="text-gray-700">{style}</li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  </section>
+  {
+    character.style && (
+      <section class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">Style</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {character.style.all && character.style.all.length > 0 && (
+            <div>
+              <h3 class="font-medium mb-2">General</h3>
+              <ul class="space-y-1">
+                {character.style.all.map((style) => (
+                  <li class="text-gray-700">{style}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {character.style.chat && character.style.chat.length > 0 && (
+            <div>
+              <h3 class="font-medium mb-2">Chat</h3>
+              <ul class="space-y-1">
+                {character.style.chat.map((style) => (
+                  <li class="text-gray-700">{style}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {character.style.post && character.style.post.length > 0 && (
+            <div>
+              <h3 class="font-medium mb-2">Post</h3>
+              <ul class="space-y-1">
+                {character.style.post.map((style) => (
+                  <li class="text-gray-700">{style}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
 
   <!-- Message Examples Section -->
-  <section class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Message Examples</h2>
-    <div class="space-y-6">
-      {character.messageExamples.map((conversation) => (
-        <div class="border rounded-lg p-4">
-          {conversation.map((message) => (
-            <div class={`mb-4 ${message.user === character.name ? 'pl-4' : ''}`}>
-              <div class="font-medium mb-1">{message.user}</div>
-              <div class="text-gray-700">{message.content.text}</div>
+  {
+    character.messageExamples && character.messageExamples.length > 0 && (
+      <section class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">Message Examples</h2>
+        <div class="space-y-6">
+          {character.messageExamples.map((conversation) => (
+            <div class="border rounded-lg p-4">
+              {conversation.map((message) => (
+                <div
+                  class={`mb-4 ${message.user === character.name ? "pl-4" : ""}`}
+                >
+                  <div class="font-medium mb-1">{message.user}</div>
+                  <div class="text-gray-700">{message.content.text}</div>
+                </div>
+              ))}
             </div>
           ))}
         </div>
-      ))}
-    </div>
-  </section>
+      </section>
+    )
+  }
 </div>
diff --git a/src/pages/characters/[id].astro b/src/pages/characters/[id].astro
index d1c2375..2a9b84b 100644
--- a/src/pages/characters/[id].astro
+++ b/src/pages/characters/[id].astro
@@ -7,6 +7,10 @@ import type { Character } from "../../types/character";
 export async function getStaticPaths() {
   const characters = await getAllCharacters();
 
+  if (!characters || !Array.isArray(characters)) {
+    throw new Error("Failed to fetch characters data");
+  }
+
   return characters.map((character) => ({
     params: { id: character.id },
     props: { character },
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 39f851f..8772571 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import CharacterList from "../components/CharacterList.astro";
 import { getAllCharacters } from "../utils/characters";
 
-const characters = await getAllCharacters();
+const characters = (await getAllCharacters()).filter((char) => char != null);
 ---
 
 <Layout title="AI Character Database">
diff --git a/src/utils/characters.ts b/src/utils/characters.ts
index 002fa26..1ad8f45 100644
--- a/src/utils/characters.ts
+++ b/src/utils/characters.ts
@@ -1,11 +1,23 @@
 import type { Character } from '../types/character';
 
 export async function getAllCharacters(): Promise<Character[]> {
-  // Use Astro's glob imports to load all JSON files at build time
-  const characterModules = await import.meta.glob('../data/characters/*.json', {
-    eager: true,
-    import: 'default',
-  });
+  try {
+    // Use Astro's glob imports to load all JSON files at build time
+    const characterModules = await import.meta.glob('/src/data/characters/*.json', {
+      eager: true,
+      import: 'default',
+    });
 
-  return Object.values(characterModules) as Character[];
+    if (!characterModules || Object.keys(characterModules).length === 0) {
+      console.warn('No character modules found');
+      return [];
+    }
+
+    const characters = Object.values(characterModules) as Character[];
+    console.log(`Found ${characters.length} characters`);
+    return characters;
+  } catch (error) {
+    console.error('Error loading characters:', error);
+    return [];
+  }
 }