Get rid of less

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`,