Skip to content

Commit ccae711

Browse files
chore: update contents
1 parent 4ff89ba commit ccae711

File tree

4 files changed

+40
-38
lines changed

4 files changed

+40
-38
lines changed

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { ArrowLeft } from 'lucide-react'
1+
import { ArrowLeft, ChevronLeft } from 'lucide-react'
22
import type { Metadata } from 'next'
33
import Image from 'next/image'
44
import Link from 'next/link'
5+
import { buttonVariants } from '@/components/emcn'
56
import { FAQ } from '@/lib/blog/faq'
67
import '@/app/(landing)/blog/[slug]/prose-studio.css'
78
import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
89
import type { Author, BlogMeta } from '@/lib/blog/schema'
910
import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
11+
import { cn } from '@/lib/core/utils/cn'
1012
import { formatDate } from '@/lib/core/utils/formatting'
1113
import { getBaseUrl } from '@/lib/core/utils/urls'
1214
import { ArticleHeaderItem, ArticleHeaderMotion } from '@/app/(landing)/blog/[slug]/article-header'
@@ -38,8 +40,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
3840
const jsonLd = buildArticleJsonLd(post)
3941
const breadcrumbLd = buildBreadcrumbJsonLd(post)
4042

41-
const category = getPrimaryCategory(post.tags)
42-
const categoryColor = category.color
4343
const displayAuthors = post.authors && post.authors.length > 0 ? post.authors : [post.author]
4444
const shareUrl = `${getBaseUrl()}/blog/${slug}`
4545

@@ -59,34 +59,35 @@ export default async function Page({ params }: { params: Promise<{ slug: string
5959
<div data-blog-main-content className='w-full min-w-0 max-w-5xl xl:col-start-2 xl:mx-auto'>
6060
<Link
6161
href='/blog'
62-
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]'
63-
style={{ borderRadius: '5px' }}
62+
className={cn(
63+
buttonVariants({ variant: 'ghost', size: 'sm' }),
64+
'group mb-8 gap-1 font-season text-[#999] text-sm hover:text-[#ECECEC] !px-0'
65+
)}
6466
>
65-
<ArrowLeft
66-
className='group-hover:-translate-x-1 h-3 w-3 transition-transform'
67-
aria-hidden='true'
68-
/>
69-
All Posts
67+
<span className='relative inline-flex h-4 w-4 shrink-0 group-hover:-translate-x-0.5 transition-transform duration-200'>
68+
<ChevronLeft
69+
className='absolute inset-0 h-4 w-4 opacity-100 transition-opacity duration-200 group-hover:pointer-events-none group-hover:opacity-0'
70+
aria-hidden
71+
/>
72+
<ArrowLeft
73+
className='absolute inset-0 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100'
74+
aria-hidden
75+
/>
76+
</span>
77+
Back to Blog
7078
</Link>
7179
<header className='mb-12 border-[#2A2A2A] border-b pb-8'>
7280
<ArticleHeaderMotion>
73-
<ArticleHeaderItem className='mb-6 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
81+
<ArticleHeaderItem className='mb-4 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
7482
<div className='flex items-center gap-3'>
75-
<span
76-
className='inline-block h-3 w-3'
77-
style={{ backgroundColor: categoryColor }}
78-
aria-hidden='true'
79-
/>
80-
<div className='font-season text-[#999] text-[11px] uppercase tracking-widest'>
81-
<time dateTime={post.date} itemProp='datePublished'>
83+
<div className='font-season text-[#999] tracking-widest'>
84+
<time dateTime={post.date} itemProp='datePublished' className='text-[12px] uppercase'>
8285
{new Date(post.date).toLocaleDateString('en-US', {
8386
month: 'short',
8487
day: '2-digit',
8588
year: 'numeric',
8689
})}
8790
</time>
88-
{' // '}
89-
<span style={{ color: categoryColor }}>{category.label}</span>
9091
</div>
9192
</div>
9293

@@ -96,7 +97,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
9697
</ArticleHeaderItem>
9798
<ArticleHeaderItem>
9899
<h1
99-
className='mb-6 font-[500] text-[#ECECEC] text-[36px] leading-[1.15] tracking-tight sm:text-[40px] md:text-[48px]'
100+
className='mb-4 font-[500] text-[#ECECEC] text-[36px] leading-[1.15] tracking-tight sm:text-[40px] md:text-[48px]'
100101
itemProp='headline'
101102
>
102103
{post.title}

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useState } from 'react'
44
import { AnimatePresence, motion } from 'framer-motion'
55
import { Check, Link2, Linkedin, Twitter } from 'lucide-react'
6+
import { Button } from '@/components/emcn'
67

78
interface ShareButtonsProps {
89
url: string
@@ -32,32 +33,34 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
3233
window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
3334
}
3435

35-
const btnClass =
36-
'flex h-10 w-10 items-center justify-center rounded-[5px] border border-[#2A2A2A] bg-[#232323] text-[#999] transition-[color,border-color] duration-150 ease [@media(hover:hover)]:hover:border-[#2ABBF8] [@media(hover:hover)]:hover:text-[#2ABBF8] active:scale-[0.95]'
36+
const iconButtonClassName = 'h-10 w-10 shrink-0 p-0 active:scale-[0.95]'
3737

3838
return (
3939
<div className='flex gap-2'>
40-
<button
40+
<Button
4141
type='button'
4242
onClick={handleShareTwitter}
43-
className={btnClass}
43+
className={iconButtonClassName}
4444
aria-label='Share on X'
45+
variant='primary'
4546
>
4647
<Twitter className='h-4 w-4' aria-hidden='true' />
47-
</button>
48-
<button
48+
</Button>
49+
<Button
4950
type='button'
5051
onClick={handleShareLinkedIn}
51-
className={btnClass}
52+
className={iconButtonClassName}
5253
aria-label='Share on LinkedIn'
54+
variant='primary'
5355
>
5456
<Linkedin className='h-4 w-4' aria-hidden='true' />
55-
</button>
56-
<button
57+
</Button>
58+
<Button
5759
type='button'
5860
onClick={handleCopyLink}
59-
className={btnClass}
61+
className={iconButtonClassName}
6062
aria-label={copied ? 'Link copied' : 'Copy link'}
63+
variant='primary'
6164
>
6265
<AnimatePresence mode='wait'>
6366
{copied ? (
@@ -84,7 +87,7 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
8487
</motion.span>
8588
)}
8689
</AnimatePresence>
87-
</button>
90+
</Button>
8891
</div>
8992
)
9093
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function FeaturedLeadCard({ post }: { post: Post }) {
137137
<motion.div variants={leadVariants} className='col-span-full'>
138138
<Link
139139
href={`/blog/${post.slug}`}
140-
className='group [@media(hover:hover)]:hover:-translate-y-0.5 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]'
140+
className='group [@media(hover:hover)]:hover:-translate-y-0.5 relative flex min-h-[400px] flex-col justify-end overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color,background-color,transform] duration-200 ease-out active:scale-[0.99] [@media(hover:hover)]:hover:border-[#3d3d3d] [@media(hover:hover)]:hover:bg-[#282828]'
141141
>
142142
<div className='absolute inset-0'>
143143
<Image
@@ -166,7 +166,7 @@ function FeaturedLeadCard({ post }: { post: Post }) {
166166
)}
167167
</div>
168168
<div className='mt-auto'>
169-
<h3 className='mb-4 max-w-2xl font-[500] text-[#ECECEC] text-[32px] leading-tight tracking-[-0.02em] transition-colors duration-150 [@media(hover:hover)]:group-hover:text-[#00F701]'>
169+
<h3 className='mb-4 max-w-2xl font-[500] text-[#ECECEC] text-[32px] leading-tight tracking-[-0.02em]'>
170170
{post.title}
171171
</h3>
172172
<p className='mb-6 max-w-2xl text-[#999] text-[15px]'>{post.description}</p>

apps/sim/app/(landing)/blog/studio-content.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,7 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
174174

175175
{featured.length > 0 && (
176176
<section className='mb-10'>
177-
<h2 className='mb-8 flex items-center gap-2 font-season text-[#666] text-[11px] uppercase tracking-widest'>
178-
<span className='inline-block h-2 w-2 bg-[#FA4EDF]' aria-hidden='true' />
177+
<h2 className='mb-8 flex items-center gap-2 font-season text-[#666] text-md tracking-widest'>
179178
Featured Content
180179
</h2>
181180
<FeaturedGrid posts={featured} />
@@ -184,8 +183,7 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
184183

185184
{feed.length > 0 && (
186185
<section>
187-
<h2 className='mb-8 flex items-center gap-2 font-season text-[#666] text-[11px] uppercase tracking-widest'>
188-
<span className='inline-block h-2 w-2 bg-[#00F701]' aria-hidden='true' />
186+
<h2 className='mb-8 flex items-center gap-2 font-season text-[#666] text-md tracking-widest'>
189187
{lowerQ ? 'Search Results' : activeCategory ? activeCategory.label : 'All Posts'}
190188
</h2>
191189
<PostGrid posts={feed} />

0 commit comments

Comments
 (0)