source: Klonkt/src/views/pages/news.ejs@ 22d2f5a8

<div class="tl-wrap">
  <%- include('../partials/fedi-tabs', { active: 'feed' }) %>
  <div class="tl-titlebar">
    <h1 class="tl-title"><%= t('tl.title') %></h1>
    <button type="button" id="tl-paste-btn" class="tl-paste-btn" title="<%= t('fedi.remote_interact') %>" aria-label="<%= t('fedi.remote_interact') %>">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </button>
  </div>
  <p class="tl-lead"><%= t('tl.lead') %></p>

  <div class="tl-paste" id="tl-paste">
    <div class="tl-paste-card" role="dialog" aria-label="<%= t('fedi.remote_interact') %>">
      <button type="button" class="tl-paste-x" aria-label="<%= t('fedi.cancel') %>">&times;</button>
      <h3 class="tl-paste-title"><%= t('fedi.remote_interact') %></h3>
      <input type="url" class="tl-paste-input" inputmode="url" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="<%= t('tl.paste_ph') %>">
      <div class="tl-paste-actions">
        <button type="button" class="tl-paste-cancel"><%= t('fedi.cancel') %></button>
        <button type="button" class="tl-paste-go"><%= t('tl.paste_go') %></button>
      </div>
    </div>
  </div>
  <style>
    .tl-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .tl-boost-by { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .45rem .2rem; }
    .tl-boost-by svg { color: #16a34a; flex: 0 0 auto; }
    .tl-boost-by strong { color: var(--ink); font-weight: 600; }
    .tl-paste-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
      border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
    .tl-paste-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .tl-paste { position: fixed; inset: 0; z-index: 2147483601; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.55); }
    .tl-paste.is-open { display: flex; }
    .tl-paste-card { position: relative; width: 100%; max-width: 460px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
      border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
    .tl-paste-x { position: absolute; top: .5rem; right: .6rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; }
    .tl-paste-title { margin: 0 0 .8rem; font-size: 1.1rem; }
    .tl-paste-input { width: 100%; box-sizing: border-box; padding: .6rem .8rem; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper-2); color: var(--ink); font: inherit; font-size: .95rem; }
    .tl-paste-input:focus { outline: none; border-color: var(--accent); }
    .tl-paste-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
    .tl-paste-actions button { padding: .5rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; border: 0; }
    .tl-paste-cancel { background: transparent; border: 1.5px solid var(--rule); color: var(--ink); }
    .tl-paste-go { background: var(--accent); color: var(--paper); }
  </style>
  <script>
  (function () {
    if (window.__tlPasteWired) return; window.__tlPasteWired = true;
    function modal() { return document.getElementById('tl-paste'); }
    function openM() {
      var m = modal(); if (!m) return;
      var inp = m.querySelector('.tl-paste-input');
      m.classList.add('is-open');
      if (inp) {
        inp.value = ''; inp.focus();
        if (navigator.clipboard && navigator.clipboard.readText) {
          navigator.clipboard.readText().then(function (t) {
            t = (t || '').trim();
            if (/^https?:\/\//i.test(t) && !inp.value) { inp.value = t; inp.select(); }
          }).catch(function () {});
        }
      }
    }
    function closeM() { var m = modal(); if (m) m.classList.remove('is-open'); }
    function go() {
      var m = modal(); if (!m) return;
      var inp = m.querySelector('.tl-paste-input'), v = (inp ? inp.value : '').trim();
      if (!/^https?:\/\//i.test(v)) { if (inp) inp.focus(); return; }
      location.href = '/authorize_interaction?uri=' + encodeURIComponent(v);
    }
    document.addEventListener('click', function (e) {
      if (e.target.closest && e.target.closest('#tl-paste-btn')) { e.preventDefault(); openM(); return; }
      if (e.target.closest && e.target.closest('.tl-paste-go')) { e.preventDefault(); go(); return; }
      if (e.target.closest && (e.target.closest('.tl-paste-cancel') || e.target.closest('.tl-paste-x'))) { e.preventDefault(); closeM(); return; }
      var op = document.querySelector('.tl-paste.is-open'); if (op && e.target === op) closeM();
    });
    document.addEventListener('keydown', function (e) {
      var m = document.querySelector('.tl-paste.is-open'); if (!m) return;
      if (e.key === 'Escape') closeM();
      else if (e.key === 'Enter' && e.target.closest && e.target.closest('.tl-paste')) { e.preventDefault(); go(); }
    });
  })();
  </script>
  <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
  <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>

  <% if (!timeline || !timeline.length) { %>
    <div class="tl-empty">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
      <p><%= t('tl.empty') %></p>
    </div>
  <% } else { %>
    <ol class="tl-feed" id="tl-feed">
      <% timeline.forEach(function(p){ %>
        <%- include('../partials/tl-item', { p: p }) %>
      <% }); %>
    </ol>
    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#tl-feed', morePath: '/news' }) %>
  <% } %>
</div>

<style>
  .tl-wrap { max-width: 640px; margin: 1rem auto 3rem; padding: 0 1rem; }
  .tl-title { margin: 0 0 .15rem; font-size: clamp(1.5rem, 4vw, 1.8rem); }
  .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.5rem; }
  .tl-empty { text-align: center; color: var(--ink-soft, #888); margin: 3rem auto; }
  .tl-empty svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--accent, #888) 60%, transparent); margin: 0 auto .75rem; display: block; }

  .tl-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
  .tl-item { padding: 1.1rem 1.15rem; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 8%, transparent);
    background: color-mix(in srgb, var(--ink, #000) 2.5%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease; }
  .tl-item:hover { border-color: color-mix(in srgb, var(--accent, #888) 32%, transparent);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--ink, #000) 6%, transparent); }

  .tl-head { display: flex; align-items: center; gap: .65rem; margin: 0 0 .65rem; }
  .tl-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
    background: color-mix(in srgb, var(--accent, #888) 22%, transparent); color: var(--accent, #555);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #888) 18%, transparent); }
  .tl-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
  .tl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .tl-author { font-weight: 700; color: var(--ink, inherit); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-author:hover { text-decoration: underline; }
  .tl-handle { color: var(--ink-soft, #888); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-time { color: var(--ink-soft, #999); font-size: .78rem; flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }

  .tl-content { line-height: 1.55; overflow-wrap: anywhere; }
  .tl-content p { margin: .4rem 0; } .tl-content p:first-child { margin-top: 0; } .tl-content p:last-child { margin-bottom: 0; }
  .tl-content a { color: var(--accent, #06c); }
  .tl-content img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }
  /* Long posts collapse to a max height with a fade + "read more" (added by JS only when it overflows). */
  .tl-content.tl-clamp { max-height: 20em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .tl-readmore { display: inline-block; margin: .15rem 0 .1rem; padding: .15rem 0;
    background: none; border: 0; color: var(--accent, #06c); font: inherit; font-weight: 600;
    font-size: .85rem; cursor: pointer; }
  .tl-readmore:hover { text-decoration: underline; }

  /* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
  .tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
  .tl-media-img { display: block; border-radius: 12px; overflow: hidden;
    background-image: linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
      color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%); }
  .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; transition: opacity .4s ease; }
  .tl-media-img img.is-loading { opacity: 0; }
  /* Reserve placeholder space while the (natural-aspect) feed image loads. */
  .tl-media-img:has(img.is-loading) { min-height: 220px; }

  .tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }
  .tl-media-video { max-height: 480px; background: #000; }
  .tl-poll { margin: .75rem 0 0; display: flex; flex-direction: column; gap: 8px; }
  .tl-poll-form { display: flex; flex-direction: column; gap: 8px; }
  .tl-poll-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 10px; cursor: pointer; }
  .tl-poll-choice:hover { border-color: var(--accent); }
  .tl-poll-choice input { accent-color: var(--accent); }
  .tl-poll-btn { align-self: flex-start; margin-top: 2px; }
  .tl-poll-res { position: relative; padding: 9px 12px; border-radius: 10px; overflow: hidden; background: var(--paper-2, rgba(128,128,128,.08)); display: flex; align-items: center; gap: 8px; }
  .tl-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; }
  .tl-poll-res.is-mine .tl-poll-fill { background: color-mix(in srgb, var(--accent) 40%, transparent); }
  .tl-poll-name { position: relative; z-index: 1; flex: 1; font-size: .95rem; }
  .tl-poll-pct { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
  .tl-poll-foot { font-size: .82rem; color: var(--ink-soft, #888); }

  .tl-embed { margin: .75rem 0 0; border-radius: 12px; overflow: hidden; background: var(--paper-2, #111); }
  .tl-embed-frame { width: 100%; border: 0; display: block; aspect-ratio: 16 / 9; }
  .tl-embed-spotify { aspect-ratio: auto; height: 152px; }
  .tl-embed-sc { aspect-ratio: auto; height: 166px; }
  .tl-embed-klonkt { aspect-ratio: auto; height: 180px; background: var(--paper, #fff); }
  .tl-embed-bandcamp { aspect-ratio: auto; height: 470px; }
  .tl-embed-apple { aspect-ratio: auto; height: 175px; }
  .tl-embed-open { display: inline-block; margin: .45rem .9rem 0 0; font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; }
  .tl-embed-open:hover { text-decoration: underline; }

  .tl-orig { display: inline-block; margin: .7rem 0 0; font-size: .82rem; color: var(--accent, #06c); text-decoration: none; }
  .tl-orig:hover { text-decoration: underline; }

  /* Uniform circular action buttons with coloured icons (no emoji). */
  .tl-actions { display: flex; gap: .5rem; margin-top: .9rem; align-items: center; }
  .tl-act-form { margin: 0; display: inline-flex; }
  .tl-act { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
    background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
    color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s, transform .1s; }
  .tl-act svg { width: 18px; height: 18px; display: block; }
  .tl-act:active { transform: scale(.9); }
  .tl-act-like svg { color: #e8b04b; }
  .tl-act-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
  .tl-act-like.is-on { background: color-mix(in srgb, #e8b04b 18%, transparent); border-color: color-mix(in srgb, #e8b04b 60%, transparent); }
  .tl-act-boost svg { color: #2fa85a; }
  .tl-act-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
  .tl-act-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
  .tl-act-reply svg { color: var(--accent, #06c); }
  .tl-act-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
  .tl-act-block svg { color: #e0524d; }
  .tl-act-block:hover { background: color-mix(in srgb, #d9534f 14%, transparent); border-color: color-mix(in srgb, #d9534f 50%, transparent); }
</style>

<script>
(function(){
  if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
  var current = null, currentBtn = null;
  function close(){ if (current) { current.remove(); current = null; currentBtn = null; } }
  function go(raw, uri){ var d=(raw||'').trim().replace(/^@?[^@\s]*@/,'').replace(/^https?:\/\//i,'').replace(/\/.*$/,'').trim(); if(d){ try{ localStorage.setItem('pcmsFediServer', d); }catch(e){} location.href='https://'+d+'/authorize_interaction?uri='+encodeURIComponent(uri||''); } }
  function place(f, b){ var r=b.getBoundingClientRect(); f.style.top=(r.bottom+window.scrollY+6)+'px'; f.style.left=Math.max(8, Math.min(r.left+window.scrollX, window.scrollX+window.innerWidth-340))+'px'; }
  document.addEventListener('click', function(e){
    if (e.target.closest && e.target.closest('.fedi-remote-cancel')) { close(); return; }
    if (current && e.target.closest && e.target.closest('.fedi-remote-form')) return;
    var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
    if (b) {
      e.preventDefault();
      if (currentBtn === b) { close(); return; }
      close();
      var f = document.createElement('form'); f.className='fedi-remote-form'; f.dataset.uri = b.getAttribute('data-fedi-uri')||'';
      f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false"><button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button><button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
      var _inp = f.querySelector('input'); _inp.placeholder = b.getAttribute('data-fedi-ph') || 'mastodon.social';
      try{ var _sv = localStorage.getItem('pcmsFediServer'); if(_sv) _inp.value = _sv; }catch(e){}
      document.body.appendChild(f); place(f, b); current=f; currentBtn=b; _inp.focus(); _inp.select();
      return;
    }
    if (current) close();
  });
  document.addEventListener('submit', function(e){ var f=e.target.closest && e.target.closest('.fedi-remote-form'); if(!f) return; e.preventDefault(); go(f.querySelector('input').value, f.dataset.uri); });
  document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
  window.addEventListener('scroll', close, true);
})();

/* Short feed videos (gif/cover loops like an animated cover) autoplay + loop muted like a GIF;
   longer real videos keep their controls. Decided on the actual duration once metadata loads. */
(function(){
  document.querySelectorAll('.tl-media-video').forEach(function(v){
    if (v.dataset.gifWired) return; v.dataset.gifWired = '1';
    var decide = function(){
      if (v.duration && v.duration <= 30) {
        v.removeAttribute('controls'); v.loop = true; v.muted = true; v.play().catch(function(){});
      }
    };
    if (v.readyState >= 1) decide(); else v.addEventListener('loadedmetadata', decide, { once: true });
  });
})();

/* Like/Boost toggle in place — POST via fetch, flip the button, stay on the page (no reload, no banner). */
(function(){
  if (window.__newsReactWired) return; window.__newsReactWired = true;
  document.addEventListener('submit', function(e){
    var f = e.target.closest && e.target.closest('.tl-react-form');
    if (!f) return;
    e.preventDefault();
    var btn = f.querySelector('button'); if (!btn || btn.disabled) return;
    btn.disabled = true;
    var body = new URLSearchParams();
    new FormData(f).forEach(function(v, k){ body.append(k, v); });
    fetch(f.action, { method: 'POST', body: body, headers: { 'X-Requested-With': 'fetch' }, credentials: 'same-origin' })
      .then(function(r){ return r.ok ? r.json() : null; })
      .then(function(j){ if (j) btn.classList.toggle('is-on', !!j.on); })
      .catch(function(){})
      .then(function(){ btn.disabled = false; });
  });
})();
</script>

<script>
// Collapse long post bodies to a max height with a "read more" toggle — only when the content
// actually overflows. Runs on every /news render (full load + htmx swap); a per-element flag
// prevents double-wiring.
(function(){
  var RM = '<%= t("tl.read_more") %>', SL = '<%= t("tl.show_less") %>';
  document.querySelectorAll('.tl-content:not(.nsfw-media):not([data-rm])').forEach(function(c){
    c.setAttribute('data-rm', '1');
    if (c.scrollHeight > 360) {
      c.classList.add('tl-clamp');
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'tl-readmore'; b.textContent = RM;
      b.addEventListener('click', function(){
        b.textContent = c.classList.toggle('tl-clamp') ? RM : SL;
      });
      c.insertAdjacentElement('afterend', b);
    }
  });
})();
</script>