feat: updated links and spacing

Author: adithyaakrishna

apps/sim/app/(landing)/studio/[slug]/article-sidebar.tsx

@@ -73,7 +73,7 @@ export function ArticleSidebar({ author, authors, headings, related }: ArticleSi
 
       {related.length > 0 && (
         <div className='border border-[#2A2A2A] bg-[#232323] p-5' style={{ borderRadius: '5px' }}>
-          <div className='mb-4 flex items-center gap-2 border-b border-[#2A2A2A] pb-3 font-season text-[11px] uppercase tracking-widest text-[#ECECEC]'>
+          <div className='mb-4 flex items-center gap-2 pb-3 font-season text-[11px] uppercase tracking-widest text-[#ECECEC]'>
             <span className='inline-block h-1.5 w-1.5 bg-[#FFCC02]' aria-hidden='true' />
             Recent Logs
           </div>

apps/sim/app/(landing)/studio/[slug]/prose-studio.css

@@ -2,11 +2,11 @@
   display: flex;
   align-items: center;
   border-bottom: 1px solid #2a2a2a;
-  padding-bottom: 0.5rem;
+  padding-bottom: 1.5rem;
   font-weight: 500;
   font-size: 1.5rem;
   color: #ececec;
-  margin-top: 3rem;
+  margin-top: 1rem !important;
   margin-bottom: 1.5rem;
   letter-spacing: -0.025em;
 }

apps/sim/app/(landing)/studio/[slug]/table-of-contents.tsx

@@ -77,7 +77,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
 
   return (
     <div>
-      <div className='mb-4 flex items-center gap-2 border-b border-[#2A2A2A] pb-3 font-season text-[11px] uppercase tracking-widest text-[#ECECEC]'>
+      <div className='mb-4 flex items-center gap-2 pb-2 font-season text-[11px] uppercase tracking-widest text-[#ECECEC]'>
         <List className='h-3 w-3 text-[#2ABBF8]' aria-hidden />
         Contents
       </div>

apps/sim/app/(landing)/studio/post-grid.tsx

@@ -75,7 +75,7 @@ function PostCard({ post, priority = false }: { post: Post; priority?: boolean }
   return (
     <motion.div variants={cardVariants} className='h-full'>
       <Link href={`/studio/${post.slug}`} className='group flex h-full flex-col'>
-        <article className='flex h-full flex-col overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color] duration-200 hover:border-[#3d3d3d] active:scale-[0.99]'>
+        <article className='flex h-full flex-col overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color,background-color,transform] duration-200 ease-out active:scale-[0.99] [@media(hover:hover)]:group-hover:border-[#3d3d3d] [@media(hover:hover)]:group-hover:bg-[#282828] [@media(hover:hover)]:group-hover:-translate-y-0.5'>
           <div className='relative aspect-video w-full overflow-hidden bg-[#1C1C1C]'>
             <Image
               src={post.ogImage}
@@ -85,7 +85,7 @@ function PostCard({ post, priority = false }: { post: Post; priority?: boolean }
               priority={priority}
               loading={priority ? undefined : 'lazy'}
               fill
-              className='object-cover opacity-90 transition-[transform,opacity] duration-200 [@media(hover:hover)]:group-hover:scale-[1.02] [@media(hover:hover)]:group-hover:opacity-100'
+              className='object-cover opacity-80 transition-[transform,opacity] duration-200 ease-out [@media(hover:hover)]:group-hover:scale-[1.03] [@media(hover:hover)]:group-hover:opacity-100'
             />
           </div>
           <div className='flex flex-1 flex-col p-6'>
@@ -146,15 +146,15 @@ function FeaturedLeadCard({ post }: { post: Post }) {
     <motion.div variants={leadVariants} className='col-span-full'>
       <Link
         href={`/studio/${post.slug}`}
-        className='group relative flex min-h-[400px] flex-col justify-end overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color] duration-200 [@media(hover:hover)]:hover:border-[#00F701]'
+        className='group relative flex min-h-[400px] flex-col justify-end overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color,transform] duration-200 ease-out [@media(hover:hover)]:hover:border-[#00F701] [@media(hover:hover)]:hover:-translate-y-0.5'
       >
         <div className='absolute inset-0'>
           <Image
             src={post.ogImage}
             alt={post.title}
             fill
             sizes='(max-width: 1200px) 100vw, 900px'
-            className='object-cover opacity-40 transition-opacity duration-300 [@media(hover:hover)]:group-hover:opacity-50'
+            className='object-cover opacity-30 transition-[opacity,transform] duration-300 ease-out [@media(hover:hover)]:group-hover:scale-[1.02] [@media(hover:hover)]:group-hover:opacity-50'
             unoptimized
             priority
           />

apps/sim/lib/blog/registry.ts

@@ -1,5 +1,6 @@
 import fs from 'fs/promises'
 import path from 'path'
+import { slug as githubSlug } from 'github-slugger'
 import matter from 'gray-matter'
 import { compileMDX } from 'next-mdx-remote/rsc'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
@@ -32,11 +33,7 @@ async function loadAuthors(): Promise<Record<string, any>> {
 }
 
 function slugify(text: string): string {
-  return text
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9\s-]/g, '')
-    .replace(/\s+/g, '-')
+  return githubSlug(text)
 }
 
 async function scanFrontmatters(): Promise<BlogMeta[]> {