Skip to content

Commit e7d11d7

Browse files
modeitschmodeitsch
authored
Merge pull request #14 from modeitsch/upgrade/major-dependencies
feat: Upgrade all dependencies — Svelte 5, Vite 8, Tailwind 4
2 parents 5df2e66 + a0e775d commit e7d11d7

32 files changed

Lines changed: 1422 additions & 1873 deletions

‎package-lock.json‎

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

‎package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,21 @@
88
"deploy": "npm run build && gh-pages -d build"
99
},
1010
"dependencies": {
11-
"lucide-svelte": "^0.364.0",
12-
"marked": "^15.0.12"
11+
"@tailwindcss/postcss": "^4.2.1",
12+
"@tailwindcss/vite": "^4.2.1",
13+
"lucide-svelte": "^0.577.0",
14+
"marked": "^17.0.4"
1315
},
1416
"devDependencies": {
1517
"@sveltejs/adapter-static": "^3.0.0",
16-
"@sveltejs/kit": "^2.0.0",
17-
"@sveltejs/vite-plugin-svelte": "^3.0.0",
18-
"autoprefixer": "^10.4.16",
18+
"@sveltejs/kit": "^2.55.0",
19+
"@sveltejs/vite-plugin-svelte": "^7.0.0",
20+
"autoprefixer": "^10.4.27",
1921
"gh-pages": "^6.0.0",
20-
"postcss": "^8.4.32",
21-
"svelte": "^4.0.0",
22-
"svelte-preprocess": "^5.1.3",
23-
"tailwindcss": "^3.3.6",
24-
"vite": "^5.0.0"
22+
"postcss": "^8.5.8",
23+
"svelte": "^5.53.0",
24+
"tailwindcss": "^4.2.1",
25+
"vite": "^8.0.0"
2526
},
2627
"type": "module",
2728
"license": "MIT"

‎postcss.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export default {
22
plugins: {
3-
tailwindcss: {},
43
autoprefixer: {},
54
},
65
};

‎src/app.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1-
@import 'tailwindcss/base';
2-
@import 'tailwindcss/components';
3-
@import 'tailwindcss/utilities';
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--color-background: var(--color-background);
5+
--color-background-secondary: var(--color-background-secondary);
6+
--color-surface: var(--color-surface);
7+
--color-surface-elevated: var(--color-surface-elevated);
8+
--color-accent: var(--color-accent);
9+
--color-accent-hover: var(--color-accent-hover);
10+
--color-text-primary: var(--color-text-primary);
11+
--color-text-secondary: var(--color-text-secondary);
12+
--color-text-muted: var(--color-text-muted);
13+
--color-border: var(--color-border);
14+
--color-border-hover: var(--color-border-hover);
15+
--font-family-heading: var(--font-heading);
16+
--font-family-body: var(--font-body);
17+
--font-family-mono: var(--font-mono);
18+
--shadow-theme-sm: var(--shadow-sm);
19+
--shadow-theme-md: var(--shadow-md);
20+
--shadow-theme-lg: var(--shadow-lg);
21+
}
422

523
/* ===== CSS CUSTOM PROPERTIES (Default: Clean Modern) ===== */
624
:root {

‎src/lib/components/BackToTop.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import { browser } from '$app/environment';
44
import { ArrowUp } from 'lucide-svelte';
55
6-
let isVisible = false;
7-
let scrollProgress = 0;
6+
let isVisible = $state(false);
7+
let scrollProgress = $state(0);
88
99
onMount(() => {
1010
if (!browser) return;
@@ -35,7 +35,7 @@
3535

3636
{#if isVisible}
3737
<button
38-
on:click={scrollToTop}
38+
onclick={scrollToTop}
3939
class="back-to-top"
4040
aria-label="Scroll to top"
4141
title="Back to top"

‎src/lib/components/BlogSearch.svelte‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
<script>
22
import { Search, X } from 'lucide-svelte';
3-
import { createEventDispatcher } from 'svelte';
43
5-
export let posts = [];
6-
export let searchQuery = '';
7-
8-
const dispatch = createEventDispatcher();
4+
let { posts = [], searchQuery = $bindable('') } = $props();
95
106
let inputElement;
11-
let isFocused = false;
7+
let isFocused = $state(false);
128
13-
$: filteredPosts = searchQuery.trim()
9+
let filteredPosts = $derived(searchQuery.trim()
1410
? posts.filter(post => {
1511
const query = searchQuery.toLowerCase();
1612
return (
@@ -19,11 +15,7 @@
1915
(post.tags && post.tags.some(tag => tag.toLowerCase().includes(query)))
2016
);
2117
})
22-
: posts;
23-
24-
$: {
25-
dispatch('filter', { filteredPosts, searchQuery });
26-
}
18+
: posts);
2719
2820
function clearSearch() {
2921
searchQuery = '';
@@ -44,9 +36,9 @@
4436
<input
4537
bind:this={inputElement}
4638
bind:value={searchQuery}
47-
on:focus={() => isFocused = true}
48-
on:blur={() => isFocused = false}
49-
on:keydown={handleKeydown}
39+
onfocus={() => isFocused = true}
40+
onblur={() => isFocused = false}
41+
onkeydown={handleKeydown}
5042
type="text"
5143
placeholder="Search posts..."
5244
aria-label="Search blog posts"
@@ -55,7 +47,7 @@
5547
{#if searchQuery}
5648
<button
5749
class="clear-button"
58-
on:click={clearSearch}
50+
onclick={clearSearch}
5951
aria-label="Clear search"
6052
>
6153
<X size={18} />
@@ -66,7 +58,7 @@
6658
{#if searchQuery && filteredPosts.length === 0}
6759
<div class="no-results">
6860
<p>No posts found matching "<strong>{searchQuery}</strong>"</p>
69-
<button on:click={clearSearch} class="clear-link">Clear search</button>
61+
<button onclick={clearSearch} class="clear-link">Clear search</button>
7062
</div>
7163
{:else if searchQuery}
7264
<p class="results-count">

‎src/lib/components/CustomCursor.svelte‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
import { onMount } from 'svelte';
33
import { browser } from '$app/environment';
44
5-
let cursorX = 0;
6-
let cursorY = 0;
7-
let cursorDotX = 0;
8-
let cursorDotY = 0;
9-
let isHovering = false;
10-
let isClicking = false;
11-
let isVisible = false;
12-
let isMobile = true;
5+
let cursorX = $state(0);
6+
let cursorY = $state(0);
7+
let cursorDotX = $state(0);
8+
let cursorDotY = $state(0);
9+
let isHovering = $state(false);
10+
let isClicking = $state(false);
11+
let isVisible = $state(false);
12+
let isMobile = $state(true);
1313
1414
onMount(() => {
1515
if (!browser) return;

‎src/lib/components/ExternalLink.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<script>
22
import { ExternalLink as ExternalLinkIcon } from 'lucide-svelte';
33
4-
export let href;
5-
export let className = '';
4+
let { href, className = '', children } = $props();
65
7-
let isLoading = false;
6+
let isLoading = $state(false);
87
98
function handleClick() {
109
isLoading = true;
@@ -21,9 +20,9 @@
2120
rel="noopener noreferrer"
2221
class="external-link {className}"
2322
class:loading={isLoading}
24-
on:click={handleClick}
23+
onclick={handleClick}
2524
>
26-
<slot />
25+
{@render children()}
2726
<span class="link-icon" aria-hidden="true">
2827
{#if isLoading}
2928
<span class="loading-spinner"></span>

‎src/lib/components/GitHubActivity.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { github, githubEvents, githubLoading, githubError } from '$lib/stores/github';
55
import type { GitHubEvent } from '$lib/stores/github';
66
7-
let mounted = false;
7+
let mounted = $state(false);
88
99
onMount(() => {
1010
mounted = true;
@@ -101,21 +101,22 @@
101101
<div class="error-state">
102102
<Github size={40} />
103103
<p>Unable to load activity</p>
104-
<button on:click={() => github.fetchEvents()} class="retry-button">
104+
<button onclick={() => github.fetchEvents()} class="retry-button">
105105
Try again
106106
</button>
107107
</div>
108108
{:else if $githubEvents.length > 0}
109109
<div class="activity-list">
110110
{#each $githubEvents.slice(0, 6) as event (event.id)}
111+
{@const EventIcon = getEventIcon(event.type)}
111112
<a
112113
href={getRepoUrl(event)}
113114
target="_blank"
114115
rel="noopener noreferrer"
115116
class="activity-item"
116117
>
117118
<div class="event-icon">
118-
<svelte:component this={getEventIcon(event.type)} size={16} />
119+
<EventIcon size={16} />
119120
</div>
120121
<div class="event-content">
121122
<p class="event-description">

‎src/lib/components/GitHubStats.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { onMount } from 'svelte';
33
import { github, githubStats, githubLoading } from '$lib/stores/github';
44
5-
export let showStars = false;
5+
let { showStars = false } = $props();
66
77
onMount(() => {
88
github.fetchStats();

0 commit comments

Comments
 (0)