Index: src/views/pages/search.ejs =================================================================== --- src/views/pages/search.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ src/views/pages/search.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -1,265 +1,9 @@ -<% const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; %> -<% const _tracks = (typeof tracks !== 'undefined' && tracks) ? tracks : []; %> -<% const _events = (typeof events !== 'undefined' && events) ? events : []; %> -<% const _pages = (typeof pages !== 'undefined' && pages) ? pages : []; %> -
-

<%= t('nav.search') %>

+<%# + /search?q=... is geen eigen pagina meer met een eigen uiterlijk (Robins + ontwerp, 30-9): het is het zoekvlak, open, met de resultaten al op de server + gerenderd. Een gedeelde link en Enter zonder JavaScript komen zo op precies + hetzelfde beeld uit als de zoekbalk op elke andere pagina. -
- - -
- - <% if (queryError) { %> -

<%= t('search.error') %>

- <% } %> - - <% if (query && !queryError) { %> -

- <%= t(total === 1 ? 'search.results_one' : 'search.results_other', { n: total, q: query }) %> -

- <% } %> - - <%# Een geplakt adres is geen zoekterm maar een aanwijzing (shaer-utpi): het - object van de andere server staat bovenaan, met dezelfde knoppen als op - /authorize_interaction -- dezelfde partial, dus één render en één plek - waar een poort of een sanitizer kan wonen. %> - <% if (typeof remoteUri !== 'undefined' && remoteUri) { %> -

<%= t('search.section_fediverse') %>

-
- <% if (!mayLookup) { %> - <%# Ophalen is een uitgaand verzoek namens deze server; dat doen we niet - op verzoek van een willekeurige bezoeker. %> -

<%= t('search.fedi_signin') %>

- <% } else if (remote && remoteKind === 'note') { %> - <%- include('../partials/remote-object', { target: remote, uri: remoteUri, reacted: remoteReacted, siteTitle: siteTitle, cancelUrl: _base + '/search?q=' + encodeURIComponent(query) }) %> - <% } else if (remote && remoteKind === 'actor') { %> - <%- include('../partials/remote-actor', { actor: remote, siteTitle: siteTitle }) %> - <% } else { %> -

<%= t('fedi.remote_notfound') %>

- <% } %> -
- <%- include('../partials/fedi-interact-styles') %> - <% } %> - - <% if (_tracks.length) { %> -

<%= t('search.section_tracks') %>

- <% var _inPost = t('search.in_post'); /* t() vóór de loop ophalen: function(t) overschaduwt 'm */ %> -
- <% _tracks.forEach(function(t) { - const tj = JSON.stringify({ id: t.id, url: t.url, title: t.title, artist: t.artist || '', cover: t.cover || '' }) - .replace(/&/g, '&').replace(/'/g, ''').replace(/ -
- - <% if (t.cover) { %> - - <% } %> -
-
<%= t.title %>
- <% if (t.artist || t.album) { %> -
- <%= t.artist %><% if (t.artist && t.album) { %> · <% } %><%= t.album %> -
- <% } %> -
- <% if (t.postUrl) { %> - <%= _inPost %> - <% } %> -
- <% }); %> -
- <% } %> - - <% if (results && results.length) { %> - <% if (_tracks.length) { %>

<%= t('search.section_posts') %>

<% } %> -
    - <% results.forEach(function(r) { %> -
  1. -

    - - <%= r.title || '(zonder titel)' %> - -

    -

    - <%= r.author_username %> - <% if (r.published_at) { %> · <%= formatDate(r.published_at) %><% } %> -

    -

    <%- r.snippet %>

    -
    2. - <% }); %> -
- <% } %> - - <% if (_events.length) { %> -

<%= t('search.section_events') %>

-
    - <% _events.forEach(function(ev) { %> -
  1. -

    <%= ev.where || '—' %>

    -

    <%= [ev.date, ev.time].filter(Boolean).join(' ') %>

    -
    2. - <% }); %> -
- <% } %> - - <% if (_pages.length) { %> -

<%= t('search.section_pages') %>

- - <% } %> - - <% if (query && !queryError && !results.length && !_tracks.length && !_events.length && !_pages.length) { %> -

<%= t('search.empty') %>

- <% } %> -
- - + De opmaak staat in partials/search-styles.ejs, die de topnav al meebrengt. +%> +<%- include('../partials/search-surface', Object.assign({}, locals, { mode: 'page' })) %> Index: src/views/partials/fedi-interact-styles.ejs =================================================================== --- src/views/partials/fedi-interact-styles.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ src/views/partials/fedi-interact-styles.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -159,16 +159,8 @@ border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent); background: var(--paper, #fff); color: var(--ink, #000); } - /* De live-preview: open-link onder de kaart, en de kaart zonder rand-marge. */ + /* De compacte kaart in het zoekvak: de link naar de volle pagina eronder. */ .rp-open { display: block; padding: 10px 4px 2px; text-align: right; font-weight: 600; font-size: .88rem; color: var(--accent, #06c); text-decoration: none; } .rp-open:hover { text-decoration: underline; } - .ss-remote { padding: 4px 0 6px; } - .ss-remote-note { padding: .8rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; } - .ss-remote-loading { display: flex; align-items: center; gap: 10px; padding: .9rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; } - .ss-remote-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; - border: 2px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent); border-top-color: var(--accent, #06c); - animation: ss-spin .8s linear infinite; } - @keyframes ss-spin { to { transform: rotate(360deg); } } - @media (prefers-reduced-motion: reduce) { .ss-remote-loading::before { animation: none; } } /* Smal scherm: alleen de tekens, gelijk verdeeld over de breedte. De woorden Index: src/views/partials/remote-preview.ejs =================================================================== --- src/views/partials/remote-preview.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ (revision ) @@ -1,28 +1,0 @@ -<%# - De live-preview van een geplakt adres, onder de zoekbalk (shaer-utpi). - - Een los fragment, geen pagina: de zoekbalk haalt dit op terwijl je plakt en - zet het in de uitklaplijst. Daarom: - - - GEEN SCRIPT. Wat via innerHTML binnenkomt draait niet, en onder de - strenge CSP zou het ook niet mogen. Het gedrag (waarderen en boosten - zonder de pagina te verlaten) zit in chrome.js, dat op elke pagina staat. - - DE OPMAAK REIST MEE. De overlay staat op elke pagina en die heeft de - opmaak van de kaart niet vanzelf; style-src staat inline toe. - - COMPACT. Antwoorden en melden gebeuren op de volle pagina: een editor in - een uitklaplijst is op een telefoon geen plek om te schrijven. - - Verwacht: remote, remoteKind ('note' | 'actor' | null), remoteUri, reacted, - siteTitle. -%> -<%- include('./fedi-interact-styles') %> -
-
<%= t('search.section_fediverse') %>
- <% if (remote && remoteKind === 'note') { %> - <%- include('./remote-object', { target: remote, uri: remoteUri, reacted: reacted, siteTitle: siteTitle, compact: true }) %> - <% } else if (remote && remoteKind === 'actor') { %> - <%- include('./remote-actor', { actor: remote, siteTitle: siteTitle, compact: true }) %> - <% } else { %> -
<%= t('fedi.remote_notfound') %>
- <% } %> -
Index: src/views/partials/search-results.ejs =================================================================== --- src/views/partials/search-results.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) +++ src/views/partials/search-results.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -0,0 +1,138 @@ +<%# + Wat er onder de zoekbalk staat. EEN render voor beide ingangen: het live + resultatenvak (via /search/results) en de pagina /search?q=... zelf. Zo zien + ze er per constructie hetzelfde uit; twee renders lopen gegarandeerd uit de + pas. + + Verwacht: query, results (posts), tracks, events, pages, queryError, + remoteUri, remote, remoteKind, mayLookup, remoteReacted, siteTitle, + siteUrlBase, formatDate, t. + + GEEN SCRIPT hierin: het live vak zet dit via innerHTML neer, en daar draait + niets. Gedrag (afspelen, waarderen, htmx-links) luistert op document. +%> +<% + const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; + const _results = (typeof results !== 'undefined' && results) ? results : []; + const _tracks = (typeof tracks !== 'undefined' && tracks) ? tracks : []; + const _events = (typeof events !== 'undefined' && events) ? events : []; + const _pages = (typeof pages !== 'undefined' && pages) ? pages : []; + const _remote = (typeof remoteUri !== 'undefined' && remoteUri) ? remoteUri : ''; + // Alles via locals: een veld dat een aanroeper vergeet mag de render niet + // laten omvallen (een kale verwijzing naar iets ongedefinieerds gooit). + const _queryError = !!locals.queryError; + const _mayLookup = !!locals.mayLookup; + const _found = locals.remote || null; + const _kind = locals.remoteKind || null; + const _reacted = locals.remoteReacted || { liked: false, boosted: false }; + const _siteTitle = locals.siteTitle || ''; + const _inPost = t('search.in_post'); + const _any = _results.length || _tracks.length || _events.length || _pages.length; +%> +<% if (locals.query) { %> +
+ <% if (_remote) { %> + <%# Een geplakt adres is geen zoekterm maar een aanwijzing (shaer-utpi). + Ophalen doen we alleen namens een ingelogde beheerder van de site. %> +
+

<%= t('search.section_fediverse') %>

+ <% if (!_mayLookup) { %> +

<%= t('search.fedi_signin') %>

+ <% } else if (_found && _kind === 'note') { %> + <%- include('./remote-object', { target: _found, uri: _remote, reacted: _reacted, siteTitle: _siteTitle, compact: true }) %> + <% } else if (_found && _kind === 'actor') { %> + <%- include('./remote-actor', { actor: _found, siteTitle: _siteTitle, compact: true }) %> + <% } else { %> +

<%= t('fedi.remote_notfound') %>

+ <% } %> + <% if (_found) { %><%- include('./fedi-interact-styles') %><% } %> +
+ <% } %> + + <% if (_queryError) { %> +

<%= t('search.error') %>

+ <% } %> + + <% if (_tracks.length) { %> +
+

<%= t('search.section_tracks') %>

+
+ <% _tracks.forEach(function (tr) { + const tj = JSON.stringify({ id: tr.id, url: tr.url, title: tr.title, artist: tr.artist || '', cover: tr.cover || '' }) + .replace(/&/g, '&').replace(/'/g, ''').replace(/ +
+ + <% if (tr.cover) { %> + + <% } %> +
+
<%= tr.title %>
+ <% if (tr.artist || tr.album) { %> +
<%= tr.artist %><% if (tr.artist && tr.album) { %> · <% } %><%= tr.album %>
+ <% } %> +
+ <% if (tr.postUrl) { %> + <%= _inPost %> + <% } %> +
+ <% }); %> +
+
+ <% } %> + + <% if (_results.length) { %> +
+

<%= t('search.section_posts') %>

+
    + <% _results.forEach(function (r) { %> +
  1. + + <%= r.title || '(zonder titel)' %> + <%= r.author_username %><% if (r.published_at) { %> · <%= formatDate(r.published_at) %><% } %> + <% if (r.snippet) { %><%- r.snippet %><% } %> + +
    2. + <% }); %> +
+
+ <% } %> + + <% if (_events.length) { %> +
+

<%= t('search.section_events') %>

+
    + <% _events.forEach(function (ev) { %> +
  1. + + <%= ev.where || ev.date %> + <%= [ev.date, ev.time].filter(Boolean).join(' ') %> + +
    2. + <% }); %> +
+
+ <% } %> + + <% if (_pages.length) { %> +
+

<%= t('search.section_pages') %>

+ +
+ <% } %> + + <% if (!_queryError && !_any && !_remote) { %> +

<%= t('search.empty') %>

+ <% } %> +
+<% } %> Index: src/views/partials/search-styles.ejs =================================================================== --- src/views/partials/search-styles.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) +++ src/views/partials/search-styles.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -0,0 +1,70 @@ +<%# + De opmaak van het zoeken: het vlak (balk + vak) en wat erin staat. Staat in + de topnav, dus op elke pagina: de overlay kan overal open, en de pagina + /search gebruikt precies dezelfde regels. +%> + Index: src/views/partials/search-surface.ejs =================================================================== --- src/views/partials/search-surface.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) +++ src/views/partials/search-surface.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -0,0 +1,50 @@ +<%# + Het zoeken, in twee vormen en verder niets: de zoekbalk bovenaan, en + daaronder het vak met resultaten dat alle ruimte krijgt (Robins ontwerp, + 30-9). Er is geen aparte resultatenpagina meer die er anders uitziet. + + EEN PARTIAL, TWEE INGANGEN: + mode 'overlay' in de topnav, op elke pagina; verborgen tot je op zoeken + tikt. Draagt de id's waar chrome.js hem aan herkent. + mode 'page' /search?q=...: dezelfde vorm, open, met de resultaten al + op de server gerenderd. Een gedeelde link en Enter zonder + JavaScript komen zo op precies hetzelfde beeld uit. + + Verwacht: mode, t, siteUrlBase. Voor 'page' ook query en de resultaten + (zie search-results.ejs). +%> +<% + const _page = locals.mode === 'page'; + const _base = locals.siteUrlBase || ''; + const _q = _page ? (locals.query || '') : ''; +%> +
id="search-overlay" hidden<% } %> + role="search" + data-results="<%= _base %>/search/results" data-action="<%= _base %>/search" + data-i18n="<%= JSON.stringify({ looking: t('search.fedi_looking') }) %>"> +
+
+ > + + <% if (_page) { %> + <%# Op de pagina is "sluiten" teruggaan waar je vandaan kwam. Zonder JS + brengt de link je naar het begin van de site. %> + + + + <% } else { %> + + <% } %> +
+
+
+
id="search-suggest"<% } %> aria-live="polite"> + <% if (_page) { %><%- include('./search-results', locals) %><% } %> +
+
+
Index: src/views/partials/topnav.ejs =================================================================== --- src/views/partials/topnav.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ src/views/partials/topnav.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -175,22 +175,8 @@ - -<%# De teksten staan op het element dat ze gebruikt, niet in het script: een - module is een statisch bestand en kan geen vertaling interpoleren. %> - + +<%# Balk + vak, dezelfde partial als de pagina /search: zie search-surface.ejs. %> +<%- include('./search-surface', { mode: 'overlay', t: t, siteUrlBase: _siteUrlBase }) %> +<%- include('./search-styles') %> <%# Het script van de topnav staat in assets/js/mod/chrome.js (shaer-bqr). %> @@ -441,41 +427,5 @@ } -/* ── Search overlay ── */ -.search-overlay { - position: fixed; top: 0; left: 0; right: 0; - background: color-mix(in srgb, var(--paper) 96%, transparent); - backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); - border-bottom: 1px solid var(--rule); - padding: 1rem 0; z-index: 200; - padding-top: calc(1rem + env(safe-area-inset-top, 0)); - box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent); -} -.search-overlay-form { display: flex; gap: .5rem; align-items: center; } -.search-overlay-form input { - flex: 1; padding: .85rem 1rem; - min-height: 44px; - border: 1px solid var(--rule); border-radius: 8px; - font-family: var(--font-ui); font-size: 1rem; - background: var(--paper); color: var(--ink); -} -.search-overlay-form input:focus { - outline: 2px solid var(--accent); outline-offset: 0; -} -.search-overlay-form .nav-btn { - width: 44px; height: 44px; - display: inline-flex; align-items: center; justify-content: center; -} -/* Live-resultaten dropdown */ -.search-suggest { margin-top: .6rem; max-height: 60vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: .25rem; } -.search-suggest:empty { display: none; } -.ss-group { padding: .25rem 0; } -.ss-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, var(--ink-muted)); padding: .35rem .25rem .2rem; } -.ss-item { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; } -.ss-item:hover { background: var(--paper-2); color: var(--accent); } -.ss-item.ss-noclick { opacity: .7; cursor: default; } -.ss-sub { color: var(--ink-soft, var(--ink-muted)); font-size: .85em; } -.ss-empty { padding: .8rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; } -.ss-all { display: block; margin-top: .35rem; padding: .55rem .6rem; border-top: 1px solid var(--rule); color: var(--accent); font-weight: 600; text-decoration: none; font-size: .9rem; } -.ss-all:hover { text-decoration: underline; } +/* Het zoeken heeft zijn opmaak in partials/search-styles.ejs. */ /* Notification bell + unread badge */ .nav-notif { position: relative; } Index: src/views/shell.ejs =================================================================== --- src/views/shell.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ src/views/shell.ejs (revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b) @@ -130,5 +130,5 @@ // ontwikkeling een jaar gecachet, dus zonder bump bereikt een reparatie // iedereen behalve wie de fout al heeft. -const MOD_V = 65; +const MOD_V = 66; %>