Fix blog code blocks and add missing cover images (#2255)

* fix(landing-page): paper theme for blog code blocks

Configure Shiki with a custom open-design-editorial theme so fenced
code blocks render on the cream --bone paper with --ink text, matching
the rest of the editorial layout. Astro's default github-dark theme was
inlining background-color:#24292e on every <pre>, producing a slate-
dark slab inside the warm paper page (visible on
/blog/byok-design-workflow-claude-codex-qwen/ and any other post that
ships a fenced block).

Token colors are pulled from the same palette as globals.css (--coral,
--olive, --ink-*) so syntax accents read as part of the brand instead
of as a foreign widget. Belt-and-braces CSS in blog/[slug].astro pins
the <pre.astro-code> background to --bone so a future Shiki upgrade
cannot silently re-introduce the dark slab.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(landing-page): add missing blog cover plates

Add generated editorial plate images for the layout-layer and Figma-plugin blog posts, then wire them into the blog index image map so those cards use real covers instead of fallback placeholders.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: ashley li <ashleyli@ashleydeMacBook-Air-2.local>
Co-authored-by: Cursor <cursoragent@cursor.com>

apps/landing-page/app/pages/blog/[slug].astro

@@ -303,6 +303,18 @@ const fmtDate = (d: Date) =>
         font-size: 13px;
         line-height: 1.55;
       }
+      /*
+       * Astro/Shiki stamps an inline `background-color:#xxx; color:#xxx;`
+       * on `.astro-code` based on the configured theme. We supply a
+       * custom paper theme in `astro.config.ts`, but pin the background
+       * to `--bone` here as a belt-and-braces guard against a theme
+       * upgrade silently re-introducing a slate slab.
+       */
+      .post-body :global(pre.astro-code),
+      .post-body :global(pre.shiki) {
+        background-color: var(--bone) !important;
+        color: var(--ink) !important;
+      }
       .post-body :global(pre code) {
         background: transparent;
         padding: 0;

apps/landing-page/app/pages/blog/index.astro

@@ -62,6 +62,14 @@ const fmtDate = (d: Date) =>
   });
 const categoryValue = (category: string) => category.toLowerCase().replace(/\s+/g, '-');
 const postImages: Record<string, { src: string; alt: string }> = {
+  'layout-layer-canvas-used-to-hide': {
+    src: '/blog/plate-13-layout-layer.png',
+    alt: 'An abstract layout map emerging from a hidden canvas on a warm paper study plate',
+  },
+  'port-figma-workflow-open-design-plugin': {
+    src: '/blog/plate-14-figma-plugin-workflow.png',
+    alt: 'An abstract workflow of frames, connectors, and a plugin module on a warm paper study plate',
+  },
   'open-source-alternative-to-claude-design': {
     src: '/blog/plate-10-crystal-exploded.png',
     alt: 'An editorial plate with black crystal fragments arranged around a red circle',

apps/landing-page/astro.config.ts

@@ -1,8 +1,100 @@
 import sitemap, { type SitemapItem } from '@astrojs/sitemap';
 import { readFileSync, readdirSync } from 'node:fs';
 import { join } from 'node:path';
+import type { AstroUserConfig } from 'astro';
 import { defineConfig } from 'astro/config';
 
+// Pull the Shiki theme shape off Astro's own config typing rather than
+// importing from `shiki` directly — Shiki is a transitive dependency of
+// Astro and not declared in this app's `package.json`. Indexing through
+// `markdown.shikiConfig.theme` keeps the type in lockstep with whichever
+// Shiki major Astro 6 currently bundles.
+type ShikiThemeObject = Exclude<
+  NonNullable<NonNullable<AstroUserConfig['markdown']>['shikiConfig']>['theme'],
+  string | undefined
+>;
+
+// Custom Shiki theme tuned to the Atelier Zero palette in `globals.css`.
+// Without this, Shiki injects inline `background-color:#24292e` (the
+// default `github-dark` theme) on every `<pre>` and overrides our blog
+// CSS, leaving a slate-dark slab in the middle of the cream paper layout.
+// The theme below paints code blocks on `--bone` with `--ink` text, and
+// reuses `--coral`, `--olive`, and `--ink-*` tokens for syntax accents so
+// fenced blocks read as part of the editorial body, not a foreign widget.
+const editorialPaperTheme: ShikiThemeObject = {
+  name: 'open-design-editorial',
+  type: 'light',
+  colors: {
+    'editor.background': '#f7f1de', // --bone
+    'editor.foreground': '#15140f', // --ink
+  },
+  tokenColors: [
+    {
+      scope: ['comment', 'punctuation.definition.comment'],
+      settings: { foreground: '#8b8676', fontStyle: 'italic' }, // --ink-faint
+    },
+    {
+      scope: ['string', 'string.template', 'meta.string', 'string.quoted'],
+      settings: { foreground: '#6e7448' }, // --olive
+    },
+    {
+      scope: [
+        'constant.numeric',
+        'constant.language',
+        'constant.character',
+        'constant.other.symbol',
+      ],
+      settings: { foreground: '#ed6f5c' }, // --coral
+    },
+    {
+      scope: [
+        'keyword',
+        'keyword.control',
+        'keyword.operator.new',
+        'keyword.operator.expression',
+        'storage.type',
+        'storage.modifier',
+      ],
+      settings: { foreground: '#ed6f5c' }, // --coral
+    },
+    {
+      scope: ['entity.name.function', 'support.function', 'meta.function-call'],
+      settings: { foreground: '#15140f', fontStyle: 'bold' }, // --ink
+    },
+    {
+      scope: [
+        'entity.name.class',
+        'entity.name.type',
+        'support.class',
+        'support.type',
+      ],
+      settings: { foreground: '#15140f' }, // --ink
+    },
+    {
+      scope: ['variable', 'variable.parameter', 'support.variable'],
+      settings: { foreground: '#2a2620' }, // --ink-soft
+    },
+    {
+      scope: ['punctuation', 'meta.brace', 'meta.delimiter'],
+      settings: { foreground: '#5a5448' }, // --ink-mute
+    },
+    {
+      scope: ['markup.heading', 'entity.name.section'],
+      settings: { foreground: '#15140f', fontStyle: 'bold' },
+    },
+    { scope: 'markup.bold', settings: { fontStyle: 'bold' } },
+    { scope: 'markup.italic', settings: { fontStyle: 'italic' } },
+    {
+      scope: ['markup.inline.raw', 'markup.fenced_code'],
+      settings: { foreground: '#2a2620' },
+    },
+    {
+      scope: ['variable.other.env', 'meta.environment-variable'],
+      settings: { foreground: '#6e7448' }, // --olive
+    },
+  ],
+};
+
 // Production canonical origin. Used by Astro for `Astro.site`, by
 // `@astrojs/sitemap` for every URL it emits, and by `index.astro` to
 // build the `<link rel="canonical">` / `og:url` tags.
@@ -37,6 +129,19 @@ export default defineConfig({
   srcDir: './app',
   outDir: './out',
   trailingSlash: 'always',
+  markdown: {
+    // Use our paper-toned theme for fenced code blocks. Astro ships
+    // Shiki under the hood and the default theme (`github-dark`)
+    // inlines `background-color:#24292e` on every `<pre>`, which
+    // overrides the cream `--bone` background defined in
+    // `blog/[slug].astro` and produces a dark slab inside the
+    // otherwise warm editorial layout — see the GitHub-dark output
+    // in the prior live build for context.
+    shikiConfig: {
+      theme: editorialPaperTheme,
+      wrap: false,
+    },
+  },
   integrations: [
     sitemap({
       // `/og/` is a screenshot surface for the 1200x630 Open Graph