Skip to content

Commit 4a3b815

Browse files
oxcaroxcar
committed
Cambios en la pagina del blog
1 parent 85bebff commit 4a3b815

6 files changed

Lines changed: 232 additions & 270 deletions

File tree

‎src/components/Badge.svelte‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
11
<script>
2-
import { onMount } from 'svelte';
3-
/**
4-
* @typedef {Object} Props
5-
* @property {string} [text]
6-
* @property {any} [color]
7-
*/
2+
/**
3+
* @typedef {Object} Props
4+
* @property {string} [text]
5+
*/
86
9-
/** @type {Props} */
10-
let { text = 'Badge', color = getRandomHexColor() } = $props();
11-
function getRandomHexColor() {
12-
const letters = '0123456789ABCDEF';
13-
let color = '#';
14-
for (let i = 0; i < 6; i++) {
15-
color += letters[Math.floor(Math.random() * 16)];
16-
}
17-
return color;
18-
}
19-
let contrastedColor = $state('');
20-
21-
onMount(async () => {
22-
const fontColorContrast = (await import('font-color-contrast')).default;
23-
contrastedColor = fontColorContrast(color);
24-
});
7+
/** @type {Props} */
8+
let { text = 'Badge' } = $props();
259
</script>
2610

27-
28-
<span class="rounded-full px-3 py-1 text-xs "
29-
style={
30-
`background-color: ${color};
31-
color: ${contrastedColor}`
32-
}
33-
>
34-
{text}
35-
</span>
11+
<span class="rounded-full px-3 py-1 text-xs bg-cmxblack text-white whitespace-nowrap">
12+
{text}
13+
</span>

‎src/components/BlogHero.svelte‎

Lines changed: 49 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,58 @@
11
<script>
22
import Badge from './Badge.svelte';
3-
import ReadingTime from './ReadingTime.svelte';
4-
import HumanDate from './HumanDate.svelte';
5-
/**
6-
* @typedef {Object} Props
7-
* @property {string} [tag]
8-
* @property {string} [title]
9-
* @property {string} [slug]
10-
* @property {string} [date]
11-
* @property {string} [image]
12-
* @property {Array<{authors_id: {name: string}}>} [authors]
13-
* @property {string} [content]
14-
*/
3+
import ReadingTime from './ReadingTime.svelte';
4+
import HumanDate from './HumanDate.svelte';
5+
/**
6+
* @typedef {Object} Props
7+
* @property {Array<string>} [tags]
8+
* @property {string} [title]
9+
* @property {string} [slug]
10+
* @property {string} [date]
11+
* @property {string} [image]
12+
* @property {Array<{authors_id: {name: string}}>} [authors]
13+
* @property {string} [content]
14+
*/
1515
16-
/** @type {Props} */
17-
let {
18-
tag = '',
19-
title = 'Blog',
20-
slug = '',
21-
date = '',
22-
image = 'https://images.unsplash.com/photo-1582005450386-52b25f82d9bb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
23-
authors = [],
24-
content = ''
25-
} = $props();
16+
/** @type {Props} */
17+
let {
18+
tags = [],
19+
title = 'Blog',
20+
slug = '',
21+
date = '',
22+
image = '',
23+
authors = [],
24+
content = ''
25+
} = $props();
2626
</script>
2727

28-
<a href="/blog/{slug}">
29-
<div class="h-[400px] relative ">
30-
<div
31-
class="
32-
group
33-
absolute
34-
w-full
35-
h-full
36-
top-0
37-
left-0
38-
right-0
39-
bottom-0
40-
bg-black
41-
opacity-50
42-
z-10
43-
flex
44-
"
45-
></div>
46-
47-
<div
48-
class="
49-
absolute
50-
w-full
51-
h-full
52-
top-0
53-
left-0
54-
right-0
55-
bottom-0
56-
z-20
57-
flex
58-
flex-col
59-
justify-center
60-
p-10"
61-
>
62-
<div class="left">
63-
{#if tag}
64-
<Badge text={tag} />
65-
{/if}
66-
</div>
67-
<h1 class="text-2xl md:text-4xl font-bold text-white md:leading-normal group:hover:underline ">
68-
{title}
69-
</h1>
28+
<div class="hero flex gap-2 md:gap-4 flex-col md:flex-row">
29+
<div class="hero_left aspect-16/9 border border-cmxblack border-2">
30+
<img src={image} alt="" class="" />
7031
</div>
71-
72-
<div
73-
class="
74-
absolute
75-
w-full
76-
h-full
77-
top-0
78-
left-0
79-
right-0
80-
bottom-0
81-
z-30
82-
flex
83-
flex-col
84-
justify-end
85-
p-10
86-
"
87-
>
88-
<div class="bottom-0">
89-
<p class="text-2xl text-left text-white font-thin">
90-
{#each authors as author, i}
91-
<span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
92-
{/each}
93-
</p>
94-
<p class="text-left text-gray-300 font-bold">
95-
<HumanDate date={date}/>
96-
<span class="mx-2">·</span>
97-
<ReadingTime text={content}/>
98-
</p>
32+
<div class="hero_right flex flex-col gap-4">
33+
<div></div>
34+
<h1 class="text-2xl md:text-4xl font-black text-cmxblack leading-1 hover:underline">
35+
<a href="/blog/{slug}">{title}</a>
36+
</h1>
37+
<div class="">
38+
<p class="text-md font-semibold">
39+
{#each authors as author, i}
40+
<span
41+
>{author.authors_id.name || ''}{#if i < authors.length - 1},
42+
{/if}</span
43+
>
44+
{/each}
45+
</p>
46+
<p class="text-sm">
47+
<HumanDate {date} />
48+
<span class="mx-2">•</span>
49+
<ReadingTime text={content} />
50+
</p>
51+
</div>
52+
<div class="flex flex-row gap-1">
53+
{#each tags as tag}
54+
<Badge text={tag} />
55+
{/each}
9956
</div>
10057
</div>
101-
102-
<img class="object-cover w-full h-full" src={image} alt="Hero" />
10358
</div>
104-
</a>

‎src/components/Cards/ArticleCard.svelte‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
<script>
2-
import Badge from "@/components/Badge.svelte";
3-
import HumanDate from "../HumanDate.svelte";
4-
let {
5-
slug,
6-
title,
7-
date,
8-
image,
9-
tag,
10-
authors
11-
} = $props();
2+
import Badge from '@/components/Badge.svelte';
3+
import HumanDate from '../HumanDate.svelte';
4+
let { slug, title, date, image, tags, authors } = $props();
125
</script>
136

147
<a href="/blog/{slug}">
15-
<div class="w-full">
16-
<div class="md:aspect-video aspect-square ">
17-
<img class="object-cover w-full h-full " src={image} alt="Card" />
18-
</div>
19-
<div class="space-y-2 mt-5">
20-
<div class="flex">
21-
{#if tag}
22-
<Badge text={tag}/>
23-
{/if}
24-
</div>
25-
<h2 class="font-extrabold text-xl">{title}</h2>
26-
{#if authors}
27-
<p class="text-sm">
28-
{#each authors as author, i }
29-
<span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
30-
{/each}
31-
</p>
32-
{/if}
33-
<p class="text-sm text-gray-400"><HumanDate date={date}/></p>
34-
</div>
35-
</div>
36-
</a>
8+
<div class="w-full">
9+
<div class="md:aspect-video aspect-square">
10+
<img class="object-cover w-full h-full" src={image} alt="Card" />
11+
</div>
12+
<div class="space-y-2 mt-5">
13+
<div class="flex flex-row flex-wrap gap-2">
14+
{#each tags as tag}
15+
<Badge text={tag} />
16+
{/each}
17+
</div>
18+
<h2 class="font-extrabold text-xl">{title}</h2>
19+
{#if authors}
20+
<p class="text-sm">
21+
{#each authors as author, i}
22+
<span
23+
>{author.authors_id.name || ''}{#if i < authors.length - 1},
24+
{/if}</span
25+
>
26+
{/each}
27+
</p>
28+
{/if}
29+
<p class="text-sm text-gray-400"><HumanDate {date} /></p>
30+
</div>
31+
</div>
32+
</a>

0 commit comments

Comments
 (0)