rannes.dev/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgraded to svelte 5 #10

Merged
christian merged 1 commits from svelte-5 into main 2024-12-06 10:18:52 +00:00
Conversation 0 Commits 1 Files Changed 19 +1996 -1048
19 changed files with 1996 additions and 1048 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2901
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
package.json
View File

@ -10,30 +10,30 @@
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.9.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.1",
"@types/eslint": "^8.56.0", "@types/eslint": "^9.6.1",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.20",
"eslint": "^8.56.0", "eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.46.1",
"flowbite": "^2.3.0", "flowbite": "^2.5.2",
"flowbite-svelte": "^0.46.1", "flowbite-svelte": "^0.47.4",
"flowbite-svelte-icons": "^1.6.1", "flowbite-svelte-icons": "^2.0.2",
"postcss": "^8.4.38", "postcss": "^8.4.49",
"prettier": "^3.1.1", "prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.3.2",
"svelte": "^4.2.7", "svelte": "^5.7.1",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.16",
"vite": "^5.0.3" "vite": "^6.0.3"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/adapter-vercel": "^5.3.0", "@sveltejs/adapter-vercel": "^5.5.0",
"@vercel/analytics": "^1.3.1", "@vercel/analytics": "^1.4.1",
"geist": "^1.3.0", "geist": "^1.3.1",
"moment": "^2.30.1", "moment": "^2.30.1",
"pnpm": "^9.1.1" "pnpm": "^9.14.4"
} }
} }

2
src/lib/PageHeader.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
export let title; let { title } = $props();
</script> </script>
<h1 class="text-center text-4xl">{title}</h1> <h1 class="text-center text-4xl">{title}</h1>

16
src/lib/ProjectCard/Commit.svelte
View File

@ -1,20 +1,24 @@
<script> <script>
import { AccordionItem } from 'flowbite-svelte'; import { AccordionItem } from 'flowbite-svelte';
import moment from 'moment'; import moment from 'moment';
export let index; let {
export let link; index,
export let title; link,
export let description; title,
export let published; description,
published
} = $props();
const pubAgo = moment(published).fromNow(); const pubAgo = moment(published).fromNow();
const open = index === 0; const open = index === 0;
</script> </script>
<AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}> <AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}>
<span slot="header" class="flex justify-between items-center w-full"> {#snippet header()}
<span class="flex justify-between items-center w-full">
<h3>{@html title}</h3> <h3>{@html title}</h3>
<p class="text-xs mr-2">{pubAgo}</p> <p class="text-xs mr-2">{pubAgo}</p>
</span> </span>
{/snippet}
<div class="flex flex-col"> <div class="flex flex-col">
{#if description} {#if description}
<p>with the message:</p> <p>with the message:</p>

27
src/lib/ProjectCard/ProjectCard.svelte
View File

@ -5,13 +5,26 @@
import ProjectRepo from './ProjectRepo.svelte'; import ProjectRepo from './ProjectRepo.svelte';
import VendorGallery from './VendorGallery.svelte'; import VendorGallery from './VendorGallery.svelte';
//Props
export let title; /**
export let url; * @typedef {Object} Props
export let description; * @property {any} title - Props
export let repo; * @property {any} url
export let rss; * @property {any} description
export let vendors; * @property {any} repo
* @property {any} rss
* @property {any} vendors
*/
/** @type {Props} */
let {
title,
url,
description,
repo,
rss,
vendors
} = $props();
</script> </script>
<div class="pt-12"> <div class="pt-12">

2
src/lib/ProjectCard/ProjectDescription.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
export let description; let { description } = $props();
</script> </script>
<p>{@html description}</p> <p>{@html description}</p>

2
src/lib/ProjectCard/ProjectHeader.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
export let title; let { title } = $props();
</script> </script>
<h3 class="text-3xl">{title}</h3> <h3 class="text-3xl">{title}</h3>

3
src/lib/ProjectCard/ProjectLinks.svelte
View File

@ -1,8 +1,7 @@
<script> <script>
import { GithubSolid, GlobeOutline } from "flowbite-svelte-icons"; import { GithubSolid, GlobeOutline } from "flowbite-svelte-icons";
export let url; let { url, repo } = $props();
export let repo;
</script> </script>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="hover:scale-110"> <div class="hover:scale-110">

2
src/lib/ProjectCard/ProjectRepo.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import RssContainer from './RssContainer.svelte'; import RssContainer from './RssContainer.svelte';
export let rss; let { rss } = $props();
</script> </script>
<RssContainer url={rss} /> <RssContainer url={rss} />

2
src/lib/ProjectCard/RssContainer.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import RssFeed from './RssFeed.svelte'; import RssFeed from './RssFeed.svelte';
export let url; let { url } = $props();
</script> </script>
<div> <div>

6
src/lib/ProjectCard/RssFeed.svelte
View File

@ -4,10 +4,10 @@
import Commit from './Commit.svelte'; import Commit from './Commit.svelte';
import { Accordion } from 'flowbite-svelte'; import { Accordion } from 'flowbite-svelte';
export let url; let { url } = $props();
let feed = null; let feed = $state(null);
let error = null; let error = $state(null);
async function fetchFeed(url) { async function fetchFeed(url) {
try { try {

2
src/lib/ProjectCard/VendorGallery.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import VendorIcon from './VendorIcon.svelte'; import VendorIcon from './VendorIcon.svelte';
export let vendors; let { vendors } = $props();
</script> </script>
<div class="my-4 dark:bg-slate-800 mx-auto md:w-fit rounded-2xl p-2"> <div class="my-4 dark:bg-slate-800 mx-auto md:w-fit rounded-2xl p-2">

3
src/lib/ProjectCard/VendorIcon.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
export let name; let { name, img } = $props();
export let img;
</script> </script>
<div class="flex flex-col justify-center h-16 hover:scale-110 text-center items-center"> <div class="flex flex-col justify-center h-16 hover:scale-110 text-center items-center">

2
src/lib/Projects.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { projects } from '$lib/projects.js'; import { projects } from '$lib/projects.js';
import ProjectCard from './ProjectCard/ProjectCard.svelte'; import ProjectCard from './ProjectCard/ProjectCard.svelte';
export let category; let { category } = $props();
</script> </script>
{#each projects as project} {#each projects as project}

4
src/lib/TopNav.svelte
View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { import {
Navbar, Navbar,
NavBrand, NavBrand,
@ -12,7 +12,7 @@
import logo from '$lib/logo.png'; import logo from '$lib/logo.png';
import { page } from '$app/stores'; import { page } from '$app/stores';
$: activeUrl = $page.url.pathname; let activeUrl = $derived($page.url.pathname);
</script> </script>
<Navbar class="bg-transparent"> <Navbar class="bg-transparent">

14
src/routes/+layout.svelte
View File

@ -1,21 +1,13 @@
<script> <script lang="ts">
import '../app.css'; import '../app.css';
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
import BottomNavigation from '../lib/BottomNavigation.svelte'; import BottomNavigation from '../lib/BottomNavigation.svelte';
import TopNav from '../lib/TopNav.svelte'; import TopNav from '../lib/TopNav.svelte';
import { inject } from '@vercel/analytics'; let { children } = $props();
let activeBtn = 'home';
function handleNavItemClick(btnName) {
activeBtn = btnName;
}
$: activeBtn = activeBtn === 'projects';
inject();
</script> </script>
<CloudflareAnalytics />
<TopNav /> <TopNav />
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0"> <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0">
<slot /> {@render children?.()}
</div> </div>
<BottomNavigation /> <BottomNavigation />
<footer class=""> <footer class="">

3
src/routes/+page.svelte
View File

@ -1,8 +1,5 @@
<script> <script>
import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
import VendorCarousel from '../lib/Landing/VendorCarousel.svelte';
import { Heading, Mark } from 'flowbite-svelte'; import { Heading, Mark } from 'flowbite-svelte';
import portfolio from '$lib/images/portfolio.png';
import hero from '$lib/images/hero.webp'; import hero from '$lib/images/hero.webp';
</script> </script>

0
src/routes/socials/+layout.svelte
View File

3
src/routes/socials/+page.svelte
View File

@ -1,3 +0,0 @@
<div>
<img src="$lib/images/portfolio-card.webp" alt="Socials Card" />
</div>