Skip to content

Commit d405cf7

Browse files
basicavisualbasicavisual
authored
Merge pull request #42 from CodeandoMexico/feature/recursos
connected recursos to directus
2 parents be4035b + a394b3a commit d405cf7

4 files changed

Lines changed: 59 additions & 117 deletions

File tree

‎src/components/Cards/RecursosCard.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script>
22
export let title;
33
export let url;
4-
export let author;
4+
export let authors;
55
</script>
66

77
<a href={url} target="_blank" rel="noopener noreferrer" class=" w-full md:w-1/3 md:pr-8 mb-5">
88
<div class="bg-gray-100 hover:bg-gray-200 h-[150px] p-5 flex justify-between">
99
<div>
1010
<h4 class="text-xl font-bold">{title}</h4>
11-
{#if author }
12-
<p>{author}</p>
11+
{#if authors }
12+
{#each authors as author }
13+
<p>{author.authors_id.name}</p>
14+
{/each}
1315
{/if }
1416
</div>
1517
<img src="/flecha-verde.png" alt="Ir al recurso" class="inline h-[20px] w-[20px] self-end">

‎src/routes/recursos/+page.server.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import client from '$lib/apiClient'
2+
import { readItems } from '@directus/sdk'
3+
4+
export async function load() {
5+
6+
const conocimientos = await client.request(readItems('subseccion', {
7+
8+
fields: [
9+
"*",
10+
{
11+
recursos: ["*",
12+
{
13+
authors:
14+
["*",
15+
{
16+
authors_id: ["*"]
17+
}
18+
]
19+
}
20+
]
21+
}
22+
],
23+
}))
24+
25+
const recursos = await client.request(readItems('categorias_recursos', {
26+
27+
fields: [
28+
"*",
29+
{
30+
recursos: ["*"]
31+
}
32+
],
33+
}))
34+
35+
return {
36+
conocimientos, recursos
37+
}
38+
}
39+
40+
export const prerender = true;

‎src/routes/recursos/+page.svelte‎

Lines changed: 14 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,9 @@
11
<script>
22
import Hero from "@/components/Hero.svelte";
33
import RecursosCard from "@/components/Cards/RecursosCard.svelte";
4-
let conocimiento = [
5-
{
6-
"name": "Curso de datos abiertos y hacking cívico",
7-
"content":
8-
[
9-
{
10-
"name": "Curso de datos abiertos y hacking cívico",
11-
"author": "Lab león",
12-
"url": "https://google.com/"
13-
}
14-
]
15-
},
16-
{
17-
"name": "Jornadas de hacking cívico (CMX)",
18-
"content":
19-
[
20-
{
21-
"name": "Mapeando el transporte público",
22-
"author": "Rolando Drouaillet",
23-
"url": "https://google.com/"
24-
},
25-
{
26-
"name": "Ciencia de Datos para el bien",
27-
"author": "Ricardo Alanís",
28-
"url": "https://google.com/"
29-
},
30-
{
31-
"name": "Plataformas Participativas",
32-
"author": "Viridiana Hernández",
33-
"url": "https://google.com/"
34-
},
35-
{
36-
"name": "Datos para no-programadores (OpenRefine)",
37-
"author": "Edgar Gutiérrez",
38-
"url": "https://google.com/"
39-
}
40-
]
41-
}
42-
]
43-
let herramientas = [
44-
{"name": "Awesome Civic Tech", "url": "https://google.com/"},
45-
{"name": "Awesome Open Data", "url": "https://google.com/"},
46-
{"name": "COVID Estados", "url": "https://google.com/"}
47-
]
48-
let proyectos = [
49-
{"name": "Mapaton Ciudadano", "url": "https://google.com/"},
50-
{"name": "Informe bajo Lupa", "url": "https://google.com/"},
51-
{"name": "Hackers Cívicos", "url": "https://google.com/"}
52-
]
53-
let eventos = [
54-
{"name": "Civic Hack Nights", "url": "https://google.com/"},
55-
{"name": "DataCon", "url": "https://google.com/"},
56-
{"name": "Open Data Day", "url": "https://google.com/"}
57-
]
58-
let oportunidades = [
59-
{"name": "Slack Chambas", "url": "https://google.com/"},
60-
{"name": "Github Chambas", "url": "https://google.com/"},
61-
{"name": "Job Boards Internacionales", "url": "https://google.com/"},
62-
{"name": "Code for All Slack Board", "url": "https://google.com/"}
63-
]
64-
let otros = [
65-
{"name": "Civic tech Guide", "url": "https://google.com/"}
66-
]
4+
5+
export let data
6+
const { conocimientos, recursos } = data
677
</script>
688

699
<Hero accentColor="#FF6D53" image="/recursos.png" title="Recursos" subtitle="Conocimiento que hemos construido a lo largo del tiempo sobre tecnología cívica, datos abiertos y más." />
@@ -80,66 +20,26 @@
8020
<section id="conocimiento" class="container mx-auto my-6 p-3">
8121
<h2 class="text-5xl font-bold"><img src="/recursos-conocimiento.png" class="inline h-[50px] my-5" alt="Conocimiento">
8222
Conocimiento</h2>
83-
{#each conocimiento as subseccion }
23+
{#each conocimientos as subseccion }
8424
<div class="my-5">
8525
<h3 class="text-3xl font-bold my-5">{subseccion.name}</h3>
8626
<div class="flex flex-wrap">
87-
{#each subseccion.content as item }
88-
<RecursosCard title={item.name} url={item.url} author={item.author}/>
27+
{#each subseccion.recursos as item }
28+
<RecursosCard title={item.title} url={item.url} authors={item.authors}/>
29+
8930
{/each}
9031
</div>
9132
</div>
9233
{/each}
9334
</section>
94-
95-
<section id="Herramientas" class="container mx-auto my-6 p-3">
96-
<h2 class="text-5xl font-bold"><img src="/recursos-herramientas.png" class="inline h-[50px] my-5" alt="Herramientas">
97-
Herramientas</h2>
98-
<div class="flex flex-wrap my-5">
99-
{#each herramientas as item }
100-
<RecursosCard title={item.name} url={item.url}/>
101-
{/each}
102-
</div>
103-
</section>
104-
105-
<section id="Proyectos" class="container mx-auto my-6 p-3">
106-
<h2 class="text-5xl font-bold"><img src="/recursos-proyectos.png" class="inline h-[50px] my-5" alt="Proyectos">
107-
Proyectos</h2>
35+
{#each recursos as categoria }
36+
<section id="{categoria.categorias}" class="container mx-auto my-6 p-3">
37+
<h2 class="text-5xl font-bold capitalize"><img src="/recursos-{categoria.categorias}.png" class="inline h-[50px] my-5" alt="{categoria.categorias}">
38+
{categoria.categorias}</h2>
10839
<div class="flex flex-wrap my-5">
109-
{#each proyectos as item }
110-
<RecursosCard title={item.name} url={item.url}/>
40+
{#each categoria.recursos as recurso}
41+
<RecursosCard title={recurso.name} url={recurso.url}/>
11142
{/each}
11243
</div>
11344
</section>
114-
115-
116-
<section id="Eventos" class="container mx-auto my-6 p-3">
117-
<h2 class="text-5xl font-bold"><img src="/recursos-eventos.png" class="inline h-[50px] my-5" alt="Eventos">
118-
Eventos</h2>
119-
<div class="flex flex-wrap my-5">
120-
{#each eventos as item }
121-
<RecursosCard title={item.name} url={item.url}/>
122-
{/each}
123-
</div>
124-
</section>
125-
126-
<section id="Oportunidades" class="container mx-auto my-6 p-3">
127-
<h2 class="text-5xl font-bold"><img src="/recursos-oportunidades.png" class="inline h-[50px] my-5" alt="Oportunidades">
128-
Oportunidades</h2>
129-
<div class="flex flex-wrap my-5">
130-
{#each oportunidades as item }
131-
<RecursosCard title={item.name} url={item.url}/>
132-
{/each}
133-
</div>
134-
</section>
135-
136-
137-
<section id="Otros" class="container mx-auto my-6 p-3">
138-
<h2 class="text-5xl font-bold">
139-
Otros</h2>
140-
<div class="flex flex-wrap my-5">
141-
{#each otros as item }
142-
<RecursosCard title={item.name} url={item.url}/>
143-
{/each}
144-
</div>
145-
</section>
45+
{/each}

‎static/recursos-otros.png‎

9.32 KB
Loading

0 commit comments

Comments
 (0)