Blog listing

src/lib/components/Navbar.svelte

@@ -14,10 +14,7 @@
   }
 
   onMount(async () => {
-    if (!homepage) {
-      nav.classList.add('nav--with-border')
-      return
-    }
+    if (!homepage) return
 
     const {gsap} = await import('gsap')
     const {ScrollTrigger} = await import('gsap/ScrollTrigger')
@@ -28,10 +25,10 @@
       trigger: '.hero__name',
       start: "top top+=97px",
       onEnter: () => {
-        nav.classList.add('nav--with-border')
+        nav.classList.add('!border-b-slate-800')
       },
       onLeaveBack: () => {
-        nav.classList.remove('nav--with-border')
+        nav.classList.remove('!border-b-slate-800')
       }
     })
   })
@@ -40,6 +37,7 @@
 <nav
   class="nav p-4 md:px-8 fixed top-0 w-full bg-slate-950 z-50 flex justify-between items-center"
   class:sticky={!homepage}
+  class:!border-b-slate-800={!homepage}
   bind:this={nav}
 >
   <div
@@ -73,14 +71,11 @@
 
 <style lang="postcss">
   .nav {
-    border-bottom: 1px solid transparent;
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
     transition: border-bottom-color .3s;
   }
 
-  :global(.nav--with-border) {
-    border-bottom-color: theme(colors.slate.800) !important;
-  }
-
   .nav__logo-spot {
     width: 64px;
     height: 64px;

src/routes/Projects/Project.svelte

@@ -25,6 +25,7 @@
     class="project__gallery grid gap-1 grid-flow-col mb-4 mt-auto md:rounded"
   >
     {#each project.images as image}
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->
       <img
         class="rounded"
         alt={`${$t(project.nameSlug)} screenshot`}

src/routes/blog/+page.server.ts

@@ -1,18 +1,14 @@
+import {metadata as htmlInCssMetadata} from "./html-in-css/+page.svx"
+
+const posts = [
+  {
+    href: '/blog/html-in-css',
+    ...htmlInCssMetadata
+  }
+]
+
 export const load = async () => {
-  const posts = import.meta.glob("./**/*.svx", {eager: true})
-  const postPaths = Object.keys(posts)
-
-  const pages = await Promise.all(postPaths.map(async (pp) => {
-    const {metadata} = await import(pp)
-    return {
-      path: pp
-        .replace('/+page.svx', '')
-        .replace('.', '/blog'),
-      ...metadata
-    }
-  }))
-
   return {
-    pages
+    posts
   }
 }

src/routes/blog/+page.svelte

@@ -3,9 +3,9 @@
 </script>
 
 <section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
-  {#each data.pages as page}
-    <a href={page.path}>
-      <h2 class="text-3xl mb-4 md:text-4xl">{page.title}</h2>
+  {#each data.posts as post}
+    <a href={post.href}>
+      <h2 class="text-3xl mb-4 md:text-4xl">{post.title}</h2>
     </a>
   {/each}
 </section>

static/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Disallow: /blog/