Skip to content

Commit

Permalink
feat: migrate svelte 5 (#74)
Browse files Browse the repository at this point in the history
* chore: update dependencies and refine Svelte components for better props handling

* chore: add caniuse-lite dependency for improved browser compatibility insights

* chore: refactor imports for note types and improve metadata typing in Svelte components
  • Loading branch information
Michael-Liendo authored Nov 25, 2024
1 parent 17f5b8e commit e8a22c6
Show file tree
Hide file tree
Showing 16 changed files with 193 additions and 149 deletions.
Binary file modified bun.lockb
Binary file not shown.
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,27 @@
"@iconify-json/mdi": "^1.1.52",
"@notionhq/client": "^2.2.6",
"@sveltejs/adapter-auto": "^3.2.4",
"@sveltejs/kit": "^2.5.20",
"@sveltejs/kit": "^2.5.27",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.14",
"classnames": "^2.3.2",
"notion-to-md": "^3.1.0",
"postcss": "^8.4.24",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"svelte-markdown": "^0.3.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typesafe-i18n": "^5.24.3",
"typescript": "^5.0.0",
"typescript": "^5.5.0",
"unplugin-icons": "^0.16.3",
"vite": "^4.3.6"
"vite": "^5.4.4"
},
"type": "module",
"dependencies": {
"@sveltejs/adapter-vercel": "^5.4.3",
"@sveltejs/enhanced-img": "^0.3.4",
"@sveltejs/enhanced-img": "^0.3.9",
"caniuse-lite": "^1.0.30001684",
"highlight.js": "^11.8.0"
}
}
9 changes: 4 additions & 5 deletions src/app.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@

import type { Locales, TranslationFunctions } from '$i18n/i18n-types';

/**
* Timestamp Generated during building date
*/
declare const __BUILD_DATE__: string;

// for information about these interfaces
declare global {
/**
* Timestamp Generated during building date
*/
declare const __BUILD_DATE__: string;
namespace App {
// interface Error {}
interface Locals {
Expand Down
27 changes: 19 additions & 8 deletions src/lib/components/Entry.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,23 @@
import type { MultiSelectEntity } from '$lib/services/Notion/Notes/notes';
export let title = '';
export let description = '';
export let publishDate: Date;
export let tags: MultiSelectEntity[] = [];
export let slug = '';
export let previewImageUrl: string | null = '';
interface Props {
title?: string;
description?: string;
publishDate: Date;
tags?: MultiSelectEntity[];
slug?: string;
previewImageUrl?: string | null;
}
let {
title = '',
description = '',
publishDate,
tags = [],
slug = '',
previewImageUrl = '',
}: Props = $props();
const baseLocaleUrl = $locale === baseLocale ? '' : `/${$locale}`;
Expand All @@ -21,7 +32,7 @@
month: 'long',
day: '2-digit',
year: 'numeric',
}
},
);
</script>

Expand Down Expand Up @@ -63,7 +74,7 @@
<span
class="inline-block mr-1 rounded-full h-2 w-2"
style="background-color: {tag.color};"
/>
></span>
{tag.name}
</li>
{/each}
Expand Down
3 changes: 3 additions & 0 deletions src/lib/components/Header.svelte
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
<script lang="ts">
import { onMount } from 'svelte';
import Translate from '~icons/mdi/translate';
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/SocialMedia.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@
</a>
</li>
</ul>
<div class="flex space-x-1 sm:space-x-4" />
<div class="flex space-x-1 sm:space-x-4"></div>
163 changes: 85 additions & 78 deletions src/lib/components/notes/custom/Heading.svelte
Original file line number Diff line number Diff line change
@@ -1,92 +1,99 @@
<script lang="ts">
let data: HTMLElement;
let href = '';
let id = '';
import { run } from 'svelte/legacy';
export let depth: number;
export let text: string;
let data: HTMLElement | undefined = $state();
let href = $state('');
let id = $state('');
$: {
if (typeof data?.innerText === 'string') {
id = data?.innerText?.toLowerCase().trim().split(' ').join('-');
href = `#${id}`;
}
}
interface Props {
depth: number;
text: string;
children?: import('svelte').Snippet;
}
const focusElement = () => {
data.scrollIntoView();
};
let { depth, text, children }: Props = $props();
run(() => {
if (typeof data?.innerText === 'string') {
id = data?.innerText?.toLowerCase().trim().split(' ').join('-');
href = `#${id}`;
}
});
const focusElement = () => {
data?.scrollIntoView();
};
</script>

{#if depth === 1}
<h1 {id} class="font-body relative group py-2" bind:this={data}>
<slot />
</h1>
<h1 {id} class="font-body relative group py-2" bind:this={data}>
{@render children?.()}
</h1>
{:else if depth === 2}
<a class="no-underline" {href} on:click={focusElement}>
<h2 {id} class="font-body relative group py-2" bind:this={data}>
<span>
<slot />
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h2>
</a>
<a class="no-underline" {href} onclick={focusElement}>
<h2 {id} class="font-body relative group py-2" bind:this={data}>
<span>
{@render children?.()}
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h2>
</a>
{:else if depth === 3}
<a class="no-underline" {href} on:click={focusElement}>
<h3 {id} class="font-body relative group py-2" bind:this={data}>
<span>
<slot />
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h3>
</a>
<a class="no-underline" {href} onclick={focusElement}>
<h3 {id} class="font-body relative group py-2" bind:this={data}>
<span>
{@render children?.()}
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h3>
</a>
{:else if depth === 4}
<a class="no-underline" {href} on:click={focusElement}>
<h4 {id} class="font-body relative group py-2" bind:this={data}>
<span>
<slot />
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h4>
</a>
<a class="no-underline" {href} onclick={focusElement}>
<h4 {id} class="font-body relative group py-2" bind:this={data}>
<span>
{@render children?.()}
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h4>
</a>
{:else if depth === 5}
<a class="no-underline" {href} on:click={focusElement}>
<h5 {id} class="font-body relative group py-2" bind:this={data}>
<span>
<slot />
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h5>
</a>
<a class="no-underline" {href} onclick={focusElement}>
<h5 {id} class="font-body relative group py-2" bind:this={data}>
<span>
{@render children?.()}
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h5>
</a>
{:else if depth === 6}
<a class="no-underline" {href} on:click={focusElement}>
<h6 {id} class="font-body relative group py-2" bind:this={data}>
<span>
<slot />
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h6>
</a>
<a class="no-underline" {href} onclick={focusElement}>
<h6 {id} class="font-body relative group py-2" bind:this={data}>
<span>
{@render children?.()}
</span>
<span
class="invisible inline p-1 group-hover:visible bg-gray-200 font-bold rounded h-8 w-8 dark:bg-gray-600 dark:text-gray-200"
>
#
</span>
</h6>
</a>
{:else}
{text}
{text}
{/if}
9 changes: 7 additions & 2 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<script>
<script lang="ts">
import { page } from '$app/stores';
import Footer from '$lib/components/Footer.svelte';
import Header from '$lib/components/Header.svelte';
import '../app.css';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
</script>

<svelte:head>
Expand All @@ -22,7 +27,7 @@
<div class="bg-white dark:bg-black">
<div class="min-h-screen">
<Header />
<main class="px-5 sm:px-10 md:px-20"><slot /></main>
<main class="px-5 sm:px-10 md:px-20">{@render children?.()}</main>
</div>
<Footer />
</div>
24 changes: 15 additions & 9 deletions src/routes/[[lang=lang]]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,26 +1,32 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import Calendar from '~icons/mdi/calendar-month';
import LL, { locale } from '$i18n/i18n-svelte';
import SocialMedia from '$lib/components/SocialMedia.svelte';
import { baseLocale, locales } from '$i18n/i18n-util';
import type { Note } from '$lib/services/Notion/Notes/notes';
export let data: {
interface Props {
data: {
notes: Note[];
};
}
let { data }: Props = $props();
const baseLocaleUrl = $locale === baseLocale ? '' : `/${$locale}`;
const currentPageLocale = $locale;
let title = 'Michael Liendo | Software Developer';
let title = $state('Michael Liendo | Software Developer');
let description =
'A Software Developer interested in Systems Programming and Web Development.';
$state('A Software Developer interested in Systems Programming and Web Development.');
let keywords =
'michael liendo, home, notes, portfolio, software developer, svelte, typescript, web development, challenging projects, collaboration, problem-solving';
$state('michael liendo, home, notes, portfolio, software developer, svelte, typescript, web development, challenging projects, collaboration, problem-solving');
let avatarUrl = 'https://avatars.githubusercontent.com/u/70660410?v=4';
$: {
run(() => {
switch ($locale) {
case 'en':
title = 'Michael Liendo | Software Developer';
Expand All @@ -37,7 +43,7 @@
'michael liendo, inicio, notas, portafolio, desarrollador de software, svelte, typescript, desarrollo web, proyectos desafiantes, colaboración, resolución de problemas';
break;
}
}
});
</script>

<svelte:head>
Expand Down Expand Up @@ -193,7 +199,7 @@
<span
class="inline-block mr-1 rounded-full h-2 w-2"
style="background-color: {tag.color};"
/>
></span>
{tag.name}
</li>
{/each}
Expand Down Expand Up @@ -240,7 +246,7 @@
<span
class="inline-block mr-1 rounded-full h-2 w-2"
style="background-color: {tag.color};"
/>
></span>
{tag.name}
</li>
{/each}
Expand Down Expand Up @@ -298,7 +304,7 @@
<span
class="inline-block mr-1 rounded-full h-2 w-2"
style="background-color: {tag.color};"
/>
></span>
{tag.name}
</li>
{/each}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/[[lang=lang]]/+page.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Note } from '$lib/services/Notion/Notes/types.js';
import type { Note } from '$lib/services/Notion/Notes/notes.js';

/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
Expand Down
Loading

0 comments on commit e8a22c6

Please sign in to comment.