Merge pull request #34 from CodeandoMexico/feat-projects

feat(projects): added projects support
CodeandoMexico · Jul 24, 2024 · 041beda · 041beda
2 parents faa9638 + 78e24a4
commit 041beda
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 36 deletions.
diff --git a/src/app.html b/src/app.html
@@ -7,7 +7,7 @@
 
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="flex flex-col min-h-screen">
+	<body data-sveltekit-preload-data="hover" data-theme="light" class="flex flex-col min-h-screen">
 		%sveltekit.body%
 	</body>
 </html>
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -1,5 +1,4 @@
 <script>
-	export let action;
 	export let action_label;
 </script>
 

diff --git a/src/components/Cards/ContentCard.svelte b/src/components/Cards/ContentCard.svelte
@@ -1,25 +1,28 @@
 <script>
-
+  export let title;
+  export let description;
+  export let image;
+  export let link;
 </script>
 
 
 <div class="Card w-full min-h-[519px] bg-zinc-100 flex-col justify-start items-start inline-flex">
-  <img class="Image4 self-stretch h-[250px]" src="https://via.placeholder.com/463x250" />
+  <img class="Image4 self-stretch h-[250px]" src={image} />
   <div class="Frame5 self-stretch min-h-[269px] h-full p-8 flex-col justify-end items-start gap-4 flex">
     <div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
       <div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
-        Mapatón Ciudadano
+        {title}
       </div>
     </div>
     <div class="Descripion self-stretch justify-start items-start inline-flex">
       <div class="Description grow shrink basis-0 text-black text-lg font-normal font-['Albert Sans'] leading-[27px]">
-        Es un proyecto para mapear todas las rutas de transporte público del país de forma colaborativa, usando aplicaciones móviles y mediante campañas de mapeo.
+        {description}
       </div>
     </div>
     <div class="Button justify-start items-center gap-2 inline-flex">
-      <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal">
+      <!-- <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal">
         Conoce más
-      </div>
+      </div> -->
       <div class="ExternalLink w-6 h-6 relative"></div>
     </div>
   </div>

diff --git a/src/components/Cards/ProjectCard.svelte b/src/components/Cards/ProjectCard.svelte
@@ -1,39 +1,53 @@
 <script>
 	import Badge from "../Badge.svelte";
+  export let title;
+  export let description;
+  export let image;
+  export let website;
+  export let repository;
+  export let tags = [];
+  export let maker = "";
 </script>
 
 
 <div class="Card w-full min-h-[519px] flex-col justify-start items-start inline-flex">
-  <img class="Image4 self-stretch h-[200px] w-full" src="https://placehold.co/457x200" />
+  <img class="Image4 object-cover h-[200px] w-full" src={image} />
   <div class="Frame5 self-stretch min-h-[269px] h-full flex-col justify-start pt-3 items-start gap-4 flex">
     <div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
       <div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
-        Mapatón Ciudadano
+        {title}
       </div>
     </div>
     <div class="Descripion self-stretch justify-start items-start inline-flex">
       <div class="Description grow shrink basis-0 text-black text-lg font-normal font-['Albert Sans'] leading-[27px]">
-        Es un proyecto para mapear todas las rutas de transporte público del país de forma colaborativa, usando aplicaciones móviles y mediante campañas de mapeo.
+        {description}
       </div>
     </div>
     <div class="Button justify-start items-center gap-2 inline-flex">
       <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] leading-normal">
-        Fundación Avina
+        {website}
       </div>
-      <div class="ExternalLink w-6 h-6 relative"></div>
+    </div>
+    <div>
+      <p>{maker}</p>
     </div>
     <div class="flex flex-wrap gap-2">
-      <Badge text="Datos abiertos" color="#6596FF"/>
-      <Badge text="Código abierto" color="#F1B6B8"/>
-      <Badge text="Plataforma opensource" color="#F2D301"/>
+
+      {#each tags as tag}
+        <Badge text={tag} color="#6596FF"/>
+      {/each}
     </div>
     <div class="flex gap-3 my-2">
-      <a href="#" target="_blank" class="border-2 border-black uppercase font-bold bg-black text-white px-5 py-2 hover:bg-gray-700 transition duration-300 ease-in-out">
+      {#if website}
+      <a href={website} target="_blank" class="border-2 border-black uppercase font-bold bg-black text-white px-5 py-2 hover:bg-gray-700 transition duration-300 ease-in-out">
         Sitio web
       </a>
-      <a href="#" target="_blank" class="border-2 border-black uppercase font-bold bg-white text-black px-5 py-2 hover:bg-gray-200 transition duration-300 ease-in-out">
+      {/if}
+      {#if repository}
+      <a href={repository} target="_blank" class="border-2 border-black uppercase font-bold bg-white text-black px-5 py-2 hover:bg-gray-200 transition duration-300 ease-in-out">
         Repositorio
       </a>
+      {/if}
     </div>
   </div>
 </div>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -9,8 +9,8 @@
   let menuItems = [
     {name: "Acerca de", url: '/acerca'},
     {name: "Proyectos", url: "/proyectos"},
-    {name: "Comunidad", url: "/comunidad"},
-    {name: "Recursos", url: "/recursos"},
+    // {name: "Comunidad", url: "/comunidad"},
+    // {name: "Recursos", url: "/recursos"},
     {name: "Blog", url: "/blog"},
     ];
 </script>

diff --git a/src/lib/apiClient.js b/src/lib/apiClient.js
@@ -1,7 +1,5 @@
 import { createDirectus, rest, staticToken } from '@directus/sdk'
 import { DIRECTUS_TOKEN } from '$env/static/private'
-console.log("el token")
-console.log(DIRECTUS_TOKEN)
 
 const client = createDirectus('https://content.codeandomexico.org').with(rest()).with(staticToken(DIRECTUS_TOKEN))
 

diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
@@ -5,11 +5,26 @@ export async function load() {
   const home = await client.request(readSingleton('home'));
   const posts = await client.request(readItems('Blog_Posts', {
     fields: ['*', "user_created.*"],
+    filter: {
+			status: {
+        _eq: "published"
+      }
+		},
+    limit: 3
+  }));
+  const projects = await client.request(readItems('projects', {
+    filter: {
+			status: {
+        _eq: "published"
+      }
+		},
+    limit: 3
   }))
 
 	return {
     home,
-    posts
+    posts,
+    projects
 	}
 }
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,12 +4,12 @@
 	import ShadowImageCard from '@/components/Cards/ShadowImageCard.svelte';
 	import TitleDescription from '@/components/TitleDescription.svelte';
 	import IconTextAction from '@/components/IconTextAction.svelte';
-	import ContentCard from '@/components/Cards/ContentCard.svelte';
+	import ProjectCard from '@/components/Cards/ProjectCard.svelte';
 	import SubscribeBox from '@/components/SubscribeBox.svelte';
 	import ArticleCard from '@/components/Cards/ArticleCard.svelte';
 	import Button from '@/components/Button.svelte';
 	export let data
-  const { home, posts } = data
+  const { home, posts, projects } = data
 </script>
 
 <Hero 
@@ -38,13 +38,25 @@
 		<TitleDescription title="En qué estamos trabajando" description="Todos nuestros proyectos son open source, esto significa que cualquiera es libre de utilizar el código, datos y otros materiales de acuerdo a la licencia que contenga." />
 	</div>
 
-	<div id="nuestros-proyectos" class="flex flex-col md:flex-row columns-3 container m-auto gap-5">
-		<ContentCard/>
-		<ContentCard/>
-		<ContentCard/>
+	<div id="nuestros-proyectos" class="md:grid grid-cols-3  container m-auto gap-5">
+		{#each projects as project}
+		<ProjectCard
+			title={project.title}
+			description={project.short_description}
+			tags={project.tags || []}
+			image={`https://content.codeandomexico.org/assets/${project.image}`}
+			website={project.website}
+			maker={project.maker}
+			repository={project.repository}
+		/>
+	{/each}
+
 	</div>
 	<div class="text-center my-8">
-		<Button action="/proyectos" action_label="Ver todos los proyectos" />
+		<a href="/proyectos" >	
+			<Button  action_label="Ver todos los proyectos" />
+		</a>
+
 	</div>
 </section>
 
@@ -71,6 +83,8 @@
 	</div>
 
 	<div class="text-center m-auto">
-		<Button action="http://blog.codeandomexico.org/" action_label="Ir al blog" />
+		<a href="/blog">
+		<Button action_label="Ir al blog" />
+	</a>
 	</div>
 </section>
diff --git a/src/routes/blog/+page.server.js b/src/routes/blog/+page.server.js
@@ -9,6 +9,11 @@ export async function load() {
   // get and sort posts
   const posts = await client.request(readItems('Blog_Posts', {
     fields: ['*', "user_created.*"],
+    filter: {
+			status: {
+        _eq: "published"
+      }
+		}
   }))
 
 	return {

diff --git a/src/routes/proyectos/+page.server.js b/src/routes/proyectos/+page.server.js
@@ -0,0 +1,20 @@
+import client from '$lib/apiClient'
+import { readItems } from '@directus/sdk'
+
+export async function load() {
+
+  const projects = await client.request(readItems('projects', {
+    filter: {
+			status: {
+        _eq: "published"
+      }
+		}
+  }))
+
+	return {
+    projects
+	}
+}
+
+export const prerender = true;
+
diff --git a/src/routes/proyectos/+page.svelte b/src/routes/proyectos/+page.svelte
@@ -4,6 +4,8 @@
   import SubscribeBox from '@/components/SubscribeBox.svelte';
   import Badge from '@/components/Badge.svelte';
 	import ProjectCard from '@/components/Cards/ProjectCard.svelte';
+  export let data
+  const { projects } = data
 </script>
 
 <Hero title="Proyectos" subtitle="Colaboramos desde el diseño hasta la implementación de tecnología cívica." image="/proyectos.png"/>
@@ -25,16 +27,25 @@
 
 <section id="nuestros-proyectos" class="container mx-auto my-12 p-3">
   <h1 class="text-4xl font-bold my-3">Conoce nuestros proyectos</h1>
-  <div class="flex gap-4 my-6 flex-wrap">
+  <!-- TODO: Habilitar Badges -->
+  <!-- <div class="flex gap-4 my-6 flex-wrap">
     <Badge text="Movilidad" color="#F3F3F4"/>
     <Badge text="Educación" color="#F3F3F4"/>
     <Badge text="Legislativo" color="#F3F3F4"/>
     <Badge text="Datos abiertos" color="#F3F3F4"/>
     <Badge text="Código abierto" color="#F3F3F4"/>
-  </div>
+  </div> -->
   <div class="flex flex-col md:flex-row columns-3 container my-8 mx-auto gap-20">
-    <ProjectCard />
-    <ProjectCard />
-    <ProjectCard />
+    {#each projects as project}
+      <ProjectCard
+        title={project.title}
+        description={project.short_description}
+        tags={project.tags || []}
+        image={`https://content.codeandomexico.org/assets/${project.image}`}
+        website={project.website}
+        maker={project.maker}
+        repository={project.repository}
+      />
+    {/each}
   </div>
 </section>