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

* refactor: Remove broken saucelabs support image * chore: Sync home page images & set `decoding="async"` on them * refactor: Switch unnecessary img tag w/ native markdown image * refactor: Move most HTML transforms into marked
preactjs · Dec 8, 2024 · c1d7c57 · c1d7c57
1 parent 15f2ba8
commit c1d7c57
Show file tree

Hide file tree

Showing 34 changed files with 158 additions and 209 deletions.
diff --git a/content/de/about/browser-support.md b/content/de/about/browser-support.md
@@ -7,12 +7,5 @@ permalink: '/about/browser-support'
 
 Prect unterstützt moderne Browser (Chrome, Firefox, Safari, Edge) und IE9+. Es sollte in IE7 sowie IE8 funktionieren, setzt allerdings einige Polyfiller voraus. Wenn es beabsichtigt ist, Preact zu benutzen und diese älteren Browser zu unterstützen, wird empfohlen, einen Polyfiller wie zum Beispiel [es5-shim] oder [babel-polyfill] zu verwenden.
 
-<center>
-    <a href="https://saucelabs.com/u/preact">
-        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browserlist">
-    </a>
-</center>
-
-
 [es5-shim]: https://github.com/es-shims/es5-shim
 [babel-polyfill]: https://babeljs.io/docs/usage/polyfill/
diff --git a/content/de/guide/v8/progressive-web-apps.md b/content/de/guide/v8/progressive-web-apps.md
@@ -49,7 +49,7 @@ Preact ist eine ausgezeichnete Wahl für [progressive Web Apps](https://web.dev/
 
 In der Tat ist genau diese Website eine Progressive Web App! Hier ist zu sehen, wie die App am Beispiel einer Trace ausgehend von einem Nexus 5X über 3G in unter 5 Sekunden interaktiv wird:
 
-<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)
 
 Statische Seiteninhalte werden in der (Service Worker) Cache Storage API gespeichert, die blitzschnelles Laden bei wiederholten Besuchen ermöglicht.
 

diff --git a/content/de/index.md b/content/de/index.md
@@ -40,7 +40,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/metal.svg" alt="metal">
+  <img src="/home/metal.svg" alt="metal" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Näher am Geschehen</h3>
@@ -56,7 +56,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/size.svg" alt="größe">
+  <img src="/home/size.svg" alt="größe" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Kleine Größe</h3>
@@ -72,7 +72,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/performance.svg" alt="leistung">
+  <img src="/home/performance.svg" alt="leistung" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Große Leistung</h3>
@@ -87,7 +87,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/portable.svg" alt="portabel">
+  <img src="/home/portable.svg" alt="portabel" loading="lazy" decoding="async" width="54" height="54">
   <div>
     <h3>Portabel &amp; Einbettbar</h3>
     <p>
@@ -101,7 +101,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/productive.svg" alt="produktiv">
+  <img src="/home/productive.svg" alt="produktiv" loading="lazy" decoding="async" width="54" height="54">
   <div>
     <h3>Sofort produktiv</h3>
     <p>
@@ -116,7 +116,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/compatible.svg" alt="kompatibel">
+  <img src="/home/compatible.svg" alt="kompatibel" loading="lazy" decoding="async" width="54" height="54">
   <div>
     <h3>Ökosystem-kompatibel</h3>
     <p>

diff --git a/content/en/about/browser-support.md b/content/en/about/browser-support.md
@@ -7,9 +7,3 @@ description: "Preact supports all modern browsers (Chrome, Firefox, Safari, Edge
 # Browser Support
 
 Preact supports modern browsers (Chrome, Firefox, Safari, Edge) and IE11. It works out of the box with these browsers and no additional polyfills are needed.
-
-<center>
-    <a href="https://saucelabs.com/u/preact">
-        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browser List" style="background: #fff">
-    </a>
-</center>
diff --git a/content/en/guide/v8/progressive-web-apps.md b/content/en/guide/v8/progressive-web-apps.md
@@ -49,7 +49,7 @@ Preact is an excellent choice for [Progressive Web Apps](https://web.dev/learn/p
 
 In fact, the site you're on right now is a Progressive Web App!. Here it is getting interactive in under 5 seconds in a trace from a Nexus 5X over 3G:
 
-<img src="/pwa-guide/timeline.jpg" alt="A DevTools Timeline trace of the preactjs.com site on a Nexus 5X"/>
+![A DevTools Timeline trace of the preactjs.com site on a Nexus 5X](/pwa-guide/timeline.jpg)
 
 Static site content is stored in the (Service Worker) Cache Storage API enabling instant loading on repeat visits.
 

diff --git a/content/en/index.md b/content/en/index.md
@@ -39,7 +39,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/metal.svg" alt="metal" loading="lazy" width="54" height="54">
+  <img src="/home/metal.svg" alt="metal" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Closer to the DOM</h3>
@@ -54,7 +54,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/size.svg" alt="size" loading="lazy" width="54" height="54">
+  <img src="/home/size.svg" alt="size" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Small Size</h3>
@@ -69,7 +69,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/performance.svg" alt="performance" loading="lazy" width="54" height="54">
+  <img src="/home/performance.svg" alt="performance" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Big Performance</h3>
@@ -84,7 +84,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/portable.svg" alt="portable" loading="lazy" width="54" height="54">
+  <img src="/home/portable.svg" alt="portable" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Portable &amp; Embeddable</h3>
@@ -98,7 +98,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/productive.svg" alt="productive" loading="lazy" width="54" height="54">
+  <img src="/home/productive.svg" alt="productive" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Instantly Productive</h3>
@@ -113,7 +113,7 @@ function Counter() {
 </section>
 
 <section class="home-section">
-  <img src="/home/compatible.svg" alt="compatible" loading="lazy" width="54" height="54">
+  <img src="/home/compatible.svg" alt="compatible" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Ecosystem Compatible</h3>

diff --git a/content/es/about/browser-support.md b/content/es/about/browser-support.md
@@ -7,12 +7,5 @@ permalink: '/about/browser-support'
 
 Preact ofrece soporte para navegadores modernos (Chrome, Firefox, Safari, Edge) e IE9+. De todos modos, funciona en IE7 e IE8, pero para ello es necesario incluir polyfills. En caso de que quieras utilizarlo y soportar estos navegadores antiguos, se recomienda agregar [es5-shim] o [babel-polyfill].
 
-<center>
-    <a href="https://saucelabs.com/u/preact">
-        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browser List">
-    </a>
-</center>
-
-
 [es5-shim]: https://github.com/es-shims/es5-shim
 [babel-polyfill]: https://babeljs.io/docs/usage/polyfill/
diff --git a/content/es/guide/v8/progressive-web-apps.md b/content/es/guide/v8/progressive-web-apps.md
@@ -47,7 +47,7 @@ Preact es una excelente elección para [Progressive Web Apps](https://web.dev/le
 
 De hecho, este sitio en el que estás ahora es una Progressive Web App!. Está siendo interactiva antes de los 5 segundos en un trace de un Nexus 5 sobre 3G:
 
-<img src="/pwa-guide/timeline.jpg" alt="Un Timeline de DevTools tracea el sitio de preactjs.com en un Nexus 5X"/>
+![Un Timeline de DevTools tracea el sitio de preactjs.com en un Nexus 5X](/pwa-guide/timeline.jpg)
 
 El contenido estático del sitio se guarda en el (Service Worker) usando la Cache Storage API, permitiendo la carga instantánea en visitas sucesivas.
 

diff --git a/content/es/index.md b/content/es/index.md
@@ -40,7 +40,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/metal.svg">
+  <img src="/home/metal.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Más cerca del DOM</h3>
@@ -56,7 +56,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/size.svg">
+  <img src="/home/size.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Tamaño reducido</h3>
@@ -72,7 +72,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/performance.svg">
+  <img src="/home/performance.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Gran Rendimiento</h3>
@@ -87,7 +87,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/portable.svg">
+  <img src="/home/portable.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Portable y embebible</h3>
@@ -102,7 +102,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/productive.svg">
+  <img src="/home/productive.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Productividad instantánea</h3>
@@ -120,7 +120,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/compatible.svg">
+  <img src="/home/compatible.svg" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Ecosistema compatible</h3>

diff --git a/content/fr/about/browser-support.md b/content/fr/about/browser-support.md
@@ -7,12 +7,5 @@ permalink: '/about/browser-support'
 
 Preact supporte les navigateurs modernes (Chrome, Firefox, Safari, Edge) ainsi que IE9+. Ça devrait fonctionner sous IE7 et IE8, mais cela nécessitera d'utiliser des polyfills. Si vous comptez utiliser Preact et supporter ces vieux navigateurs, il est recommandé d'utiliser un polyfill tel que [es5-shim] ou [babel-polyfill].
 
-<center>
-    <a href="https://saucelabs.com/u/preact">
-        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Liste des navigateurs">
-    </a>
-</center>
-
-
 [es5-shim]: https://github.com/es-shims/es5-shim
 [babel-polyfill]: https://babeljs.io/docs/usage/polyfill/
diff --git a/content/fr/guide/v8/progressive-web-apps.md b/content/fr/guide/v8/progressive-web-apps.md
@@ -51,7 +51,7 @@ Preact est un excellent choix pour les [Progressive Web Apps](https://web.dev/le
 
 En fait, le site sur lequel vous vous trouvez actuellement est une Progressive Web App!. Il est interactif en moins de 5 secondes sur un Nexus 5X en 3G :
 
-<img src="/pwa-guide/timeline.jpg" alt="A DevTools Timeline trace of the preactjs.com site on a Nexus 5X"/>
+![A DevTools Timeline trace of the preactjs.com site on a Nexus 5X](/pwa-guide/timeline.jpg)
 
 Le contenu statique du site est stocké dans l'API Cache Storage (Service Worker), ce qui permet un affichage instantanné lors des visites répétées.
 

diff --git a/content/fr/index.md b/content/fr/index.md
@@ -39,7 +39,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/metal.svg" alt="metal">
+  <img src="/home/metal.svg" alt="metal" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Plus proche de la machine</h3>
@@ -55,7 +55,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/size.svg" alt="size">
+  <img src="/home/size.svg" alt="size" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Petite taille</h3>
@@ -70,7 +70,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/performance.svg" alt="performance">
+  <img src="/home/performance.svg" alt="performance" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Grande performance</h3>
@@ -85,7 +85,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/portable.svg" alt="portable">
+  <img src="/home/portable.svg" alt="portable" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Portable &amp; embarquable</h3>
@@ -100,7 +100,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/productive.svg" alt="productive">
+  <img src="/home/productive.svg" alt="productive" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Productif instantanément</h3>
@@ -117,7 +117,7 @@ function Counter() {
 
 <section class="home-section">
   <div>
-    <img src="/home/compatible.svg" alt="compatible">
+    <img src="/home/compatible.svg" alt="compatible" loading="lazy" decoding="async" width="54" height="54">
     <h3>Compatible avec l'écosystème</h3>
     <p>
         Les composants du DOM virtuel vous permettent de réutiliser des briques de votre application. Grâce à la conception de Preact, vous avez à votre disposition les composants de l'écosystème React.

diff --git a/content/it/index.md b/content/it/index.md
@@ -40,7 +40,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/metal.svg" alt="metal">
+  <img src="/home/metal.svg" alt="metal" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Più vicino alla macchina</h3>
@@ -57,7 +57,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/size.svg" alt="size">
+  <img src="/home/size.svg" alt="size" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Piccolo nelle dimensioni</h3>
@@ -74,7 +74,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/performance.svg" alt="performance">
+  <img src="/home/performance.svg" alt="performance" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Grandi Perfomance</h3>
@@ -89,7 +89,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/portable.svg" alt="portable">
+  <img src="/home/portable.svg" alt="portable" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Portatile ed Integrabile</h3>
@@ -104,7 +104,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/productive.svg" alt="productive">
+  <img src="/home/productive.svg" alt="productive" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Immediatamente Produttivo</h3>
@@ -121,7 +121,7 @@ function Counter() {
 
 
 <section class="home-section">
-  <img src="/home/compatible.svg" alt="compatible">
+  <img src="/home/compatible.svg" alt="compatible" loading="lazy" decoding="async" width="54" height="54">
 
   <div>
     <h3>Compatibile con l'Ecosistema</h3>

diff --git a/content/ja/about/browser-support.md b/content/ja/about/browser-support.md
@@ -7,9 +7,3 @@ description: "Preactはそのままですべてのモダンブラウザ(Chrome,
 # ブラウザのサポート
 
 Preactはモダンブラウザ(Chrome, Firefox, Safari, Edge)とIE11をサポートします。polyfillを追加することなくそのままで動作します。
-
-<center>
-    <a href="https://saucelabs.com/u/preact">
-        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browser List" style="background: #fff">
-    </a>
-</center>