Merge pull request #73 from welpo/docs/lighthouse-score

📝 docs: mention (and achieve) perfect Lighthouse score

README.md

@@ -8,9 +8,14 @@ See a live preview [here](https://welpo.github.io/tabi).
 
 ![tabi](screenshot.png)
 
+Tabi has a perfect score on Google's Lighthouse audit:
+
+![lighthouse](lighthouse_score.png)
+
 ## Features
 
 - [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
+- [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
 - [X] [KaTeX](https://katex.org/) support.
 - [X] All JavaScript (theme switcher and KaTeX) can be fully disabled.
 - [X] Projects page.

content/_index.md

@@ -10,4 +10,4 @@ section_path = "blog/_index.md"
 max_posts = 4
 +++
 
-Tabi is a fast, lightweight, and modern [Zola](https://getzola.org) theme. It aims to be a personal page and home to blog posts. It features responsive design, dark and light modes, custom shortcodes, and much more.
+Tabi is a fast, lightweight, and modern [Zola](https://getzola.org) theme. It aims to be a personal page and home to blog posts. It features a perfect Lighthouse score, responsive design, dark and light themes, custom shortcodes, and much more.

templates/macros/cards_pages.html

@@ -3,15 +3,20 @@
 <div class="cards">
     {%- for page in pages %}
     <div class="card">
+        {% if page.extra.link_to %}
             <a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>
+        {% endif %}
         {% if page.extra.local_image %}
-            <img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}">
+            {% set meta = get_image_metadata(path=page.extra.local_image) %}
+            <img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}" {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}>
         {% elif page.extra.remote_image %}
             <img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}">
         {% else %}
             <div class="card-image-placeholder"></div>
         {% endif %}
+        {% if page.extra.link_to %}
             </a>
+        {% endif %}
 
         <div class="card-info">
             <h1 class="card-title">