Update dependencies

src/components/Nav.svelte

@@ -53,7 +53,7 @@
   </section>
 {/if}
 
-<style>
+<style lang="less">
   @import '../styles/variables.module.less';
 
   a {

src/components/SvgIcon.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import svgSprite from '../../static/build/icons-sprite.svg'
   export let className
   export let name

src/components/blog/article-footer.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { format } from 'date-fns'
   import type { PostContent } from '../../routes/blog/_content'
 
@@ -26,7 +26,7 @@
   </div>
 </footer>
 
-<style>
+<style lang="less">
   @import '../../styles/variables.module.less';
 
   .tags-list {

src/components/portfolio/project.svelte

@@ -1,25 +1,27 @@
-<script lang="typescript">
-  import type { ProjectAttributes } from "../../routes/portfolio/index.json";
+<script lang="ts">
+  import type { ProjectAttributes } from '../../routes/portfolio/index.json'
 
   export let project: ProjectAttributes
 </script>
 
+<article class="project">
+  <h3>{project.name}</h3>
+  <section class="description">
+    {#if project.image}
+      <img
+        src={project.image.source}
+        class="project-image"
+        alt={project.image.image_description}
+      />
+    {/if}
+    {@html project.description}
+  </section>
+  <aside />
+</article>
+
 <style>
   .project-image {
     float: right;
     width: 25%;
   }
-
 </style>
-
-<article class="project">
-  <h3>{project.name}</h3>
-  <section class="description">
-    {#if project.image}
-        <img src="{project.image.source}" class="project-image" alt="{project.image.image_description}" />
-    {/if}
-    {@html project.description}
-  </section>
-  <aside>
-  </aside>
-</article>

src/markdown/renderer-extension.ts

@@ -1,7 +1,7 @@
 import Prism from 'prismjs'
-import loadLanguages from 'prismjs/components/index.js'
+import loadLanguages from 'prismjs/components/index'
 
-loadLanguages(['shell', 'markdown', 'json', 'yaml', 'typescript'])
+loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript'])
 
 function getNFResize(href: string, height: number, width: number) {
   return `${href}?nf_resize=fit&h=${height}&w=${width}`
@@ -44,11 +44,13 @@ export const renderer = {
     `
   },
   code(source: string, lang?: string) {
+    // When lang is not specified it is usually an empty string which has to be handled
+    const usedLang = !lang ? 'shell' : lang
     const highlightedSource = Prism.highlight(
       source,
-      Prism.languages[lang ?? 'shell'],
-      lang
+      Prism.languages[usedLang],
+      usedLang
     )
-    return `<pre class='language-${lang}'><code class='language-${lang}'>${highlightedSource}</code></pre>`
+    return `<pre class='language-${usedLang}'><code class='language-${usedLang}'>${highlightedSource}</code></pre>`
   },
 }

src/routes/__layout.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="typescript">
+<script context="module" lang="ts">
   import { take } from 'ramda'
   import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
 
@@ -16,9 +16,11 @@
   }
 </script>
 
-<script lang="typescript">
+<script lang="ts">
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
+  import { mainStyle } from '../styles/vanilla.css'
+
   export let segment
   export let latestPosts
 </script>
@@ -26,13 +28,13 @@
 <div class="app-content">
   <Nav {segment} />
 
-  <main>
+  <main class={mainStyle}>
     <slot />
   </main>
   <Footer {latestPosts} />
 </div>
 
-<style global>
+<style global lang="less">
   @import '../styles/global.module.less';
 
   .app-content {

src/routes/blog/[slug].json.ts

@@ -22,11 +22,13 @@ export async function get({ params }: Request): Promise<Response> {
       return {
         status: 404,
         body: 'Post not found \n' + e.toString(),
+        headers: {},
       }
     }
     return {
       status: 500,
       body: 'Error loading post source file. \n' + e.toString(),
+      headers: {},
     }
   }
 

src/routes/blog/[slug].svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="typescript">
+<script context="module" lang="ts">
   import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
 
   export async function load({
@@ -25,7 +25,7 @@
   }
 </script>
 
-<script lang="typescript">
+<script lang="ts">
   import ArticleFooter from '../../components/blog/article-footer.svelte'
 
   export let post
@@ -42,7 +42,7 @@
 </div>
 <ArticleFooter {post} />
 
-<style>
+<style lang="less">
   @import '../../styles/variables.module.less';
 
   /*

src/routes/blog/index.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="typescript">
+<script context="module" lang="ts">
   /**
    * @type {import('@sveltejs/kit').Load}
    */
@@ -17,7 +17,7 @@
   }
 </script>
 
-<script lang="typescript">
+<script lang="ts">
   import ArticleFooter from '../../components/blog/article-footer.svelte'
   import type { PostContent } from './_content'
 

src/routes/portfolio/index.json.ts

@@ -11,7 +11,10 @@ export interface RecordAttributes {
 }
 
 export interface ProjectAttributes extends RecordAttributes {
-  image: string
+  image: {
+    source: string
+    image_description: string
+  }
 }
 
 export interface PortfolioAttributes {