Add image variant

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
2024-10-27 11:16:33 +00:00
parent 8524b5af13
commit ca43b64220
27 changed files with 703 additions and 32 deletions

View File

@@ -38,4 +38,4 @@
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 3 21 3 21 9"></polyline>
<polyline points="9 21 3 21 3 15"></polyline>
<line x1="21" y1="3" x2="14" y2="10"></line>
<line x1="3" y1="21" x2="10" y2="14"></line>
</svg>

After

Width:  |  Height:  |  Size: 391 B

6
partials/image/feed.hbs Normal file
View File

@@ -0,0 +1,6 @@
<div class="post-feed gh-feed">
<div class="grid-item grid-sizer"></div>
{{#foreach posts}}
{{> image/loop}}
{{/foreach}}
</div>

View File

@@ -0,0 +1,3 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

View File

@@ -0,0 +1,3 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

36
partials/image/loop.hbs Normal file
View File

@@ -0,0 +1,36 @@
{{#if feature_image}}
<div class="grid-item">
<figure class="{{post_class}}">
<a class="post-link" aria-label="Navigate to {{title}} page" href="{{url}}">
<img class="post-image" srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m" }}
720w, {{img_url feature_image size="l" }} 960w, {{img_url feature_image size="xl" }} 1200w, {{img_url
feature_image size="xxl" }} 2000w"
sizes="(min-width: 1020px) 300px, (min-width: 641px) calc((100vw - 50px) / 3), calc((100vw - 40px) / 2)"
src="{{img_url feature_image size="s"}}" alt="{{title}}">
</a>
<a class="post-lightbox" aria-label="Expand image" href="{{img_url feature_image}}">
{{> icons/maximize}}
</a>
<figcaption class="post-caption">
<h2 class="post-caption-title">{{title}}</h2>
<div class="post-caption-meta">
{{#primary_tag}}
<span class="post-caption-meta-item post-caption-meta-tag">
<a href="{{url}}">{{name}}</a>
</span>
{{/primary_tag}}
<span class="post-caption-meta-item post-caption-meta-date">
<time datetime="{{date format="YYYY-MM-DD"}}">{{date published_at}}</time>
</span>
<span class="post-caption-meta-item post-caption-meta-link">
<a href="{{url}}">View post</a>
</span>
</div>
</figcaption>
</figure>
</div>
{{/if}}

12
partials/image/more.hbs Normal file
View File

@@ -0,0 +1,12 @@
{{#get "posts" limit="all" filter="tags:[{{tags[*].slug}}]+id:-{{id}}" as |related|}}
{{#if related}}
<section class="related-posts">
<div class="post-feed gh-feed">
<div class="grid-item grid-sizer"></div>
{{#foreach related}}
{{> image/loop}}
{{/foreach}}
</div>
</section>
{{/if}}
{{/get}}

View File

@@ -1,21 +1,5 @@
<div class="post-feed gh-feed">
{{#foreach posts}}
<article class="gh-card {{post_class}}">
<a class="gh-card-link" href="{{url}}">
<header class="gh-card-header">
<h2 class="gh-card-title">{{title}}</h2>
</header>
<div class="gh-card-excerpt">{{excerpt}}</div>
<footer class="gh-card-meta">
<time class="gh-card-date" datetime="{{date format=" YYYY-MM-DD"}}">{{date}}</time>
<span class="gh-card-duration">{{reading_time}}</span>
{{^has visibility="public"}}
{{> icons/star}}
{{/has}}
</footer>
</a>
</article>
{{> text/loop}}
{{/foreach}}
</div>

17
partials/text/loop.hbs Normal file
View File

@@ -0,0 +1,17 @@
<article class="gh-card {{post_class}}">
<a class="gh-card-link" href="{{url}}">
<header class="gh-card-header">
<h2 class="gh-card-title">{{title}}</h2>
</header>
<div class="gh-card-excerpt">{{excerpt}}</div>
<footer class="gh-card-meta">
<time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
<span class="gh-card-duration">{{reading_time}}</span>
{{^has visibility="public"}}
{{> icons/star}}
{{/has}}
</footer>
</a>
</article>

View File

@@ -2,7 +2,7 @@
<div class="gh-navigation-previous">
{{#prev_post}}
<a class="gh-navigation-link" href="{{url}}">
<span class="gh-navigation-label">{{> icons/arrow-left}} Previous issue</span>
<span class="gh-navigation-label">{{> icons/arrow-left}} Previous post</span>
<h4 class="gh-navigation-title">{{title}}</h4>
</a>
{{/prev_post}}
@@ -13,7 +13,7 @@
<div class="gh-navigation-next">
{{#next_post}}
<a class="gh-navigation-link" href="{{url}}">
<span class="gh-navigation-label">Next issue {{> icons/arrow-right}}</span>
<span class="gh-navigation-label">Next post {{> icons/arrow-right}}</span>
<h4 class="gh-navigation-title">{{title}}</h4>
</a>
{{/next_post}}