feat: featured projects, post & /post page design improvements

pheralb · Jul 23, 2024 · 3cb6939 · 3cb6939
1 parent 1c4b1af
commit 3cb6939
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/mdsvex.options.js b/mdsvex.options.js
@@ -57,7 +57,15 @@ export const mdsvexOptions = {
   rehypePlugins: [
     [urls, processUrl],
     rehypeSlug,
-    rehypeAutolinkHeadings,
+    [
+      rehypeAutolinkHeadings,
+      {
+        behavior: 'wrap',
+        properties: {
+          className: `before:content-['#'] before:absolute before:-ml-[1em] before:text-neutral-100/0 dark:hover:before:text-neutral-200/50 hover:before:text-neutral-900/50 pl-[1em] -ml-[1em]`
+        }
+      }
+    ],
     [rehypeToc, { customizeTOC }]
   ],
   highlight: {

diff --git a/src/components/featuredProjects.svelte b/src/components/featuredProjects.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { featuredProjects } from '@/data/featuredProjects';
   import { ArrowRight } from 'lucide-svelte';
+
   import ProjectCard from './featuredProjectCard.svelte';
 </script>
 
@@ -9,7 +10,7 @@
     <h2 class="text-xl font-medium">Projects</h2>
     <a
       href="/projects"
-      class="group flex items-center space-x-2 text-sm font-medium text-neutral-500 dark:text-neutral-400 duration-100 hover:text-black dark:hover:text-white"
+      class="group flex items-center space-x-2 text-sm font-medium text-neutral-500 duration-100 hover:text-black dark:text-neutral-400 dark:hover:text-white"
     >
       <span>More</span>
       <ArrowRight

diff --git a/src/components/posts.svelte b/src/components/posts.svelte
@@ -3,6 +3,8 @@
   import Badge from '@/ui/badge/badge.svelte';
   import { formatDate } from '@/utils';
 
+  import { CalendarIcon, TagIcon, ChevronRightIcon } from 'lucide-svelte';
+
   export let postData: Post[] = [];
 </script>
 
@@ -13,19 +15,34 @@
       <div class="mb-3 flex flex-col space-y-1">
         <a
           href={`/post/${post.slug}`}
-          class="text-md md:text-lg font-medium decoration-neutral-500 decoration-dotted underline-offset-[5px] duration-150 hover:underline hover:opacity-80"
+          class="text-md font-medium decoration-neutral-500 decoration-dotted underline-offset-[5px] duration-150 hover:underline hover:opacity-80 md:text-lg"
         >
           {post.title}
         </a>
         <p class="text-pretty text-sm dark:text-neutral-400">
           {post.description}
         </p>
       </div>
-      <div class="flex items-center justify-between">
-        <Badge>{post.category}</Badge>
-        <p class="font-mono text-sm text-neutral-500 dark:text-neutral-400">
-          {formatDate(post.date)}
-        </p>
+      <div class="flex w-full items-center justify-between">
+        <div class="flex items-center space-x-1">
+          <Badge>
+            <TagIcon size={12} />
+            <span>{post.category}</span>
+          </Badge>
+          <Badge>
+            <CalendarIcon size={12} />
+            <time datetime={formatDate(post.date)}>
+              {formatDate(post.date)}
+            </time>
+          </Badge>
+        </div>
+        <a
+          href={`/post/${post.slug}`}
+          class="group flex items-center space-x-[4px] font-mono text-sm tracking-tight opacity-70 transition-opacity duration-100 hover:opacity-100"
+        >
+          <span>Read more</span>
+          <ChevronRightIcon size={16} class="group-hover:translate-x-[2px] duration-150" />
+        </a>
       </div>
     </div>
   {/each}

diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cn, formatDate } from '@/utils';
-  import { ArrowUpRight, ClockIcon, TagIcon, TriangleAlertIcon } from 'lucide-svelte';
+  import { ArrowUpRight, CalendarIcon, TagIcon, TriangleAlertIcon } from 'lucide-svelte';
 
   import Badge from '@/ui/badge/badge.svelte';
   import { routeAnimation } from '@/ui/shared';
@@ -30,7 +30,7 @@
           <span>{data.meta.category}</span>
         </Badge>
         <Badge>
-          <ClockIcon size={12} />
+          <CalendarIcon size={12} />
           <time datetime={data.meta.date}>
             {formatDate(data.meta.date)}
           </time>