Update dependencies

.gitignore

@@ -5,6 +5,7 @@ yarn-error.log
 /cypress/screenshots/
 /__sapper__/
 
+/.svelte-kit
 /.svelte/
 /build/
 /functions/

package.json

@@ -15,35 +15,38 @@
     "svgstore": "svgstore -o static/build/icons-sprite.svg src/svg/**.svg"
   },
   "dependencies": {
+    "@vanilla-extract/css": "^1.6.1",
+    "@vanilla-extract/vite-plugin": "^2.1.1",
     "classnames": "^2.3.1",
-    "date-fns": "^2.21.1",
+    "date-fns": "^2.25.0",
     "feed": "^4.2.2",
     "front-matter": "^4.0.2",
-    "marked": "^2.0.3",
+    "marked": "^3.0.4",
-    "modern-normalize": "^1.0.0",
+    "modern-normalize": "^1.1.0",
-    "prismjs": "^1.23.0",
+    "polished": "^4.1.3",
+    "prismjs": "^1.25.0",
     "ramda": "^0.27.1"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.4",
+    "@sveltejs/adapter-static": "^1.0.0-next.20",
-    "@sveltejs/kit": "^1.0.0-next.85",
+    "@sveltejs/kit": "^1.0.0-next.179",
-    "@tsconfig/svelte": "^1.0.10",
+    "@tsconfig/svelte": "^2.0.1",
     "@types/classnames": "^2.3.1",
-    "@types/node": "^14.14.41",
+    "@types/node": "^16.10.2",
-    "@types/ramda": "^0.27.40",
+    "@types/ramda": "^0.27.45",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.19.0",
+    "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.22.0",
+    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.1.0",
+    "eslint-plugin-svelte3": "^3.2.1",
-    "less": "^4.1.1",
+    "less": "^4.1.2",
-    "prettier": "~2.2.1",
+    "prettier": "~2.4.1",
-    "prettier-plugin-svelte": "^2.2.0",
+    "prettier-plugin-svelte": "^2.4.0",
-    "svelte": "^3.37.0",
+    "svelte": "^3.43.1",
-    "svelte-preprocess": "^4.7.2",
+    "svelte-preprocess": "^4.9.8",
     "svgstore-cli": "^2.0.0",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.1",
-    "typescript": "^4.2.4",
+    "typescript": "^4.4.3",
-    "vite": "^2.2.3"
+    "vite": "^2.6.3"
   }
 }

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">
+<script lang="ts">
-  import type { ProjectAttributes } from "../../routes/portfolio/index.json";
+  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'],
+      Prism.languages[usedLang],
-      lang
+      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 {

svelte.config.cjs

@@ -1,19 +0,0 @@
-const adapterStatic = require('@sveltejs/adapter-static')
-const sveltePreprocess = require('svelte-preprocess')
-
-const mode = process.env.NODE_ENV
-const dev = mode === 'development'
-
-/** @type {import('@sveltejs/kit').Config} */
-module.exports = {
-  kit: {
-    adapter: adapterStatic(),
-  },
-  preprocess: sveltePreprocess({
-    sourceMap: dev,
-    defaults: {
-      script: 'typescript',
-      style: 'less',
-    },
-  }),
-}

svelte.config.js

@@ -0,0 +1,19 @@
+import adapterStatic from '@sveltejs/adapter-static'
+import preprocess from 'svelte-preprocess'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
+
+const mode = process.env.NODE_ENV
+const dev = mode === 'development'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapterStatic(),
+    vite: { plugins: [vanillaExtractPlugin()] },
+  },
+  preprocess: preprocess({
+    sourceMap: dev,
+  }),
+}
+
+export default config

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "moduleResolution": "node",
     "module": "es2020",
-		"lib": ["es2020"],
+    "lib": ["es2020", "DOM"],
     "target": "es2019",
     /**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@@ -23,6 +23,7 @@
     "allowJs": true,
     "checkJs": true,
     "paths": {
+      "$lib": ["src/lib"],
       "$lib/*": ["src/lib/*"]
     }
   },