Get rid of less

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 href="/portfolio#skills">Skills</a>
-      <a href="/portfolio#work-history">Work History</a>
-      <a href="/portfolio#projects">Projects</a>
-      <a href="/portfolio#education">Education</a>
+      <a
+        class={portfolioPageNavigationLinkClass}
+        href="/portfolio#personal-information">About</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 } }) {
-    const blogQuery = query ? '?' + query.toString() : ''
-    return fetch(`blog.json${blogQuery}`)
+  export function load({ fetch }) {
+    return fetch(`blog.json`)
       .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 tagQuery
+  export let displayedPosts: PostContent[]
+  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`,