Skip to content

Add ecosystem detail pages #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamsoffer merged 6 commits into from
Apr 7, 2026
Merged

Add ecosystem detail pages #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5882f7e
Add ecosystem detail pages with markdown-driven content
adamsoffer Apr 7, 2026
b20ef2c
Resolve pnpm-lock.yaml merge conflict markers
adamsoffer Apr 7, 2026
1676f30
Update ecosystem page description copy
adamsoffer Apr 7, 2026
29c0c0d
Use next/link for Explore the ecosystem button
adamsoffer Apr 7, 2026
420c338
Update check-ecosystem-urls script to read markdown frontmatter
adamsoffer Apr 7, 2026
d6c056f
Improve Daydream homepage description and add Discord support link
adamsoffer Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions app/ecosystem/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import EcosystemDetail from "@/components/ecosystem/EcosystemDetail";
import {
getAppBySlug,
getAppSlugs,
renderEcosystemMarkdown,
} from "@/lib/ecosystem";

type Props = {
params: Promise<{ slug: string }>;
};

export async function generateStaticParams() {
return getAppSlugs().map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
try {
const app = getAppBySlug(slug);
return {
title: `${app.name} | Livepeer Ecosystem`,
description: app.description,
openGraph: {
title: `${app.name} | Livepeer Ecosystem`,
description: app.description,
type: "website",
},
twitter: {
card: "summary_large_image",
title: `${app.name} | Livepeer Ecosystem`,
description: app.description,
},
};
} catch {
return { title: "App Not Found — Livepeer Ecosystem" };
}
}

export default async function EcosystemAppPage({ params }: Props) {
const { slug } = await params;

let app;
try {
app = getAppBySlug(slug);
} catch {
notFound();
}

const html = await renderEcosystemMarkdown(app.content);

return <EcosystemDetail app={app} html={html} />;
}
335 changes: 17 additions & 318 deletions app/ecosystem/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,321 +1,20 @@
"use client";

import {
Suspense,
useState,
useMemo,
useEffect,
useRef,
useCallback,
} from "react";
import { Search, Plus, ArrowUpRight } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import { ECOSYSTEM_APPS, ECOSYSTEM_CATEGORIES } from "@/lib/ecosystem-data";
import PageHero from "@/components/ui/PageHero";
import Container from "@/components/ui/Container";
import SectionHeader from "@/components/ui/SectionHeader";
import Badge from "@/components/ui/Badge";
import Button from "@/components/ui/Button";
import FilterPill from "@/components/ui/FilterPill";

const BATCH_SIZE = 12;

function EcosystemPageInner() {
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();

const [activeCategories, setActiveCategories] = useState<string[]>(() => {
const param = searchParams.get("categories");
return param ? param.split(",").map(decodeURIComponent) : [];
});
const [search, setSearch] = useState(() => searchParams.get("q") ?? "");
const [visible, setVisible] = useState(BATCH_SIZE);
const [buttonBatch, setButtonBatch] = useState(0);
const sentinelRef = useRef<HTMLDivElement>(null);

const isAllActive = activeCategories.length === 0;
const loadMore = useCallback(() => setVisible((v) => v + BATCH_SIZE), []);
const handleButtonLoad = useCallback(() => {
setButtonBatch(visible);
loadMore();
}, [visible, loadMore]);

/* Sync filter state → URL query params */
useEffect(() => {
const params = new URLSearchParams();
if (activeCategories.length > 0)
params.set("categories", activeCategories.join(","));
if (search) params.set("q", search);

const qs = params.toString();
const url = qs ? `${pathname}?${qs}` : pathname;
router.replace(url, { scroll: false });
}, [activeCategories, search, pathname, router]);

useEffect(() => {
setVisible(BATCH_SIZE);
}, [activeCategories, search]);

const handleCategoryToggle = (cat: string) => {
if (cat === "All") {
setActiveCategories([]);
return;
}
setActiveCategories((prev) =>
prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
);
};

const filtered = useMemo(() => {
return ECOSYSTEM_APPS.filter((app) => {
const matchesCategory =
isAllActive || activeCategories.some((c) => app.categories.includes(c));
const matchesSearch =
!search ||
app.name.toLowerCase().includes(search.toLowerCase()) ||
app.description.toLowerCase().includes(search.toLowerCase());
return matchesCategory && matchesSearch;
});
}, [activeCategories, search, isAllActive]);

const shown = filtered.slice(0, visible);
const hasMore = visible < filtered.length;

// Infinite scroll with IntersectionObserver on mobile, "View more" button on desktop.
useEffect(() => {
const el = sentinelRef.current;
if (!el || !hasMore) return;

const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) loadMore();
},
{ rootMargin: "200px" }
);
observer.observe(el);
return () => observer.disconnect();
}, [hasMore, loadMore]);

return (
<PageHero>
<div className="min-h-screen">
<Container>
<SectionHeader
label="Ecosystem"
title="Built on Livepeer"
description="Explore what developers and teams are building with real-time video and AI inference on Livepeer."
align="left"
action={
<Button
href="/ecosystem/submit"
variant="secondary"
size="sm"
className="shrink-0 backdrop-blur-sm text-white/60 hover:text-white/80"
>
<Plus className="h-3 w-3" />
Submit App
</Button>
}
/>

{/* Filter bar */}
<div className="mt-8 flex flex-col gap-4 sm:mt-12 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<div
className="flex flex-wrap gap-2 select-none"
role="group"
aria-label="Filter by category"
>
<FilterPill
label="All"
isActive={isAllActive}
onToggle={() => handleCategoryToggle("All")}
/>
<FilterPill
label="Categories"
isActive={activeCategories.length > 0}
onToggle={() => handleCategoryToggle("All")}
dropdown={{
items: ECOSYSTEM_CATEGORIES.filter((c) => c !== "All"),
activeItems: activeCategories,
onItemToggle: handleCategoryToggle,
}}
/>
</div>

<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-white/50" />
<input
type="text"
placeholder="Search"
aria-label="Search ecosystem apps"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-md border border-white/[0.12] bg-white/[0.03] backdrop-blur-sm py-1.5 pl-9 pr-8 text-sm text-white/60 placeholder:text-white/30 transition-colors duration-200 focus:bg-white/[0.05] focus:border-white/20 focus:outline-none sm:w-56 select-none"
/>
<AnimatePresence>
{search && (
<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0.2 } }}
exit={{ opacity: 0, transition: { duration: 0.5 } }}
onClick={() => setSearch("")}
className="absolute right-2.5 top-1/2 -translate-y-1/2 cursor-pointer text-white/50 transition-colors hover:text-white/80"
aria-label="Clear search"
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
className="block"
>
<path
d="M5 5L15 15M15 5L5 15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</motion.button>
)}
</AnimatePresence>
</div>
</div>

{/* App grid */}
{shown.length > 0 ? (
<div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{shown.map((app, index) => {
const inButtonBatch =
buttonBatch >= 0 &&
index >= buttonBatch &&
index < buttonBatch + BATCH_SIZE;
return (
<motion.a
key={app.id}
href={app.url}
target="_blank"
rel="noopener noreferrer"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={
inButtonBatch
? {
once: true,
amount: 0,
margin: "0px 0px 2000px 0px",
}
: { once: true, amount: 0.15 }
}
transition={{
duration: 1.25,
ease: [0.25, 0.1, 0.25, 1],
delay: inButtonBatch ? (index - buttonBatch) * 0.06 : 0,
}}
className="group flex flex-col rounded-2xl border border-dark-border bg-dark-card p-5 transition-colors hover:border-white/10 sm:p-6 select-none"
>
<div className="mb-4 flex items-start justify-between">
<div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-xl bg-white/[0.06]">
{app.logo ? (
<img
src={`/ecosystem/${app.logo}`}
alt={`${app.name} logo`}
className="h-10 w-10 rounded-lg object-contain"
style={
app.logoBg
? {
backgroundColor: app.logoBg,
padding: "4px",
}
: undefined
}
/>
) : (
<span className="text-2xl font-semibold text-white/30">
{app.name.charAt(0)}
</span>
)}
</div>
<ArrowUpRight className="h-4 w-4 text-white/0 transition-colors group-hover:text-white/40" />
</div>
<h3 className="text-base font-semibold text-white transition-colors group-hover:text-green-light">
{app.name}
</h3>
<p className="mt-0.5 font-mono text-xs text-white/25">
{app.hostname}
</p>
<p className="mt-3 flex-1 text-sm leading-relaxed text-white/40">
{app.description}
</p>
<div className="mt-4 flex flex-wrap gap-1.5">
{app.categories.map((cat) => (
<Badge key={cat} variant="category">
{cat}
</Badge>
))}
</div>
</motion.a>
);
})}
</div>
) : (
<div className="mt-16">
<h3 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
No results found{search ? ` for \u201c${search}\u201d` : ""}
</h3>
<p className="mt-3 flex items-center gap-3 text-sm text-white/40">
Try searching for another term.
<button
onClick={() => {
setSearch("");
setActiveCategories([]);
}}
className="cursor-pointer rounded border border-white/10 px-3 py-1 text-xs font-medium text-white/50 transition-colors hover:border-white/20 hover:text-white/80"
>
Clear search
</button>
</p>
<motion.img
src="/ecosystem/no-results.webp"
alt=""
loading="eager"
initial={{ opacity: 0 }}
animate={{ opacity: 0.35 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="mt-12 w-full max-w-sm select-none pointer-events-none"
/>
</div>
)}

{hasMore && (
<div className="mt-6 text-center">
{/* Infinite scroll on mobile, "View more" button on desktop */}
<div
ref={sentinelRef}
className="sm:hidden"
aria-hidden="true"
style={{ height: 1 }}
/>
<button
onClick={handleButtonLoad}
className="hidden cursor-pointer rounded-sm border border-white/10 px-6 py-2.5 text-sm font-medium text-white/50 transition-colors hover:border-white/20 hover:text-white/80 sm:inline-block"
>
View more
</button>
</div>
)}
</Container>
</div>
</PageHero>
);
}
import EcosystemListingClient, {
type EcosystemListingApp,
} from "@/components/ecosystem/EcosystemListingClient";
import { getAllApps, getEcosystemCategories } from "@/lib/ecosystem";

export default function EcosystemPage() {
return (
<Suspense>
<EcosystemPageInner />
</Suspense>
);
const apps: EcosystemListingApp[] = getAllApps().map((app) => ({
slug: app.slug,
name: app.name,
url: app.url,
hostname: app.hostname,
description: app.description,
categories: app.categories,
logo: app.logo,
logoBg: app.logoBg,
}));
const categories = getEcosystemCategories();

return <EcosystemListingClient apps={apps} categories={categories} />;
}
Loading
Loading