Skip to content

Commit

Permalink
feat(site): add team to contentful (#3085)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Swepool
Swepool authored Oct 11, 2024
2 parents 5987d46 + 4e4afb8 commit 9cf2726
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 117 deletions.
10 changes: 10 additions & 0 deletions site/src/lib/contentful/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@ export interface LearningPageFields {
nineText: EntryFields.RichText
}

export interface TeamPageFields {
name: EntryFields.Text
title: EntryFields.Text
twitterHandle: EntryFields.Text
profilePicture: EntryFields.AssetLink
position: EntryFields.Number
}

export interface TeamPageSkeleton extends EntrySkeletonType<TeamPageFields, "team"> {}

export interface LandingPageSkeleton extends EntrySkeletonType<LandingPageFields, "landing"> {}

export interface LearningPageFields extends EntrySkeletonType<LearningPageFields, "learn"> {}
Expand Down
191 changes: 74 additions & 117 deletions site/src/pages/team.astro
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
---
import type { TeamPageFields, TeamPageSkeleton } from "../lib/contentful/types.ts"
import { contentfulClient } from "../lib/contentful/client.ts"
import SectionsLayout from "#/layouts/SectionsLayout.astro"
import Card from "#/components/Card.astro"
import TopSection from "../components/sections/TopSection.astro"
import headshot_karel from "#/assets/images/headshots/karel.jpg"
import headshot_cor from "#/assets/images/headshots/cor.jpg"
import headshot_ben from "#/assets/images/headshots/ben.jpeg"
import headshot_emir from "#/assets/images/headshots/emir.jpeg"
import headshot_sarah from "#/assets/images/headshots/sarah.jpg"
import headshot_abdullah from "#/assets/images/headshots/abdullah.jpeg"
import headshot_connor from "#/assets/images/headshots/connor.jpg"
import headshot_omar from "#/assets/images/headshots/omar.jpeg"
import headshot_hussein from "#/assets/images/headshots/hussein.jpeg"
import headshot_valentin from "#/assets/images/headshots/valentin.jpeg"
import headshot_boris from "#/assets/images/headshots/boris.jpeg"
import vc_galileo from "#/assets/images/investors/galileo.svg"
import vc_nascent from "#/assets/images/investors/nascent.svg"
import vc_tioga from "#/assets/images/investors/tioga.png"
Expand All @@ -28,75 +19,6 @@ import team_groomlake from "#/assets/images/partners/groomlake.png"
import team_horizons from "#/assets/images/partners/horizons.svg"
import ContainedSection from "../components/ContainedSection.astro"
const profiles = [
{
name: "Karel",
title: "CEO",
x_name: "0xkaiserkarel",
profile_pic: headshot_karel
},
{
name: "Cor",
title: "CTO",
x_name: "corcoder",
profile_pic: headshot_cor
},
{
name: "Emir",
title: "Head of BD",
x_name: "EBeriker",
profile_pic: headshot_emir
},
{
name: "Sarah",
title: "Head of Operations",
x_name: "sarahkc07",
profile_pic: headshot_sarah
},
{
name: "Hussein",
title: "Principal Engineer",
x_name: "0xc0dejug",
profile_pic: headshot_hussein
},
{
name: "Abdullah",
title: "Founding Engineer",
x_name: "aeryz2",
profile_pic: headshot_abdullah
},
{
name: "Ben",
title: "Founding Engineer",
x_name: "0xbonlulu",
profile_pic: headshot_ben
},
{
name: "Connor",
title: "Founding Engineer",
x_name: "PoisonPhang",
profile_pic: headshot_connor
},
{
name: "Omar",
title: "Full Stack Engineer",
x_name: "awkroot",
profile_pic: headshot_omar
},
{
name: "Valentin",
title: "Advisor",
x_name: "valeyo777",
profile_pic: headshot_valentin
},
{
name: "Boris",
title: "Advisor",
x_name: "sprembo",
profile_pic: headshot_boris
}
]
const teams = [
{
name: "Spearbit",
Expand Down Expand Up @@ -156,46 +78,81 @@ const teams = [
clazz: "h-[38px]"
}
]
---
<SectionsLayout gapless title="Union Team">
let teamData: Array<TeamPageFields> | null = null
let error: string | null = null
<TopSection title="Union team">
<div class="flex flex-col text-center gap-8">
<p class="md:text-4xl font-mono uppercase">Our team is a <span class="text-accent-500">global</span> network of
professionals, working to build
the <span class="text-accent-500">interoperability future.</span></p>
</div>
<div></div>
</TopSection>
try {
const teamEntries = await contentfulClient.getEntries<TeamPageSkeleton>({
content_type: "team"
})
<ContainedSection>
<div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
{
profiles.map(person => (
<Card class="border-none group">
<a
href={`https://x.com/${person.x_name}`}
target="_blank"
rel="noopener noreferrer"
class="gap-4 flex flex-col"
>
<div class="object-cover overflow-hidden">
<img class="w-full h-auto group-hover:scale-110 transition" src={person.profile_pic.src}
alt="union worker"/>
</div>
<div class="leading-tight uppercase font-mono">
<h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
<div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
<div class="text-accent text-lg -mt-1 block">@{person.x_name}</div>
</div>
</a>
</Card>
))
}
</div>
</ContainedSection>
if (teamEntries.items.length > 0) {
teamData = teamEntries.items
.map(item => item.fields)
.sort((a, b) => {
const posA = typeof a.position === "number" ? a.position : Number.POSITIVE_INFINITY
const posB = typeof b.position === "number" ? b.position : Number.POSITIVE_INFINITY
return posA - posB
})
} else {
error = "No team data found."
}
} catch (err) {
console.error("Error fetching Contentful data:", err)
error = "Failed to load content. Please try again later."
}
---

<SectionsLayout gapless title="Union Team">
{error ? (
<div class="error-message">
<h2>Error</h2>
<p>{error}</p>
</div>
) : teamData ? (
<>
<TopSection title="Union team">
<div class="flex flex-col text-center gap-8">
<p class="md:text-4xl font-mono uppercase">Our team is a <span class="text-accent-500">global</span> network of
professionals, working to build
the <span class="text-accent-500">interoperability future.</span></p>
</div>
<div></div>
</TopSection>

<ContainedSection>
<div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
{teamData.map((person) => (
<Card class="border-none group">
<a
href={`https://x.com/${person.twitterHandle}`}
target="_blank"
rel="noopener noreferrer"
class="gap-4 flex flex-col"
>
<div class="object-cover overflow-hidden">
<img
class="w-full h-auto group-hover:scale-110 transition"
src={person.profilePicture.fields.file.url}
alt={`${person.name} - Union worker`}
/>
</div>
<div class="leading-tight uppercase font-mono">
<h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
<div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
<div class="text-accent text-lg -mt-1 block">@{person.twitterHandle}</div>
</div>
</a>
</Card>
))}
</div>
</ContainedSection>
</>
) : (
<div class="loading-message">
<p>Loading content...</p>
</div>
)}
</SectionsLayout>

0 comments on commit 9cf2726

Please sign in to comment.