[binzam]

Summary

The generated design.md shown on the design page (/designs/[slug]) contains GFM tables (for example the color palette), but they rendered as a single run of plain text with the pipes and dashes visible. react-markdown only supports core CommonMark, and tables are a GitHub Flavored Markdown extension.

Changes

• Add remark-gfm to enable tables, strikethrough, task lists, and autolink literals
• Style the table elements (table, thead, tbody, tr, th, td) to match the existing card, with a bordered wrapper, a header background, and zebra rows. GFM column alignment (:---:) is preserved.
• Size tables to their content (w-max min-w-full) with a min/max width on cells, so wide tables scroll horizontally inside the wrapper and columns stay readable instead of being squeezed
• Remove the linkifyBareUrls regex helper. remark-gfm autolinks bare URLs natively, and the regex could rewrite URLs inside code blocks and table cells. It also used a lookbehind, which older Safari versions don't support.
• Fix fenced code blocks inheriting the inline-code chip styling (bg/padding) inside <pre>
• Hoist the plugin list and components map to module scope so they keep a stable identity between renders

Screenshots

Before

After

How to see the changes

The preview route and fixture are dev-only, so they are intentionally not part of this PR. To see the fix locally, add the two files below.

1. Check out this branch and run pnpm install.
2. Create lib/mock-design-md.ts with the content below.
3. Create app/dev/markdown-preview/page.tsx with the content below. It returns a 404 in production.
4. Run pnpm dev and open http://localhost:3000/dev/markdown-preview

lib/mock-design-md.ts

/**
 * Fixture for visually testing <PromptMarkdown />.
 * Covers GFM tables (plain, aligned, wide, with inline code and escaped pipes)
 * plus the other elements the component styles.
 */
export const MOCK_DESIGN_MD = `# Design System: Example Portfolio

A polished portfolio with **bold** emphasis, *italic* text, ~~strikethrough~~, inline \`code\`, and a bare URL that should autolink: https://binii.dev

## 1. Color Palette & Roles

| Role | Semantic Name | Value | Usage |
| --- | --- | --- | --- |
| Primary action | Signal Orange | #E59832 | Primary brand accent, CTA emphasis, links, highlights |
| Accent | Signal Orange | #E59832 | Same accent color used consistently across brand elements |
| Surface | Pure White | #FFFFFF | Main page background and card/surface base |
| Text | Midnight Navy | #131132 | Primary headings, body text, and button fill |
| Border | Signal Orange | #E59832 | Button borders and accent outlines |

## 2. Typography Scale (aligned columns)

| Token | Size (px) | Weight |
| :--- | :---: | ---: |
| \`display\` | 64 | 800 |
| \`heading-1\` | 40 | 700 |
| \`heading-2\` | 28 | 700 |
| \`body\` | 16 | 400 |
| \`caption\` | 12 | 500 |

## 3. Wide Table (should scroll horizontally on small screens)

| Component | Variant | Background | Foreground | Border | Radius | Shadow | Hover State | Focus State | Notes |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Button | Primary | #131132 | #FFFFFF | 2px solid #E59832 | 0px | 4px 4px 0 #E59832 | Translate -1px, -1px | 2px offset outline | Used for all primary calls to action across the site |
| Button | Secondary | #FFFFFF | #131132 | 2px solid #131132 | 0px | none | Background #F5F5F5 | 2px offset outline | Used for secondary actions next to a primary button |
| Card | Service | #FFFFFF | #131132 | 1px solid #E5E5E5 | 0px | none | Border #E59832 | n/a | Service and project showcase cards |

## 4. Special Characters in Cells

| Class | Example | Description |
| --- | --- | --- |
| \`rounded-none\` | Cards, buttons | Sharp corners everywhere |
| \`border-[3px]\` | Neo-brutalist card | Escaped pipe: a \\| b |
| \`translate-x-2\` | Offset shadow layer | Link: https://example.com/design |

## 5. Other Elements

- Overall feeling: professional, modern, portfolio-forward
- Visual density: medium
  - Nested item one
  - Nested item two

1. First ordered item
2. Second ordered item

- [x] Completed task
- [ ] Pending task

> Signature motif: orange-on-navy contrast with sharp geometric surfaces.

---

~~~css
:root {
  --color-accent: #e59832;
  --color-ink: #131132;
}
~~~
`;

app/dev/markdown-preview/page.tsx

import { notFound } from "next/navigation";
import { PromptMarkdown } from "@/components/prompt-markdown";
import { MOCK_DESIGN_MD } from "@/lib/mock-design-md";

export default function MarkdownPreviewPage() {
  if (process.env.NODE_ENV === "production") {
    notFound();
  }

  return (
    <main className="mx-auto w-full max-w-2xl px-4 py-12">
      <div className="overflow-auto rounded-lg border border-zinc-200 bg-white p-4 text-sm leading-relaxed text-zinc-800">
        <PromptMarkdown>{MOCK_DESIGN_MD}</PromptMarkdown>
      </div>
    </main>
  );
}

What to check

• The color palette renders as a real table with a header row, borders, and zebra rows
• Section 2 shows left, centered, and right-aligned columns
• Section 3 scrolls horizontally inside its own container (narrow the browser window), and its columns aren't squeezed
• Bare URLs are clickable and open in a new tab
• The fenced CSS block has no extra chip padding on its inner code, and inline code keeps the chip style
• Headings, lists, task lists, and blockquotes still look right

You can also open any existing /designs/<slug> page whose design.md contains a table, and the prompt view in the reverse flow, which uses the same component.

When you're done, remove the test files with rm -r app/dev lib/mock-design-md.ts.

Notes

• New dependency: remark-gfm (added to package.json)
• pnpm-lock.yaml is intentionally not included. Regenerating it produced a lot of unrelated churn, so please run pnpm install to update it for the new dependency.
• PromptMarkdown is also used by the prompt view in components/website-reverse-page.tsx, so tables and native autolinking apply there too
• No changes to the page components or readWebsiteReverse
• GFM requires each table row on its own line with a blank line before the table, so if a cached design_md still renders as plain text, check how the generator emits newlines

[vercel]

@binzam is attempting to deploy a commit to the filiksyos' projects Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Your trial has ended. Reactivate Greptile to resume code reviews.