("");
+
+ useEffect(() => {
+ let ignore = false;
+
+ const run = async () => {
+ try {
+ setState("loading");
+ const data = await loadManifest();
+ if (!ignore) {
+ setPosts(
+ [...data].sort((a, b) => {
+ const aDate = a.publishedAt ?? "";
+ const bDate = b.publishedAt ?? "";
+ return aDate < bDate ? 1 : -1;
+ })
+ );
+ setState("idle");
+ }
+ } catch (err) {
+ if (!ignore) {
+ setError(err instanceof Error ? err.message : "Failed to load manifest");
+ setState("error");
+ }
+ }
+ };
+
+ void run();
+ return () => {
+ ignore = true;
+ };
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {BLOG_NAME}
+
+
+
+
+ }
+ />
+ }
+ />
+ } />
+
+
+
+ );
+}
+
+function IndexPage({
+ posts,
+ state,
+ error
+}: {
+ posts: ManifestPost[];
+ state: LoadState;
+ error: string;
+}) {
+ if (state === "loading") return ;
+ if (state === "error") return Error: {error}
;
+ if (posts.length === 0) return No posts yet.
;
+
+ const hasFeatured = posts.length >= 3;
+ const featuredPost = hasFeatured ? posts[0] : null;
+ const gridPosts = hasFeatured ? posts.slice(1) : posts;
+
+ const renderPost = (post: ManifestPost) => {
+ const publishedDate = getReadableDate(post.publishedAt);
+ const bannerTxId = post.frontmatter?.banner ?? post.bannerTxId;
+
+ return (
+ <>
+ {bannerTxId && (
+
+ })
+
+ )}
+
+ {post.title}
+
+
+ {post.description || post.excerpt || "No description provided."}
+
+
+ {publishedDate && {publishedDate}}
+ {post.readingTime && {post.readingTime} min read}
+ {post.wordCount && {post.wordCount} words}
+
+
+ );
+ };
+
+ return (
+
+ {featuredPost && (
+
+ {renderPost(featuredPost)}
+
+ )}
+
+ {gridPosts.map((post) => (
+
+ {renderPost(post)}
+
+ ))}
+
Error: {manifestError}
;
+ if (!post) return Post not found.
;
+ if (postState === "loading") return showPostLoader ? : null;
+ if (postState === "error") return Error: {postError}
;
+
+ const title = postFrontmatter.title || post.title;
+ const description =
+ postFrontmatter.desc ||
+ postFrontmatter.description ||
+ post.description ||
+ postFrontmatter.excerpt ||
+ post.excerpt ||
+ "";
+ const bannerTxId = postFrontmatter.banner || post.frontmatter?.banner || post.bannerTxId;
+ const publishedDate = getReadableDate(postFrontmatter.date || post.publishedAt);
+ const updatedDate = getReadableDate(postFrontmatter.updated || post.updated || undefined);
+
+ return (
+
+
+ {bannerTxId && (
+
+
+