Skip to content

Add tip/note formatting to astro markdown (and lots of other plugins)#530

Merged
stasadev merged 13 commits intoddev:mainfrom
rfay:20260203_markdown_tips
Feb 6, 2026
Merged

Add tip/note formatting to astro markdown (and lots of other plugins)#530
stasadev merged 13 commits intoddev:mainfrom
rfay:20260203_markdown_tips

Conversation

@rfay
Copy link
Member

@rfay rfay commented Feb 4, 2026

The Issue

I wanted to add a "tip" like we do in docs.ddev.com, for my sharing blog

How This PR Solves The Issue

Adds plugin to do that

Then added a bunch of other plugins

Manual Testing Instructions

Experiment with it.

I imagine people will want some other theming.

The only edit I added was one that doesn't reallyl add value to the v1.25.0 blog, but I wanted to have a way to show it. We can remove it.

Automated Testing Overview

Related Issue Link(s)

Release/Deployment Notes

@rfay rfay requested review from mattstein and stasadev February 4, 2026 04:30
@github-actions
Copy link

github-actions bot commented Feb 4, 2026

🌐 Fork Preview for PR #530

https://pr-530.ddev-com-fork-previews.pages.dev

This preview updates automatically when you push changes to your fork.

Copy link
Contributor

@tyler36 tyler36 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.

I added a suggestion and "Request changes" to track the removal of the tip.

@rfay
Copy link
Member Author

rfay commented Feb 4, 2026

I got claude to add several more features since we were here, lots of goodies.

New Markdown Plugins:

  • remark-gfm - Tables, strikethrough, task lists, autolinks
  • rehype-external-links - Auto-adds target="_blank" and security attributes to external links
  • rehype-figure - Wraps images in with captions from alt text
  • rehype-accessible-emojis - Screen reader labels for emojis
  • remark-toc - Auto-generates table of contents
  • remark-unwrap-images - Cleaner image styling

Updated Documentation:

  • Expanded MARKDOWN_FORMATTING.md with new feature docs and examples
  • Added markdown resources to contributing guide

@rfay rfay requested a review from tyler36 February 4, 2026 16:08
@rfay rfay changed the title Add tip/note formatting to astro markdown Add tip/note formatting to astro markdown (and lots of other plugins) Feb 4, 2026
Copy link
Member

@stasadev stasadev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great reference example and a perfect test to verify if npm update has broken any logic!

Comment on lines 380 to 407
:::danger[Production Deployment Checklist]
Before deploying to production, verify:

1. **Environment Configuration**

```bash
# Check environment variables
ddev exec printenv
```

2. **Database Backup**
:::warning
Always create a backup before deployment!
:::

3. **Run Tests**

```bash
ddev exec phpunit
ddev exec npm test
```

4. **Build Assets**
- Compile CSS and JavaScript
- Optimize images
- Clear caches

For more information, see the [deployment guide](https://docs.ddev.com/en/stable/users/topics/deploy/) or ask in [DDEV Discord](/s/discord).
:::
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one didn't work, because :::danger was closed after :::warning was closed with ::: in 2.

- Optimize images
- Clear caches

For more information, see the [deployment guide](https://docs.ddev.com/en/stable/users/topics/deploy/) or ask in [DDEV Discord](/s/discord).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Images are automatically wrapped in semantic HTML `<figure>` elements with captions:

```markdown
![Descriptive alt text](/img/blog/my-image.jpg)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs some real image.


```html
<figure>
<img src="/img/blog/my-image.jpg" alt="Descriptive alt text" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here.

@stasadev stasadev self-requested a review February 5, 2026 13:30
@rfay
Copy link
Member Author

rfay commented Feb 6, 2026

Please take another look @stasadev

If there aren't reasons to object to this maybe we can get it in.

@rfay rfay force-pushed the 20260203_markdown_tips branch from 4eccee9 to 373de9e Compare February 6, 2026 18:10
rfay and others added 9 commits February 6, 2026 22:44
Installed and configured markdown enhancement plugins:
- remark-gfm: GitHub Flavored Markdown (tables, strikethrough, task lists, autolinks)
- remark-unwrap-images: Removes paragraph wrappers from images
- remark-toc: Automatic table of contents generation
- rehype-external-links: Auto-adds target="_blank" and security attributes
- rehype-figure: Wraps images in semantic figure elements with captions
- rehype-accessible-emojis: Adds screen reader labels to emojis

Created comprehensive demo blog post at /blog/markdown-features-demo showcasing
all available markdown features. Updated MARKDOWN_FORMATTING.md with complete
documentation and examples. Added markdown resources to contributing guide.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added textlint-disable comments around task list examples to prevent
false positives from the no-todo rule. Updated documentation to show
the correct pattern for using task lists.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@stasadev stasadev force-pushed the 20260203_markdown_tips branch from 373de9e to 91fe882 Compare February 6, 2026 20:44
Copy link
Member

@stasadev stasadev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

@stasadev stasadev merged commit 1c66b54 into ddev:main Feb 6, 2026
6 of 7 checks passed
@github-actions
Copy link

github-actions bot commented Feb 6, 2026

PR closed. The Cloudflare Pages preview is no longer updated.

@stasadev stasadev deleted the 20260203_markdown_tips branch February 6, 2026 21:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants