Skip to content

Commit 0543e75

Browse files
author
Daveed
committed
draft for about/slug
1 parent 9c24608 commit 0543e75

File tree

5 files changed

+194
-19
lines changed

5 files changed

+194
-19
lines changed

‎src/components/blocks.content.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const { content, className = "" } = Astro.props;
1313
content && content.length > 0 && (
1414
<div class={`blocks-content ${className}`}>
1515
{content.map((block) => (
16-
<Fragment>
16+
<>
1717
{/* Paragraph blocks */}
1818
{block.type === "paragraph" && (
1919
<p class="mb-4 leading-relaxed">
@@ -291,15 +291,15 @@ const { content, className = "" } = Astro.props;
291291
{((block.image as any).caption ||
292292
(block.image as any).alternativeText ||
293293
(block.image as any).name) && (
294-
<figcaption class="text-center text-sm text-gray-500 mt-3 italic">
294+
<figcaption class="text-center text-sm text-muted mt-3 italic">
295295
{(block.image as any).caption ||
296296
(block.image as any).alternativeText ||
297297
(block.image as any).name}
298298
</figcaption>
299299
)}
300300
</figure>
301301
)}
302-
</Fragment>
302+
</>
303303
))}
304304
</div>
305305
)

‎src/components/markket/pages.cards.astro‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
/**
3+
* pages: Array of either collection entries or raw page data objects
4+
* Each item may be: { id, data } or the direct data object.
5+
*/
6+
const { pages = [], className = '' } = Astro.props;
7+
8+
const href = (slug: string) => {
9+
const map = {
10+
home: '/',
11+
blog: '/blog',
12+
newsletter: '/newsletter',
13+
contact: '/contacto',
14+
about: '/about'
15+
}
16+
17+
return map[slug] || `/about/${slug}`;
18+
}
19+
---
20+
21+
<div class={`row ${className}`}>
22+
{pages.map((entry: any) => {
23+
const p = entry?.data ? entry.data : entry;
24+
const title = p?.Title || p?.title || 'Untitled';
25+
const slug = p?.slug || p?.Slug || p?.id || '';
26+
const img = p?.Cover?.url || p?.SEO?.socialImage?.url || '';
27+
const desc = p?.SEO?.metaDescription || (p?.Content && p.Content[0]?.children?.[0]?.text) || '';
28+
29+
return (
30+
<div class="col-12 col-md-6 col-lg-3 mb-4">
31+
<a href={href(slug)} class="text-decoration-none">
32+
<div class="card h-100 border-0 shadow-sm hover-lift overflow-hidden">
33+
{img ? (
34+
<div style="height:160px; overflow:hidden;">
35+
<img src={img} alt={title} class="w-100 h-100 object-cover" style="object-fit:cover;" />
36+
</div>
37+
) : (
38+
<div class="bg-light d-flex align-items-center justify-content-center" style="height:160px;">
39+
<i class="bi bi-file-earmark-text fs-1 text-muted"></i>
40+
</div>
41+
)}
42+
<div class="card-body">
43+
<h5 class="card-title mb-2 text-dark">{title}</h5>
44+
{desc && <p class="card-text text-muted small">{desc.slice(0, 120)}{desc.length>120? '...': ''}</p>}
45+
</div>
46+
<div class="card-footer bg-white border-0">
47+
<small class="text-primary">Leer más <i class="bi bi-arrow-right ms-1"></i></small>
48+
</div>
49+
</div>
50+
</a>
51+
</div>
52+
);
53+
})}
54+
</div>
55+
56+
<style is:global>
57+
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
58+
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(12, 20, 50, 0.12); }
59+
.object-cover { object-fit: cover; height:100%; }
60+
</style>

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

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,99 @@
11
---
2+
import Layout from "../../layouts/BasicLayout.astro";
3+
import BlocksContent from "../../components/blocks.content.astro";
4+
import PageCards from "../../components/markket/pages.cards.astro";
5+
import { getCollection } from "astro:content";
6+
7+
export async function getStaticPaths() {
8+
const pages = await getCollection("pages");
9+
10+
// Filter pages that should appear under /about
11+
const aboutPages = pages.filter((p) => {
12+
const slug = p.data?.slug || p.id;
13+
if (!slug) return false;
14+
// skip the index/about home or obvious root pages
15+
if (slug === "about" || slug === "home") return false;
16+
const pd = p.data as any;
17+
// skip pages that point to external URLs
18+
if (pd?.ExternalUrl) return false;
19+
// allow an explicit opt-out via ShowInAbout = false
20+
if (pd?.ShowInAbout === false) return false;
21+
// if a Section field exists, only include pages explicitly in the 'about' section
22+
if (pd?.Section && String(pd?.Section).toLowerCase() !== "about")
23+
return false;
24+
return true;
25+
});
26+
27+
return aboutPages.map((p) => ({ params: { slug: p.data?.slug || p.id } }));
28+
}
29+
30+
const pages = await getCollection("pages");
31+
32+
const { slug } = Astro.params;
33+
const current = pages.find((p) => p.data?.slug === slug || p.id === slug);
34+
if (!current) throw new Error(`Page not found: ${slug}`);
35+
36+
const relatedPages = pages.filter(
37+
(p) => ![slug, "home", "about"].includes(p.data?.slug)
38+
);
39+
40+
const page = current.data;
41+
42+
const storeData = await getCollection("store");
43+
const store = storeData[0]?.data || {};
244
---
3-
<div>
4-
Hola
5-
</div>
45+
46+
<Layout
47+
title={page?.SEO?.metaTitle || page?.Title || "Acerca de Nosotros"}
48+
description={page?.SEO?.metaDescription || undefined}
49+
keywords={page?.SEO?.metaKeywords || undefined}
50+
author={page?.SEO?.metaAuthor || undefined}
51+
ogImage={page?.SEO?.socialImage?.url || undefined}
52+
>
53+
<main>
54+
<!-- Hero -->
55+
<section
56+
class="py-6 bg-gradient"
57+
style="background: linear-gradient(135deg,#f8fafc 0%, #eef2ff 100%);"
58+
>
59+
<div class="container">
60+
<div class="row justify-content-center">
61+
<div class="col-lg-10 text-center">
62+
<h1 class="display-4 fw-bold mb-3">{page?.Title || "Acerca de"}</h1>
63+
{
64+
page?.SEO?.metaDescription ? (
65+
<p class="lead text-muted mb-0">{page.SEO.metaDescription}</p>
66+
) : (
67+
<p class="lead text-muted mb-0">
68+
Conoce más sobre nosotros y lo que hacemos.
69+
</p>
70+
)
71+
}
72+
</div>
73+
</div>
74+
</div>
75+
</section>
76+
77+
<!-- Content Blocks -->
78+
<section class="py-5">
79+
<div class="container">
80+
<div class="row justify-content-center">
81+
<div class="col-lg-10">
82+
<BlocksContent content={page?.Content || []} />
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
88+
<section class="container my-5">
89+
<div class="row">
90+
<div class="col-12 text-center mb-4">
91+
<h2 class="display-6 fw-bold">Paginas relacionadas</h2>
92+
</div>
93+
</div>
94+
<div class="row">
95+
<PageCards pages={relatedPages} />
96+
</div>
97+
</section>
98+
</main>
99+
</Layout>

‎src/pages/about/index.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22
import Layout from "../../layouts/BasicLayout.astro";
33
import BlocksContent from "../../components/blocks.content.astro";
44
import { getCollection } from "astro:content";
5+
import PageCards from "../../components/markket/pages.cards.astro";
56
67
const pages = await getCollection("pages");
78
const pageEntry = pages.find((p) => p.data.slug === "about");
89
const page = pageEntry?.data || null;
910
const storeData = await getCollection("store");
1011
const store = storeData[0]?.data || {};
12+
const relatedPages = pages.filter(
13+
(p) => !["home", "about"].includes(p.data?.slug)
14+
);
1115
---
1216

1317
<Layout
@@ -100,5 +104,16 @@ const store = storeData[0]?.data || {};
100104
</a>
101105
</div>
102106
</section>
107+
108+
<section class="container my-5">
109+
<div class="row">
110+
<div class="col-12 text-center mb-4">
111+
<h2 class="display-6 fw-bold">Paginas relacionadas</h2>
112+
</div>
113+
</div>
114+
<div class="row">
115+
<PageCards pages={relatedPages} />
116+
</div>
117+
</section>
103118
</main>
104119
</Layout>

‎src/pages/index.astro‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import data from "../../public/data.json";
44
import SimpleNavbar from "../components/simpleNavbar";
55
import SimpleFooter from "../components/simpleFooter";
66
import CardProduct from "../components/products/cardProduct";
7+
import PageCards from "../components/markket/pages.cards.astro";
78
89
import { getCollection } from "astro:content";
910
@@ -16,6 +17,7 @@ const storeDescription =
1617
const storeLogo = store.Logo?.url || "";
1718
const storeCover = store.Cover?.url || "";
1819
const storeSEO = store.SEO || {};
20+
const pages = (await getCollection("pages"))?.splice(0, 2);
1921
---
2022

2123
<Layout
@@ -54,9 +56,9 @@ const storeSEO = store.SEO || {};
5456
<h1 class="display-4 fw-bold mb-3">{storeName}</h1>
5557
<p class="lead mb-4">{storeDescription}</p>
5658
<div class="d-flex justify-content-center gap-3 flex-wrap">
57-
<a href="/products" class="btn btn-light btn-lg">
58-
<i class="bi bi-bag-fill me-2"></i>
59-
Ver Productos
59+
<a href="/servicios" class="btn btn-light btn-lg">
60+
<i class="bi bi-briefcase me-2"></i>
61+
Ver Servicios
6062
</a>
6163
<a href="/about" class="btn btn-outline-light btn-lg">
6264
<i class="bi bi-info-circle me-2"></i>
@@ -99,19 +101,18 @@ const storeSEO = store.SEO || {};
99101
}
100102
</div>
101103
<div class="text-center mt-4">
102-
<a class="btn btn-primary btn-lg" href="/products">
103-
Ver Todos los Productos
104+
<a class="btn btn-primary btn-lg" href="/servicios">
105+
Ver Todos los Servicios
104106
<i class="bi bi-arrow-right ms-2"></i>
105107
</a>
106108
</div>
107109
</section>
108110

109-
<!-- Simple About Section -->
110111
<section class="my-5">
111112
<div class="row justify-content-center">
112113
<div class="col-lg-8 text-center">
113114
<div class="bg-light rounded-3 p-5">
114-
<h3 class="fw-bold mb-3">¿Por qué elegir {storeName}?</h3>
115+
<h3 class="fw-bold mb-3">Conoce a {storeName}</h3>
115116
<p class="text-muted mb-4">{storeDescription}</p>
116117
<div class="row">
117118
<div class="col-md-4 mb-3">
@@ -130,16 +131,21 @@ const storeSEO = store.SEO || {};
130131
<small class="text-muted">Productos premium</small>
131132
</div>
132133
</div>
133-
<div class="mt-4">
134-
<a href="/about" class="btn btn-outline-primary">
135-
Conoce Más Sobre Nosotros
136-
<i class="bi bi-arrow-right ms-2"></i>
137-
</a>
138-
</div>
139134
</div>
140135
</div>
141136
</div>
142137
</section>
138+
139+
<section class="my-5">
140+
<div class="row">
141+
<div class="col-12 text-center mb-4">
142+
<h2 class="display-6 fw-bold">Acerca de Nosostros</h2>
143+
</div>
144+
</div>
145+
<div class="row">
146+
<PageCards pages={pages} />
147+
</div>
148+
</section>
143149
</div>
144150
</main>
145151

0 commit comments

Comments
 (0)