Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Bump marked, move most HTML transforms into it #1205

Merged
merged 5 commits into from
Dec 8, 2024

Conversation

rschristian
Copy link
Member

@rschristian rschristian commented Dec 7, 2024

Not quite as clean as I'd like but it's an improvement.

Nearly all HTML transforms (like adding target="_blank" to external links or fragment links to headings) are now handled by marked at build time rather than preact-markup at runtime. Shouldn't be noticeable difference in terms of bundle or perf, but will be slightly better for the latter in theory.

HTML in markdown is the one hair in the soup though, as marked will not handle it. We only make use of it on the home page really, not sure if we can refactor that to avoid this. As such, had to update some of the /index.md documents to add decoding="async" to them, as preact-markup no longer will, and we'll need to keep around the HTML parser-based highlighting for those code blocks/demos at the very bottom of the home page.

Comment on lines -10 to -14
<center>
<a href="https://saucelabs.com/u/preact">
<img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browserlist">
</a>
</center>
Copy link
Member Author

Choose a reason for hiding this comment

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

The saucelabs link is dead & has been for ages. Removed it

<img src="/pwa-guide/timeline.jpg" alt="Eine DevTools-Zeitleisten-Trace der preactjs.com-Seite auf einem Nexus 5X"/>
![Eine DevTools-Zeitleisten-Trace der preactjs.com-Seite auf einem Nexus 5X](/pwa-guide/timeline.jpg)
Copy link
Member Author

Choose a reason for hiding this comment

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

Simply an unnecessary use of HTML when normal markdown would do & is preferable

<img src="/home/metal.svg" alt="metal">
<img src="/home/metal.svg" alt="metal" loading="lazy" decoding="async" width="54" height="54">
Copy link
Member Author

Choose a reason for hiding this comment

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

decoding="async" is the only real addition here, lazy & the sizes have been added to the English doc ages ago but hasn't quite made it to all the translations. Figured I'd fix it now.

Comment on lines -117 to -122
/*
* Many markdown formatters can generate the table of contents
* automatically. To skip a specific heading the use an html
* comment at the end of it. Example:
*
* ## Some random title <!-- omit in toc -->
Copy link
Member Author

Choose a reason for hiding this comment

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

We've never made use of this, and I don't imagine we will anytime soon

@@ -1,10 +0,0 @@
import marked from 'marked';
Copy link
Member Author

Choose a reason for hiding this comment

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

Leftover, long-since unused.

Copy link
Member

@marvinhagemeister marvinhagemeister 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 really great! I'm a big fan of doing those transformations as early as possible in the pipeline. Great work!

@rschristian rschristian merged commit c1d7c57 into master Dec 8, 2024
5 checks passed
@rschristian rschristian deleted the refactor/bump-marked branch December 8, 2024 03:09
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.

2 participants