Update remark-attributes to use [[.some-class #my-id arbitrary=attribute]] syntax instead of {...} syntax that conflicts with Astro's embedded JS code feature in Astro templates

Author: webstackdev

_TODO.md

@@ -235,28 +235,17 @@ You can then opt-out of prefetching for individual links by setting data-astro-p
 
 - color tabs like GFM when using HEX, RGB, or HSL values in backticks. This should generate a callout box around the hex color with a dot to the right showing the color.
 
-- Astro also includes shiki
-
-- We're adding 'rehype-autolink-headings', but Astro does too: https://docs.astro.build/en/guides/markdown-content/#heading-ids-and-plugins
-
-- `remark-attributes` does not work because `{...}` in MDX embeds dynamic JavaScript logic or JSX components directly within Markdown content
+The background color is `#ffffff`
 
-Must define escaping rules (what if the content legitimately includes `[[...]]`), and whether .md, .mdx, or both:
+<code class="bg-gray-100 rounded border border-gray-300 inline-block font-mono text-xs mx-1 px-2 py-1">#ffffff</code>
 
-```markdown
-### Heading [[.my-class #my-id]]
-![Image](url) [[width=300 .centered]]
-[Link](url) [[.btn target=_blank]]
+- Astro also includes shiki
 
-### Heading[[.my-class #my-id]]
-![Image](url)[[width=300 .centered]]
-[Link](url)[[.btn target=_blank]]
-```
+- We're adding 'rehype-autolink-headings', but Astro does too: https://docs.astro.build/en/guides/markdown-content/#heading-ids-and-plugins
 
 ### Youtube embedding
 
-- `rehype-video` for self-hosted videos, you have to pass the video filename into the unified `process()` pipeline along with the plugin
-- `@hongvanpc10/rehype-embed` works the same way - you have to pass the Youtube link into the config to be processed
+- `remark-video`
 
 
 

src/content/articles/demo/index.mdx

@@ -583,16 +583,17 @@ Block elements can be wrapped with their own tags to apply `flex flex-col items-
 
 ### remark-attributes
 
-@TODO: DOES NOT WORK
-
-Add HTML attributes to any Markdown element using curly brace syntax:
+Add HTML attributes to supported Markdown elements using a MDX-safe doubled-square-bracket postfix syntax:
 
 ```markdown
-### Heading {.my-class #my-id}
-![Image](url){width=300 .centered}
-[Link](url){.btn target=_blank}
+### Heading [[.my-class #my-id]]
+![Image](/assets/images/shiprock.svg) [[width=300 .centered]]
+[Link](url) [[.btn target=_blank]]
 ```
 
+![Image](/assets/images/shiprock.svg) [[width=300 .centered]]
+[Link Example](/remark-attributes) [[.btn target=_blank]]
+
 ### remark-attribution
 
 The plugin allows to provide an attribution for a quotation:

src/lib/markdown/__fixtures__/attributes.md

@@ -2,8 +2,8 @@
 title: Attributes Test
 ---
 
-# Heading with Class{.custom-heading}
+# Heading with Class[[.custom-heading]]
 
-This is a paragraph with a [link with class](https://example.com){.custom-link}.
+This is a paragraph with a [link with class](https://example.com)[[.custom-link]].
 
-Inline `code with class`{.custom-code} should work too.
+Inline `code with class`[[.custom-code]] should work too.

src/lib/markdown/__fixtures__/full-pipeline.md

@@ -12,7 +12,7 @@ The HTML and CSS specifications work together.
 
 ## Attributes
 
-[This link has a class](https://example.com){.custom-link}
+[This link has a class](https://example.com)[[.custom-link]]
 
 ## Attribution
 

src/lib/markdown/__tests__/integration/remark-attributes-astro.spec.ts

@@ -10,7 +10,7 @@ describe('remark-attributes (Layer 2: With Astro Pipeline)', () => {
     // To add attributes to tables, they must be in a separate paragraph.
 
     it('should work with GFM strikethrough', async () => {
-      const markdown = '[~~deleted text~~]{.highlight}'
+      const markdown = '[~~deleted text~~][[.highlight]]'
 
       const html = await processWithAstroSettings({
         markdown,
@@ -24,7 +24,7 @@ describe('remark-attributes (Layer 2: With Astro Pipeline)', () => {
 
     it('should work with GFM task lists', async () => {
       const markdown = `
-- [ ] Task 1{.todo-item}
+    - [ ] Task 1[[.todo-item]]
 - [x] Task 2
       `.trim()
 
@@ -42,7 +42,7 @@ describe('remark-attributes (Layer 2: With Astro Pipeline)', () => {
   describe('attributes with Astro footnote settings', () => {
     it('should add attributes to footnote references', async () => {
       const markdown = `
-Text with footnote[^1]{.footnote-ref}.
+    Text with footnote[^1][[.footnote-ref]].
 
 [^1]: Footnote content
       `.trim()
@@ -60,7 +60,7 @@ Text with footnote[^1]{.footnote-ref}.
 
   describe('edge cases with Astro settings', () => {
     it('should handle attributes on links with autolinks', async () => {
-      const markdown = '[Visit](https://example.com){.external target=_blank}'
+      const markdown = '[Visit](https://example.com)[[.external target=_blank]]'
 
       const html = await processWithAstroSettings({
         markdown,
@@ -74,7 +74,7 @@ Text with footnote[^1]{.footnote-ref}.
     })
 
     it('should preserve attributes through remarkRehype conversion', async () => {
-      const markdown = '# Heading{.title #main-heading data-level=1}'
+      const markdown = '# Heading[[.title #main-heading data-level=1]]'
 
       const html = await processWithAstroSettings({
         markdown,

src/lib/markdown/plugins/rehype-tailwind/REFACTORING_SUMMARY.md

@@ -5,18 +5,22 @@ This plugin adds support for custom attributes to Markdown syntax.
 For **security reasons**, this plugin uses [html-element-attributes](https://github.com/wooorm/html-element-attributes).
 The use of JavaScript attributes (`onload` for example) is not allowed by default.
 
-## Default Syntax
+## Default Syntax (MDX-safe)
+
+This project uses a doubled-square-bracket postfix marker instead of `{...}` (curly braces are reserved by MDX):
+
+`[[.class #id key=value]]`
 
 ### Images
 
 ~~~markdown
-![alt](img){attrs} / ![alt](img){ height=50 }
+![alt](img)[[attrs]] / ![alt](img)[[ height=50 ]]
 ~~~
 
 ### Links
 
 ~~~markdown
-[rms with a computer](https://rms.sexy){rel="external"}
+[rms with a computer](https://rms.sexy)[[rel="external"]]
 ~~~
 
 ### Autolink
@@ -29,11 +33,11 @@ Email me at : <mailto:falseEmail@example.org>
 
 ~~~markdown
 ### This is a title
-{style="color:red;"}
+[[style="color:red;"]]
 
 or
 
-### This is a title {style="color:yellow;"}
+### This is a title [[style="color:yellow;"]]
 
 If option enableAtxHeaderInline is set to `true` (default value).
 ~~~
@@ -43,37 +47,37 @@ If option enableAtxHeaderInline is set to `true` (default value).
 ~~~markdown
 This is a title
 ---------------
-{style="color: pink;"}
+[[style="color: pink;"]]
 ~~~
 
 ### Emphasis
 
 ~~~markdown
-Npm stand for *node*{style="color:red"} packet manager.
+Npm stand for *node*[[style="color:red"]] packet manager.
 ~~~
 
 ### Strong
 
 ~~~markdown
-This is a **Unicorn**{awesome} !
+This is a **Unicorn**[[awesome]] !
 ~~~
 
 ### Delete
 
 ~~~markdown
-Your problem is ~~at line 18~~{style="color: grey"}. My mistake, it's at line 14.
+Your problem is ~~at line 18~~[[style="color: grey"]]. My mistake, it's at line 14.
 ~~~
 
 ### Code
 
 ~~~markdown
-You can use the `fprintf`{language=c} function to format the output to a file.
+You can use the `fprintf`[[language=c]] function to format the output to a file.
 ~~~
 
 ### Footnote (using [remark-footnotes](https://github.com/remarkjs/remark-footnotes))
 
 ~~~markdown
-This is a footnote[^ref]{style="opacity: 0.8;"}
+This is a footnote[^ref][[style="opacity: 0.8;"]]
 
 
 [^ref]: And the reference.