Format chocomiembros (#64)

* ci: Configure for deployment on premise * feature: Add projects page * fix: Fix linter warnings * fix: Revert to using adapter-cloudflare for main integration * feature: Update Heading component to use a slot * ci: Use adapter-node * chore: Apply formatting --------- Co-authored-by: Alexander Goussas <[email protected]>
kokoaespol · Sep 23, 2024 · 88f234e · 88f234e
1 parent 5bb57b1
commit 88f234e
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 148 deletions.
diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte
@@ -1,42 +1,49 @@
 <script lang="ts">
-    import github_logo from "$lib/assets/icons/github.svg";
-    import linkedin_logo from "$lib/assets/icons/linkedin.svg";
-    import link_logo from "$lib/assets/icons/bx-link.svg";
+	import github_logo from "$lib/assets/icons/github.svg";
+	import linkedin_logo from "$lib/assets/icons/linkedin.svg";
+	import link_logo from "$lib/assets/icons/bx-link.svg";
 
-    type Props = { 
-        name: string;
-	    role: string;
+	type Props = {
+		name: string;
+		role: string;
 		photo: string;
-		socialMedia: {nombre: string, link: string}[];
-    }
+		socialMedia: { nombre: string; link: string }[];
+	};
 
-    let { name, role, photo, socialMedia}:Props = $props();
+	let { name, role, photo, socialMedia }: Props = $props();
 </script>
 
-<div class="flex flex-col gap-2 justify-center items-center pb-14">
-    <img class="rounded-full size-20 md:size-24 inset-0" src={photo} alt="Foto" >
-
-    <div class="flex flex-col justify-center items-center">
-        <h2 class="text-lime-400 text-base" >{name}</h2>
-        <p class="text-sm">{role}</p>
-    </div>
-
-    <div class="flex flex-row gap-2 justify-items-center object-center	">
-
-        {#each socialMedia as media}
-
-            <a class="object-center" href={media.link}>
-
-                {#if media.nombre === "linkedin"}
-                    <img class="basis-1/3 object-center	" height="16" width="16" src={linkedin_logo} alt="LinkedIn">
-                {:else if media.nombre === "github"}
-                    <img class="basis-1/3 object-center	" height="16" width="16" src={github_logo} alt="Github">
-                {:else if media.nombre === "link"}
-                    <img class="basis-1/3 object-center	" height="16" width="16" src={link_logo} alt="Link">
-                {/if}
-
-            </a>
-
-        {/each}
-    </div>
-</div>
+<div class="flex flex-col items-center justify-center gap-2 pb-14">
+	<img class="inset-0 size-20 rounded-full md:size-24" src={photo} alt="Foto" />
+
+	<div class="flex flex-col items-center justify-center">
+		<h2 class="text-base text-lime-400">{name}</h2>
+		<p class="text-sm">{role}</p>
+	</div>
+
+	<div class="flex flex-row justify-items-center gap-2 object-center">
+		{#each socialMedia as media}
+			<a class="object-center" href={media.link}>
+				{#if media.nombre === "linkedin"}
+					<img
+						class="basis-1/3 object-center"
+						height="16"
+						width="16"
+						src={linkedin_logo}
+						alt="LinkedIn"
+					/>
+				{:else if media.nombre === "github"}
+					<img
+						class="basis-1/3 object-center"
+						height="16"
+						width="16"
+						src={github_logo}
+						alt="Github"
+					/>
+				{:else if media.nombre === "link"}
+					<img class="basis-1/3 object-center" height="16" width="16" src={link_logo} alt="Link" />
+				{/if}
+			</a>
+		{/each}
+	</div>
+</div>
diff --git a/src/lib/components/Members_home.svelte b/src/lib/components/Members_home.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-	import Member from "$lib/components/Member.svelte"
-	import members from "$lib/data/members.json"
+	import Member from "$lib/components/Member.svelte";
+	import members from "$lib/data/members.json";
 </script>
 
-<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-48 justify-items-center">
+<div
+	class="grid grid-cols-1 justify-center justify-items-center px-20 py-48 md:grid-cols-3 md:px-48"
+>
 	{#each members as member}
-		<Member 
-			name={member.name} 
+		<Member
+			name={member.name}
 			role={member.role}
 			photo={member.photo}
 			socialMedia={member.socialMedia}
 		></Member>
 	{/each}
-</div>
+</div>
diff --git a/src/lib/data/members.json b/src/lib/data/members.json
@@ -1,84 +1,65 @@
 [
-    {
-      "name": "Alina Carpio",
-      "role": "Presidente",
-      "photo": "https://avatars.githubusercontent.com/u/72272077?v=4",
-      "directiva": "si",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/alicarpio" }
-      ]
-    },
-    {
-      "name": "Melissa Ayllon",
-      "role": "Vicepresidente",
-      "photo": "https://avatars.githubusercontent.com/u/116417470?v=4",
-      "directiva": "si",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/MelissaAyllon" }
-      ]
-    },
-    {
-      "name": "Michael Estrada",
-      "role": "Secretario",
-      "photo": "https://avatars.githubusercontent.com/u/98861990?v=4",
-      "directiva": "si",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/BryanEstrada003" }
-      ]
-    },
-    {
-      "name": "Adrian Delgado",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/11708972?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/adriandelgado" }
-      ]
-    },
-    {
-      "name": "Braulio Rivas",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/61257604?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/brauliorivas" }
-      ]
-    },
-    {
-      "name": "Daniel Cortez",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/112514991?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/DanRCM" }
-      ]
-    },
-    {
-      "name": "Adair Abrigo",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/93391519?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/adairaxe" }
-      ]
-    },
-    {
-      "name": "Anthony Herrera",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/137233273?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/AnthonyyHL" }
-      ]
-    },
-    {
-      "name": "John Cañarte",
-      "role": "Miembro",
-      "photo": "https://avatars.githubusercontent.com/u/70679514?v=4",
-      "directiva": "no",
-      "socialMedia": [
-        { "nombre": "github", "link": "https://github.com/Jecanart" }
-      ]
-    }
-  ]
-
+	{
+		"name": "Alina Carpio",
+		"role": "Presidente",
+		"photo": "https://avatars.githubusercontent.com/u/72272077?v=4",
+		"directiva": "si",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/alicarpio" }]
+	},
+	{
+		"name": "Melissa Ayllon",
+		"role": "Vicepresidente",
+		"photo": "https://avatars.githubusercontent.com/u/116417470?v=4",
+		"directiva": "si",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/MelissaAyllon" }]
+	},
+	{
+		"name": "Michael Estrada",
+		"role": "Secretario",
+		"photo": "https://avatars.githubusercontent.com/u/98861990?v=4",
+		"directiva": "si",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/BryanEstrada003" }]
+	},
+	{
+		"name": "Adrian Delgado",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/11708972?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/adriandelgado" }]
+	},
+	{
+		"name": "Braulio Rivas",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/61257604?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/brauliorivas" }]
+	},
+	{
+		"name": "Daniel Cortez",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/112514991?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/DanRCM" }]
+	},
+	{
+		"name": "Adair Abrigo",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/93391519?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/adairaxe" }]
+	},
+	{
+		"name": "Anthony Herrera",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/137233273?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/AnthonyyHL" }]
+	},
+	{
+		"name": "John Cañarte",
+		"role": "Miembro",
+		"photo": "https://avatars.githubusercontent.com/u/70679514?v=4",
+		"directiva": "no",
+		"socialMedia": [{ "nombre": "github", "link": "https://github.com/Jecanart" }]
+	}
+]
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -30,5 +30,5 @@
 			</button>
 		</div>
 	</section>
-  <Members_home />
-</main>
+	<Members_home />
+</main>
diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte
@@ -1,32 +1,36 @@
 <script lang="ts">
-	import Member from "$lib/components/Member.svelte"
+	import Member from "$lib/components/Member.svelte";
 	let { data } = $props();
 </script>
 
-<h1 class=" font-fira text-4xl text-slate-200 text-center pt-5 pb-8">Directiva</h1>
-<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-3 justify-items-center">
+<h1 class=" pb-8 pt-5 text-center font-fira text-4xl text-slate-200">Directiva</h1>
+<div
+	class="grid grid-cols-1 justify-center justify-items-center px-20 py-3 md:grid-cols-3 md:px-48"
+>
 	{#each data.members as member}
 		{#if member.directiva === "si"}
-		<Member 
-			name={member.name} 
-			role={member.role}
-			photo={member.photo}
-			socialMedia={member.socialMedia}
-		></Member>
+			<Member
+				name={member.name}
+				role={member.role}
+				photo={member.photo}
+				socialMedia={member.socialMedia}
+			></Member>
 		{/if}
 	{/each}
 </div>
 
-<h1 class=" font-fira text-4xl text-slate-200 text-center pt-5 pb-8">Miembros</h1>
-<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-3 justify-items-center">
+<h1 class=" pb-8 pt-5 text-center font-fira text-4xl text-slate-200">Miembros</h1>
+<div
+	class="grid grid-cols-1 justify-center justify-items-center px-20 py-3 md:grid-cols-3 md:px-48"
+>
 	{#each data.members as member}
 		{#if member.directiva === "no"}
-		<Member 
-			name={member.name} 
-			role={member.role}
-			photo={member.photo}
-			socialMedia={member.socialMedia}
-		></Member>
+			<Member
+				name={member.name}
+				role={member.role}
+				photo={member.photo}
+				socialMedia={member.socialMedia}
+			></Member>
 		{/if}
 	{/each}
-</div>
+</div>
diff --git a/src/routes/members/+page.ts b/src/routes/members/+page.ts
@@ -1,10 +1,10 @@
 import type { PageLoad } from "./$types";
-import members from "$lib/data/members.json"
+import members from "$lib/data/members.json";
 export const load = (async () => {
 	return {
 		title: "Chocomiembros",
 		// TODO: fetch from API
 		description: "Miembros del club Kokoa",
 		members,
 	};
-}) satisfies PageLoad;
+}) satisfies PageLoad;
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-cloudflare";
+import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */