Skip to content

Commit afc165f

Browse files
1cgonza1cgonza
committed
🚀 agregar SEO a perfiles + arreglar 🐣 #69 
1 parent 4c2d26d commit afc165f

File tree

6 files changed

+199
-100
lines changed

6 files changed

+199
-100
lines changed

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"private": true,
77
"scripts": {
88
"dev": "astro dev --host",
9-
"build": "astro build",
9+
"build": "astro check && astro build",
1010
"preview": "astro preview",
1111
"revisar": "astro check",
1212
"lint": "prettier --check .",
@@ -24,18 +24,21 @@
2424
"@enflujo/alquimia": "^2.0.0",
2525
"@rollup/plugin-graphql": "^2.0.4",
2626
"@speed-highlight/core": "^1.2.6",
27-
"astro": "^4.15.7",
27+
"astro": "^4.15.8",
2828
"astro-robots-txt": "^1.0.0",
29+
"astro-seo-schema": "^4.0.2",
2930
"autoprefixer": "^10.4.20",
3031
"marked": "^14.1.2",
3132
"marked-highlight": "^2.1.4",
33+
"schema-dts": "^1.1.2",
3234
"typescript": "^5.5.3"
3335
},
3436
"devDependencies": {
3537
"@types/marked": "^6.0.0",
3638
"graphql": "^16.9.0",
3739
"postcss": "^8.4.47",
3840
"prettier": "^3.3.3",
39-
"sass": "^1.79.1"
41+
"prettier-plugin-astro": "^0.14.1",
42+
"sass": "^1.79.3"
4043
}
4144
}

‎src/pages/equipo/[slug].astro

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import EnflujoImagen from '@/componentes/EnflujoImagen.astro';
44
import EquipoRedes from '@/componentes/EquipoRedes.astro';
55
import { gql, obtenerDatos } from '@/utilidades/ayudas';
66
import type { PersonaEquipo } from '@/tipos';
7+
import { Schema } from 'astro-seo-schema';
8+
import type { Person } from 'schema-dts';
79
810
export async function getStaticPaths() {
911
const Equipo = gql`
@@ -49,17 +51,41 @@ const Persona = gql`
4951
5052
const { equipo } = await obtenerDatos<{ equipo: PersonaEquipo[] }>(Persona);
5153
let persona: PersonaEquipo;
54+
const seo: Person = {
55+
'@type': 'Person',
56+
};
5257
5358
if (equipo && equipo.length) {
5459
persona = equipo[0];
5560
if (persona.date_created) persona.date_created = new Date(persona.date_created);
56-
persona.foto = persona.foto ? persona.foto : { id: '10440743-5d64-4117-b906-fbfb05f2bab5', title: persona.nombre };
61+
if (persona.foto) {
62+
seo.image = `https://api.enflujo.com/assets/${persona.foto.id}/foto-perfil-${persona.slug}.jpg`;
63+
} else {
64+
persona.foto = { id: '10440743-5d64-4117-b906-fbfb05f2bab5', title: persona.nombre };
65+
}
66+
67+
seo.name = persona.nombre;
68+
if (persona.sitio_web) seo.url = persona.sitio_web;
69+
if (persona.redes && persona.redes.length) {
70+
seo.sameAs = persona.redes.map((red) => red.url);
71+
}
72+
73+
if (persona.rol) {
74+
seo.jobTitle = persona.rol;
75+
}
5776
} else {
5877
return Astro.redirect('/404');
5978
}
6079
---
6180

6281
<Plantilla titulo={persona.nombre} descripcion={persona.descripcion} imagen={persona.foto}>
82+
<Schema
83+
slot="cabeza"
84+
item={{
85+
'@context': 'https://schema.org',
86+
...seo,
87+
}}
88+
/>
6389
<main class="pagina paginaMiembro">
6490
<section class="resumen contenedorFluido">
6591
{
@@ -78,21 +104,20 @@ if (equipo && equipo.length) {
78104
</div>
79105
</section>
80106

81-
<section class="contenedorFluido contenido">
82-
<h2 class="tituloSeccion">Proyectos</h2>
83-
84-
{
85-
persona.proyectos && persona.proyectos.length && (
107+
{
108+
persona.proyectos && persona.proyectos.length && (
109+
<section class="contenedorFluido contenido">
110+
<h2 class="tituloSeccion">Proyectos</h2>
86111
<ul>
87112
{persona.proyectos.map((proyecto) => (
88113
<li>
89114
<a href={`/proyectos/${proyecto.proyectos_id.slug}`}>{proyecto.proyectos_id.titulo}</a>
90115
</li>
91116
))}
92117
</ul>
93-
)
94-
}
95-
</section>
118+
</section>
119+
)
120+
}
96121
</main>
97122
</Plantilla>
98123

‎src/pages/eventos/[slug].astro

Lines changed: 60 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export async function getStaticPaths() {
1212
}
1313
}
1414
`;
15-
const { eventos } = await obtenerDatos<{eventos: {slug: string}[]}>(Eventos);
15+
const { eventos } = await obtenerDatos<{ eventos: { slug: string }[] }>(Eventos);
1616
1717
return eventos.map(({ slug }) => {
1818
return { params: { slug } };
@@ -37,7 +37,7 @@ const Evento = gql`
3737
}
3838
`;
3939
40-
const { eventos } = await obtenerDatos<{eventos: Evento[]}>(Evento);
40+
const { eventos } = await obtenerDatos<{ eventos: Evento[] }>(Evento);
4141
let pagina;
4242
4343
if (eventos && eventos.length) {
@@ -79,26 +79,25 @@ if (eventos && eventos.length) {
7979
@import '@/scss/_constantes.scss';
8080
@import '@/scss/_mixins.scss';
8181

82-
8382
.titulo {
8483
font-size: 1.6em;
8584
padding: 0.3em 1.3em 0.5em 0.3em;
8685
margin-bottom: 1em;
8786
}
88-
.tituloPagina{
87+
.tituloPagina {
8988
padding: 0.5em 0.3em 0.7em 1em;
9089
width: 100%;
9190
}
92-
.contenidoEvento{
93-
padding: 0.5em 1.8em 0.5em 1.8em ;
94-
font-size: 0.95em;
91+
.contenidoEvento {
92+
padding: 0.5em 1.8em 0.5em 1.8em;
93+
font-size: 0.95em;
9594
}
9695

9796
.seccionProyecto {
9897
margin-top: 1em;
9998
}
10099

101-
img{
100+
img {
102101
margin-top: 3vh;
103102
max-width: calc(100vw - 106px);
104103
height: auto;
@@ -124,79 +123,72 @@ if (eventos && eventos.length) {
124123
}
125124
}
126125

127-
// Teléfonos horizontal
128-
@media (min-width: $minCelular) {
129-
130-
.contenidoEvento{
126+
// Teléfonos horizontal
127+
@media (min-width: $minCelular) {
128+
.contenidoEvento {
131129
padding: 1em 3em 0.5em 3em;
132130
font-size: 0.95em;
131+
}
132+
img {
133+
margin-top: 3vh;
134+
max-width: calc(80vw);
135+
height: auto;
136+
margin-bottom: 1vh;
137+
}
133138
}
134-
img{
135-
margin-top: 3vh;
136-
max-width: calc(80vw);
137-
height: auto;
138-
margin-bottom: 1vh;
139+
// Pantallas medianas (Tablets)
140+
@media (min-width: $minTablet) {
139141
}
140142

141-
}
142-
// Pantallas medianas (Tablets)
143-
@media (min-width: $minTablet) {
144-
145-
}
146-
147-
// Dispositivos grandes . Pantalla
148-
@media (min-width: $minPantalla) {
149-
img{
150-
max-width: 80vw;
151-
display: inline;
152-
margin-bottom: -6px;
153-
}
143+
// Dispositivos grandes . Pantalla
144+
@media (min-width: $minPantalla) {
145+
img {
146+
max-width: 80vw;
147+
display: inline;
148+
margin-bottom: -6px;
149+
}
154150

155-
.contenedorFluido{
156-
width: 80vw;
151+
.contenedorFluido {
152+
width: 80vw;
153+
}
157154
}
158-
}
159-
160-
// Pantallas grandes
161-
@media (min-width: $minPantallaGrande) {
162155

163-
main{
164-
display:flex;
165-
flex-direction: row;
166-
}
167-
.tituloPagina{
168-
// padding-left corresponde al lado derecho, o sea, la parte de abajo de la palabra.
169-
padding-left: 14px;
170-
// padding-top corresponde al lado inferior, o sea, al comienzo de la frase
171-
padding-top: 30px;
172-
// padding-top corresponde al lado inferior, o sea, al comienzo de la frase
173-
padding-bottom: 20px;
174-
writing-mode: vertical-rl;
175-
transform: rotate(180deg);
176-
177-
width: unset;
178-
179-
}
180-
h1{
156+
// Pantallas grandes
157+
@media (min-width: $minPantallaGrande) {
158+
main {
159+
display: flex;
160+
flex-direction: row;
161+
}
162+
.tituloPagina {
163+
// padding-left corresponde al lado derecho, o sea, la parte de abajo de la palabra.
164+
padding-left: 14px;
165+
// padding-top corresponde al lado inferior, o sea, al comienzo de la frase
166+
padding-top: 30px;
167+
// padding-top corresponde al lado inferior, o sea, al comienzo de la frase
168+
padding-bottom: 20px;
169+
writing-mode: vertical-rl;
170+
transform: rotate(180deg);
171+
172+
width: unset;
173+
}
174+
h1 {
181175
margin: 0;
182176
}
183177

184-
.contenidoEvento{
185-
margin: 8vh 5vw 5vh 4vw;
186-
max-width: 40vw;
187-
}
178+
.contenidoEvento {
179+
margin: 8vh 5vw 5vh 4vw;
180+
max-width: 40vw;
181+
}
188182

189-
img{
190-
margin-top: 10vh;
191-
192-
max-width: 30vw;
183+
img {
184+
margin-top: 10vh;
193185

186+
max-width: 30vw;
187+
}
194188
}
195-
}
196-
@media (min-width: $minPantallaGigante) {
197-
img{
198-
max-width: 36vw;
199-
}
200-
189+
@media (min-width: $minPantallaGigante) {
190+
img {
191+
max-width: 36vw;
192+
}
201193
}
202194
</style>

‎src/plantillas/Plantilla.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ const colorPrincipal = general.color;
7575
/>
7676
)
7777
}
78+
79+
<slot name="cabeza" />
7880
</head>
7981

8082
<body>

‎src/utilidades/constantes.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { ImageObject, Organization } from 'schema-dts';
2+
3+
export const LogoEnFlujo: ImageObject = {
4+
'@id': '#logoEnFlujo',
5+
'@type': 'ImageObject',
6+
author: '#julianCamiloGarcia',
7+
contentLocation: 'Bogotá, D.C., Colombia',
8+
contentUrl: '',
9+
dateCreated: '',
10+
datePublished: '',
11+
description: '',
12+
name: '',
13+
};
14+
15+
export const OrgEnFlujo: Organization = {
16+
'@id': '',
17+
'@type': 'ResearchOrganization',
18+
address: '',
19+
description: '',
20+
funder: '@',
21+
foundingDate: '',
22+
foundingLocation: '',
23+
name: 'Laboratorio EnFlujo',
24+
alternateName: 'EnFlujo',
25+
keywords: [],
26+
logo: '#logoEnFlujo',
27+
};

0 commit comments

Comments
 (0)