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
125
bookmarks.njk
125
bookmarks.njk
@@ -1,34 +1,105 @@
|
|||||||
---
|
---
|
||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Bookmarks
|
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>
|
<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>
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||||
</div>
|
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">
|
<ul class="post-list">
|
||||||
{% for post in collections.bookmarks %}
|
{% for post in paginatedBookmarks %}
|
||||||
<li class="h-entry">
|
<li class="h-entry post-card">
|
||||||
{% if post.data.title %}
|
<div class="post-header">
|
||||||
<h2><a class="p-name u-url" href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
{% if post.data.title %}
|
||||||
{% endif %}
|
<h2 class="text-xl font-semibold mb-1 flex-1">
|
||||||
<div class="post-meta">
|
<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 }}">
|
||||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
{{ post.data.title }}
|
||||||
{{ post.date | dateDisplay }}
|
</a>
|
||||||
</time>
|
</h2>
|
||||||
|
{% endif %}
|
||||||
|
</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 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 %}
|
||||||
|
</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>
|
||||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
<div class="pagination-links">
|
||||||
{% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
|
{% if pagination.href.previous %}
|
||||||
{% if bookmarkedUrl %}
|
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||||
<p><a class="u-bookmark-of" href="{{ bookmarkedUrl }}">{{ bookmarkedUrl }}</a></p>
|
<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>
|
||||||
{% endif %}
|
Previous
|
||||||
<div class="e-content">{{ post.templateContent | safe }}</div>
|
</a>
|
||||||
</li>
|
{% else %}
|
||||||
{% endfor %}
|
<span class="pagination-link disabled">
|
||||||
</ul>
|
<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>
|
||||||
{% else %}
|
Previous
|
||||||
<p>No bookmarks yet.</p>
|
</span>
|
||||||
{% endif %}
|
{% 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>
|
||||||
|
|||||||
132
likes.njk
132
likes.njk
@@ -1,49 +1,103 @@
|
|||||||
---
|
---
|
||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Likes
|
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>
|
<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>
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||||
</div>
|
Content I've liked across the web.
|
||||||
|
<span class="text-sm">({{ collections.likes.length }} total)</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
{% if collections.likes.length > 0 %}
|
{% if paginatedLikes.length > 0 %}
|
||||||
<ul class="space-y-6">
|
<ul class="post-list">
|
||||||
{% for post in collections.likes %}
|
{% for post in paginatedLikes %}
|
||||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
<li class="h-entry post-card">
|
||||||
<div class="flex items-start gap-4">
|
<div class="post-header flex items-start gap-3">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0 mt-1">
|
||||||
<svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
<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"/>
|
<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>
|
</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() }}">
|
|
||||||
{{ post.date | dateDisplay }}
|
|
||||||
</time>
|
|
||||||
</div>
|
</div>
|
||||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
<div class="flex-1 min-w-0">
|
||||||
{% set likedUrl = post.data.likeOf or post.data.like_of %}
|
<div class="post-meta">
|
||||||
{% if likedUrl %}
|
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||||
<p class="mb-2">
|
{{ post.date | dateDisplay }}
|
||||||
<a class="u-like-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ likedUrl }}">
|
</time>
|
||||||
{{ likedUrl }}
|
{% if post.data.category %}
|
||||||
</a>
|
<span class="post-categories">
|
||||||
</p>
|
{% if post.data.category is string %}
|
||||||
{% endif %}
|
<span class="p-category">{{ post.data.category }}</span>
|
||||||
{% if post.templateContent %}
|
{% else %}
|
||||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
{% for cat in post.data.category %}
|
||||||
{{ post.templateContent | safe }}
|
<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="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 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>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 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>
|
||||||
</li>
|
<div class="pagination-links">
|
||||||
{% endfor %}
|
{% if pagination.href.previous %}
|
||||||
</ul>
|
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||||
{% else %}
|
<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>
|
||||||
<p class="text-surface-600 dark:text-surface-400">No likes yet.</p>
|
Previous
|
||||||
{% endif %}
|
</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>
|
||||||
|
|||||||
123
photos.njk
123
photos.njk
@@ -1,42 +1,97 @@
|
|||||||
---
|
---
|
||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Photos
|
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>
|
<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>
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||||
</div>
|
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">
|
<ul class="post-list photo-list">
|
||||||
{% for post in collections.photos %}
|
{% for post in paginatedPhotos %}
|
||||||
<li class="h-entry">
|
<li class="h-entry post-card">
|
||||||
<div class="post-meta">
|
<div class="post-meta">
|
||||||
<time class="dt-published" datetime="{{ post.date.toISOString() }}">
|
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||||
{{ post.date | dateDisplay }}
|
{{ post.date | dateDisplay }}
|
||||||
</time>
|
</time>
|
||||||
</div>
|
{% if post.data.category %}
|
||||||
{# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
|
<span class="post-categories">
|
||||||
{% if post.data.photo %}
|
{% if post.data.category is string %}
|
||||||
<div class="photo-gallery">
|
<span class="p-category">{{ post.data.category }}</span>
|
||||||
{% for img in post.data.photo %}
|
{% else %}
|
||||||
{% set photoUrl = img.url %}
|
{% for cat in post.data.category %}
|
||||||
{% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
|
<span class="p-category">{{ cat }}</span>
|
||||||
{% set photoUrl = '/' + photoUrl %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="{{ post.url }}" class="photo-link">
|
</span>
|
||||||
<img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
|
{% endif %}
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
|
||||||
{% if post.templateContent %}
|
{% if post.data.photo %}
|
||||||
<div class="e-content photo-caption">{{ post.templateContent | safe }}</div>
|
<div class="photo-gallery mt-3">
|
||||||
{% endif %}
|
{% for img in post.data.photo %}
|
||||||
</li>
|
{% set photoUrl = img.url %}
|
||||||
{% endfor %}
|
{% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
|
||||||
</ul>
|
{% set photoUrl = '/' + photoUrl %}
|
||||||
{% else %}
|
{% endif %}
|
||||||
<p>No photos yet.</p>
|
<a href="{{ post.url }}" class="photo-link">
|
||||||
{% endif %}
|
<img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if post.templateContent %}
|
||||||
|
<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 %}
|
||||||
|
<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>
|
||||||
|
|||||||
140
replies.njk
140
replies.njk
@@ -1,53 +1,107 @@
|
|||||||
---
|
---
|
||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Replies
|
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>
|
<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>
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||||
</div>
|
My responses to posts across the web.
|
||||||
|
<span class="text-sm">({{ collections.replies.length }} total)</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
{% if collections.replies.length > 0 %}
|
{% if paginatedReplies.length > 0 %}
|
||||||
<ul class="space-y-6">
|
<ul class="post-list">
|
||||||
{% for post in collections.replies %}
|
{% for post in paginatedReplies %}
|
||||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border-l-4 border-primary-500">
|
<li class="h-entry post-card">
|
||||||
<div class="flex items-start gap-4">
|
<div class="post-header flex items-start gap-3">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0 mt-1">
|
||||||
<svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
<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"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||||
</svg>
|
</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>
|
|
||||||
</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() }}">
|
|
||||||
{{ post.date | dateDisplay }}
|
|
||||||
</time>
|
|
||||||
</div>
|
</div>
|
||||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
<div class="flex-1 min-w-0">
|
||||||
{% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
|
{% if post.data.title %}
|
||||||
{% if replyTo %}
|
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
|
||||||
<p class="mb-3 text-sm">
|
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||||
<span class="text-surface-500">In reply to:</span>
|
</h2>
|
||||||
<a class="u-in-reply-to text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ replyTo }}">
|
{% endif %}
|
||||||
{{ replyTo }}
|
<div class="post-meta">
|
||||||
</a>
|
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||||
</p>
|
{{ post.date | dateDisplay }}
|
||||||
{% endif %}
|
</time>
|
||||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
{% if post.data.category %}
|
||||||
{{ post.templateContent | safe }}
|
<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="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 mt-3 max-w-none">
|
||||||
|
{{ post.templateContent | safe }}
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 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>
|
||||||
</li>
|
<div class="pagination-links">
|
||||||
{% endfor %}
|
{% if pagination.href.previous %}
|
||||||
</ul>
|
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||||
{% else %}
|
<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>
|
||||||
<p class="text-surface-600 dark:text-surface-400">No replies yet.</p>
|
Previous
|
||||||
{% endif %}
|
</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>
|
||||||
|
|||||||
144
reposts.njk
144
reposts.njk
@@ -1,55 +1,109 @@
|
|||||||
---
|
---
|
||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Reposts
|
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>
|
<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>
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||||
</div>
|
Content I've shared from others.
|
||||||
|
<span class="text-sm">({{ collections.reposts.length }} total)</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
{% if collections.reposts.length > 0 %}
|
{% if paginatedReposts.length > 0 %}
|
||||||
<ul class="space-y-6">
|
<ul class="post-list">
|
||||||
{% for post in collections.reposts %}
|
{% for post in paginatedReposts %}
|
||||||
<li class="h-entry p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
<li class="h-entry post-card">
|
||||||
<div class="flex items-start gap-4">
|
<div class="post-header flex items-start gap-3">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0 mt-1">
|
||||||
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
<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"/>
|
<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>
|
</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>
|
|
||||||
</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() }}">
|
|
||||||
{{ post.date | dateDisplay }}
|
|
||||||
</time>
|
|
||||||
</div>
|
</div>
|
||||||
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
<div class="flex-1 min-w-0">
|
||||||
{% set repostedUrl = post.data.repostOf or post.data.repost_of %}
|
{% if post.data.title %}
|
||||||
{% if repostedUrl %}
|
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
|
||||||
<p class="mb-3 text-sm">
|
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||||
<span class="text-surface-500">Reposted:</span>
|
</h2>
|
||||||
<a class="u-repost-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ repostedUrl }}">
|
{% endif %}
|
||||||
{{ repostedUrl }}
|
<div class="post-meta">
|
||||||
</a>
|
<time class="dt-published" datetime="{{ post.date | isoDate }}">
|
||||||
</p>
|
{{ post.date | dateDisplay }}
|
||||||
{% endif %}
|
</time>
|
||||||
{% if post.templateContent %}
|
{% if post.data.category %}
|
||||||
<div class="e-content prose dark:prose-invert prose-sm max-w-none">
|
<span class="post-categories">
|
||||||
{{ post.templateContent | safe }}
|
{% 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="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 }}
|
||||||
|
</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 %}
|
||||||
|
<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>
|
||||||
{% endif %}
|
|
||||||
<a class="u-url text-xs text-surface-400 hover:underline mt-2 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>
|
||||||
</li>
|
<div class="pagination-links">
|
||||||
{% endfor %}
|
{% if pagination.href.previous %}
|
||||||
</ul>
|
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
||||||
{% else %}
|
<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>
|
||||||
<p class="text-surface-600 dark:text-surface-400">No reposts yet.</p>
|
Previous
|
||||||
{% endif %}
|
</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