diff --git a/_includes/components/homepage-sidebar.njk b/_includes/components/homepage-sidebar.njk index 4135cac..140beb5 100644 --- a/_includes/components/homepage-sidebar.njk +++ b/_includes/components/homepage-sidebar.njk @@ -1,53 +1,106 @@ {# Homepage Builder Sidebar — renders widgets from homepageConfig.sidebar #} +{# Each widget is wrapped in a collapsible container with localStorage persistence #} {% if homepageConfig.sidebar and homepageConfig.sidebar.length %} {% for widget in homepageConfig.sidebar %} - {% if widget.type == "author-card" %} - {% include "components/widgets/author-card.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 == "recent-posts" %} - {% include "components/widgets/recent-posts.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 == "search" %} - -
-

Search

- - -
-
- {% elif widget.type == "webmentions" %} - {% include "components/widgets/webmentions.njk" %} - {% elif widget.type == "recent-comments" %} - {% include "components/widgets/recent-comments.njk" %} - {% elif widget.type == "fediverse-follow" %} - {% include "components/widgets/fediverse-follow.njk" %} - {% elif widget.type == "custom-html" %} - {# Custom content widget #} - {% set wConfig = widget.config or {} %} - -
- {% if wConfig.title %} -

{{ wConfig.title }}

- {% endif %} - {% if wConfig.content %} -
- {{ wConfig.content | safe }} -
- {% endif %} -
-
- {% else %} - + + {# 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 = "GitHub" %} + {% 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 == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %} + {% else %}{% set widgetTitle = widget.type %} {% endif %} + + {% set widgetKey = "widget-" + widget.type + "-" + loop.index0 %} + {% set defaultOpen = "true" if loop.index0 < 3 else "false" %} + + {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #} +
+
+ + +
+ {# Widget content — inner .widget provides padding, inner title hidden by CSS #} + {% if widget.type == "author-card" %} + {% include "components/widgets/author-card.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 == "recent-posts" %} + {% include "components/widgets/recent-posts.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 == "search" %} + +
+ + +
+
+ {% elif widget.type == "webmentions" %} + {% include "components/widgets/webmentions.njk" %} + {% elif widget.type == "recent-comments" %} + {% include "components/widgets/recent-comments.njk" %} + {% elif widget.type == "fediverse-follow" %} + {% include "components/widgets/fediverse-follow.njk" %} + {% elif widget.type == "custom-html" %} + {% set wConfig = widget.config or {} %} + +
+ {% if wConfig.content %} +
+ {{ wConfig.content | safe }} +
+ {% endif %} +
+
+ {% else %} + + {% endif %} +
+
+
+ {% endfor %} {% endif %} diff --git a/css/tailwind.css b/css/tailwind.css index 9756175..0346fbb 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -292,6 +292,34 @@ @apply font-bold text-lg mb-4; } + /* Collapsible widget wrapper */ + .widget-header { + @apply flex items-center justify-between cursor-pointer; + } + + .widget-header .widget-title { + @apply mb-0; + } + + .widget-chevron { + @apply w-4 h-4 text-surface-400 transition-transform duration-200 shrink-0; + } + + /* Hide inner widget titles when the collapsible wrapper provides one */ + .widget-collapsible .widget .widget-title { + @apply hidden; + } + + /* Hide FeedLand's custom title in collapsible wrapper */ + .widget-collapsible .widget .fl-title { + @apply hidden; + } + + /* Neutralize inner widget card styling when inside collapsible wrapper */ + .widget-collapsible .widget { + @apply border-0 shadow-none rounded-none mb-0 bg-transparent; + } + /* Post cards */ .post-card { @apply p-5 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;