chore: update contents and fix responsivenes

Author: adithyaakrishna

apps/sim/app/(home)/components/features/features.tsx

@@ -6,13 +6,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Badge, ChevronDown } from '@/components/emcn'
 import { FeaturesPreview } from '@/app/(home)/components/features/components/features-preview'
-
-function hexToRgba(hex: string, alpha: number): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r},${g},${b},${alpha})`
-}
+import { hexToRgba } from '@/lib/core/utils/formatting'
 
 const FEATURE_TABS = [
   {

apps/sim/app/(home)/components/templates/templates.tsx

@@ -9,6 +9,7 @@ import { Badge, ChevronDown } from '@/components/emcn'
 import { LandingWorkflowSeedStorage } from '@/lib/core/utils/browser-storage'
 import { cn } from '@/lib/core/utils/cn'
 import { TEMPLATE_WORKFLOWS } from '@/app/(home)/components/templates/template-workflows'
+import { hexToRgba } from '@/lib/core/utils/formatting'
 
 const logger = createLogger('LandingTemplates')
 
@@ -23,13 +24,6 @@ const LandingPreviewWorkflow = dynamic(
   }
 )
 
-function hexToRgba(hex: string, alpha: number): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r},${g},${b},${alpha})`
-}
-
 const LEFT_WALL_CLIP = 'polygon(0 8px, 100% 0, 100% 100%, 0 100%)'
 const BOTTOM_WALL_CLIP = 'polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%)'
 
@@ -412,7 +406,7 @@ export default function Templates() {
       ref={sectionRef}
       id='templates'
       aria-labelledby='templates-heading'
-      className='mt-[40px] mb-[80px]'
+      className='mt-[40px] mb-[80px] overflow-x-clip'
     >
       <p className='sr-only'>
         Sim includes {TEMPLATE_WORKFLOWS.length} pre-built workflow templates covering OCR
@@ -449,7 +443,7 @@ export default function Templates() {
             </svg>
           </div>
 
-          <div className='px-[20px] pt-[60px] lg:px-[80px] lg:pt-[100px]'>
+          <div className='px-4 pt-[60px] sm:px-6 lg:px-[80px] lg:pt-[100px]'>
             <div className='flex flex-col items-start gap-[20px]'>
               <Badge
                 variant='blue'
@@ -517,7 +511,7 @@ export default function Templates() {
                         aria-controls={TEMPLATES_PANEL_ID}
                         onClick={() => setActiveIndex(index)}
                         className={cn(
-                          'relative w-full text-left',
+                          'relative w-full overflow-x-clip text-left',
                           isActive
                             ? 'z-10'
                             : cn(
@@ -543,7 +537,7 @@ export default function Templates() {
                                   className='absolute right-[-8px] bottom-0 left-2 h-2'
                                   style={buildBottomWallStyle(depth)}
                                 />
-                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                <div className='-translate-y-2 relative flex w-full translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
                                   <span className='flex-1 font-[430] font-season text-[16px] text-white'>
                                     {workflow.name}
                                   </span>

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

@@ -8,7 +8,7 @@ export function ArticleSidebar({ headings }: ArticleSidebarProps) {
   if (headings.length === 0) return null
 
   return (
-    <aside className='hidden w-full shrink-0 xl:sticky xl:top-[76px] xl:block xl:w-72 xl:pt-16 mr-2'>
+    <aside className='mr-2 hidden w-full shrink-0 xl:sticky xl:top-[76px] xl:block xl:w-72 xl:pt-16'>
       <TableOfContents headings={headings} />
     </aside>
   )

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

@@ -7,9 +7,9 @@ export function BackLink() {
       href='/blog'
       className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
     >
-      <span className='inline-flex transition-transform duration-200 group-hover:-translate-x-0.5'>
-        <ChevronLeft className='h-4 w-4 block group-hover:hidden' aria-hidden='true' />
-        <ArrowLeft className='h-4 w-4 hidden group-hover:block' aria-hidden='true' />
+      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
+        <ChevronLeft className='block h-4 w-4 group-hover:hidden' aria-hidden='true' />
+        <ArrowLeft className='hidden h-4 w-4 group-hover:block' aria-hidden='true' />
       </span>
       Back to Blog
     </Link>

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

@@ -52,20 +52,20 @@ export default async function Page({ params }: { params: Promise<{ slug: string
         dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }}
       />
 
-      <div className='mx-auto flex w-full max-w-[1500px] flex-col items-start gap-2 pb-24 pt-16 xl:flex-row'>
-        <div data-blog-main-content className='max-w-5xl flex-grow mx-auto'>
+      <div className='mx-auto flex w-full max-w-[1500px] flex-col items-start gap-8 px-4 pt-10 pb-24 sm:px-6 sm:pt-12 lg:px-8 lg:pt-16 xl:flex-row xl:gap-12'>
+        <div data-blog-main-content className='mx-auto w-full min-w-0 max-w-5xl flex-grow'>
           <Link
             href='/blog'
-            className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[11px] uppercase tracking-widest text-[#999] transition-colors hover:text-[#ECECEC]'
+            className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[#999] text-[11px] uppercase tracking-widest transition-colors hover:text-[#ECECEC]'
             style={{ borderRadius: '5px' }}
           >
             <ArrowLeft
-              className='h-3 w-3 transition-transform group-hover:-translate-x-1'
+              className='group-hover:-translate-x-1 h-3 w-3 transition-transform'
               aria-hidden='true'
             />
             All Posts
           </Link>
-          <header className='mb-12 border-b border-[#2A2A2A] pb-8'>
+          <header className='mb-12 border-[#2A2A2A] border-b pb-8'>
             <ArticleHeaderMotion>
               <ArticleHeaderItem className='mb-6 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
                 <div className='flex items-center gap-3'>
@@ -74,7 +74,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     style={{ backgroundColor: categoryColor }}
                     aria-hidden='true'
                   />
-                  <div className='font-season text-[11px] uppercase tracking-widest text-[#999]'>
+                  <div className='font-season text-[#999] text-[11px] uppercase tracking-widest'>
                     <time dateTime={post.date} itemProp='datePublished'>
                       {new Date(post.date).toLocaleDateString('en-US', {
                         month: 'short',
@@ -87,27 +87,27 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                   </div>
                 </div>
 
-                <div className='shrink-0'>
+                <div className='shrink-0 self-start sm:self-auto'>
                   <ShareButtons url={shareUrl} title={post.title} />
                 </div>
               </ArticleHeaderItem>
               <ArticleHeaderItem>
                 <h1
-                  className='mb-6 font-[500] text-[36px] leading-[1.15] tracking-tight text-[#ECECEC] sm:text-[40px] md:text-[48px]'
+                  className='mb-6 font-[500] text-[#ECECEC] text-[36px] leading-[1.15] tracking-tight sm:text-[40px] md:text-[48px]'
                   itemProp='headline'
                 >
                   {post.title}
                 </h1>
               </ArticleHeaderItem>
               <ArticleHeaderItem>
-                <p className='mb-6 text-[18px] leading-relaxed text-[#999]' itemProp='description'>
+                <p className='mb-6 text-[#999] text-[18px] leading-relaxed' itemProp='description'>
                   {post.description}
                 </p>
               </ArticleHeaderItem>
 
               {post.tags.length > 0 && (
                 <ArticleHeaderItem>
-                  <div className='flex flex-wrap items-center gap-x-1.5 gap-y-1 font-season text-[11px] text-[#666]'>
+                  <div className='flex flex-wrap items-center gap-x-1.5 gap-y-1 font-season text-[#666] text-[11px]'>
                     {post.tags.map((tag, i) => (
                       <span key={tag}>
                         <Link
@@ -165,7 +165,7 @@ interface ArticleAuthorsProps {
 function ArticleAuthors({ authors }: ArticleAuthorsProps) {
   return (
     <div className='mt-12'>
-      <div className='mb-6 flex items-center gap-2 font-season text-[11px] uppercase tracking-widest text-[#666]'>
+      <div className='mb-6 flex items-center gap-2 font-season text-[#666] text-[11px] uppercase tracking-widest'>
         <span className='inline-block h-2 w-2 bg-[#FA4EDF]' aria-hidden='true' />
         {authors.length > 1 ? 'Authors' : 'Written by'}
       </div>
@@ -177,7 +177,7 @@ function ArticleAuthors({ authors }: ArticleAuthorsProps) {
             style={{ borderRadius: '2px' }}
           >
             <div
-              className='flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden border border-[#2A2A2A] bg-[#1C1C1C] font-season text-lg text-[#2ABBF8]'
+              className='flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden border border-[#2A2A2A] bg-[#1C1C1C] font-season text-[#2ABBF8] text-lg'
               style={{ borderRadius: '2px' }}
             >
               {a.avatarUrl ? (
@@ -200,7 +200,7 @@ function ArticleAuthors({ authors }: ArticleAuthorsProps) {
                   href={a.url}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='font-season text-[11px] text-[#999] transition-colors hover:text-[#ECECEC]'
+                  className='font-season text-[#999] text-[11px] transition-colors hover:text-[#ECECEC]'
                 >
                   {a.xHandle ? `@${a.xHandle}` : 'Profile'}
                 </Link>
@@ -219,8 +219,8 @@ interface RelatedArticlesProps {
 
 function RelatedArticles({ posts }: RelatedArticlesProps) {
   return (
-    <div className='mt-12 border-t border-[#2A2A2A] pt-8'>
-      <div className='mb-6 flex items-center gap-2 font-season text-[11px] uppercase tracking-widest text-[#666]'>
+    <div className='mt-12 border-[#2A2A2A] border-t pt-8'>
+      <div className='mb-6 flex items-center gap-2 font-season text-[#666] text-[11px] uppercase tracking-widest'>
         <span className='inline-block h-2 w-2 bg-[#FFCC02]' aria-hidden='true' />
         Related articles
       </div>
@@ -232,24 +232,24 @@ function RelatedArticles({ posts }: RelatedArticlesProps) {
             <Link
               key={p.slug}
               href={`/blog/${p.slug}`}
-              className='group flex flex-col border border-[#2A2A2A] bg-[#232323] p-5 transition-[border-color,background-color,transform] duration-200 ease-out [@media(hover:hover)]:hover:border-[#3d3d3d] [@media(hover:hover)]:hover:bg-[#282828] [@media(hover:hover)]:hover:-translate-y-0.5'
+              className='group [@media(hover:hover)]:hover:-translate-y-0.5 flex flex-col border border-[#2A2A2A] bg-[#232323] p-5 transition-[border-color,background-color,transform] duration-200 ease-out [@media(hover:hover)]:hover:border-[#3d3d3d] [@media(hover:hover)]:hover:bg-[#282828]'
               style={{ borderRadius: '2px' }}
             >
               <div className='mb-3 flex items-center gap-3'>
                 <span
-                  className='inline-block px-2 py-0.5 font-season text-[10px] font-bold uppercase tracking-wider text-black'
+                  className='inline-block px-2 py-0.5 font-bold font-season text-[10px] text-black uppercase tracking-wider'
                   style={{ backgroundColor: color }}
                 >
                   {cat.label}
                 </span>
               </div>
-              <h4 className='mb-2 text-[15px] font-[500] leading-tight text-[#ECECEC] transition-colors duration-150 [@media(hover:hover)]:group-hover:text-[#FFCC02]'>
+              <h4 className='mb-2 font-[500] text-[#ECECEC] text-[15px] leading-tight transition-colors duration-150 [@media(hover:hover)]:group-hover:text-[#FFCC02]'>
                 {p.title}
               </h4>
-              <p className='mb-4 line-clamp-2 text-[13px] leading-relaxed text-[#999]'>
+              <p className='mb-4 line-clamp-2 text-[#999] text-[13px] leading-relaxed'>
                 {p.description}
               </p>
-              <div className='mt-auto font-season text-[10px] text-[#666]'>
+              <div className='mt-auto font-season text-[#666] text-[10px]'>
                 {formatDate(new Date(p.date))}
               </div>
             </Link>

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

@@ -498,7 +498,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
       <nav
         ref={navRef}
         className='flex w-[250px] flex-col'
-        aria-label='Table of contents'
+        aria-label='On this page'
         onPointerMove={onPointerMove}
         onPointerLeave={onPointerLeave}
       >
@@ -540,7 +540,7 @@ function TocOverline() {
         />
       </div>
       <span className='font-medium font-season text-[#FFFFFF] text-[10px] uppercase leading-none tracking-[0.28em] transition-colors duration-150 ease-out group-hover:text-[#A1A1A1]'>
-        Table of Contents
+        On this page
       </span>
     </button>
   )

apps/sim/app/(landing)/blog/authors/[id]/author-with-sidebar.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { BlogStudioSidebar } from '@/app/(landing)/blog/studio-sidebar-client'
+
+interface AuthorWithSidebarProps {
+  allPosts: { tags: string[] }[]
+  activeTag: string | null
+  children: React.ReactNode
+}
+
+export function AuthorWithSidebar({ allPosts, activeTag, children }: AuthorWithSidebarProps) {
+  const router = useRouter()
+  const [query, setQuery] = useState('')
+
+  const handleChangeQuery = useCallback(
+    (value: string) => {
+      setQuery(value)
+      const trimmed = value.trim()
+      router.push(trimmed ? `/blog?q=${encodeURIComponent(trimmed)}` : '/blog')
+    },
+    [router]
+  )
+
+  const handleSelectTag = useCallback(
+    (id: string | null) => {
+      setQuery('')
+      router.push(id ? `/blog?tag=${encodeURIComponent(id)}` : '/blog')
+    },
+    [router]
+  )
+
+  const sidebarPosts = useMemo(() => allPosts.map((p) => ({ tags: p.tags })), [allPosts])
+
+  return (
+    <div className='flex min-h-0 flex-1 flex-col overflow-x-clip px-4 sm:px-6 lg:flex-row lg:px-12'>
+      <BlogStudioSidebar
+        posts={sidebarPosts}
+        activeTag={activeTag}
+        query={query}
+        onChangeQuery={handleChangeQuery}
+        onSelectTag={handleSelectTag}
+      />
+      <main className='relative min-w-0 flex-1'>{children}</main>
+    </div>
+  )
+}

apps/sim/app/(landing)/blog/authors/[id]/page.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import { getAllPostMeta } from '@/lib/blog/registry'
+import { AuthorWithSidebar } from '@/app/(landing)/blog/authors/[id]/author-with-sidebar'
 import { PostGrid } from '@/app/(landing)/blog/post-grid'
-import { WithSidebar } from '@/app/(landing)/blog/with-sidebar'
 
 function findAuthorById(posts: Awaited<ReturnType<typeof getAllPostMeta>>, id: string) {
   for (const p of posts) {
@@ -25,19 +25,26 @@ export async function generateMetadata({
   return { title: author?.name ?? 'Author' }
 }
 
-export default async function AuthorPage({ params }: { params: Promise<{ id: string }> }) {
+export default async function AuthorPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>
+  searchParams: Promise<{ tag?: string; q?: string }>
+}) {
   const { id } = await params
+  const { tag } = await searchParams
   const allPosts = await getAllPostMeta()
   const posts = allPosts.filter((p) => p.author.id === id || p.authors?.some((a) => a.id === id))
   const author = findAuthorById(allPosts, id)
 
   if (!author) {
     return (
       <div className='mx-auto max-w-5xl px-8 py-16 lg:px-12'>
-        <h1 className='font-[500] text-[32px] text-[#ECECEC]'>Author not found</h1>
+        <h1 className='font-[500] text-[#ECECEC] text-[32px]'>Author not found</h1>
         <Link
           href='/blog'
-          className='mt-4 inline-block font-season text-[12px] uppercase tracking-wider text-[#999] transition-colors hover:text-[#ECECEC]'
+          className='mt-4 inline-block font-season text-[#999] text-[12px] uppercase tracking-wider transition-colors hover:text-[#ECECEC]'
         >
           Back to all posts
         </Link>
@@ -55,8 +62,8 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
   }
 
   return (
-    <WithSidebar>
-      <div className='mx-auto max-w-5xl px-8 py-16 lg:px-12'>
+    <AuthorWithSidebar allPosts={allPosts} activeTag={tag ?? null}>
+      <div className='mx-auto w-full max-w-5xl px-4 py-16 sm:px-0 lg:mr-8 lg:px-0 lg:py-16'>
         <script
           type='application/ld+json'
           dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd) }}
@@ -78,31 +85,31 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
             </div>
           )}
           <div>
-            <div className='mb-1 font-season text-[10px] uppercase tracking-widest text-[#FA4EDF]'>
+            <div className='mb-1 font-season text-[#FA4EDF] text-[10px] uppercase tracking-widest'>
               Author
             </div>
-            <h1 className='font-[500] text-[32px] leading-tight tracking-[-0.02em] text-[#ECECEC]'>
+            <h1 className='font-[500] text-[#ECECEC] text-[32px] leading-tight tracking-[-0.02em]'>
               {author.name}
             </h1>
             {author.url && (
               <Link
                 href={author.url}
                 target='_blank'
                 rel='noopener noreferrer'
-                className='font-season text-[11px] text-[#999] transition-colors hover:text-[#ECECEC]'
+                className='font-season text-[#999] text-[11px] transition-colors hover:text-[#ECECEC]'
               >
                 {author.xHandle ? `@${author.xHandle}` : 'Profile'}
               </Link>
             )}
           </div>
         </div>
-        <h2 className='mb-8 flex items-center gap-2 font-season text-[11px] uppercase tracking-widest text-[#666]'>
+        <h2 className='mb-8 flex items-center gap-2 font-season text-[#666] text-[11px] uppercase tracking-widest'>
           <span className='inline-block h-2 w-2 bg-[#00F701]' aria-hidden='true' />
           Posts by {author.name}
         </h2>
 
         <PostGrid posts={posts} />
       </div>
-    </WithSidebar>
+    </AuthorWithSidebar>
   )
 }