blog: restyle docs.litellm.ai/blog to engineering blog aesthetic - #25580
Conversation
|
|
ishaan-berri
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Greptile SummaryThis PR restyled the
Confidence Score: 4/5Safe to merge after fixing the dark-mode code block regression; all other findings are P2 style improvements. One P1 issue: missing dark-mode override for docs/my-website/src/css/custom.css — missing
|
| Filename | Overview |
|---|---|
| docs/my-website/src/css/custom.css | Adds blog styling overrides; background: #ffffff !important on pre blocks has no dark-mode counterpart, causing white code blocks in dark mode |
| docs/my-website/src/theme/BlogPostPage/index.js | New swizzle wrapping OriginalBlogPostPage with a hiring CTA; useEffect adding blog-post-body to body is dead code (no matching CSS selector) |
| docs/my-website/src/theme/BlogListPage/index.js | Full restyle of blog list with marquee and flat post rows; provider favicons sourced from Google's undocumented favicon API (external runtime dependency); author links missing noreferrer |
| docs/my-website/src/theme/BlogListPage/styles.module.css | New CSS module for blog list; dark-mode overrides are present and complete for all elements in this file |
| docs/my-website/src/theme/BlogPostPage/styles.module.css | New CTA styles with dark-mode variants; no issues found |
| docs/my-website/blog/redis_circuit_breaker/diagrams.js | New inline React diagram components (CascadeFailure, CircuitBreakerStates, CircuitBreakerFlow, IncidentTimeline) with all inline styles; no issues found |
| docs/my-website/blog/redis_circuit_breaker/index.md | New blog post on Redis circuit breaker; imports diagram components from sibling file; no structural issues |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["/blog route"] --> B[BlogListPage]
B --> C[Layout]
B --> D[Hero Section]
B --> E[ProviderMarquee\n14 providers via Google favicon API]
B --> F[Post List]
F --> G["PostRow × N"]
G --> H[AuthorList]
J["/blog/:post route"] --> K[BlogPostPage swizzle]
K --> L[OriginalBlogPostPage]
K --> M[HiringCTA]
K --> N["useEffect — adds blog-post-body\n⚠ class unused in CSS"]
P["redis_circuit_breaker/index.md"] --> Q[CascadeFailure]
P --> R[CircuitBreakerStates]
P --> S[CircuitBreakerFlow]
P --> T[IncidentTimeline]
Reviews (1): Last reviewed commit: "add redis circuit breaker blog post with..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| .blog-wrapper article .markdown pre { | ||
| background: #ffffff !important; | ||
| border: 1px solid #e5e7eb !important; | ||
| border-radius: 8px; | ||
| box-shadow: 0 1px 3px rgba(0,0,0,0.06); | ||
| } |
There was a problem hiding this comment.
.blog-wrapper article .markdown pre is forced to background: #ffffff !important, but there is no corresponding [data-theme='dark'] override for pre — only inline code gets one (lines 912–916). The !important flag beats Docusaurus's own dark-theme stylesheet, so every code block in a blog post renders with a bright white box in dark mode.
| .blog-wrapper article .markdown pre { | |
| background: #ffffff !important; | |
| border: 1px solid #e5e7eb !important; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.06); | |
| } | |
| .blog-wrapper article .markdown pre { | |
| background: #ffffff !important; | |
| border: 1px solid #e5e7eb !important; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.06); | |
| } | |
| [data-theme='dark'] .blog-wrapper article .markdown pre { | |
| background: #1f2937 !important; | |
| border-color: #374151 !important; | |
| box-shadow: none; | |
| } |
| // Add body class so CSS can hide the sidebar | ||
| useEffect(() => { | ||
| document.body.classList.add('blog-post-body'); | ||
| return () => document.body.classList.remove('blog-post-body'); | ||
| }, []); |
There was a problem hiding this comment.
blog-post-body class is never used
The comment says this body class is added so CSS can hide the sidebar, but custom.css targets .blog-post-page aside.col — a class Docusaurus applies automatically to the page container, not the <body>. The blog-post-body class has no matching CSS selector anywhere, making this useEffect dead code.
| // Add body class so CSS can hide the sidebar | |
| useEffect(() => { | |
| document.body.classList.add('blog-post-body'); | |
| return () => document.body.classList.remove('blog-post-body'); | |
| }, []); | |
| export default function BlogPostPage(props) { | |
| return ( | |
| <> | |
| <OriginalBlogPostPage {...props} /> | |
| <HiringCTA /> | |
| </> | |
| ); | |
| } |
| const PROVIDERS = [ | ||
| { name: 'OpenAI', img: 'https://www.google.com/s2/favicons?domain=openai.com&sz=64' }, | ||
| { name: 'Anthropic', img: 'https://www.google.com/s2/favicons?domain=claude.ai&sz=64' }, | ||
| { name: 'Google Gemini', img: 'https://www.google.com/s2/favicons?domain=ai.google.dev&sz=64' }, | ||
| { name: 'AWS Bedrock', img: 'https://www.google.com/s2/favicons?domain=aws.amazon.com&sz=64' }, | ||
| { name: 'Azure OpenAI', img: 'https://www.google.com/s2/favicons?domain=azure.microsoft.com&sz=64' }, | ||
| { name: 'Mistral AI', img: 'https://www.google.com/s2/favicons?domain=mistral.ai&sz=64' }, | ||
| { name: 'Meta Llama', img: 'https://www.google.com/s2/favicons?domain=meta.com&sz=64' }, | ||
| { name: 'Groq', img: 'https://www.google.com/s2/favicons?domain=groq.com&sz=64' }, | ||
| { name: 'Hugging Face', img: 'https://www.google.com/s2/favicons?domain=huggingface.co&sz=64' }, | ||
| { name: 'Perplexity', img: 'https://www.google.com/s2/favicons?domain=perplexity.ai&sz=64' }, | ||
| { name: 'DeepSeek', img: 'https://www.google.com/s2/favicons?domain=deepseek.com&sz=64' }, | ||
| { name: 'Cohere', img: 'https://www.google.com/s2/favicons?domain=cohere.com&sz=64' }, | ||
| { name: 'Together AI', img: 'https://www.google.com/s2/favicons?domain=together.ai&sz=64' }, | ||
| { name: 'Vertex AI', img: 'https://www.google.com/s2/favicons?domain=cloud.google.com&sz=64' }, | ||
| ]; |
There was a problem hiding this comment.
Every page load fires 14 requests to https://www.google.com/s2/favicons?.... This service is undocumented, has no SLA, and is commonly blocked by privacy extensions and corporate proxies — meaning the marquee may show broken-image icons for many visitors. Hosting the favicons locally in static/img/providers/ would remove the runtime dependency and load faster.
| <React.Fragment key={a.name}> | ||
| {i > 0 && <span className={styles.authorSep}> </span>} | ||
| {a.url ? ( | ||
| <a href={a.url} target="_blank" rel="noopener" className={styles.authorLink}>{a.name}</a> |
There was a problem hiding this comment.
noreferrer on author external links
rel="noopener" alone doesn't suppress the Referer header. For links that open in a new tab, the recommendation is rel="noopener noreferrer" to also prevent the destination from receiving the referrer URL.
| <a href={a.url} target="_blank" rel="noopener" className={styles.authorLink}>{a.name}</a> | |
| <a href={a.url} target="_blank" rel="noopener noreferrer" className={styles.authorLink}>{a.name}</a> |
…-with-redis-post blog: restyle docs.litellm.ai/blog to engineering blog aesthetic
3 participants
Relevant issues
None
What
Restyled the LiteLLM docs blog (
/blog) to match a clean engineering blog aesthetic (similar to builders blog).Blog list page (
/blog):Blog post pages:
.blog-post-page aside.colBlogPostPagecomponentNew post:
blog/redis_circuit_breaker/— "Making the AI Gateway Resilient to Redis Failures"Pre-Submission checklist
Type
Changes
docs/my-website/src/css/custom.css— blog sidebar hide + prose overridesdocs/my-website/src/theme/BlogListPage/index.js— full restyledocs/my-website/src/theme/BlogListPage/styles.module.css— new stylesdocs/my-website/src/theme/BlogPostPage/index.js— new swizzledocs/my-website/src/theme/BlogPostPage/styles.module.css— CTA stylesdocs/my-website/blog/redis_circuit_breaker/index.md— new postdocs/my-website/blog/redis_circuit_breaker/diagrams.js— React diagram components