Skip to content

Commit ce807d5

Browse files
oxcaroxcar
committed
Migración a Svelte 5
1 parent 3c044af commit ce807d5

37 files changed

Lines changed: 2840 additions & 2794 deletions

‎package-lock.json‎

Lines changed: 1754 additions & 1736 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,22 @@
1313
},
1414
"devDependencies": {
1515
"@sveltejs/adapter-auto": "^3.1.0",
16-
"@sveltejs/adapter-static": "^3.0.2",
17-
"@sveltejs/kit": "^2.0.6",
16+
"@sveltejs/adapter-static": "^3.0.10",
17+
"@sveltejs/kit": "^2.57.1",
1818
"@tailwindcss/typography": "^0.5.13",
1919
"autoprefixer": "^10.4.16",
2020
"daisyui": "^4.5.0",
2121
"eslint": "^8.56.0",
2222
"eslint-config-prettier": "^9.1.0",
23-
"eslint-plugin-svelte": "^2.35.1",
23+
"eslint-plugin-svelte": "^3.16.0",
2424
"postcss": "^8.4.33",
2525
"prettier": "^3.1.1",
26-
"prettier-plugin-svelte": "^3.1.2",
27-
"svelte": "^4.2.8",
28-
"svelte-check": "^3.6.2",
26+
"prettier-plugin-svelte": "^3.5.1",
27+
"svelte": "^5.55.3",
28+
"svelte-check": "^4.0.0",
2929
"tailwindcss": "^3.4.0",
30-
"typescript": "^5.3.3",
31-
"vite": "^5.0.11"
30+
"typescript": "^5.5.0",
31+
"vite": "^8.0.0"
3232
},
3333
"type": "module",
3434
"dependencies": {

‎pnpm-lock.yaml‎

Lines changed: 751 additions & 767 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Badge.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<script>
22
import { onMount } from 'svelte';
3-
export let text = 'Badge';
4-
export let color = getRandomHexColor();
3+
/**
4+
* @typedef {Object} Props
5+
* @property {string} [text]
6+
* @property {any} [color]
7+
*/
8+
9+
/** @type {Props} */
10+
let { text = 'Badge', color = getRandomHexColor() } = $props();
511
function getRandomHexColor() {
612
const letters = '0123456789ABCDEF';
713
let color = '#';
@@ -10,7 +16,7 @@
1016
}
1117
return color;
1218
}
13-
let contrastedColor = '';
19+
let contrastedColor = $state('');
1420
1521
onMount(async () => {
1622
const fontColorContrast = (await import('font-color-contrast')).default;

‎src/components/BlogHero.svelte‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,27 @@
22
import Badge from './Badge.svelte';
33
import ReadingTime from './ReadingTime.svelte';
44
import HumanDate from './HumanDate.svelte';
5-
export let tag = '';
6-
export let title = 'Blog';
7-
export let slug = '';
8-
export let date = '';
9-
export let image =
10-
'https://images.unsplash.com/photo-1582005450386-52b25f82d9bb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
11-
export let authors = '';
12-
export let content = '';
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+
*/
15+
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();
1326
</script>
1427

1528
<a href="/blog/{slug}">

‎src/components/Button.svelte‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<script>
22
import { onMount } from 'svelte';
3-
export let action_label;
4-
export let color = "#00D690";
5-
let contrastedColor = '';
3+
4+
/** @type {{ action_label: string, color?: string }} */
5+
let { action_label, color = "#00D690" } = $props();
6+
7+
let contrastedColor = $state('');
8+
9+
/**
10+
* @param {string} hex
11+
* @param {number} percent
12+
*/
613
function darkenColor(hex, percent) {
714
const num = parseInt(hex.slice(1), 16),
815
amt = Math.round(2.55 * percent),
@@ -18,16 +25,22 @@
1825
.toString(16)
1926
.slice(1)}`;
2027
}
21-
let darkerColor = darkenColor(color, 7);
28+
29+
let darkerColor = $derived(darkenColor(color, 7));
30+
2231
onMount(async () => {
23-
const fontColorContrast = (await import('font-color-contrast')).default;
24-
contrastedColor = fontColorContrast(color);
25-
});
32+
const fontColorContrast = (await import('font-color-contrast')).default;
33+
contrastedColor = fontColorContrast(color);
34+
});
2635
</script>
2736

28-
<button class="Button min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex hover:bg-white/75 transition ease-in duration-150" style={
29-
`background-color: ${color};
30-
color: ${contrastedColor}; `
31-
} onMouseOver="this.style.backgroundColor='{darkerColor}'" onMouseOut="this.style.backgroundColor='{color}'">
32-
<span class="Button text-base font-['Albert Sans'] uppercase leading-normal font-bold"> {action_label}</span>
37+
<button
38+
class="Button min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex hover:bg-white/75 transition ease-in duration-150"
39+
style={`background-color: ${color}; color: ${contrastedColor};`}
40+
onmouseover={(e) => { e.currentTarget.style.backgroundColor = darkerColor; }}
41+
onmouseout={(e) => { e.currentTarget.style.backgroundColor = color; }}
42+
onfocus={(e) => { e.currentTarget.style.backgroundColor = darkerColor; }}
43+
onblur={(e) => { e.currentTarget.style.backgroundColor = color; }}
44+
>
45+
<span class="Button text-base font-['Albert Sans'] uppercase leading-normal font-bold">{action_label}</span>
3346
</button>

‎src/components/Cards/ArticleCard.svelte‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<script>
22
import Badge from "@/components/Badge.svelte";
33
import HumanDate from "../HumanDate.svelte";
4-
export let slug;
5-
export let title;
6-
export let date;
7-
export let image;
8-
export let tag;
9-
export let authors;
4+
let {
5+
slug,
6+
title,
7+
date,
8+
image,
9+
tag,
10+
authors
11+
} = $props();
1012
</script>
1113

1214
<a href="/blog/{slug}">
@@ -21,7 +23,7 @@
2123
{/if}
2224
</div>
2325
<h2 class="font-extrabold text-xl">{title}</h2>
24-
{#if authors }
26+
{#if authors}
2527
<p class="text-sm">
2628
{#each authors as author, i }
2729
<span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>

‎src/components/Cards/CollaboratorCard.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<script>
2-
export let image;
3-
export let name;
4-
export let url;
2+
let { image, name, url } = $props();
53
</script>
64

75
<a href="{url}">

‎src/components/Cards/CommunityCard.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
2-
export let text;
3-
export let route;
2+
let { text, route } = $props();
43
</script>
54

65
<div class="p-5 w-full md:w-1/3">

‎src/components/Cards/ContentCard.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<script>
2-
export let title;
3-
export let description;
4-
export let image;
5-
export let link;
2+
let {
3+
title,
4+
description,
5+
image,
6+
link
7+
} = $props();
68
</script>
79

810

911
<div class="Card w-full min-h-[519px] bg-zinc-100 flex-col justify-start items-start inline-flex">
10-
<img class="Image4 self-stretch h-[238px] object-cover" src={image} />
12+
<img class="Image4 self-stretch h-[238px] object-cover" src={image} alt={title} />
1113
<div class="Frame5 self-stretch min-h-[281px] p-8 flex-col justify-between items-start gap-4 flex">
1214
<div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
1315
<div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">

0 commit comments

Comments
 (0)