Switching from prettier pre-commit check to biome

Author: ragebflame

.pre-commit-config.yaml

@@ -9,11 +9,16 @@ repos:
       - id: check-toml
       - id: check-added-large-files
         args: [--maxkb=800]
-  # Run Prettier
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.7.1
+  # Run Biome
+  - repo: https://github.com/biomejs/pre-commit
+    rev: v2.0.0-beta.3 # Use the sha / tag you want to point at
     hooks:
-      - id: prettier
+      - id: biome-check
+  # Run Prettier - Deprecated
+  # - repo: https://github.com/pre-commit/mirrors-prettier
+  #   rev: v2.7.1
+  #   hooks:
+  #     - id: prettier
   # Run Zola check to validate external links (https://www.getzola.org/documentation/getting-started/cli-usage/#check)
   # Disabling for now
   #- repo: local

sass/main.scss

@@ -104,8 +104,8 @@ mark {
 
 img {
   display: block;
-  height: auto;
   width: 100%;
+  height: auto;
   max-width: 100%;
   border-radius: 4px;
 
@@ -197,6 +197,13 @@ figure {
   }
 }
 
+figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: attr(width) / attr(height); // Fallback for browsers that support it
+}
+
 code {
   font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
   font-feature-settings: normal;

templates/shortcodes/figure.html

@@ -1,25 +1,32 @@
 {% if src %}
 <figure class="{% if position %}{{ position }}{% else -%} center {%- endif %}">
-  {% set abspath = "/static/" ~ src %} {% set meta =
-  get_image_metadata(path=abspath) %} {% set width = meta.width %} {% set
-  srcset_list = [] %} {% for s in config.extra.images_sizes %} {% if width >= s
-  %} {% set resized = resize_image(path=abspath, width=s, op="fit_width",
-  format="webp", quality=90) %} {% set element = resized.url ~ " " ~ s ~ "w" %}
-  {% set_global srcset_list = srcset_list | concat(with=[element]) %} {% endif
-  %} {% endfor %} {% set default_resized = resize_image(path=abspath,
-  width=config.extra.images_default_size, op="fit_width", format="webp",
-  quality=90) %} <img alt="{{ alt }}" src="{{ default_resized.url | safe }}"
-  srcset="{{ srcset_list | join(sep=", ") | safe }}" /> {% if caption %}
+  {% set abspath = "/static/" ~ src %}
+  {% set meta = get_image_metadata(path=abspath) %}
+  {% set width = meta.width %}
+  {% set height = meta.height %}
+  {% set srcset_list = [] %}
+  {% for s in config.extra.images_sizes %}
+    {% if width >= s %}
+      {% set resized = resize_image(path=abspath, width=s, op="fit_width", format="webp", quality=90) %}
+      {% set element = resized.url ~ " " ~ s ~ "w" %}
+      {% set_global srcset_list = srcset_list | concat(with=[element]) %}
+    {% endif %}
+  {% endfor %}
+  {% set default_resized = resize_image(path=abspath, width=config.extra.images_default_size, op="fit_width", format="webp", quality=90) %}
+  <img
+    alt="{{ alt }}"
+    src="{{ default_resized.url | safe }}"
+    srcset="{{ srcset_list | join(sep=", ") | safe }}"
+    width="{{ width }}"
+    height="{{ height }}"
+    style="aspect-ratio: {{ width }}/{{ height }};"
+  />
+  {% if caption %}
   <figcaption
     class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"
-    {%
-    if
-    caption_style
-    %}
+    {% if caption_style %}
     style="{{ caption_style | safe }}"
-    {%
-    endif
-    %}
+    {% endif %}
   >
     {{ caption }}
   </figcaption>

templates/shortcodes/image.html

@@ -1,10 +1,22 @@
-{% set abspath = "/static/" ~ src %} {% set meta =
-get_image_metadata(path=abspath) %} {% set width = meta.width %} {% set
-srcset_list = [] %} {% for s in config.extra.images_sizes %} {% if width >= s %}
-{% set resized = resize_image(path=abspath, width=s, op="fit_width",
-format="webp", quality=90) %} {% set element = resized.url ~ " " ~ s ~ "w" %} {%
-set_global srcset_list = srcset_list | concat(with=[element]) %} {% endif %} {%
-endfor %} {% set default_resized = resize_image(path=abspath,
-width=config.extra.images_default_size, op="fit_width", format="webp",
-quality=90) %} <img alt="{{ alt }}" src="{{ default_resized.url | safe }}"
-srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+{% set abspath = "/static/" ~ src %}
+{% set meta = get_image_metadata(path=abspath) %}
+{% set width = meta.width %}
+{% set height = meta.height %}
+{% set srcset_list = [] %}
+{% for s in config.extra.images_sizes %}
+  {% if width >= s %}
+    {% set resized = resize_image(path=abspath, width=s, op="fit_width", format="webp", quality=90) %}
+    {% set element = resized.url ~ " " ~ s ~ "w" %}
+    {% set_global srcset_list = srcset_list | concat(with=[element]) %}
+  {% endif %}
+{% endfor %}
+{% set default_resized = resize_image(path=abspath, width=config.extra.images_default_size, op="fit_width", format="webp", quality=90) %}
+<img
+  alt="{{ alt }}"
+  src="{{ default_resized.url | safe }}"
+  srcset="{{ srcset_list | join(sep=", ") | safe }}"
+  width="{{ width }}"
+  height="{{ height }}"
+  style="aspect-ratio: {{ width }}/{{ height }}; {% if style %}{{ style }}{% endif %}"
+  class="{% if position %}{{ position }}{% endif %}"
+/>