Skip to content

Commit 59af79e

Browse files
adithyaakrishnaadithyaakrishna
committed
chore: updated title and fixed width
1 parent 45ec2a1 commit 59af79e

File tree

4 files changed

+91
-90
lines changed

4 files changed

+91
-90
lines changed

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

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { getTagColor } from '@/app/(landing)/studio/tag-colors'
77
interface ArticleSidebarProps {
88
author: Author
99
authors: Author[]
10-
tags: string[]
1110
headings: { text: string; id: string }[]
1211
related: BlogMeta[]
1312
}
@@ -20,7 +19,7 @@ function formatDate(iso: string) {
2019
})
2120
}
2221

23-
export function ArticleSidebar({ author, authors, tags, headings, related }: ArticleSidebarProps) {
22+
export function ArticleSidebar({ author, authors, headings, related }: ArticleSidebarProps) {
2423
const displayAuthors = authors.length > 0 ? authors : [author]
2524

2625
return (
@@ -71,35 +70,7 @@ export function ArticleSidebar({ author, authors, tags, headings, related }: Art
7170
<TableOfContents headings={headings} />
7271
</div>
7372
)}
74-
{tags.length > 0 && (
75-
<div className='border border-[#2A2A2A] bg-[#232323] p-5' style={{ borderRadius: '5px' }}>
76-
<div className='mb-4 flex items-center gap-2 border-b border-[#2A2A2A] pb-3 font-mono text-[11px] uppercase tracking-widest text-[#ECECEC]'>
77-
<span className='inline-block h-1.5 w-1.5 bg-[#FA4EDF]' aria-hidden='true' />
78-
Topics
79-
</div>
80-
<div className='flex flex-wrap gap-2'>
81-
{tags.map((tag) => {
82-
const color = getTagColor(tag)
83-
return (
84-
<Link
85-
key={tag}
86-
href={`/studio?tag=${encodeURIComponent(tag)}`}
87-
className='font-mono text-[10px] uppercase tracking-wider transition-colors'
88-
style={{
89-
padding: '4px 8px',
90-
borderRadius: '5px',
91-
border: `1px solid ${color || '#3d3d3d'}`,
92-
color: color || '#999',
93-
backgroundColor: color ? `${color}08` : 'transparent',
94-
}}
95-
>
96-
{tag}
97-
</Link>
98-
)
99-
})}
100-
</div>
101-
</div>
102-
)}
73+
10374
{related.length > 0 && (
10475
<div className='border border-[#2A2A2A] bg-[#232323] p-5' style={{ borderRadius: '5px' }}>
10576
<div className='mb-4 flex items-center gap-2 border-b border-[#2A2A2A] pb-3 font-mono text-[11px] uppercase tracking-widest text-[#ECECEC]'>

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from '@/app/(landing)/studio/[slug]/animated-blocks'
1313
import { ArticleSidebar } from '@/app/(landing)/studio/[slug]/article-sidebar'
1414
import { ShareButtons } from '@/app/(landing)/studio/[slug]/share-button'
15-
import { getPrimaryCategory } from '@/app/(landing)/studio/tag-colors'
15+
import { getPrimaryCategory, getTagCategory } from '@/app/(landing)/studio/tag-colors'
1616

1717
export async function generateStaticParams() {
1818
const posts = await getAllPostMeta()
@@ -56,7 +56,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
5656
/>
5757

5858
<div className='mx-auto flex w-full max-w-[1400px] flex-col items-start gap-8 px-6 pb-24 pt-16 xl:flex-row'>
59-
<div className='max-w-3xl flex-grow xl:mx-auto'>
59+
<div className='max-w-4xl flex-grow xl:mx-auto'>
6060
<Link
6161
href='/studio'
6262
className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-mono text-[11px] uppercase tracking-widest text-[#999] transition-colors hover:text-[#ECECEC]'
@@ -99,9 +99,24 @@ export default async function Page({ params }: { params: Promise<{ slug: string
9999
>
100100
{post.title}
101101
</h1>
102-
<p className='text-[18px] leading-relaxed text-[#999]' itemProp='description'>
102+
<p className='mb-6 text-[18px] leading-relaxed text-[#999]' itemProp='description'>
103103
{post.description}
104104
</p>
105+
{post.tags.length > 0 && (
106+
<div className='flex flex-wrap items-center gap-x-1.5 gap-y-1 font-mono text-[11px] text-[#666]'>
107+
{post.tags.map((tag, i) => (
108+
<span key={tag}>
109+
<Link
110+
href={`/studio?tag=${encodeURIComponent(getTagCategory(tag))}`}
111+
className='transition-colors hover:text-[#999]'
112+
>
113+
{tag}
114+
</Link>
115+
{i < post.tags.length - 1 && <span className='ml-1.5 text-[#3d3d3d]'>/</span>}
116+
</span>
117+
))}
118+
</div>
119+
)}
105120

106121
<meta itemProp='dateModified' content={post.updated ?? post.date} />
107122
</header>
@@ -119,7 +134,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
119134
<ArticleSidebar
120135
author={post.author}
121136
authors={displayAuthors}
122-
tags={post.tags}
123137
headings={post.headings ?? []}
124138
related={related}
125139
/>

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client'
22

3+
import { List } from 'lucide-react'
34
import { useCallback, useEffect, useRef, useState } from 'react'
45

56
interface Heading {
@@ -65,21 +66,8 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
6566
return (
6667
<div>
6768
<div className='mb-4 flex items-center gap-2 border-b border-[#2A2A2A] pb-3 font-mono text-[11px] uppercase tracking-widest text-[#ECECEC]'>
68-
<svg
69-
className='h-3 w-3 text-[#2ABBF8]'
70-
fill='none'
71-
stroke='currentColor'
72-
viewBox='0 0 24 24'
73-
aria-hidden='true'
74-
>
75-
<path
76-
strokeLinecap='round'
77-
strokeLinejoin='round'
78-
strokeWidth={2}
79-
d='M4 6h16M4 12h16M4 18h7'
80-
/>
81-
</svg>
82-
Outline
69+
<List className='h-3 w-3 text-[#2ABBF8]' aria-hidden />
70+
Contents
8371
</div>
8472
<nav className='flex flex-col space-y-2 font-mono text-[12px] font-medium text-[#999]'>
8573
{headings.map((h, idx) => {

‎apps/sim/app/(landing)/studio/sidebar.tsx‎

Lines changed: 68 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { CATEGORIES, getPrimaryCategory } from '@/app/(landing)/studio/tag-color
66
interface StudioSidebarProps {
77
activeTag?: string | null
88
}
9-
109
export async function StudioSidebar({ activeTag }: StudioSidebarProps) {
1110
const allPosts = await getAllPostMeta()
1211

@@ -20,6 +19,7 @@ export async function StudioSidebar({ activeTag }: StudioSidebarProps) {
2019
}
2120

2221
const totalCount = allPosts.length
22+
const allActive = !activeTag
2323

2424
return (
2525
<aside className='flex w-full shrink-0 flex-col border-r border-[#2A2A2A] bg-[#1C1C1C] p-8 lg:sticky lg:top-[52px] lg:h-[calc(100vh-52px)] lg:w-72 lg:overflow-y-auto'>
@@ -42,53 +42,81 @@ export async function StudioSidebar({ activeTag }: StudioSidebarProps) {
4242
/>
4343
</div>
4444
</div>
45-
<div className='flex flex-col gap-1'>
46-
<h2 className='mb-4 font-mono text-[10px] uppercase tracking-widest text-[#666]'>
45+
<div className='flex flex-col border-t border-[#2A2A2A] pt-8'>
46+
<h2 className='mb-3 font-mono text-[10px] uppercase tracking-widest text-[#ECECEC]'>
4747
Categories
4848
</h2>
49-
<Link
50-
href='/studio'
51-
className={`group flex items-center justify-between py-2 font-mono text-[11px] uppercase tracking-wider transition-colors ${
52-
!activeTag ? 'text-[#00F701]' : 'text-[#999] hover:text-[#ECECEC]'
53-
}`}
54-
>
55-
<span>All Posts</span>
56-
<span
57-
className={`${!activeTag ? 'text-[#00F701]' : 'text-[#666] group-hover:text-[#999]'}`}
58-
>
59-
{totalCount}
60-
</span>
61-
</Link>
62-
{CATEGORIES.map((cat) => {
63-
const isActive = activeTag === cat.id
64-
const count = categoryCounts[cat.id] ?? 0
65-
66-
return (
49+
<ul className='flex flex-col'>
50+
<li>
6751
<Link
68-
key={cat.id}
69-
href={`/studio?tag=${encodeURIComponent(cat.id)}`}
70-
className={`group flex items-center justify-between py-2 font-mono text-[11px] uppercase tracking-wider transition-colors ${
71-
isActive ? '' : 'text-[#999] hover:text-[#ECECEC]'
72-
}`}
73-
style={isActive ? { color: cat.color } : undefined}
52+
href='/studio'
53+
className='mx-1 mb-0.5 flex items-center justify-between rounded-sm px-3 py-2 text-[13px] transition-all'
54+
style={
55+
allActive
56+
? {
57+
backgroundColor: 'rgba(0, 247, 1, 0.05)',
58+
color: '#00F701',
59+
border: '1px solid #00F701',
60+
}
61+
: {
62+
color: '#999',
63+
border: '1px solid transparent',
64+
}
65+
}
7466
>
75-
<span className='flex items-center gap-2'>
76-
<span
77-
className='inline-block h-1.5 w-1.5 shrink-0'
78-
style={{ backgroundColor: cat.color }}
79-
aria-hidden='true'
80-
/>
81-
{cat.label}
82-
</span>
67+
<span>All Posts</span>
8368
<span
84-
className={`${isActive ? '' : 'text-[#666] group-hover:text-[#999]'}`}
85-
style={isActive ? { color: cat.color } : undefined}
69+
className='font-mono text-[10px]'
70+
style={{
71+
padding: '2px 6px',
72+
borderRadius: '2px',
73+
border: allActive ? '1px solid #00F701' : '1px solid #2A2A2A',
74+
color: allActive ? '#00F701' : '#666',
75+
}}
8676
>
87-
{count}
77+
{String(totalCount).padStart(2, '0')}
8878
</span>
8979
</Link>
90-
)
91-
})}
80+
</li>
81+
{CATEGORIES.map((cat) => {
82+
const isActive = activeTag === cat.id
83+
const count = categoryCounts[cat.id] ?? 0
84+
85+
return (
86+
<li key={cat.id}>
87+
<Link
88+
href={`/studio?tag=${encodeURIComponent(cat.id)}`}
89+
className='group mx-1 mb-0.5 flex items-center justify-between rounded-sm px-3 py-2 text-[13px] transition-all hover:bg-[#181818] hover:text-[#ECECEC]'
90+
style={
91+
isActive
92+
? {
93+
backgroundColor: `${cat.color}0D`,
94+
color: cat.color,
95+
border: `1px solid ${cat.color}`,
96+
}
97+
: {
98+
color: '#999',
99+
border: '1px solid transparent',
100+
}
101+
}
102+
>
103+
<span>{cat.label}</span>
104+
<span
105+
className='font-mono text-[10px]'
106+
style={{
107+
padding: '2px 6px',
108+
borderRadius: '2px',
109+
border: isActive ? `1px solid ${cat.color}` : '1px solid #2A2A2A',
110+
color: isActive ? cat.color : '#666',
111+
}}
112+
>
113+
{String(count).padStart(2, '0')}
114+
</span>
115+
</Link>
116+
</li>
117+
)
118+
})}
119+
</ul>
92120
</div>
93121
</div>
94122
</aside>

0 commit comments

Comments
 (0)