Skip to content

Commit

Permalink
Fixing rendering for null values
Browse files Browse the repository at this point in the history
  • Loading branch information
@mar1
mar1 committed Dec 28, 2024
1 parent df410de commit 6988286
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 75 deletions.
164 changes: 96 additions & 68 deletions src/components/CharacterDetail.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import type { Character } from '../types/character';
import type { Character } from "../types/character";
interface Props {
character: Character;
Expand All @@ -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>
4 changes: 4 additions & 0 deletions src/pages/characters/[id].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
24 changes: 18 additions & 6 deletions src/utils/characters.ts
View file
Original file line number Diff line number Diff line change
@@ -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 [];
}
}

0 comments on commit 6988286

Please sign in to comment.