Index: src/routes/circle.js =================================================================== --- src/routes/circle.js (revision aa7f54824c022cb86c0b15cd77dd190ef333ce42) +++ src/routes/circle.js (revision 43dbf9c41de8e6cc1512805acbe92a1f05069786) @@ -37,18 +37,26 @@ .filter((m) => m.url); const image = media.find((m) => m.type === 'image') || null; + // Vorm de remote-post naar het lokale post-shape zodat post-card/post-tile + // (dezelfde timeline/grid-view als de home) 'm renderen. external_url maakt + // de partials extern-linkend (naar de bron) i.p.v. lokaal/htmx. return { id: r.id, + slug: encodeURIComponent(r.id), title: r.title || '(zonder titel)', - summary: r.summary || '', - url: safeUrl(r.url), - published: r.published, - actorName: r.actor_name || 'Onbekend', - actorUrl: safeUrl(r.actor_url), - actorAvatar: safeUrl(r.actor_avatar), - image: image ? image.url : null, + excerpt: r.summary || '', + cover_image_url: image ? image.url : null, + published_at: r.published, + created_at: r.published, + type: 'post', + tags: '', + pinned: 0, + status: 'published', + external_url: safeUrl(r.url), + source_name: r.actor_name || 'Onbekend', + source_url: safeUrl(r.actor_url), }; }); - renderPage(req, res, 'pages/circle-feed', { pageTitle: 'Cirkel', posts }); + renderPage(req, res, 'pages/circle-feed', { pageTitle: 'Cirkel', bodyClass: 'on-cirkel', posts }); }); Index: src/views/pages/circle-feed.ejs =================================================================== --- src/views/pages/circle-feed.ejs (revision aa7f54824c022cb86c0b15cd77dd190ef333ce42) +++ src/views/pages/circle-feed.ejs (revision 43dbf9c41de8e6cc1512805acbe92a1f05069786) @@ -1,65 +1,44 @@ -
-
-

Cirkel

-

Wat er speelt bij de andere sites in deze cirkel.

-
+
+

Cirkel

+

Wat er speelt bij de andere sites in deze cirkel.

+
- <% if (!posts.length) { %> -

Nog niets in je cirkel. Voeg sites toe via +<% if (!posts.length) { %> +

+

Nog niets in je cirkel. Voeg sites toe via Beheer › Cirkel en ververs ze.

- <% } else { %> -
- <% posts.forEach(function(p){ %> - +
+<% } else { %> + + <%# Dezelfde view als de hoofdpagina: timeline (post-card) + grid (post-tile), + gewisseld door de view-switcher via body[data-feed-view]. De remote-posts + zijn in circle.js naar het lokale post-shape gevormd (met external_url, + zodat de kaarten naar de bron-site linken). %> + + +
+
    + <% posts.forEach(function(post){ %> + <%- include('../partials/post-card', { post: post }) %> + <% }); %> +
+
+ + +
+
+ <% posts.forEach(function(post){ %> + <%- include('../partials/post-tile', { post: post }) %> <% }); %>
- <% } %> -
+ + +<% } %> Index: src/views/partials/post-card.ejs =================================================================== --- src/views/partials/post-card.ejs (revision aa7f54824c022cb86c0b15cd77dd190ef333ce42) +++ src/views/partials/post-card.ejs (revision 43dbf9c41de8e6cc1512805acbe92a1f05069786) @@ -12,5 +12,8 @@ const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; -const _href = _base + '/' + post.slug; +const _external = post.external_url || null; +const _href = _external || (_base + '/' + post.slug); +const _ext = !!_external; +const _src = post.source_name || ''; const _hasCover = !!post.cover_image_url; const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : ''; @@ -43,6 +46,5 @@ <% if (_hasCover) { %> target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %> aria-label="<%= post.title || '(zonder titel)' %>" tabindex="-1"> @@ -54,4 +56,5 @@ <% if (_isPinned) { %>★<% } %> + <% if (_src) { %>· via <%= _src %><% } %> <% if (_typeLabel) { %> · <%= _typeLabel.charAt(0).toUpperCase() + _typeLabel.slice(1) %> @@ -64,6 +67,5 @@

+ <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>> <%= post.title || '(zonder titel)' %> Index: src/views/partials/post-tile.ejs =================================================================== --- src/views/partials/post-tile.ejs (revision aa7f54824c022cb86c0b15cd77dd190ef333ce42) +++ src/views/partials/post-tile.ejs (revision 43dbf9c41de8e6cc1512805acbe92a1f05069786) @@ -8,14 +8,12 @@ const _typeLabel = (post.type && post.type !== 'post') ? post.type : ''; const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; -const _href = _base + '/' + post.slug; +const _external = post.external_url || null; +const _href = _external || (_base + '/' + post.slug); +const _ext = !!_external; %> style="background-image: url('<%= post.cover_image_url %>'); --tile-hue: <%= _tileHue %>;"<% } else { %>style="--tile-hue: <%= _tileHue %>;"<% } %> - hx-get="<%= _href %>?partial=1" - hx-target="#pcms-main" - hx-swap="innerHTML" - hx-push-url="<%= _href %>" - hx-indicator="#pcms-loading"> + <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>> <% if (_typeLabel) { %> Index: src/views/shell.ejs =================================================================== --- src/views/shell.ejs (revision aa7f54824c022cb86c0b15cd77dd190ef333ce42) +++ src/views/shell.ejs (revision 43dbf9c41de8e6cc1512805acbe92a1f05069786) @@ -385,5 +385,5 @@ // navigate to home in the chosen view, so the switcher is never // a dead control. - var FEED_PAGE_CLASSES = ['on-home', 'on-archive', 'on-tag', 'on-type', 'on-user']; + var FEED_PAGE_CLASSES = ['on-home', 'on-archive', 'on-tag', 'on-type', 'on-user', 'on-cirkel']; function isFeedPage() { for (var i = 0; i < FEED_PAGE_CLASSES.length; i++) {