Remove remark-youtube plugin, now handled by social embeds component

Author: webstackdev

package-lock.json

@@ -199,7 +199,6 @@
     "remark-stringify": "^11.0.0",
     "remark-supersub": "^1.0.0",
     "remark-video": "^0.10.0",
-    "remark-youtube": "^1.3.3",
     "resend": "^6.7.0",
     "retext": "^9.0.0",
     "retext-smartypants": "^6.2.0",

package.json

@@ -443,18 +443,6 @@ Embed videos in HTML5 markup that are in the `/public` folder
 /videos/sample-video-1.mp4
 :::
 
-### remark-youtube
-
-```markdown
-[Example Video 1](https://youtu.be/enTFE2c68FQ)
-
-[Example Video 2](https://www.youtube.com/watch?v=enTFE2c68FQ)
-```
-
-[Example Video 1](https://youtu.be/enTFE2c68FQ)
-
-[Example Video 2](https://www.youtube.com/watch?v=enTFE2c68FQ)
-
 ## Components
 
 ### Includes from [other Markdown]('/articles/demo') files

src/content/articles/demo/index.mdx

@@ -81,12 +81,6 @@ Inline `attr-code`[[.attr-code data-qa="remark-attr-code"]] should have attribut
 /videos/sample-video-1.mp4
 :::
 
-## YouTube (remark-youtube)
-
-[Example Youtube Video 1](https://youtu.be/enTFE2c68FQ)
-
-[Example Youtube Video 2](https://www.youtube.com/watch?v=enTFE2c68FQ)
-
 ## Supersub (remark-supersub)
 
 Subscript: a~i~

src/content/test-fixtures/markdown/index.mdx

@@ -85,9 +85,6 @@ Object.defineProperty(remarkDirective, 'name', { value: 'remarkDirective' })
 import remarkVideo, { type Config as RemarkVideoConfig } from 'remark-video'
 Object.defineProperty(remarkVideo, 'name', { value: 'remarkVideo' })
 
-import remarkYoutube from 'remark-youtube'
-Object.defineProperty(remarkYoutube, 'name', { value: 'remarkYoutube' })
-
 import remarkMarkPlus from '../markdown/plugins/remark-mark-plus'
 Object.defineProperty(remarkMarkPlus, 'name', { value: 'remarkMarkPlus' })
 
@@ -403,8 +400,6 @@ export const markdownConfig: Partial<MdxOptions> = {
      * Converts: -->, <--, <=>, 1/2, 2 x 4, +-, etc.
      */
     remarkReplacements,
-    /** Convert YouTube URLs into embedded iframes */
-    remarkYoutube,
     /** Smart quotes, dashes, and ellipsis */
     [remarkSmartypants, remarkSmartypantsConfig],
   ],

src/lib/config/markdown.ts

@@ -61,6 +61,17 @@ This is a paragraph with some text.
 - List item two
 - List item three
 
+## Horizontal rule
+
+---
+
+## Table
+
+| Col A | Col B |
+| --- | --- |
+| A1 | B1 |
+| A2 | B2 |
+
 ## Code
 
 Here is some \`inline code\`.
@@ -130,6 +141,31 @@ describe('Layer 3: E2E - rehypeTailwindClasses', () => {
     expect(link?.getAttribute('href')).toBe('https://example.com')
   })
 
+  it('should add Tailwind classes to horizontal rules', () => {
+    const { container } = render(<MarkdownOutput html={html} />)
+
+    const hr = container.querySelector('hr')
+    expectHasAtLeastOneValidClassAttribute(hr)
+  })
+
+  it('should add Tailwind classes to tables (table/th/td)', () => {
+    const { container } = render(<MarkdownOutput html={html} />)
+
+    const table = container.querySelector('table')
+    expectHasAtLeastOneValidClassAttribute(table)
+
+    const header = container.querySelector('th')
+    expectHasAtLeastOneValidClassAttribute(header)
+
+    const cell = container.querySelector('td')
+    expectHasAtLeastOneValidClassAttribute(cell)
+
+    // Ensure table structure and content remain intact.
+    expect(container.textContent).toContain('Col A')
+    expect(container.textContent).toContain('A1')
+    expect(container.textContent).toContain('B2')
+  })
+
   it('should not emit malformed class tokens anywhere', () => {
     const { container } = render(<MarkdownOutput html={html} />)
     const withClass = Array.from(container.querySelectorAll('[class]'))

src/lib/markdown/__tests__/e2e/rehype-tailwind-classes.spec.tsx

@@ -1,7 +1,39 @@
 import { describe, it, expect } from 'vitest'
+import { JSDOM } from 'jsdom'
 import { rehypeTailwindClasses } from '@lib/markdown/plugins/rehype-tailwind'
 import { processWithAstroSettings, processWithFullPipeline } from '@lib/markdown/helpers/processors'
 
+function splitClassTokens(value: string | null): string[] {
+  if (!value) return []
+  return value
+    .split(/\s+/g)
+    .map(token => token.trim())
+    .filter(Boolean)
+}
+
+function isWellFormedCssClassToken(token: string): boolean {
+  if (!token) return false
+  if (/[\s"'`{};]/.test(token)) return false
+
+  for (const char of token) {
+    const code = char.charCodeAt(0)
+    if (code <= 0x1f || code === 0x7f) return false
+  }
+
+  return true
+}
+
+function expectHasAtLeastOneValidClassAttribute(element: Element | null, name: string): void {
+  if (!element) throw new Error(`Expected to find element: ${name}`)
+
+  const classAttr = element.getAttribute('class')
+  const tokens = splitClassTokens(classAttr)
+  expect(tokens.length).toBeGreaterThan(0)
+  tokens.forEach(token => {
+    expect(isWellFormedCssClassToken(token)).toBe(true)
+  })
+}
+
 describe('rehype-tailwind-classes (Layer 2: With Astro Pipeline)', () => {
   describe('Tailwind classes with GFM', () => {
     it('should add classes to GFM tables', async () => {
@@ -134,8 +166,12 @@ const x = 1;
       expect(html).toContain('<table')
       expect(html).toContain('<code')
       expect(html).toContain('<blockquote')
-      expect(html).toContain('border-l-4')
       expect(html).toContain('<ul')
+
+      const document = new JSDOM(html).window.document
+      expectHasAtLeastOneValidClassAttribute(document.querySelector('blockquote'), 'blockquote')
+      expectHasAtLeastOneValidClassAttribute(document.querySelector('table'), 'table')
+      expectHasAtLeastOneValidClassAttribute(document.querySelector('pre'), 'pre')
     })
 
     it('should preserve existing classes through pipeline', async () => {