From 0b46769d085beb773b28c8a5496d21e1ead8d092 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Mon, 22 Dec 2025 17:51:19 +0300 Subject: [PATCH 1/7] Initial work on tabbed code blocks component and unified pipeline --- @types/svg.d.ts | 5 + _TODO.md | 96 ++---- package-lock.json | 217 ++++++-------- package.json | 12 +- src/components/Code/CodeBlock/client/index.ts | 11 + src/components/Code/CodeBlock/index.astro | 12 + src/components/Code/CodeTabs/client/index.ts | 149 ++++++++++ src/components/Code/CodeTabs/index.astro | 12 + src/content/articles/demo/index.mdx | 87 +++++- src/layouts/MarkdownLayout.astro | 4 + src/lib/config/markdown.ts | 24 +- src/lib/markdown/__tests__/coverage.spec.ts | 3 + .../fixtures/rehype-code-tabs.fixture.astro | 10 + .../fixtures/remark-code-tabs.fixture.astro | 6 + .../__tests__/e2e/rehype-code-tabs.spec.tsx | 28 ++ .../__tests__/e2e/rehype-shiki.spec.tsx | 25 ++ .../__tests__/e2e/remark-code-tabs.spec.tsx | 19 ++ .../rehype-code-tabs-astro.spec.ts | 22 ++ .../integration/rehype-shiki-astro.spec.ts | 23 ++ .../remark-code-tabs-astro.spec.ts | 13 + .../rehype-code-tabs/__tests__/index.spec.ts | 156 ++++++++++ .../plugins/rehype-code-tabs/index.ts | 151 ++++++++++ .../rehype-shiki/__tests__/index.spec.ts | 122 ++++++++ .../markdown/plugins/rehype-shiki/index.ts | 280 ++++++++++++++++++ .../__tests__/{html.spec.ts => index.spec.ts} | 0 ...mark-attribution.spec.ts => index.spec.ts} | 0 .../remark-code-tabs/__tests__/index.spec.ts | 34 +++ .../plugins/remark-code-tabs/index.ts | 52 ++++ src/styles/shiki.css | 16 + 29 files changed, 1384 insertions(+), 205 deletions(-) create mode 100644 src/components/Code/CodeBlock/client/index.ts create mode 100644 src/components/Code/CodeBlock/index.astro create mode 100644 src/components/Code/CodeTabs/client/index.ts create mode 100644 src/components/Code/CodeTabs/index.astro create mode 100644 src/lib/markdown/__tests__/e2e/fixtures/rehype-code-tabs.fixture.astro create mode 100644 src/lib/markdown/__tests__/e2e/fixtures/remark-code-tabs.fixture.astro create mode 100644 src/lib/markdown/__tests__/e2e/rehype-code-tabs.spec.tsx create mode 100644 src/lib/markdown/__tests__/e2e/rehype-shiki.spec.tsx create mode 100644 src/lib/markdown/__tests__/e2e/remark-code-tabs.spec.tsx create mode 100644 src/lib/markdown/__tests__/integration/rehype-code-tabs-astro.spec.ts create mode 100644 src/lib/markdown/__tests__/integration/rehype-shiki-astro.spec.ts create mode 100644 src/lib/markdown/__tests__/integration/remark-code-tabs-astro.spec.ts create mode 100644 src/lib/markdown/plugins/rehype-code-tabs/__tests__/index.spec.ts create mode 100644 src/lib/markdown/plugins/rehype-code-tabs/index.ts create mode 100644 src/lib/markdown/plugins/rehype-shiki/__tests__/index.spec.ts create mode 100644 src/lib/markdown/plugins/rehype-shiki/index.ts rename src/lib/markdown/plugins/rehype-tailwind/__tests__/{html.spec.ts => index.spec.ts} (100%) rename src/lib/markdown/plugins/remark-attribution/__tests__/{remark-attribution.spec.ts => index.spec.ts} (100%) create mode 100644 src/lib/markdown/plugins/remark-code-tabs/__tests__/index.spec.ts create mode 100644 src/lib/markdown/plugins/remark-code-tabs/index.ts diff --git a/@types/svg.d.ts b/@types/svg.d.ts index 08d7b822c..6c9805a87 100644 --- a/@types/svg.d.ts +++ b/@types/svg.d.ts @@ -2,3 +2,8 @@ declare module '*.svg' { const content: unknown export default content } + +declare module '*.svg?raw' { + const content: string + export default content +} diff --git a/_TODO.md b/_TODO.md index 91c8ccca7..65d851bc9 100644 --- a/_TODO.md +++ b/_TODO.md @@ -107,14 +107,9 @@ cat.structure: Rules related to the document's overall structure, like the prope cat.tables: Rules for data tables, including headers and associations. cat.text-alternatives: Rules for ensuring that text alternatives are provided for non-text content, such as images. -## Set up webmentions - -Needs to add real API key and test +## Performance -- Get API token from webmention.io -- Add WEBMENTION_IO_TOKEN to .env -- (Optional) Set up Bridgy for social media -- Test with sample webmentions +Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md ## Prefetch Links @@ -149,13 +144,9 @@ You can then opt-out of prefetching for individual links by setting data-astro-p About ``` -## Mobile Social Shares UI - -See the example image in Social Shares. The social shares UI on mobile should be a modal that slides in from the bottom. - -## Performance +## Email Templates -Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md +Right now we're using string literals to define HTML email templates for site mails. We should use Nunjucks with the rule-checking for valid CSS in HTML emails like we have in the corporate email footer repo. ## Analytics @@ -171,9 +162,23 @@ npm i @vercel/analytics import Analytics from '@vercel/analytics/astro' https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app +## Set up webmentions + +Needs to add real API key and test + +- Get API token from webmention.io +- Add WEBMENTION_IO_TOKEN to .env +- (Optional) Set up Bridgy for social media +- Test with sample webmentions + +## Mobile Social Shares UI + +See the example image in Social Shares. The social shares UI on mobile should be a modal that slides in from the bottom. + ## Themepicker tooltips, extra themes -- Add additional themes +- Add additional themes (high contrast) +- Add Carousel - Add tooltip that makes use of the description field for the theme, explaining what the intent of the theme is ## Sentry feedback, chat bot tying into my phone and email @@ -192,18 +197,6 @@ Where to upload to? Add Upstash Search as a Vercel Marketplace Integration. -Lunr is a JS search library using an inverted index. Client-side search for statically hosted pages. - -### [`@jackcarey/astro-lunr`](https://www.npmjs.com/package/@jackcarey/astro-lunr) - -### [`@siverv/astro-lunr`](https://www.npmjs.com/package/@siverv/astro-lunr) - -## Email Templates - -Right now we're using string literals to define HTML email templates for site mails. We should use Nunjucks with the rule-checking for valid CSS in HTML emails like we have in the corporate email footer repo. - -## Astro Components to Add - ### "Add to Calendar" button Google Calendar, Apple Calendar, Yahoo Calender, Microsoft 365, Outlook, and Teams, and generate iCal/ics files (for all other calendars and cases). @@ -211,49 +204,24 @@ Google Calendar, Apple Calendar, Yahoo Calender, Microsoft 365, Outlook, and T `https://github.com/add2cal/add-to-calendar-button` `https://add-to-calendar-button.com/` -## Markdown +### Privacy Policy and Package Release Refactor -## Code Block and Highlighting +Refactor privacy policy and package release integrations to use virtual modules instead of env vars -## Astro includes shiki, tweak config +### Markdown Unit Tests -### Custom version of the code block integration from Astro Docs. "Beautiful code blocks for your Astro site". Applied to the code blocks created in `.mdx` files +Figure out why coverage.spec.ts isn't erroring on no unit tests in these remark / rehype plugins lacking any tests: -[`astro-code-blocks`](https://www.npmjs.com/package/@thewebforge/astro-code-blocks) +remark-mark-plus +remark-custom-blocks +rehype-inline-code-color-swatch +rehype-footnotes-title +### CRON Job Failures -#### Code tabs plugin so Javascript and Typescript examples can both be show. +Error: 505, message='Invalid response status', url='wss://webstack-corporate-preview-webstackdev.aws-us-east-1.turso.io' +Error: Process completed with exit code 1. -There can only be white space between two code blocks. Display name is set by `tabName` and can only contain characters in [A-Za-z0-9_]. Syntax for the first line of the code block is: +### Fix to Featured Pages Carousel -```js [group:tabName] -``` - -`markdown-it-codetabs` - -#### Add copy button to code blocks - -`markdown-it-copy` - -Options for "copy" button added to code blocks - -```javascript -const markdownCodeCopyConfig = { - /** Text shown on copy button */ - btnText: `Copy`, - /** Text shown on copy failure */ - failText: `Copy Failed`, - /** Text shown on copy success */ - successText: `Success!`, // 'copy success' | copy-success text - /** Amount of time to show success message */ - successTextDelay: 2000, - /** An HTML fragment included before