Conversation
**LaTeX Rendering Fixes:** - Add KaTeX CDN fallback to ensure CSS loads on GitHub Pages - Configure rehype-katex with error-tolerant settings (strict: false, throwOnError: false) - Reorder CSS imports (KaTeX before globals) to allow overrides - Add explicit .katex-display styling for proper spacing and centering **Typography & Readability Improvements:** - Increase base font size to 18px with line-height 1.75 - Enhance prose configuration with better spacing and hierarchy - Improve heading styles with proper weights, spacing, and borders - Remove backticks from inline code styling for cleaner appearance **Layout Enhancements:** - Add subtle background gradient (slate-50 to slate-100) - Increase article max-width from 4xl to 5xl for wider reading area - Add white background with shadow to article for visual depth - Improve sidebar design with gradient background - Enhance responsive padding and spacing **Content Styling:** - Professional dark-themed code blocks with syntax highlighting support - Enhanced blockquotes with gradient backgrounds and border accents - Better list spacing and visual hierarchy - Improved table, link, image, and horizontal rule styling - Clear visual separation between content sections **Audit Header Redesign:** - Larger, bolder title (text-5xl, extrabold) for better hierarchy - Enhanced tag styling with borders and improved colors - Add author section with icon - Add bottom border to separate header from content - Improve banner designs for review/staging modes with icons This addresses double-rendering issues on GitHub Pages and significantly improves readability and visual appeal of audit pages. Fixes: LaTeX rendering twice (raw + formatted) Improves: Overall page aesthetics, typography, spacing, and user experience
There was a problem hiding this comment.
Pull request overview
Adds a new Manipulation technical audit (staging) and updates MDX rendering/styling (including KaTeX + prose typography) to improve audit readability, alongside a small staging deploy workflow tweak.
Changes:
- Add new staging audit MDX content for “Manipulation: A technical audit”.
- Update prose/typography styling and KaTeX display handling (Tailwind typography + global CSS).
- Adjust audit page rendering (banner/header styling, KaTeX rehype options) and staging deploy host.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
tailwind.config.ts |
Extends typography defaults for prose content (links, headings, code, KaTeX display spacing). |
content/textbook/audits/staging/jdvakil_yi_shiuan_tung.mdx |
Adds the new manipulation audit content (with math/KaTeX). |
components/KatexStyles.tsx |
Introduces a client-side KaTeX CSS injector via CDN. |
app/textbook/audits/[...slug]/page.tsx |
Updates audit page layout/styling and configures KaTeX rendering options. |
app/layout.tsx |
Reorders KaTeX CSS import ahead of globals.css. |
app/globals.css |
Adds global prose + KaTeX styling rules. |
.github/workflows/deploy-staging.yml |
Updates staging deploy SSH host. |
.continueignore |
Adds ignore patterns for Continue tooling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| 1. Compute quantiles: $q_{0.01}, q_{0.99}$ | ||
| 2. Uniformly divide: $\Delta_d = \frac{q_{0.99} - q_{0.01}}{256}$ | ||
| 3. Map continuous action to bin: $\hat{a}_d = \left\lfloor \frac{a_d - q*{0.01}}{\Delta_d} \right\rfloor$ |
There was a problem hiding this comment.
LaTeX typo in the binning formula: q*{0.01} looks like it should be q_{0.01} (matching the quantile notation used just above). As written, KaTeX will render an unexpected q* term.
| 3. Map continuous action to bin: $\hat{a}_d = \left\lfloor \frac{a_d - q*{0.01}}{\Delta_d} \right\rfloor$ | |
| 3. Map continuous action to bin: $\hat{a}_d = \left\lfloor \frac{a_d - q_{0.01}}{\Delta_d} \right\rfloor$ |
| <AuditLayout | ||
| chapters={chapters} | ||
| isReviewMode={isReviewMode} | ||
| prNumber={prNumber} | ||
| > |
There was a problem hiding this comment.
AuditLayout is being called with isReviewMode and prNumber props, but components/audit/AuditLayout.tsx currently defines AuditLayoutProps with only children and chapters. This will fail type-checking/build unless the layout component (and its props interface) is updated to accept these new props, or the extra props are removed here.
| prNumber={prNumber} | ||
| > | ||
| <KatexStyles /> | ||
| <Link href="/textbook/audits" className="text-sm text-blue-600 hover:text-blue-800 mb-8 inline-block"> |
There was a problem hiding this comment.
<KatexStyles /> injects a CDN stylesheet at runtime, but KaTeX CSS is already imported globally in app/layout.tsx. Since Next's bundled CSS won’t match link[href*="katex"], this effect will still append an extra external stylesheet, adding an unnecessary network request and potentially overriding local CSS unexpectedly. Consider removing KatexStyles (preferred) and relying on the bundled KaTeX CSS, or make stylesheet loading consistent in a single place.
| [rehypeKatex, { | ||
| strict: false, // Don't fail on unknown LaTeX commands | ||
| trust: true, // Allow some advanced LaTeX features | ||
| throwOnError: false, // Gracefully handle errors | ||
| }] |
There was a problem hiding this comment.
rehype-katex is configured with trust: true. For KaTeX this enables “trusted” commands (e.g., HTML/URL-related macros) and can open the door to XSS if any MDX content is ever untrusted (student submissions / PR content). Unless you have a strong reason + additional sanitization, keep trust disabled (default) and allow only the subset of macros you need.
| import { useEffect } from 'react'; | ||
|
|
||
| export function KatexStyles() { | ||
| useEffect(() => { | ||
| // Ensure KaTeX CSS is loaded | ||
| const link = document.createElement('link'); | ||
| link.rel = 'stylesheet'; | ||
| link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css'; | ||
| link.integrity = 'sha384-yp+jpRNKIa0xGrYaVtwImDXkFq7ZOCV5kJZVDg/uAFfYPmtFcKr0sxhVJy1HqnWD'; | ||
| link.crossOrigin = 'anonymous'; | ||
|
|
||
| // Check if already loaded | ||
| const existing = document.querySelector('link[href*="katex"]'); | ||
| if (!existing) { | ||
| document.head.appendChild(link); | ||
| } | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
This component injects KaTeX CSS from a third-party CDN at runtime. The app already imports katex/dist/katex.min.css in app/layout.tsx, and the current existing check won’t detect Next’s bundled CSS link, so you’ll likely end up loading KaTeX twice. Prefer a single, build-time import (or a single <link> in the document head) to avoid extra requests and reliance on an external CDN.
| import { useEffect } from 'react'; | |
| export function KatexStyles() { | |
| useEffect(() => { | |
| // Ensure KaTeX CSS is loaded | |
| const link = document.createElement('link'); | |
| link.rel = 'stylesheet'; | |
| link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css'; | |
| link.integrity = 'sha384-yp+jpRNKIa0xGrYaVtwImDXkFq7ZOCV5kJZVDg/uAFfYPmtFcKr0sxhVJy1HqnWD'; | |
| link.crossOrigin = 'anonymous'; | |
| // Check if already loaded | |
| const existing = document.querySelector('link[href*="katex"]'); | |
| if (!existing) { | |
| document.head.appendChild(link); | |
| } | |
| }, []); | |
| export function KatexStyles() { | |
| // KaTeX styles are loaded via a build-time import in app/layout.tsx. | |
| // This component is kept for compatibility but no longer injects CSS at runtime. |
|
|
||
| /* Prevent double-rendering by hiding any raw LaTeX that might leak through */ | ||
| .katex-html { | ||
| /* KaTeX should render, not raw LaTeX */ |
There was a problem hiding this comment.
.katex-html has an empty rule block, but the comment suggests it prevents “double-rendering” / hides raw LaTeX. As written it has no effect and is confusing for future maintainers. Either remove this selector/comment or add the actual styles needed to address the issue you observed.
| /* KaTeX should render, not raw LaTeX */ | |
| /* KaTeX should render, not raw LaTeX, so hide the underlying HTML/LaTeX layer */ | |
| display: none; |
| // Ensure math displays properly | ||
| '.katex-display': { | ||
| margin: '1.5rem 0', | ||
| padding: '1.5rem 0', | ||
| }, |
There was a problem hiding this comment.
.katex-display spacing is defined here inside the typography theme, but very similar .katex-display styling is also added globally in app/globals.css. Keeping the same styles in two places is easy to let drift and makes it unclear which source of truth to edit. Consider consolidating KaTeX display styling into either the typography config or globals (not both).
| // Ensure math displays properly | |
| '.katex-display': { | |
| margin: '1.5rem 0', | |
| padding: '1.5rem 0', | |
| }, |
|
|
||
| ## Summary | ||
|
|
||
| Trained on 800k trajectories from the Open X-Embodiment dataset. Octo can be effectively finetuned to new observations and action spaces. Released model checkpoints with 27M and 93M parameters, out of the box, support multiple RGB camera inputs as well as both language and goal image task specificiation. |
There was a problem hiding this comment.
Typo in the summary: “task specificiation” should be “task specification”.
| Trained on 800k trajectories from the Open X-Embodiment dataset. Octo can be effectively finetuned to new observations and action spaces. Released model checkpoints with 27M and 93M parameters, out of the box, support multiple RGB camera inputs as well as both language and goal image task specificiation. | |
| Trained on 800k trajectories from the Open X-Embodiment dataset. Octo can be effectively finetuned to new observations and action spaces. Released model checkpoints with 27M and 93M parameters, out of the box, support multiple RGB camera inputs as well as both language and goal image task specification. |
No description provided.