Get rid of less

package-lock.json

@@ -33,7 +33,6 @@
         "eslint": "^8.4.1",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-svelte3": "^3.2.1",
-        "less": "^3.11.3",
         "prettier": "~2.5.1",
         "prettier-plugin-svelte": "^2.5.1",
         "svelte": "^3.44.2",
@@ -1277,7 +1276,8 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
       "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "is-what": "^3.12.0"
       }
@@ -1495,6 +1495,7 @@
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "prr": "~1.0.1"
       },
@@ -2492,6 +2493,7 @@
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "optional": true,
+      "peer": true,
       "bin": {
         "image-size": "bin/image-size.js"
       },
@@ -2615,7 +2617,8 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -2704,7 +2707,8 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
       "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "tslib": "^1.10.0"
@@ -2730,6 +2734,7 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2738,7 +2743,8 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -2812,6 +2818,7 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -2858,6 +2865,7 @@
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "optional": true,
+      "peer": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -2945,7 +2953,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
       "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
@@ -3112,6 +3121,7 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3218,7 +3228,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/punycode": {
       "version": "2.1.1",
@@ -3422,6 +3433,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "optional": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -4855,7 +4867,8 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
       "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "is-what": "^3.12.0"
       }
@@ -5007,6 +5020,7 @@
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "optional": true,
+      "peer": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -5692,7 +5706,8 @@
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "import-cwd": {
       "version": "3.0.0",
@@ -5782,7 +5797,8 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "isexe": {
       "version": "2.0.0",
@@ -5853,7 +5869,8 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
       "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "copy-anything": "^2.0.1",
         "errno": "^0.1.1",
@@ -5870,13 +5887,15 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
+          "optional": true,
+          "peer": true
         },
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "devOptional": true
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -5937,6 +5956,7 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "optional": true,
+      "peer": true,
       "requires": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -5967,7 +5987,8 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "min-indent": {
       "version": "1.0.1",
@@ -6025,7 +6046,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
       "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -6155,7 +6177,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "polished": {
       "version": "4.1.3",
@@ -6219,7 +6242,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "punycode": {
       "version": "2.1.1",
@@ -6356,7 +6380,8 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "slash": {
       "version": "3.0.0",

package.json

@@ -40,7 +40,6 @@
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
-    "less": "^3.11.3",
     "prettier": "~2.5.1",
     "prettier-plugin-svelte": "^2.5.1",
     "svelte": "^3.44.2",

src/components/Nav.css.ts

@@ -78,3 +78,7 @@ export const portfolioPageNavigationLinksClass = sprinkles({
   marginX: 'auto',
   marginY: 'none',
 })
+
+export const portfolioPageNavigationLinkClass = sprinkles({
+  padding: '1x',
+})

src/components/Nav.svelte

@@ -8,6 +8,7 @@
     navigationContentClass,
     navigationLinksClass,
     portfolioPageNavigation,
+    portfolioPageNavigationLinkClass,
     portfolioPageNavigationLinksClass,
     selectedClass,
   } from './Nav.css'
@@ -63,11 +64,22 @@
 {#if segment === '/portfolio'}
   <section class="page-navigation {portfolioPageNavigation}">
     <div class={portfolioPageNavigationLinksClass}>
-      <a href="/portfolio#personal-information">About</a>
+      <a
-      <a href="/portfolio#skills">Skills</a>
+        class={portfolioPageNavigationLinkClass}
-      <a href="/portfolio#work-history">Work History</a>
+        href="/portfolio#personal-information">About</a
-      <a href="/portfolio#projects">Projects</a>
+      >
-      <a href="/portfolio#education">Education</a>
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#skills"
+        >Skills</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#work-history"
+        >Work History</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#projects"
+        >Projects</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#education"
+        >Education</a
+      >
     </div>
   </section>
 {/if}

src/components/SvgIcon.svelte

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

src/components/portfolio/project.css.ts

@@ -0,0 +1,10 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const projectScopeClass = style({})
+
+globalStyle(`${projectScopeClass} img`, {
+  float: 'right',
+  width: '25%',
+})
+
+// We need to get rid off the global selectors LOL

src/components/portfolio/project.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { ProjectAttributes } from '../../routes/portfolio/index.json'
+  import { projectScopeClass } from './project.css'
 
   export let project: ProjectAttributes
 </script>
 
-<article class="project">
+<article class="project {projectScopeClass}">
   <h3>{project.name}</h3>
   <section class="description">
     {#if project.image}
@@ -18,10 +19,3 @@
   </section>
   <aside />
 </article>
-
-<style>
-  .project-image {
-    float: right;
-    width: 25%;
-  }
-</style>

src/markdown/renderer-extension.ts

@@ -1,5 +1,5 @@
 import Prism from 'prismjs'
-import loadLanguages from 'prismjs/components/index'
+import loadLanguages from 'prismjs/components/index.js'
 
 loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript'])
 

src/routes/blog/index.svelte

@@ -2,12 +2,11 @@
   /**
    * @type {import('@sveltejs/kit').Load}
    */
-  export function load({ fetch, page: { params, query } }) {
+  export function load({ fetch }) {
-    const blogQuery = query ? '?' + query.toString() : ''
+    return fetch(`blog.json`)
-    return fetch(`blog.json${blogQuery}`)
       .then((r) => r.json())
       .then((posts) => {
-        return { props: { posts, query } }
+        return { props: { posts } }
       })
   }
 </script>
@@ -18,10 +17,18 @@
   import type { PostContent } from './_content'
 
   export let posts: PostContent[]
-  export let query
+  export let displayedPosts: PostContent[]
-  export let tagQuery
+  export let tagQuery: string
 
-  $: tagQuery = query.get('tag')
+  $: {
+    if (typeof window !== 'undefined') {
+      let params = new URLSearchParams(window.location.search)
+      tagQuery = params.get('tag')
+      displayedPosts = posts.filter((post) => post.tags.includes(tagQuery))
+    } else {
+      displayedPosts = posts
+    }
+  }
 </script>
 
 <svelte:head>

src/routes/layout.css.ts

@@ -18,6 +18,10 @@ export const mainContentClass = sprinkles({
 })
 
 // Layout global styles
+// atomic design needs to get rid off these global selectors LOL
+// There should be written markdown renderer for each type of output
+// where every component gets the layout atomic class
+// TODO Create atomic classes for maxWidhts and use them everywhere in the content
 
 globalStyle(
   `${mainContentClass} h1, ${mainContentClass} h2, ${mainContentClass} h3, ${mainContentClass} h4, ${mainContentClass} h5, ${mainContentClass} h6, ${mainContentClass} p, ${mainContentClass} ul, ${mainContentClass} ol, ${mainContentClass} figure, ${mainContentClass} img, ${mainContentClass} blockquote, ${mainContentClass} iframe, ${mainContentClass} footer`,