improvement(docs): ui/ux cleanup#4016
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryMedium Risk Overview Overhauls layout styling via SEO/i18n + crawlability adjustments. Adds an explicit OpenGraph locale map per language, simplifies JSON-LD output (inline Reviewed by Cursor Bugbot for commit 69d2d19. Configure here. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Greptile SummaryThis PR delivers a broad UI/UX cleanup across the docs site and landing/blog app: new docs page-footer, refined sidebar spacing and design tokens, white light-mode background, Fumadocs CSS variable overrides, rebuilt blog post hero layout, SEO/GEO metadata improvements ( Notable issues found:
Confidence Score: 5/5Safe to merge — all findings are P2 style/quality suggestions with no correctness or data-integrity impact All four flagged issues are minor style, dead-code, or cosmetic concerns. None break functionality, corrupt data, or affect production reliability. The core JSON-LD @graph refactor, sitemap improvements, blog UI refresh, and docs styling changes are correct and well-implemented. apps/sim/lib/blog/seo.ts (dead export, hardcoded proficiencyLevel), apps/sim/lib/blog/schema.ts (unused frontmatter field), apps/docs/app/layout.tsx (themeColor regression) Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Blog Post MDX File] -->|matter parse| B[Frontmatter data]
A -->|matter parse| C[MDX content]
B --> D[BlogFrontmatterSchema.parse]
D --> E[fm: BlogFrontmatterSchema]
C --> F[Word Count Computation\nregex strip + split]
F --> G[wordCount: number]
E --> H[results.push]
G --> H
H --> I[BlogMeta]
I --> J[buildPostGraphJsonLd]
J --> K[@graph JSON-LD]
K --> L1[buildArticleJsonLd\nTechArticle]
K --> L2[buildBreadcrumbJsonLd\nBreadcrumbList]
K --> L3[buildFaqJsonLd\nFAQPage optional]
I --> M[blog/page.tsx]
M --> N[buildCollectionPageJsonLd\nCollectionPage]
style L1 fill:#d4edda
style L2 fill:#d4edda
style L3 fill:#d4edda
style N fill:#d4edda
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| datePublished: post.date, | ||
| dateModified: post.updated ?? post.date, | ||
| wordCount: post.wordCount, | ||
| proficiencyLevel: 'Beginner', |
There was a problem hiding this comment.
proficiencyLevel: 'Beginner'
Every TechArticle will emit proficiencyLevel: 'Beginner' regardless of actual content difficulty. Most Sim blog posts cover advanced topics (agent orchestration, LLM routing, etc.), so this will be inaccurate for the majority of posts and could mislead search engines.
Consider driving it from frontmatter (e.g. an optional proficiencyLevel field defaulting to 'Beginner') so individual posts can declare the correct level, or omit the field entirely.
apps/sim/lib/blog/schema.ts
Outdated
| ) | ||
| .optional(), | ||
| canonical: z.string().url(), | ||
| wordCount: z.number().int().positive().optional(), |
There was a problem hiding this comment.
wordCount in frontmatter schema is never consumed
wordCount is added to BlogFrontmatterSchema as an optional frontmatter field, but in registry.ts the word count is always computed from MDX content:
const wordCount = mdxContent.replace(...).split(...).filter(...).lengthThe fm.wordCount value parsed from frontmatter is never referenced — the computed variable is what gets pushed to results. This means a post author who sets wordCount in their YAML frontmatter would silently have it overwritten. If manual override is not intended, removing the field from the schema avoids the false impression that it is configurable via frontmatter.
| initialScale: 1, | ||
| themeColor: [ | ||
| { media: '(prefers-color-scheme: light)', color: '#ffffff' }, | ||
| { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' }, | ||
| ], | ||
| themeColor: '#000000', | ||
| } |
There was a problem hiding this comment.
themeColor always black in light mode
The previous value used prefers-color-scheme media queries to set an appropriate theme colour for each mode:
// Before
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
{ media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
],The new single value '#000000' means mobile Chrome / Safari will render a black status bar on a white page in light mode — a visible contrast mismatch. Restoring the media-query array, or at minimum using a neutral value for light mode (e.g. '#ffffff'), would match the new white background.
emir-karabeg
force-pushed
the
improvement/docs
branch
from
06c3260 to
5d6fd20
Compare
…estion slots - Add flex-col sm:flex-row and matching border classes to related posts nav for consistent mobile stacking with the main blog page - Remove score > 0 filter in getRelatedPosts so it falls back to recent posts when there aren't enough tag matches - Align description text color with main page cards
2 participants
Summary
Overhaul docs site UI/UX: new page footer component, cleaner sidebar spacing, white light-mode background, fixed sidebar divider, and refined typography. Landing page and blog SEO/GEO optimization: proper OG locale mapping, structured data cleanup, updated meta tags, and new
llms.txt. Landing page UI refresh: rebuilt hero, landing preview components, templates section, footer CTA, and navbar styling. Add Cursorlist_artifactsanddownload_artifacttools with API route and block config updates. Support multiple response blocks in workflow execution engine with tests. Align skeleton loading states across all settings tabs to match actual page layouts.Type of Change
Testing
Tested manually
Checklist
Screenshots/Videos