Skip to content

Commit d2894cf

Browse files
lukeeeylukeeey
authored
Add updated adopted projects page (#3)
1 parent 0779046 commit d2894cf

File tree

6 files changed

+225
-132
lines changed

6 files changed

+225
-132
lines changed

‎src/lib/assets/data/adoptedProjectsData.ts‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/lib/assets/data/teamMembersData.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ interface TeamMember {
55
image: string;
66
hasImage: boolean;
77
background?: string;
8-
98
}
109

1110
export const teamMembers: TeamMember[] = [

‎src/lib/components/adopted-projects/ProjectCard.svelte‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { GitCommitHorizontalIcon, StarIcon } from "@lucide/svelte";
3+
4+
export let item: {
5+
title: string;
6+
description: string;
7+
githubUrl: string;
8+
stars: string;
9+
commits: string;
10+
};
11+
</script>
12+
13+
<div class="group/card relative h-full w-full h-[200px]">
14+
<!-- Front card -->
15+
<div
16+
class="relative z-10 flex h-full flex-col justify-between space-y-5 rounded-xl bg-white p-6 shadow-lg transition-transform duration-300 ease-out group-hover/card:translate-x-1 group-hover/card:translate-y-1 dark:bg-gray-900"
17+
>
18+
<div class="ml-auto h-2 w-12 bg-primary dark:bg-accent"></div>
19+
20+
<div>
21+
<h3 class="mb-2 text-lg font-bold text-accent dark:text-secondary">
22+
{item.title}
23+
</h3>
24+
<p class="text-sm text-gray-500 dark:text-gray-400">
25+
{item.description}
26+
</p>
27+
</div>
28+
29+
<div
30+
class="mt-2 flex items-center justify-between text-sm text-gray-600 dark:text-gray-300"
31+
>
32+
<a
33+
href={item.githubUrl}
34+
target="_blank"
35+
class="underline hover:text-primary dark:hover:text-accent"
36+
>
37+
View on GitHub
38+
</a>
39+
<div class="flex space-x-4">
40+
<span><StarIcon class="inline h-4"/> {item.stars}</span>
41+
<span><GitCommitHorizontalIcon class="inline h-4" /> {item.commits}</span>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<!-- Background card -->
47+
<div
48+
aria-hidden="true"
49+
class="absolute -left-2 -top-2 z-0 h-full w-full space-y-5 rounded-xl bg-primary p-6 transition-all duration-300 ease-out group-hover/card:-left-4 group-hover/card:-top-4 dark:bg-accent"
50+
>
51+
<div
52+
class="ml-auto mt-1 h-2 w-12 border border-gray-700 bg-gray-100 opacity-50"
53+
></div>
54+
</div>
55+
</div>

‎src/lib/components/adopted-projects/ProjectSection.svelte‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { GithubIcon, GlobeIcon, TwitterIcon } from "@lucide/svelte";
3+
import ProjectCard from "./ProjectCard.svelte";
4+
import SocialIcon from "./SocialIcon.svelte";
5+
6+
export let logo: string;
7+
export let title: string;
8+
export let description: string;
9+
export let projects: any[];
10+
export let githubUrl: string;
11+
export let websiteUrl: string;
12+
export let twitterUrl: string;
13+
</script>
14+
15+
<section
16+
class="border-t border-gray-200 bg-gray-200 py-6 dark:border-gray-700 dark:bg-gray-800 sm:py-10"
17+
>
18+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
19+
<div class="mb-4 mt-4 flex h-24 items-center">
20+
<img
21+
src={logo}
22+
alt={`${title} logo`}
23+
class="max-h-full max-w-full object-contain"
24+
loading="lazy"
25+
/>
26+
</div>
27+
28+
<div>
29+
<h3
30+
class="mb-3 text-4xl font-bold text-primary-900 dark:text-white"
31+
>
32+
{title}
33+
</h3>
34+
<p class="mb-4 text-base text-primary-600 dark:text-primary-300">
35+
{description}
36+
</p>
37+
</div>
38+
39+
<div class="flex gap-4 mb-10">
40+
<SocialIcon href={websiteUrl} label="Website" Icon={GlobeIcon} />
41+
<SocialIcon href={twitterUrl} label="X (Twitter)" Icon={TwitterIcon} />
42+
<SocialIcon href={githubUrl} label="GitHub" Icon={GithubIcon} />
43+
</div>
44+
45+
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 mb-6">
46+
{#each projects as item}
47+
<ProjectCard {item} />
48+
{/each}
49+
</div>
50+
51+
<a href={githubUrl} class="text-sm tracking-wide text-gray-300">
52+
View all projects on GitHub
53+
</a>
54+
</div>
55+
</section>

‎src/lib/components/adopted-projects/SocialIcon.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import type { SvelteComponent } from "svelte";
3+
4+
export let href: string;
5+
export let label: string;
6+
export let Icon: any;
7+
</script>
8+
9+
<a
10+
{href}
11+
target="_blank"
12+
rel="noopener noreferrer"
13+
aria-label={label}
14+
class="flex h-10 w-10 items-center justify-center rounded-full border border-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition"
15+
>
16+
<svelte:component this={Icon} class="h-5 w-5" />
17+
</a>

‎src/routes/adopted-projects/+page.svelte‎

Lines changed: 98 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,100 @@
11
<script lang="ts">
2-
import {
3-
adoptedProjects,
4-
type Project,
5-
} from "$lib/assets/data/adoptedProjectsData";
6-
import { onMount } from "svelte";
2+
import ProjectSection from "$lib/components/adopted-projects/ProjectSection.svelte";
73
8-
let projectsWithStatus: Project[] = $state(adoptedProjects);
4+
type ProjectItem = {
5+
title: string;
6+
description: string;
7+
githubUrl: string;
8+
stars: string;
9+
commits: string;
10+
};
911
10-
function checkImage(url: string) {
11-
return new Promise<boolean>((resolve) => {
12-
if (!url) return resolve(false);
13-
const img = new Image();
14-
img.onload = () => resolve(true);
15-
img.onerror = () => resolve(false);
16-
img.src = url;
17-
});
18-
}
12+
type ProjectSectionData = {
13+
logo: string;
14+
title: string;
15+
description: string;
16+
projects: ProjectItem[];
17+
githubUrl: string;
18+
websiteUrl: string;
19+
twitterUrl: string;
20+
};
1921
20-
onMount(async () => {
21-
const results = await Promise.all(
22-
adoptedProjects.map(async (p) => {
23-
const hasImage = await checkImage(p.logo);
24-
return { ...p, hasImage };
25-
})
26-
);
27-
projectsWithStatus = results;
28-
});
22+
const geysermc: ProjectItem[] = [
23+
{
24+
title: "Geyser",
25+
description:
26+
"Geyser is a program that allows Minecraft: Bedrock Edition clients to join Minecraft: Java Edition servers, allowing for true crossplay between both editions of the game.",
27+
githubUrl: "https://github.com/GeyserMC/Geyser",
28+
stars: "5.4k+",
29+
commits: "4.5k+",
30+
},
31+
{
32+
title: "Floodgate",
33+
description:
34+
"Floodgate is a hybrid mode plugin to allow for connections from Geyser to join online mode servers.",
35+
githubUrl: "https://github.com/GeyserMC/Floodgate",
36+
stars: "600+",
37+
commits: "400+",
38+
},
39+
{
40+
title: "MCProtocolLib",
41+
description:
42+
"MCProtocolLib is a simple library for communicating with Minecraft clients and servers.",
43+
githubUrl: "https://github.com/GeyserMC/MCProtocolLib",
44+
stars: "850+",
45+
commits: "1.5k+",
46+
},
47+
];
48+
49+
const cloudburstmc: ProjectItem[] = [
50+
{
51+
title: "Protocol",
52+
description:
53+
"A protocol library for Minecraft that supports multiple versions.",
54+
githubUrl: "https://github.com/CloudburstMC/Protocol",
55+
stars: "350+",
56+
commits: "850+",
57+
},
58+
{
59+
title: "ProxyPass",
60+
description:
61+
"Proxy pass allows developers to MITM a vanilla client and server without modifying them.",
62+
githubUrl: "https://github.com/CloudburstMC/ProxyPass",
63+
stars: "150+",
64+
commits: "150+",
65+
},
66+
{
67+
title: "Server",
68+
description:
69+
"Cloudburst is a server software for Minecraft: Bedrock Edition.",
70+
githubUrl: "https://github.com/CloudburstMC/Cloudburst",
71+
stars: "5000",
72+
commits: "8000",
73+
},
74+
];
75+
76+
const sections: ProjectSectionData[] = [
77+
{
78+
logo: "/resources/projects/geysermc_icon.png",
79+
title: "GeyserMC",
80+
description:
81+
"Bringing together the Minecraft community, one project at a time.",
82+
projects: geysermc,
83+
githubUrl: "https://github.com/GeyserMC",
84+
websiteUrl: "https://geysermc.org",
85+
twitterUrl: "https://x.com/Geyser_MC"
86+
},
87+
{
88+
logo: "/resources/projects/cloudburst_icon.png",
89+
title: "CloudburstMC",
90+
description:
91+
"Maintains core libraries to power Minecraft: Bedrock Edition servers.",
92+
projects: cloudburstmc,
93+
githubUrl: "https://github.com/CloudburstMC",
94+
websiteUrl: "https://cloudburstmc.org",
95+
twitterUrl: "https://x.com/CloudburstMC"
96+
},
97+
];
2998
</script>
3099

31100
<svelte:head>
@@ -42,91 +111,13 @@
42111
<p
43112
class="mx-auto max-w-3xl text-lg text-primary-100 dark:text-primary-300 sm:text-xl"
44113
>
45-
Free and open-source projects we actively support and contribute to
114+
These projects remain free and open-source, with Open Collaboration providing infrastructure, resources, and long-term support.
46115
</p>
47116
</div>
48117
</section>
49118

50-
<section class="bg-background py-16 dark:bg-gray-900 sm:py-24">
51-
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
52-
<div class="grid gap-10 md:grid-cols-2">
53-
{#each projectsWithStatus as project}
54-
<div class="group/card relative h-full w-full">
55-
<div
56-
class="relative z-10 flex h-full flex-col rounded-xl bg-white p-8 shadow-lg transition-transform duration-300 ease-out group-hover/card:translate-x-1 group-hover/card:translate-y-1 dark:bg-gray-800"
57-
>
58-
<div class="ml-auto h-3 w-16 bg-primary dark:bg-accent"></div>
59-
60-
<div class="mb-6 mt-4 flex h-24 items-center">
61-
{#if project.hasImage}
62-
<img
63-
src={project.logo}
64-
alt={project.name}
65-
class="max-h-full max-w-full object-contain"
66-
loading="lazy"
67-
style="outline: none; border: none;"
68-
/>
69-
{:else}
70-
<span
71-
class="text-3xl font-bold text-primary-600 dark:text-primary-400"
72-
>
73-
{project.name}
74-
</span>
75-
{/if}
76-
</div>
77-
78-
<div class="flex-grow">
79-
<h3
80-
class="mb-3 text-2xl font-bold text-primary-900 dark:text-white"
81-
>
82-
{project.name}
83-
</h3>
84-
<p class="mb-6 text-base text-primary-600 dark:text-primary-300">
85-
{project.description}
86-
</p>
87-
</div>
88-
89-
<div class="mt-auto">
90-
<a
91-
href={project.link}
92-
class="group flex items-center font-semibold text-primary-600 transition hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300"
93-
>
94-
Learn More
95-
<svg
96-
class="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
97-
xmlns="http://www.w3.org/2000/svg"
98-
fill="none"
99-
viewBox="0 0 24 24"
100-
stroke="currentColor"
101-
>
102-
<path
103-
stroke-linecap="round"
104-
stroke-linejoin="round"
105-
stroke-width="2"
106-
d="M17 8l4 4m0 0l-4 4m4-4H3"
107-
/>
108-
</svg>
109-
</a>
110-
</div>
111-
</div>
112-
113-
<div
114-
aria-hidden="true"
115-
class="absolute -left-2 -top-2 z-0 h-full w-full rounded-xl bg-primary p-8 transition-all duration-300 ease-out group-hover/card:-left-4 group-hover/card:-top-4 dark:bg-accent"
116-
>
117-
<div
118-
class="ml-auto mt-2 h-3 w-16 border border-gray-700 bg-gray-100 opacity-50"
119-
></div>
120-
121-
<div class="opacity-0">
122-
<div class="mb-6 mt-4 h-24 w-full"></div>
123-
124-
<h3 class="mb-3 text-2xl font-bold">{project.name}</h3>
125-
<p class="mb-6 text-base">{project.description}</p>
126-
</div>
127-
</div>
128-
</div>
129-
{/each}
130-
</div>
131-
</div>
119+
<section class="bg-background dark:bg-gray-900">
120+
{#each sections as section}
121+
<ProjectSection {...section} />
122+
{/each}
132123
</section>

0 commit comments

Comments
 (0)