chore(deps): update deps

.gitignore

@@ -8,3 +8,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+*.svg
+*.png
+*.jpg

package.json

@@ -10,30 +10,27 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.3",
-    "@sveltejs/kit": "^1.5.0",
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
-    "postcss-load-config": "^4.0.1",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.1.5",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/adapter-node": "^4.0.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "postcss-load-config": "^4.0.2",
+    "svelte": "^4.2.16",
+    "svelte-check": "^3.7.1",
+    "svelte-preprocess": "^5.1.4",
+    "tailwindcss": "^3.4.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   },
   "type": "module",
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@types/d3": "^7.4.0",
-    "chart.js": "^4.2.0",
-    "classnames": "^2.3.2",
-    "d3": "^7.8.2",
-    "flowbite": "^1.6.3",
-    "flowbite-svelte": "^0.30.4",
-    "highcharts": "^10.3.3",
-    "layercake": "^7.2.2",
-    "svelte-chartjs": "^3.1.2"
+    "classnames": "^2.5.1",
+    "flowbite": "^2.3.0",
+    "flowbite-svelte": "^0.44.24",
+    "svelte-language-server": "^0.16.9"
   }
 }

src/Session.vim

@@ -1,57 +0,0 @@
-let SessionLoad = 1
-let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1
-let v:this_session=expand("<sfile>:p")
-silent only
-silent tabonly
-cd ~/code/svelte-ts/src
-if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
-  let s:wipebuf = bufnr('%')
-endif
-let s:shortmess_save = &shortmess
-if &shortmess =~ 'A'
-  set shortmess=aoOA
-else
-  set shortmess=aoO
-endif
-badd +12 components/graph.svelte
-badd +19 routes/openmeteo/+page.server.ts
-badd +23 routes/openmeteo/+page.svelte
-argglobal
-%argdel
-$argadd components/graph.svelte
-edit components/graph.svelte
-argglobal
-balt routes/openmeteo/+page.server.ts
-setlocal fdm=manual
-setlocal fde=0
-setlocal fmr={{{,}}}
-setlocal fdi=#
-setlocal fdl=0
-setlocal fml=1
-setlocal fdn=20
-setlocal fen
-silent! normal! zE
-let &fdl = &fdl
-let s:l = 12 - ((11 * winheight(0) + 23) / 46)
-if s:l < 1 | let s:l = 1 | endif
-keepjumps exe s:l
-normal! zt
-keepjumps 12
-normal! 034|
-tabnext 1
-if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0 && getbufvar(s:wipebuf, '&buftype') isnot# 'terminal'
-  silent exe 'bwipe ' . s:wipebuf
-endif
-unlet! s:wipebuf
-set winheight=1 winwidth=20
-let &shortmess = s:shortmess_save
-let s:sx = expand("<sfile>:p:r")."x.vim"
-if filereadable(s:sx)
-  exe "source " . fnameescape(s:sx)
-endif
-let &g:so = s:so_save | let &g:siso = s:siso_save
-set hlsearch
-nohlsearch
-doautoall SessionLoadPost
-unlet SessionLoad
-" vim: set ft=vim :

src/components/exports.ts

@@ -1 +0,0 @@
-export { default as Navbar } from "./navbar.svelte"

src/components/highcharts.ts

@@ -1,16 +0,0 @@
-import Highcharts from 'highcharts';
-
-export default (node, config) => {
-	const redraw = true;
-	const oneToOne = true;
-	const chart = Highcharts.chart(node, config);
-
-	return {
-		update(config) {
-			chart.update(config, redraw, oneToOne);
-		},
-		destroy() {
-			chart.destroy();
-		}
-	};
-}

src/lib/about.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Image from "$lib/image.svelte";
+
+  export let who: string = "who?";
+  export let headerImage: string | null = null;
+  export let imageDesc: string = '';
+</script>
+<div class="my-5">
+  {#if headerImage}
+    <Image {headerImage} {imageDesc}/>
+  {/if}
+  <h1 class='text-5xl'>About {who}</h1>
+  <div class="grid grid-cols-1 gap-y-3 my-3">
+    <hr>
+    <slot />
+  </div>
+</div>

src/lib/classes/menudata.ts

@@ -0,0 +1 @@
+export type MenuData = {menuLink: string, menuName: string}

src/lib/code.svelte

@@ -0,0 +1,4 @@
+<code class="bg-neutral-200 dark:bg-neutral-950 px-2 py-1 rounded">
+	<slot/>
+</code>
+

src/lib/header.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let content: string;
+  export let classList: string[];
+</script>
+<p class={...classList}>{content}</p>

src/lib/image.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let headerImage: string | null = null;
+  export let imageDesc: string = '';
+</script>
+<div class="mx-auto mb-4">
+    <img class='rounded-lg' src={headerImage} alt={imageDesc}/>
+</div>

src/lib/link.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type LinkHref, type LinkReferrer, type LinkTarget, type LinkText, type LinkUnderline } from "$lib/types/link"
+    import Code from "./code.svelte";
+	
+	export let link: LinkHref;
+	export let text: LinkText;
+	export let target: LinkTarget = '_self';
+	export let referrer: LinkReferrer = 'no-referrer';
+	export let underline: LinkUnderline = undefined;
+	export let asCode: boolean = false;
+</script>
+<a href={link} target="{target}" referrerpolicy="{referrer}" class:hover:underline={underline === 'hover'} class:underline={underline === true} >
+	{#if asCode}
+		<Code>{text}</Code>
+	{:else}
+		{text}
+	{/if}
+</a>

src/lib/navbar.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { NavbarObject } from "../classes/NavObject";
 	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
-	export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
+    import type { NavbarObject } from './classes/NavObject';
+	export let navobjs: NavbarObject[] = [];
 	export let pageTitle: string = "Default Title";
 	export let toggleDarkModeButton: boolean = true;
 </script>
-<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-around items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
+<Navbar let:hidden let:toggle color="form" class="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
 	<NavBrand href="/">
     	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
 			{ pageTitle.toUpperCase() }
 		</span>
 	</NavBrand>
-	<NavHamburger on:click={toggle} />
 	<div class="flex">
+		{#if navobjs.length !== 0}
+			<NavHamburger on:click={toggle} btnClass={'ml-3 lg:hidden'} />
+    {/if}
 		<NavUl {hidden}>
 			{#each navobjs as navElem}
 				<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>

src/lib/sqmenu.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let menudata: {menuName: string, menuLink: string}[] = [];
+    $: colNum = (Math.floor(menudata.length / 2) < 3) ? Math.floor(menudata.length / 2) : 3;
+</script>
+<div class="grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center sm:grid-cols-1 justify-content-center">
+{#each menudata as menu}
+    <a href="{menu.menuLink}" target="_self">
+        <div class="flex content-center justify-center border rounded-md border-black dark:border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
+            <h2 class='text-xl'>{menu.menuName}</h2>
+        </div>
+    </a>
+{/each}
+</div>

src/lib/store.js

@@ -0,0 +1,5 @@
+import { readable, writable } from 'svelte/store';
+
+export let navTitle = writable('Portfolio')
+
+export let languages = readable(['ca', 'en-US', 'jp', 'es']);

src/lib/tech.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let tech: string;
+	export let logoBaseDir: string;
+	export let logoFiletype: 'svg'| 'png' = 'svg';
+	export let size: 'small' | 'medium' | 'big' = 'small'
+
+	let logoDir: string = `/${logoBaseDir}/${tech}-logo.${logoFiletype}`;
+	let logoAlt: string = `${tech} logo`;
+	let isSmall = size === 'small';
+	let isMedium = size === 'medium';
+	let isBig = size === 'big';
+</script>
+<img src={logoDir} alt={logoAlt} class:small={isSmall} class:medium={isMedium} class:big={isBig}>
+<style>
+	.small {
+		height: 3rem;
+	}
+	.medium {
+		height: 3.5rem;
+	}
+	.big {
+		height: 4rem;
+	}
+</style>

src/lib/title.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	export let title: string;
+</script>
+<h1 class="text-5xl mb-5 font-semibold">{title}</h1>

src/lib/types/link.ts

@@ -0,0 +1,5 @@
+export type LinkUnderline = boolean | 'hover' | undefined;
+export type LinkTarget = '_blank' | '_self' | undefined;
+export type LinkReferrer = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined;
+export type LinkText = string;
+export type LinkHref = string;

src/lib/ubication.svelte

@@ -0,0 +1,4 @@
+<svelte:head>
+	<script src="https://kit.fontawesome.com/c20c99c16a.js" crossorigin="anonymous"></script>
+</svelte:head>
+<span><slot/> <span class="fa-solid fa-location-dot"></span></span>

src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import "../app.postcss";
-    import { NavbarObject } from "../classes/NavObject";
-    import Navbar from "../lib/navbar.svelte";
+    import Navbar from "$lib/navbar.svelte";
     import './styles.css';
+    import { navTitle } from "$lib/store";
 
-    let pageTitle: string = "pswsm meteo"
-    let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
+    let pageTitle: string = $navTitle ?? 'Default Title'
+    // let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>
-<Navbar navobjs={navbarElements} pageTitle={pageTitle} />
-<slot></slot>
+<Navbar pageTitle={pageTitle} />
+<main>
+    <slot></slot>
+</main>

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -1,6 +1,17 @@
-<script>
-</script>
+<script lang="ts">
+    import Sqmenu from "$lib/sqmenu.svelte";
+    import type { MenuData } from "$lib/classes/menudata"
+    import About from "$lib/about.svelte";
+    import Link from "$lib/link.svelte";
 
-<div class="p-8">
-<p>I Like trains</p>
-</div>
+    let menudata: MenuData[] = [{menuLink: '/abtme', menuName:'About me'}, {menuLink: '/blog', menuName:'Blog'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
+</script>
+<section id="main">
+    <About who={'me'} headerImage={'/jo_web.jpg'}>
+        <h1 class="text-xl">Hi there! I am <strong>Pau Figueras</strong>, <span class="text-xl">a bioinformatician and web developer</span></h1>
+        <p class="text-lg">To know more about me check the <Link {...{text: "About me", link: "/abtme", underline: 'hover', asCode: true}} /> page</p>
+    </About>
+</section>
+<section id="menu">
+    <Sqmenu {menudata} />
+</section>

src/routes/abtme/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import Link from '$lib/link.svelte';
+    import Tech from '$lib/tech.svelte';
+	import Title from '$lib/title.svelte';
+	import Ubication from '$lib/ubication.svelte';
+	let techs: string[] = ['ts', 'js', 'svelte', 'react', 'cpp', 'python', 'rust', 'angular'];
+</script>
+<section class="grid grid-cols-8 gap-2">
+	<grid-section id="main" class="lg:col-span-6 md:col-span-8">
+		<Title title="Who am I?"/>
+		<p>I'm a <strong>fullstack</strong> developer (don't mind either front or back), and also a <strong>bioinformatician</strong>.</p>
+		<div class="pb-3">
+			<p class="text-3xl font-semibold py-3">Education</p>
+			<p>I've studied Web Development, with a specialization in bioinformatics.</p>
+			<ul class="list-disc">
+				<li>Higher Proefssional Degree on Web Development - Bioinformatics Specialization<br>@ <Link {...{link: 'https://proven.cat', text: 'Institut Provençana', underline: true}} /></li>
+				<li>Middle Professional Defree on Information Systems & Networks<br>@ <Link link="https://escoladeltreball.org" text="Insitut - Escola del Treball de Barcelona" underline={true} /></li>
+			</ul>
+		</div>
+		<div class="subsection pb-3" id="status">
+			<p class="text-3xl font-semibold py-3">Curent status</p>
+			<p>Based in: <Ubication>L'Hospitalet de Llobregat</Ubication></p>
+			<p>Employment: Backend Developer @ <Link link="https://taclia.es" text="Taclia" asCode underline/></p>
+		</div>
+	</grid-section>
+	<grid-section id="lateral" class="lg:col-span-2 md:col-span-8">
+		<p class="text-3xl font-semibold py-2">Technologies</p>
+			<div class="flex flex-wrap gap-2">
+				{#each techs as tech}
+					<Tech logoBaseDir="tech" {tech} size="small"/>
+				{/each}
+			</div>
+	</grid-section>
+</section>

src/routes/blog/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	const _pageTitle = 'Blog';
+</script>
+<p class="text-2xl">Sota construcció</p>

src/routes/openmeteo/+page.server.ts

@@ -1,74 +1,13 @@
+export const prerender = false;
+
 const geocodingApiBase: string = "https://geocoding-api.open-meteo.com/v1/search";
 const openMeteoApiBase: string = "https://api.open-meteo.com/v1/forecast";
 let location: string = "L'Hospitalet de Llobregat";
 let previousLocation: string = '';
 
-export function load(): object {
-	let ubicacio: Promise<string> = getFromOpenMeteo(location).then( (res) => res.results[0].name );
-	let temps: Promise<any> = getFromOpenMeteo(location)
-	.then( (res) => {
-		return { latitude: res.results[0].latitude, longitude: res.results[0].longitude };
-	})
-	.then( (latlon) => {
-		return getWeatherFromOpenMeteo(latlon.latitude, latlon.longitude);
-		// return [ latlon.longitude, latlon.latitude ];
-	})
-	.then( (res) => {
-		let yAxis: object[] = [];
-		let temps: object[] = [];
-		["hourly", "six_hourly", "three_hourly", "daily"].forEach(function (section, index) {
-			if (!(section in res)) {
-				return
-			}
-			Object.entries(res[section]||[]).forEach(function(k){
-				if (k[0] == "time" || k[0] == "sunrise" || k[0] == "sunset") {
-					return
-				}
-				let hourly_starttime = (res[section].time[0] + res.utc_offset_seconds) * 1000;
-				let pointInterval = (res[section].time[1] - res[section].time[0]) * 1000;
-				let unit = res[`${section}_units`][k[0]];
-				var axisId = null;
-				for (let i = 0; i < yAxis.length; i++) {
-					if (yAxis[i].title.text == unit) {
-						axisId = i;
-					}
-				}
-				if (axisId == null) {
-					yAxis.push({title: {text: unit}});
-					axisId = yAxis.length-1;
-				}
-				var ser = {
-					name: k[0],
-					res: k[1],
-					yAxis: axisId,
-					pointStart:hourly_starttime,
-					pointInterval: pointInterval,
-					type: (unit == 'mm' || unit == 'cm' || unit == 'inch' || unit == 'MJ/m²') ? 'column' : 'line',
-					tooltip: {
-						valueSuffix: " " + unit,
-					},
-					dataGrouping: {groupPixelWidth: 12}
-					/*dataGrouping: {
-						enabled: true,
-						forced: true,
-						units: [['year',[1]]]
-					}*/
-				};
-				temps.push(ser);
-			});
-		});
-		return temps;
-	} )
-
-	return { ubicacio, temps }
-	/**
-	let openMeteoData = getFromOpenMeteo(location);
-	let latitude: Promise<number> = openMeteoData.then((data) => data.results[0].latitude).catch((_e) => 41.35967);
-	let longitude: Promise<number> = openMeteoData.then((data) => data.results[0].longitude).catch((_e) => 2.10028 );
-	let openMeteoWeather = getWeatherFromOpenMeteo(latitude, longitude);
-	let openMeteoFetchUrl: string = openMeteoApiBase + '?latitude=' + latitude + '&logitude=' + longitude;
-	return { location: openMeteoData.then( (data) => data.results[0].name ).catch( (_e) => previousLocation ), weatherData: openMeteoWeather, latitude, longitude, openMeteoFetchUrl }
-	*/
+export async function load(): Promise<any> {
+	let ubicacio: string = await getFromOpenMeteo(location).then( (res) => res.results[0].name );
+	return { ubicacio }
 };
 
 function changeLocation(newLoc: string): void {
@@ -96,7 +35,6 @@ async function getFromOpenMeteo(ubicacio: string): Promise<any> {
 }
 
 async function getWeatherFromOpenMeteo(latitude: any, longitude: any) {
-	// let openMeteoResponse: Response = await fetch(openMeteoApiBase + '?latitude=' + latitude + '&longitude=' + longitude);
 	let openMeteoResponse: Response = await fetch(apiUrlBuilder(openMeteoApiBase, [['latitude', latitude], ['longitude', longitude], ['hourly', 'temperature_2m,rain,showers,snowfall']]));
 	return openMeteoResponse.json()
 }

src/routes/openmeteo/+page.svelte

@@ -1,37 +1,32 @@
 <script lang="ts">
-    import { enhance } from "$app/forms";
-    import { D3LinePlot } from "$lib";
-    // import Graph from "../../lib/graph.svelte";
+	import { enhance } from "$app/forms";
 
 	let display: string = 'none';
 	let loading: boolean = false;
 
-	export let data: { ubicacio: string, temps: any };
+	export let data: { ubicacio: string };
 
 	function toggleDisplay(): void {
 		display = (display === 'none') ? 'block' : 'none';
 	}
+	console.log({data})
 </script>
 <main>
-<div class="box" id="locChange" style="display: {display};">
-	<form action="?/changeLoc" method="post" use:enhance={ () => { loading = true; return async ( { update } ) => { await update(); loading = false; } } }>
+	<div class="box" id="locChange" style="display: {display};">
+		<form action="?/changeLoc" method="post" use:enhance={ () => { loading = true; return async ( { update } ) => { await update(); loading = false; } } }>
 		<p>Change location</p>
-		<div class="schBox"><input type="text" placeholder="Change location" name='newloc' disabled={ loading }></div>
-		<button type="submit" disabled={loading}>Canviar</button>
-	</form>
-</div>
-<h2>Ubicació actual: { data.ubicacio }</h2>
-<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
-<pre>{ JSON.stringify(data) }</pre>
-<hr>
-<D3LinePlot />
-<span>some text</span>
-<hr>
+			<div class="schBox"><input type="text" placeholder="Change location" name='newloc' disabled={ loading }></div>
+			<button type="submit" disabled={loading}>Canviar</button>
+		</form>
+	</div>
+	<h2>Ubicació actual: { data.ubicacio }</h2>
+	<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
+	<pre>{ JSON.stringify(data) }</pre>
 </main>
 <footer>
-<p>Dades provinents de:</p>
-<ul>
-	<li><a href='https://meteo.cat' target="_blank" rel="noreferrer">Servei Meteorologic de Catalunya</a></li>
-	<li><a href='https://open-meteo.com' target="_blank" rel="noreferrer">Open-Meteo</a></li>
-</ul>
+	<p>Dades provinents de:</p>
+	<ul>
+		<li><a href='https://meteo.cat' target="_blank" rel="noreferrer">Servei Meteorologic de Catalunya</a></li>
+		<li><a href='https://open-meteo.com' target="_blank" rel="noreferrer">Open-Meteo</a></li>
+	</ul>
 </footer>

src/routes/styles.css

@@ -5,3 +5,17 @@ body {
 main, footer {
 	margin: 0 8px;
 }
+
+section {
+	width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+}
+
+grid-section {
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+}

src/routes/temps/+page.server.ts

@@ -1,3 +1,5 @@
+export const prerender = false;
+
 const headers = { 'X-API-KEY': '1FvqqqUpoeNgNpxZQxJX6FBDLbwKscx5hgXhZxUb', 'Content-type': 'application/json' }
 const geocodingApiBase: string = "https://geocoding-api.open-meteo.com/v1/search";
 const openMeteoApiBase: string = "https://api.open-meteo.com/v1/forecast";

svelte.config.js

@@ -1,6 +1,6 @@
 import preprocess from "svelte-preprocess";
-import adapter from "@sveltejs/adapter-auto";
-import { vitePreprocess } from "@sveltejs/kit/vite";
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

tailwind.config.cjs

@@ -3,6 +3,16 @@ const config = {
 
   theme: {
     extend: {},
+    screens: {
+      'lg': {'min': '1024px'},
+      // => @media (max-width: 1023px) { ... }
+
+      'md': {'max': '1023px'},
+      // => @media (max-width: 767px) { ... }
+
+      'sm': {'max': '639px'},
+      // => @media (max-width: 639px) { ... }
+    }
   },
 
   plugins: [