small styling improvements

apps/sim/app/(landing)/studio/[slug]/back-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft, ChevronLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export function BackLink() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Link
+      href='/studio'
+      className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
+        {isHovered ? (
+          <ArrowLeft className='h-4 w-4' aria-hidden='true' />
+        ) : (
+          <ChevronLeft className='h-4 w-4' aria-hidden='true' />
+        )}
+      </span>
+      Back to Sim Studio
+    </Link>
+  )
+}

apps/sim/app/(landing)/studio/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { FAQ } from '@/lib/blog/faq'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
+import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -48,9 +50,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       />
       <header className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
         <div className='mb-6'>
-          <Link href='/studio' className='text-gray-600 text-sm hover:text-gray-900'>
-            ← Back to Sim Studio
-          </Link>
+          <BackLink />
         </div>
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
           <div className='w-full flex-shrink-0 md:w-[450px]'>
@@ -75,28 +75,31 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             >
               {post.title}
             </h1>
-            <div className='mt-4 flex items-center gap-3'>
-              {(post.authors || [post.author]).map((a, idx) => (
-                <div key={idx} className='flex items-center gap-2'>
-                  {a?.avatarUrl ? (
-                    <Avatar className='size-6'>
-                      <AvatarImage src={a.avatarUrl} alt={a.name} />
-                      <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                  ) : null}
-                  <Link
-                    href={a?.url || '#'}
-                    target='_blank'
-                    rel='noopener noreferrer author'
-                    className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
-                    itemProp='author'
-                    itemScope
-                    itemType='https://schema.org/Person'
-                  >
-                    <span itemProp='name'>{a?.name}</span>
-                  </Link>
-                </div>
-              ))}
+            <div className='mt-4 flex items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                {(post.authors || [post.author]).map((a, idx) => (
+                  <div key={idx} className='flex items-center gap-2'>
+                    {a?.avatarUrl ? (
+                      <Avatar className='size-6'>
+                        <AvatarImage src={a.avatarUrl} alt={a.name} />
+                        <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
+                      </Avatar>
+                    ) : null}
+                    <Link
+                      href={a?.url || '#'}
+                      target='_blank'
+                      rel='noopener noreferrer author'
+                      className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
+                      itemProp='author'
+                      itemScope
+                      itemType='https://schema.org/Person'
+                    >
+                      <span itemProp='name'>{a?.name}</span>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+              <ShareButton url={`https://sim.ai/studio/${slug}`} title={post.title} />
             </div>
           </div>
         </div>

apps/sim/app/(landing)/studio/[slug]/share-button.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+import { Share2 } from 'lucide-react'
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+
+interface ShareButtonProps {
+  url: string
+  title: string
+}
+
+export function ShareButton({ url, title }: ShareButtonProps) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+      setOpen(false)
+    }, 1000)
+  }
+
+  const handleShareTwitter = () => {
+    const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
+    window.open(tweetUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  const handleShareLinkedIn = () => {
+    const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
+    window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
+      <PopoverTrigger asChild>
+        <button
+          className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
+          aria-label='Share this post'
+        >
+          <Share2 className='h-4 w-4' />
+          <span>Share</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align='end' minWidth={140}>
+        <PopoverItem onClick={handleCopyLink}>{copied ? 'Copied!' : 'Copy link'}</PopoverItem>
+        <PopoverItem onClick={handleShareTwitter}>Share on X</PopoverItem>
+        <PopoverItem onClick={handleShareLinkedIn}>Share on LinkedIn</PopoverItem>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/sim/content/blog/v0-5/index.mdx

@@ -196,6 +196,6 @@ Model selection is per-block, so you can use faster/cheaper models for simple ta
 
 ## Get Started
 
-Available now at [sim.ai](https://sim.ai). Check out the [documentation](https://docs.sim.ai) to dive deeper.
+Available now at [sim.ai](https://sim.ai). Check out the [docs](https://docs.sim.ai) to dive deeper.
 
 *Questions? [help@sim.ai](mailto:help@sim.ai) · [Discord](https://sim.ai/discord)*