From 42972549c5f1396260b25670fda207d7eb5def82 Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 06:42:33 +0200 Subject: [PATCH 1/9] improve project schema and show avatars --- .../src/components/graph-image.tsx | 14 ++++++++++++++ .../template-vite-react/src/mapping.ts | 12 +++++++++++- .../src/routes/explore-public-knowledge.tsx | 19 +++++++++++++++++-- .../template-vite-react/src/schema.ts | 6 ++++++ 4 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx diff --git a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx new file mode 100644 index 00000000..880494ad --- /dev/null +++ b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx @@ -0,0 +1,14 @@ +function getImageUrl(src: string | undefined) { + if (!src) return src; + const image = src.split('ipfs://'); + if (image.length == 2) { + return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; + } + return src; +} + +export function GraphImage( + props: React.DetailedHTMLProps, HTMLImageElement>, +) { + return ; +} diff --git a/apps/create-hypergraph/template-vite-react/src/mapping.ts b/apps/create-hypergraph/template-vite-react/src/mapping.ts index b6431a44..defab4dc 100644 --- a/apps/create-hypergraph/template-vite-react/src/mapping.ts +++ b/apps/create-hypergraph/template-vite-react/src/mapping.ts @@ -13,6 +13,16 @@ export const mapping: Mapping.Mapping = { typeIds: [Id('484a18c5-030a-499c-b0f2-ef588ff16d50')], properties: { name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'), + description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'), + }, + relations: { + avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'), + }, + }, + Image: { + typeIds: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')], + properties: { + url: Id('8a743832-c094-4a62-b665-0c3cc2f9c7bc'), }, }, -}; \ No newline at end of file +}; diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx index 86476fb7..f1e5d516 100644 --- a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx +++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx @@ -1,3 +1,4 @@ +import { GraphImage } from '@/components/graph-image'; import { Project } from '@/schema'; import { useQuery } from '@graphprotocol/hypergraph-react'; import { createFileRoute } from '@tanstack/react-router'; @@ -11,6 +12,12 @@ function ExplorePublicKnowledge() { mode: 'public', space: 'b2565802-3118-47be-91f2-e59170735bac', first: 40, + include: { avatar: {} }, + // filter: { + // name: { + // startsWith: 'Okta', + // }, + // }, }); return ( @@ -36,8 +43,16 @@ function ExplorePublicKnowledge() { {/* Content */}
{/* Project icon/avatar */} -
- {project.name.charAt(0).toUpperCase()} +
+ {project.avatar?.[0]?.url ? ( + + ) : ( + {project.name.charAt(0).toUpperCase()} + )}
{/* Project name */} diff --git a/apps/create-hypergraph/template-vite-react/src/schema.ts b/apps/create-hypergraph/template-vite-react/src/schema.ts index d3805876..8d9420ff 100644 --- a/apps/create-hypergraph/template-vite-react/src/schema.ts +++ b/apps/create-hypergraph/template-vite-react/src/schema.ts @@ -5,6 +5,12 @@ export class Address extends Entity.Class
('Address')({ description: Type.String, }) {} +export class Image extends Entity.Class('Image')({ + url: Type.String, +}) {} + export class Project extends Entity.Class('Project')({ name: Type.String, + description: Type.optional(Type.String), + avatar: Type.Relation(Image), }) {} From a0d498a46f7c52745457da71b96f785d54dbec53 Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 07:22:09 +0200 Subject: [PATCH 2/9] add search to projects by name --- .../src/routes/explore-public-knowledge.tsx | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx index f1e5d516..1761c538 100644 --- a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx +++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx @@ -2,22 +2,25 @@ import { GraphImage } from '@/components/graph-image'; import { Project } from '@/schema'; import { useQuery } from '@graphprotocol/hypergraph-react'; import { createFileRoute } from '@tanstack/react-router'; +import { useState } from 'react'; export const Route = createFileRoute('/explore-public-knowledge')({ component: ExplorePublicKnowledge, }); function ExplorePublicKnowledge() { + const [searchTerm, setSearchTerm] = useState(''); + const { data: projects, isPending } = useQuery(Project, { mode: 'public', space: 'b2565802-3118-47be-91f2-e59170735bac', first: 40, include: { avatar: {} }, - // filter: { - // name: { - // startsWith: 'Okta', - // }, - // }, + filter: { + name: { + startsWith: searchTerm, + }, + }, }); return ( @@ -31,6 +34,29 @@ function ExplorePublicKnowledge() {

+ {/* Search UI */} +
+
+
+ + + +
+ setSearchTerm(e.target.value)} + placeholder="Search projects..." + className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" + /> +
+
+
{projects.map((project) => (
Date: Sun, 10 Aug 2025 07:46:57 +0200 Subject: [PATCH 3/9] improve project rendering and add x url --- .../template-vite-react/src/mapping.ts | 1 + .../src/routes/explore-public-knowledge.tsx | 24 ++++++++++++++++++- .../template-vite-react/src/schema.ts | 1 + 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/apps/create-hypergraph/template-vite-react/src/mapping.ts b/apps/create-hypergraph/template-vite-react/src/mapping.ts index defab4dc..a4e1a04d 100644 --- a/apps/create-hypergraph/template-vite-react/src/mapping.ts +++ b/apps/create-hypergraph/template-vite-react/src/mapping.ts @@ -14,6 +14,7 @@ export const mapping: Mapping.Mapping = { properties: { name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'), description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'), + xUrl: Id('0d625978-4b3c-4b57-a86f-de45c997c73c'), }, relations: { avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'), diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx index 1761c538..6f37328c 100644 --- a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx +++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge.tsx @@ -18,7 +18,8 @@ function ExplorePublicKnowledge() { include: { avatar: {} }, filter: { name: { - startsWith: searchTerm, + // contains is case sensitive + contains: searchTerm, }, }, }); @@ -85,6 +86,27 @@ function ExplorePublicKnowledge() {

{project.name}

+ + {/* Project ID */} +

{project.id}

+ + {/* Project description */} + {project.description &&

{project.description}

} + + {/* Project xUrl */} + {project.xUrl && ( + + + + + View on X + + )}
{/* Decorative corner accent */} diff --git a/apps/create-hypergraph/template-vite-react/src/schema.ts b/apps/create-hypergraph/template-vite-react/src/schema.ts index 8d9420ff..4e869b87 100644 --- a/apps/create-hypergraph/template-vite-react/src/schema.ts +++ b/apps/create-hypergraph/template-vite-react/src/schema.ts @@ -12,5 +12,6 @@ export class Image extends Entity.Class('Image')({ export class Project extends Entity.Class('Project')({ name: Type.String, description: Type.optional(Type.String), + xUrl: Type.optional(Type.String), avatar: Type.Relation(Image), }) {} From ce45f2346ed22df9be9afb0f055789fb6cd58908 Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:03:26 +0200 Subject: [PATCH 4/9] translate projects page updates to nextjs template --- .../template-nextjs/Components/GraphImage.tsx | 14 ++ .../Components/PublicKnowledge/Explore.tsx | 145 +++++++++++++----- .../template-nextjs/app/mapping.ts | 11 ++ .../template-nextjs/app/schema.ts | 7 + .../src/components/graph-image.tsx | 2 +- .../template-vite-react/src/mapping.ts | 12 +- 6 files changed, 144 insertions(+), 47 deletions(-) create mode 100644 apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx diff --git a/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx new file mode 100644 index 00000000..f2338af4 --- /dev/null +++ b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx @@ -0,0 +1,14 @@ +function getImageUrl(src: string | undefined | Blob) { + if (!src || typeof src !== 'string') return src; + const image = src.split('ipfs://'); + if (image.length == 2) { + return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; + } + return src; +} + +export function GraphImage( + props: React.DetailedHTMLProps, HTMLImageElement>, +) { + return ; +} diff --git a/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx b/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx index 01a157b5..cd7ff595 100644 --- a/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx +++ b/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx @@ -1,62 +1,127 @@ 'use client'; import { useQuery } from '@graphprotocol/hypergraph-react'; +import { useState } from 'react'; import { Project } from '../../app/schema'; +import { GraphImage } from '../GraphImage'; export function PublicKnowledgeExplorer() { + const [searchTerm, setSearchTerm] = useState(''); + const { data: projects, isPending } = useQuery(Project, { mode: 'public', space: 'b2565802-3118-47be-91f2-e59170735bac', first: 40, + include: { avatar: {} }, + filter: { + name: { + // contains is case sensitive + contains: searchTerm, + }, + }, }); - // empty state - if (isPending === false && projects.length === 0) { - return ( -
-
- - - + return ( + <> + {/* Search UI */} +
+
+
+ + + +
+ setSearchTerm(e.target.value)} + placeholder="Search projects..." + className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" + />
-

No Projects Found

-

There are currently no public projects available to explore.

- ); - } - return ( -
- {projects.map((project) => ( -
- {/* Gradient overlay */} -
- - {/* Content */} -
- {/* Project icon/avatar */} -
- {project.name.charAt(0).toUpperCase()} +
+ {projects.map((project) => ( +
+ {/* Gradient overlay */} +
+ + {/* Content */} +
+ {/* Project icon/avatar */} +
+ {project.avatar?.[0]?.url ? ( + + ) : ( + {project.name.charAt(0).toUpperCase()} + )} +
+ + {/* Project name */} +

+ {project.name} +

+ + {/* Project ID */} +

{project.id}

+ + {/* Project description */} + {project.description &&

{project.description}

} + + {/* Project xUrl */} + {project.xUrl && ( + + + + + View on X + + )}
- {/* Project name */} -

- {project.name} -

+ {/* Decorative corner accent */} +
+ ))} +
- {/* Decorative corner accent */} -
+ {/* Empty state */} + {isPending === false && projects.length === 0 && ( +
+
+ + + +
+

No Projects Found

+

There are currently no public projects available to explore.

- ))} -
+ )} + ); } diff --git a/apps/create-hypergraph/template-nextjs/app/mapping.ts b/apps/create-hypergraph/template-nextjs/app/mapping.ts index 6c0cf6a2..5a599dfb 100644 --- a/apps/create-hypergraph/template-nextjs/app/mapping.ts +++ b/apps/create-hypergraph/template-nextjs/app/mapping.ts @@ -9,10 +9,21 @@ export const mapping: Mapping.Mapping = { description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'), }, }, + Image: { + typeIds: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')], + properties: { + url: Id('8a743832-c094-4a62-b665-0c3cc2f9c7bc'), + }, + }, Project: { typeIds: [Id('484a18c5-030a-499c-b0f2-ef588ff16d50')], properties: { name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'), + description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'), + xUrl: Id('0d625978-4b3c-4b57-a86f-de45c997c73c'), + }, + relations: { + avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'), }, }, }; diff --git a/apps/create-hypergraph/template-nextjs/app/schema.ts b/apps/create-hypergraph/template-nextjs/app/schema.ts index d3805876..4e869b87 100644 --- a/apps/create-hypergraph/template-nextjs/app/schema.ts +++ b/apps/create-hypergraph/template-nextjs/app/schema.ts @@ -5,6 +5,13 @@ export class Address extends Entity.Class
('Address')({ description: Type.String, }) {} +export class Image extends Entity.Class('Image')({ + url: Type.String, +}) {} + export class Project extends Entity.Class('Project')({ name: Type.String, + description: Type.optional(Type.String), + xUrl: Type.optional(Type.String), + avatar: Type.Relation(Image), }) {} diff --git a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx index 880494ad..5c346e07 100644 --- a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx +++ b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx @@ -1,5 +1,5 @@ function getImageUrl(src: string | undefined) { - if (!src) return src; + if (!src || typeof src !== 'string') return src; const image = src.split('ipfs://'); if (image.length == 2) { return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; diff --git a/apps/create-hypergraph/template-vite-react/src/mapping.ts b/apps/create-hypergraph/template-vite-react/src/mapping.ts index a4e1a04d..5a599dfb 100644 --- a/apps/create-hypergraph/template-vite-react/src/mapping.ts +++ b/apps/create-hypergraph/template-vite-react/src/mapping.ts @@ -9,6 +9,12 @@ export const mapping: Mapping.Mapping = { description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'), }, }, + Image: { + typeIds: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')], + properties: { + url: Id('8a743832-c094-4a62-b665-0c3cc2f9c7bc'), + }, + }, Project: { typeIds: [Id('484a18c5-030a-499c-b0f2-ef588ff16d50')], properties: { @@ -20,10 +26,4 @@ export const mapping: Mapping.Mapping = { avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'), }, }, - Image: { - typeIds: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')], - properties: { - url: Id('8a743832-c094-4a62-b665-0c3cc2f9c7bc'), - }, - }, }; From f83e779659711586b0f652d7f3baf37971e76cea Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:05:52 +0200 Subject: [PATCH 5/9] add changeset --- .changeset/clean-spies-stare.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/clean-spies-stare.md diff --git a/.changeset/clean-spies-stare.md b/.changeset/clean-spies-stare.md new file mode 100644 index 00000000..3ecf32f7 --- /dev/null +++ b/.changeset/clean-spies-stare.md @@ -0,0 +1,6 @@ +--- +"create-hypergraph": patch +--- + +improve projects listing in both templates + \ No newline at end of file From 9129933e3eb697441b12141f112409477b30e994 Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:10:42 +0200 Subject: [PATCH 6/9] Update apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../template-vite-react/src/components/graph-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx index 5c346e07..6749b2f6 100644 --- a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx +++ b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx @@ -1,7 +1,7 @@ function getImageUrl(src: string | undefined) { if (!src || typeof src !== 'string') return src; const image = src.split('ipfs://'); - if (image.length == 2) { + if (image.length === 2) { return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; } return src; From db8c7546fcfed1d09de4b6ee797525b4cfecf42e Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:11:08 +0200 Subject: [PATCH 7/9] Update apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../template-vite-react/src/components/graph-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx index 6749b2f6..6113e394 100644 --- a/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx +++ b/apps/create-hypergraph/template-vite-react/src/components/graph-image.tsx @@ -2,7 +2,7 @@ function getImageUrl(src: string | undefined) { if (!src || typeof src !== 'string') return src; const image = src.split('ipfs://'); if (image.length === 2) { - return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; + return `https://gateway.lighthouse.storage/ipfs/${image[1]}`; } return src; } From da228fe2ed64cfc5165e3cadfc77d58418da927b Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:11:23 +0200 Subject: [PATCH 8/9] Update apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../create-hypergraph/template-nextjs/Components/GraphImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx index f2338af4..a79642ed 100644 --- a/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx +++ b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx @@ -1,7 +1,7 @@ function getImageUrl(src: string | undefined | Blob) { if (!src || typeof src !== 'string') return src; const image = src.split('ipfs://'); - if (image.length == 2) { + if (image.length === 2) { return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; } return src; From 562b152d82abf0db03c583bdb1d9b45a054cf76e Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Sun, 10 Aug 2025 08:12:30 +0200 Subject: [PATCH 9/9] Update apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../create-hypergraph/template-nextjs/Components/GraphImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx index a79642ed..0e51364d 100644 --- a/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx +++ b/apps/create-hypergraph/template-nextjs/Components/GraphImage.tsx @@ -2,7 +2,7 @@ function getImageUrl(src: string | undefined | Blob) { if (!src || typeof src !== 'string') return src; const image = src.split('ipfs://'); if (image.length === 2) { - return `http://gateway.lighthouse.storage/ipfs/${image[1]}`; + return `https://gateway.lighthouse.storage/ipfs/${image[1]}`; } return src; }