feat: add consistent styling to all post type pages
- Add withSidebar, h-feed wrapper, pagination to all post type pages - Add total count display - Add post-card class for consistent styling - Add category display - Keep type-specific icons (heart for likes, reply arrow, repost icon) - Keep photo gallery layout for photos page All post type pages now match the articles/notes pattern. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
@@ -1,34 +1,105 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Bookmarks
|
||||
permalink: /bookmarks/
|
||||
withSidebar: true
|
||||
pagination:
|
||||
data: collections.bookmarks
|
||||
size: 20
|
||||
alias: paginatedBookmarks
|
||||
permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||
---
|
||||
<div class="page-header mb-6 sm:mb-8">
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Bookmarks</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400">Links I've saved for later.</p>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
Links I've saved for later.
|
||||
<span class="text-sm">({{ collections.bookmarks.length }} total)</span>
|
||||
</p>
|
||||
|
||||
{% if collections.bookmarks.length > 0 %}
|
||||
{% if paginatedBookmarks.length > 0 %}
|
||||
<ul class="post-list">
|
||||
{% for post in collections.bookmarks %}
|
||||
<li class="h-entry">
|
||||
{% for post in paginatedBookmarks %}
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
{% if post.data.title %}
|
||||
<h2><a class="p-name u-url" href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
||||
<h2 class="text-xl font-semibold mb-1 flex-1">
|
||||
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
|
||||
{{ post.data.title }}
|
||||
</a>
|
||||
</h2>
|
||||
{% endif %}
|
||||
<div class="post-meta">
|
||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
||||
</div>
|
||||
<div class="post-meta mt-2">
|
||||
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time>
|
||||
{% if post.data.category %}
|
||||
<span class="post-categories">
|
||||
{% if post.data.category is string %}
|
||||
<span class="p-category">{{ post.data.category }}</span>
|
||||
{% else %}
|
||||
{% for cat in post.data.category %}
|
||||
<span class="p-category">{{ cat }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
||||
{% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
|
||||
{% if bookmarkedUrl %}
|
||||
<p><a class="u-bookmark-of" href="{{ bookmarkedUrl }}">{{ bookmarkedUrl }}</a></p>
|
||||
<p class="mt-3 flex items-center gap-2 text-sm">
|
||||
<svg class="w-4 h-4 text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
|
||||
</svg>
|
||||
<a class="u-bookmark-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ bookmarkedUrl }}">
|
||||
{{ bookmarkedUrl }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if post.templateContent %}
|
||||
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="e-content">{{ post.templateContent | safe }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if pagination.pages.length > 1 %}
|
||||
<nav class="pagination" aria-label="Bookmarks pagination">
|
||||
<div class="pagination-info">
|
||||
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
||||
</div>
|
||||
<div class="pagination-links">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<p>No bookmarks yet.</p>
|
||||
<span class="pagination-link disabled">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No bookmarks yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
86
likes.njk
86
likes.njk
@@ -1,49 +1,103 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Likes
|
||||
permalink: /likes/
|
||||
withSidebar: true
|
||||
pagination:
|
||||
data: collections.likes
|
||||
size: 20
|
||||
alias: paginatedLikes
|
||||
permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||
---
|
||||
<div class="page-header mb-6 sm:mb-8">
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Likes</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400">Content I've liked across the web.</p>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
Content I've liked across the web.
|
||||
<span class="text-sm">({{ collections.likes.length }} total)</span>
|
||||
</p>
|
||||
|
||||
{% if collections.likes.length > 0 %}
|
||||
<ul class="space-y-6">
|
||||
{% for post in collections.likes %}
|
||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
{% if paginatedLikes.length > 0 %}
|
||||
<ul class="post-list">
|
||||
{% for post in paginatedLikes %}
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header flex items-start gap-3">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta text-sm text-surface-500 dark:text-surface-400 mb-2">
|
||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
||||
<div class="post-meta">
|
||||
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time>
|
||||
{% if post.data.category %}
|
||||
<span class="post-categories">
|
||||
{% if post.data.category is string %}
|
||||
<span class="p-category">{{ post.data.category }}</span>
|
||||
{% else %}
|
||||
{% for cat in post.data.category %}
|
||||
<span class="p-category">{{ cat }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
||||
{% set likedUrl = post.data.likeOf or post.data.like_of %}
|
||||
{% if likedUrl %}
|
||||
<p class="mb-2">
|
||||
<p class="mt-2">
|
||||
<a class="u-like-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ likedUrl }}">
|
||||
{{ likedUrl }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if post.templateContent %}
|
||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
||||
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if pagination.pages.length > 1 %}
|
||||
<nav class="pagination" aria-label="Likes pagination">
|
||||
<div class="pagination-info">
|
||||
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
||||
</div>
|
||||
<div class="pagination-links">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No likes yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
77
photos.njk
77
photos.njk
@@ -1,25 +1,43 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Photos
|
||||
permalink: /photos/
|
||||
withSidebar: true
|
||||
pagination:
|
||||
data: collections.photos
|
||||
size: 20
|
||||
alias: paginatedPhotos
|
||||
permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||
---
|
||||
<div class="page-header mb-6 sm:mb-8">
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Photos</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400">Photo posts and images.</p>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
Photo posts and images.
|
||||
<span class="text-sm">({{ collections.photos.length }} total)</span>
|
||||
</p>
|
||||
|
||||
{% if collections.photos.length > 0 %}
|
||||
{% if paginatedPhotos.length > 0 %}
|
||||
<ul class="post-list photo-list">
|
||||
{% for post in collections.photos %}
|
||||
<li class="h-entry">
|
||||
{% for post in paginatedPhotos %}
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-meta">
|
||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
||||
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time>
|
||||
{% if post.data.category %}
|
||||
<span class="post-categories">
|
||||
{% if post.data.category is string %}
|
||||
<span class="p-category">{{ post.data.category }}</span>
|
||||
{% else %}
|
||||
{% for cat in post.data.category %}
|
||||
<span class="p-category">{{ cat }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
|
||||
{% if post.data.photo %}
|
||||
<div class="photo-gallery">
|
||||
<div class="photo-gallery mt-3">
|
||||
{% for img in post.data.photo %}
|
||||
{% set photoUrl = img.url %}
|
||||
{% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
|
||||
@@ -32,11 +50,48 @@ permalink: /photos/
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if post.templateContent %}
|
||||
<div class="e-content photo-caption">{{ post.templateContent | safe }}</div>
|
||||
<div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if pagination.pages.length > 1 %}
|
||||
<nav class="pagination" aria-label="Photos pagination">
|
||||
<div class="pagination-info">
|
||||
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
||||
</div>
|
||||
<div class="pagination-links">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<p>No photos yet.</p>
|
||||
<span class="pagination-link disabled">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No photos yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
88
replies.njk
88
replies.njk
@@ -1,53 +1,107 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Replies
|
||||
permalink: /replies/
|
||||
withSidebar: true
|
||||
pagination:
|
||||
data: collections.replies
|
||||
size: 20
|
||||
alias: paginatedReplies
|
||||
permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||
---
|
||||
<div class="page-header mb-6 sm:mb-8">
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Replies</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400">My responses to posts across the web.</p>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
My responses to posts across the web.
|
||||
<span class="text-sm">({{ collections.replies.length }} total)</span>
|
||||
</p>
|
||||
|
||||
{% if collections.replies.length > 0 %}
|
||||
<ul class="space-y-6">
|
||||
{% for post in collections.replies %}
|
||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border-l-4 border-primary-500">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
{% if paginatedReplies.length > 0 %}
|
||||
<ul class="post-list">
|
||||
{% for post in paginatedReplies %}
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header flex items-start gap-3">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
{% if post.data.title %}
|
||||
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
|
||||
<a class="hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
</h2>
|
||||
{% endif %}
|
||||
<div class="post-meta text-sm text-surface-500 dark:text-surface-400 mb-2">
|
||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
||||
<div class="post-meta">
|
||||
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time>
|
||||
{% if post.data.category %}
|
||||
<span class="post-categories">
|
||||
{% if post.data.category is string %}
|
||||
<span class="p-category">{{ post.data.category }}</span>
|
||||
{% else %}
|
||||
{% for cat in post.data.category %}
|
||||
<span class="p-category">{{ cat }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
||||
{% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
|
||||
{% if replyTo %}
|
||||
<p class="mb-3 text-sm">
|
||||
<p class="mt-2 text-sm">
|
||||
<span class="text-surface-500">In reply to:</span>
|
||||
<a class="u-in-reply-to text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ replyTo }}">
|
||||
{{ replyTo }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
||||
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if pagination.pages.length > 1 %}
|
||||
<nav class="pagination" aria-label="Replies pagination">
|
||||
<div class="pagination-info">
|
||||
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
||||
</div>
|
||||
<div class="pagination-links">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No replies yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
88
reposts.njk
88
reposts.njk
@@ -1,38 +1,56 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Reposts
|
||||
permalink: /reposts/
|
||||
withSidebar: true
|
||||
pagination:
|
||||
data: collections.reposts
|
||||
size: 20
|
||||
alias: paginatedReposts
|
||||
permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||
---
|
||||
<div class="page-header mb-6 sm:mb-8">
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Reposts</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400">Content I've shared from others.</p>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
Content I've shared from others.
|
||||
<span class="text-sm">({{ collections.reposts.length }} total)</span>
|
||||
</p>
|
||||
|
||||
{% if collections.reposts.length > 0 %}
|
||||
<ul class="space-y-6">
|
||||
{% for post in collections.reposts %}
|
||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
{% if paginatedReposts.length > 0 %}
|
||||
<ul class="post-list">
|
||||
{% for post in paginatedReposts %}
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header flex items-start gap-3">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
{% if post.data.title %}
|
||||
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
|
||||
<a class="hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
</h2>
|
||||
{% endif %}
|
||||
<div class="post-meta text-sm text-surface-500 dark:text-surface-400 mb-2">
|
||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
||||
<div class="post-meta">
|
||||
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time>
|
||||
{% if post.data.category %}
|
||||
<span class="post-categories">
|
||||
{% if post.data.category is string %}
|
||||
<span class="p-category">{{ post.data.category }}</span>
|
||||
{% else %}
|
||||
{% for cat in post.data.category %}
|
||||
<span class="p-category">{{ cat }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
||||
{% set repostedUrl = post.data.repostOf or post.data.repost_of %}
|
||||
{% if repostedUrl %}
|
||||
<p class="mb-3 text-sm">
|
||||
<p class="mt-2 text-sm">
|
||||
<span class="text-surface-500">Reposted:</span>
|
||||
<a class="u-repost-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ repostedUrl }}">
|
||||
{{ repostedUrl }}
|
||||
@@ -40,16 +58,52 @@ permalink: /reposts/
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if post.templateContent %}
|
||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
||||
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if pagination.pages.length > 1 %}
|
||||
<nav class="pagination" aria-label="Reposts pagination">
|
||||
<div class="pagination-info">
|
||||
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
||||
</div>
|
||||
<div class="pagination-links">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="pagination-link disabled">
|
||||
Next
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No reposts yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user