316 lines
24 KiB
Plaintext
316 lines
24 KiB
Plaintext
{# Blog Sidebar - Shown on individual post pages #}
|
|
{# Data-driven when homepageConfig.blogPostSidebar is configured, otherwise falls back to default widgets #}
|
|
{# Each widget is wrapped in a collapsible container with localStorage persistence #}
|
|
{% from "components/icon.njk" import icon %}
|
|
|
|
{% set isArticlePost = (postType == "article") or (page.url and page.url.startsWith('/articles/') and page.url != '/articles/') %}
|
|
{% set showArticleToc = isArticlePost %}
|
|
|
|
{% if homepageConfig and homepageConfig.blogPostSidebar and homepageConfig.blogPostSidebar.length %}
|
|
{# === Data-driven mode: render configured widgets === #}
|
|
{% set hasConfiguredToc = '"toc"' in (homepageConfig.blogPostSidebar | dump) %}
|
|
{% for widget in homepageConfig.blogPostSidebar %}
|
|
|
|
{# Resolve widget title #}
|
|
{% if widget.type == "search" %}{% set widgetTitle = "Search" %}
|
|
{% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
|
|
{% elif widget.type == "github-repos" %}{% set widgetTitle = "Gitea" %}
|
|
{% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
|
|
{% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
|
|
{% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
|
|
{% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
|
|
{% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
|
|
{% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
|
|
{% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
|
|
{% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
|
|
{% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
|
|
{% elif widget.type == "author-card-compact" %}{% set widgetTitle = "Author" %}
|
|
{% elif widget.type == "subscribe" %}{% set widgetTitle = "Subscribe" %}
|
|
{% elif widget.type == "toc" %}{% set widgetTitle = "Table of Contents" %}
|
|
{% elif widget.type == "post-categories" %}{% set widgetTitle = "Categories" %}
|
|
{% elif widget.type == "share" %}{% set widgetTitle = "Share" %}
|
|
{% elif widget.type == "ai-usage" %}{% set widgetTitle = "AI Transparency" %}
|
|
{% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
|
|
{% else %}{% set widgetTitle = widget.type %}
|
|
{% endif %}
|
|
|
|
{# Resolve widget icon and accent border #}
|
|
{% if widget.type == "social-activity" %}
|
|
{% set widgetIcon = "globe" %}{% set widgetIconClass = "w-5 h-5 text-[#0085ff]" %}{% set widgetBorder = "border-l-[3px] border-l-[#0085ff]" %}
|
|
{% elif widget.type == "github-repos" %}
|
|
{% set widgetIcon = "gitea" %}{% set widgetIconClass = "w-5 h-5" %}{% set widgetBorder = "border-l-[3px] border-l-[#609926]" %}
|
|
{% elif widget.type == "funkwhale" %}
|
|
{% set widgetIcon = "headphones" %}{% set widgetIconClass = "w-5 h-5 text-purple-500" %}{% set widgetBorder = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
|
|
{% elif widget.type == "blogroll" %}
|
|
{% set widgetIcon = "book-open" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
|
|
{% elif widget.type == "feedland" %}
|
|
{% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
|
|
{% elif widget.type == "subscribe" %}
|
|
{% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-orange-500" %}{% set widgetBorder = "border-l-[3px] border-l-orange-400 dark:border-l-orange-500" %}
|
|
{% elif widget.type == "fediverse-follow" %}
|
|
{% set widgetIcon = "user-plus" %}{% set widgetIconClass = "w-5 h-5 text-[#a730b8]" %}{% set widgetBorder = "border-l-[3px] border-l-[#a730b8]" %}
|
|
{% elif widget.type == "author-card" or widget.type == "author-card-compact" %}
|
|
{% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "recent-posts" %}
|
|
{% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "categories" or widget.type == "post-categories" %}
|
|
{% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "recent-comments" %}
|
|
{% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "search" %}
|
|
{% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "webmentions" %}
|
|
{% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "ai-usage" %}
|
|
{% set widgetIcon = "zap" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
|
|
{% elif widget.type == "toc" %}
|
|
{% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% elif widget.type == "share" %}
|
|
{% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %}
|
|
{% else %}
|
|
{% set widgetIcon = "" %}{% set widgetIconClass = "" %}{% set widgetBorder = "" %}
|
|
{% endif %}
|
|
|
|
{% set widgetKey = "post-widget-" + widget.type + "-" + loop.index0 %}
|
|
{% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
|
|
|
|
{# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
|
|
<div
|
|
class="widget-collapsible mb-4"
|
|
x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
|
|
>
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden {{ widgetBorder }}">
|
|
<button
|
|
class="widget-header w-full p-4"
|
|
@click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
|
|
:aria-expanded="open ? 'true' : 'false'"
|
|
>
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">
|
|
{% if widgetIcon %}{{ icon(widgetIcon, widgetIconClass) }}{% endif %}
|
|
{{ widgetTitle }}
|
|
</h3>
|
|
<svg
|
|
class="widget-chevron"
|
|
:class="open && 'rotate-180'"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
x-cloak
|
|
>
|
|
{# Widget content — inner .widget provides padding, inner title hidden by CSS #}
|
|
{% if widget.type == "author-card-compact" %}
|
|
{% include "components/widgets/author-card-compact.njk" %}
|
|
{% elif widget.type == "author-card" %}
|
|
{% include "components/widgets/author-card.njk" %}
|
|
{% elif widget.type == "toc" %}
|
|
{% include "components/widgets/toc.njk" %}
|
|
{% elif widget.type == "post-categories" %}
|
|
{% include "components/widgets/post-categories.njk" %}
|
|
{% elif widget.type == "recent-posts" %}
|
|
{% include "components/widgets/recent-posts-blog.njk" %}
|
|
{% elif widget.type == "webmentions" %}
|
|
{% include "components/widgets/webmentions.njk" %}
|
|
{% elif widget.type == "share" %}
|
|
{% include "components/widgets/share.njk" %}
|
|
{% elif widget.type == "subscribe" %}
|
|
{% include "components/widgets/subscribe.njk" %}
|
|
{% elif widget.type == "social-activity" %}
|
|
{% include "components/widgets/social-activity.njk" %}
|
|
{% elif widget.type == "github-repos" %}
|
|
{% include "components/widgets/github-repos.njk" %}
|
|
{% elif widget.type == "funkwhale" %}
|
|
{% include "components/widgets/funkwhale.njk" %}
|
|
{% elif widget.type == "blogroll" %}
|
|
{% include "components/widgets/blogroll.njk" %}
|
|
{% elif widget.type == "feedland" %}
|
|
{% include "components/widgets/feedland.njk" %}
|
|
{% elif widget.type == "categories" %}
|
|
{% include "components/widgets/categories.njk" %}
|
|
{% elif widget.type == "recent-comments" %}
|
|
{% include "components/widgets/recent-comments.njk" %}
|
|
{% elif widget.type == "search" %}
|
|
{% include "components/widgets/search.njk" %}
|
|
{% elif widget.type == "fediverse-follow" %}
|
|
{% include "components/widgets/fediverse-follow.njk" %}
|
|
{% elif widget.type == "ai-usage" %}
|
|
{% include "components/widgets/ai-usage.njk" ignore missing %}
|
|
{% elif widget.type == "custom-html" %}
|
|
{% set wConfig = widget.config or {} %}
|
|
<is-land on:visible>
|
|
<div class="widget" role="region" aria-label="Custom content">
|
|
{% if wConfig.content %}
|
|
<div class="prose dark:prose-invert prose-sm max-w-none">
|
|
{{ wConfig.content | safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</is-land>
|
|
{% else %}
|
|
<!-- Unknown widget type: {{ widget.type }} -->
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if showArticleToc and not hasConfiguredToc and (widget.type == "author-card" or widget.type == "author-card-compact") %}
|
|
{% set widgetKey = "post-widget-toc-article" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("list", "w-5 h-5 text-surface-600 dark:text-surface-400") }} Table of Contents</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/toc.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
{% else %}
|
|
{# === Fallback: aligned with rmendes.net article sidebar === #}
|
|
|
|
{# Author #}
|
|
{% set widgetKey = "post-widget-author-card-compact-0" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("user", "w-5 h-5 text-surface-600 dark:text-surface-400") }} Author</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/author-card-compact.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if showArticleToc %}
|
|
{# Table of Contents (articles only) #}
|
|
{% set widgetKey = "post-widget-toc-article" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("list", "w-5 h-5 text-surface-600 dark:text-surface-400") }} Table of Contents</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/toc.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Post Categories #}
|
|
{% set widgetKey = "post-widget-post-categories-2" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("tag", "w-5 h-5 text-surface-600 dark:text-surface-400") }} Categories</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/post-categories.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Share #}
|
|
{% set widgetKey = "post-widget-share-1" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("share", "w-5 h-5 text-surface-600 dark:text-surface-400") }} Share</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/share.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Social Activity #}
|
|
{% set widgetKey = "post-widget-social-activity-3" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-[#0085ff]">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("globe", "w-5 h-5 text-[#0085ff]") }} Social Activity</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/social-activity.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Listening #}
|
|
{% set widgetKey = "post-widget-funkwhale-4" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-purple-400 dark:border-l-purple-500">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("headphones", "w-5 h-5 text-purple-500") }} Listening</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/funkwhale.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Blogroll #}
|
|
{% if blogrollStatus and blogrollStatus.source == "indiekit" %}
|
|
{% set widgetKey = "post-widget-blogroll-5" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("book-open", "w-5 h-5 text-amber-500") }} Blogroll</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/blogroll.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Subscribe #}
|
|
{% set widgetKey = "post-widget-subscribe-6" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-orange-400 dark:border-l-orange-500">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("rss", "w-5 h-5 text-orange-500") }} Subscribe</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/subscribe.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Fediverse #}
|
|
{% set widgetKey = "post-widget-fediverse-follow-7" %}
|
|
<div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
|
|
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-[#a730b8]">
|
|
<button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
|
|
<h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("user-plus", "w-5 h-5 text-[#a730b8]") }} Fediverse</h3>
|
|
<svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
{% include "components/widgets/fediverse-follow.njk" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|