feat: Open project links in new tab

* Create custom cards.html template to override theme default

* Add target="_blank" and rel="noopener" to project links

Author: dhruv-ahuja

templates/cards.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+
+
+{% macro cards_posts(pages) %}
+    <div class="cards">
+        {%- for page in pages %}
+            <div class="card">
+                <div class="card-media">
+                    {# New wrapper div for consistent media sizing #}
+                    {% if page.extra.local_image %}
+                        {% set path = page.extra.local_image %}
+                        {% if path is not starting_with("/") %}
+                            {% set path = section.path ~ "/" ~ page.extra.local_image %}
+                        {% endif %}
+
+                        {% set image = resize_image(path=path, height=300, op="fit_height", format="webp") %}
+                        <img class="card-image"
+                             alt="{{ page.extra.local_image }}"
+                             src="{{ image.url }}" />
+                    {% elif page.extra.remote_image %}
+                        <img class="card-image"
+                             alt="{{ page.extra.remote_image }}"
+                             src="{{ page.extra.remote_image }}" />
+                    {% elif page.extra.local_video %}
+                        {% set video_path = page.extra.local_video %}
+                        {% if video_path is not starting_with("/") %}
+                            {% set video_path = section.path ~ "/" ~ page.extra.local_video %}
+                        {% endif %}
+                        <video class="card-video" controls autoplay loop muted>
+                            <source src="{{ video_path | safe }}">
+                            Your browser does not support the video tag.
+                        </video>
+                    {% elif page.extra.remote_video %}
+                        <video class="card-video" controls autoplay loop muted>
+                            <source src="{{ page.extra.remote_video | safe }}">
+                            Your browser does not support the video tag.
+                        </video>
+                    {% else %}
+                        <div class="card-image-placeholder"></div>
+                    {% endif %}
+                </div>
+                {# End of card-media wrapper #}
+
+                <div class="card-info">
+                    <h1 class="card-title">
+                        {% if page.extra.link_to %}
+                            <a href={{ page.extra.link_to }} target="_blank" rel="noopener">{{ page.title }}</a>
+                        {% else %}
+                            <a href={{ page.permalink | safe }}>{{ page.title }}</a>
+                        {% endif %}
+                    </h1>
+
+                    <div class="meta">
+                        {%- if page.date %}
+                            <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+                        {% endif -%}
+                        {% if page.draft %}<span class="draft-label">DRAFT</span>{% endif %}
+                    </div>
+
+                    <div class="card-description">
+                        {% if page.description %}{{ page.description }}{% endif %}
+                    </div>
+                </div>
+            </div>
+
+        {% endfor -%}
+    </div>
+{% endmacro cards_posts %}
+
+{% block main_content %}
+    {% if section.extra.section_path -%}
+        {% set section = get_section(path=section.extra.section_path) %}
+    {% endif -%}
+
+    {{ post_macros::page_header(title=section.title) }}
+
+    <main>
+        {%- if paginator %}
+            {%- set show_pages = paginator.pages -%}
+        {% else %}
+            {%- set show_pages = section.pages -%}
+        {% endif -%}
+
+        {{ self::cards_posts(pages=show_pages) }}
+    </main>
+
+    {% if paginator %}
+        <ul class="pagination">
+            {% if paginator.previous %}
+                <span class="page-item page-prev">
+                    <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
+                </span>
+            {% endif %}
+
+            {% if paginator.next %}
+                <span class="page-item page-next">
+                    <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
+                </span>
+            {% endif %}
+        </ul>
+    {% endif %}
+{% endblock main_content %}