Update pakcages and add about me part on main page

package.json

@@ -11,29 +11,29 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^1.0.3",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^1.23.0",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.28",
     "postcss-load-config": "^4.0.1",
-    "svelte": "^3.55.1",
+    "svelte": "^3.59.2",
-    "svelte-check": "^3.0.3",
+    "svelte-check": "^3.5.0",
     "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.1.5",
+    "tailwindcss": "^3.3.3",
-    "tslib": "^2.5.0",
+    "tslib": "^2.6.2",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "vite": "^4.4.9"
   },
   "type": "module",
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
+    "@popperjs/core": "^2.11.8",
     "@types/d3": "^7.4.0",
-    "chart.js": "^4.2.0",
+    "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
-    "d3": "^7.8.2",
+    "d3": "^7.8.5",
-    "flowbite": "^1.6.3",
+    "flowbite": "^1.8.1",
-    "flowbite-svelte": "^0.30.4",
+    "flowbite-svelte": "^0.30.7",
     "highcharts": "^10.3.3",
-    "layercake": "^7.2.2",
+    "layercake": "^7.6.1",
     "svelte-chartjs": "^3.1.2"
   }
 }

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/lib/about.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Image from "$lib/image.svelte";
+
+  export let who: string = "who?";
+  export let desc: string = '';
+  export let headerImage: string | null = null;
+  export let imageDesc: string = '';
+</script>
+<div class="mx-auto my-5 w-[60%]">
+  {#if headerImage}
+    <Image {headerImage} {imageDesc}/>
+  {/if}
+  <p class='text-5xl'>About {who}</p>
+  <p>{desc}</p>
+</div>

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/store.js

@@ -1,3 +1,3 @@
 import { readable, writable } from 'svelte/store';
 
-export let navTitle = writable('Dashboard')
+export let navTitle = writable('Portfolio')

src/routes/+page.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
     import Sqmenu from "$lib/sqmenu.svelte";
     import type { MenuData } from "$lib/classes/menudata"
-    let menudata: MenuData[] = [{menuLink: '/abtme', menuName:'Sobre mi'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/xema', menuName:'Dades XEMA'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
+    import About from "$lib/about.svelte";
-    // let menudata: MenuData[] = []
+    let menudata: MenuData[] = [{menuLink: '/blog', menuName:'Blog'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/xema', menuName:'Dades XEMA'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
 </script>
-
 <div class="p-8">
-<Sqmenu {menudata} />
+    <section id="main">
-</div>
+        <About who={'me'} desc={'aaaaaaa'} headerImage={'/jo_web.jpg'} />
+    </section>
+    <section id="menu">
+        <Sqmenu {menudata} />
+    </section>
+</div>

src/routes/abtme/+page.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+</script>
+<p>aaaaaaaa</p>