source: Klonkt/src/views/pages/admin-help.ejs@ 91c0a39

<div class="container admin-page hb">
  <p><a href="/admin" class="btn">&larr; Beheer</a></p>
  <h1>Handleiding</h1>
  <p class="hb-intro">Uitleg van alle functies. Typ hieronder om te zoeken op een onderwerp of instructie.</p>

  <div class="hb-search">
    <input type="search" id="hb-q" placeholder="Zoek… (bv. 'agenda', 'foto', 'cirkel', 'downloads')" autocomplete="off" aria-label="Zoek in de handleiding">
  </div>
  <p class="hb-count" id="hb-count" aria-live="polite"></p>

  <div class="hb-list">

    <section class="hb-item">
      <h2>✍️ Nieuwe post schrijven</h2>
      <p>Beheer → <strong>Nieuwe post</strong>. Geef een titel en schrijf je inhoud. Onderaan kies je de status: <em>concept</em> (niet zichtbaar) of <em>gepubliceerd</em>. Concepten staan bovenaan in je Beheer-overzicht zodat je ze terugvindt.</p>
    </section>

    <section class="hb-item">
      <h2>📝 Samenvatting &amp; Cirkel Preview</h2>
      <p>Het veld <strong>Samenvatting &amp; Cirkel Preview</strong> (de excerpt) is de korte previewtekst onder een post in lijsten, én de samenvatting die andere sites tonen als ze je post via een <strong>Cirkel</strong> overnemen. Laat je 'm leeg, dan wordt automatisch het begin van de post gebruikt.</p>
    </section>

    <section class="hb-item">
      <h2>📌 Post pinnen / volgorde</h2>
      <p>In de post-editor kun je een post <strong>pinnen</strong> met een rang (1 = bovenaan). Gepinde posts staan vooraan in de tijdlijn/grid, op volgorde van hun rang. Rang leeg of 0 = niet gepind.</p>
    </section>

    <section class="hb-item">
      <h2>🗓️ Publiceren plannen &amp; alleen voor fans <small>(premium)</small></h2>
      <p>In de editor kun je een <strong>publicatiedatum</strong> in de toekomst zetten — de post verschijnt dan automatisch op dat moment. Met <strong>Alleen voor fans</strong> zien niet-ingelogde bezoekers alleen een teaser + login-uitnodiging; ingelogde fans zien alles.</p>
    </section>

    <section class="hb-item">
      <h2>🖼️ Afbeeldingen in posts</h2>
      <p>Afbeeldingen in de tekst en de cover-afbeelding worden altijd <strong>volledig</strong> getoond op de volledige breedte (niet bijgesneden), met hun natuurlijke hoogte.</p>
    </section>

    <section class="hb-item">
      <h2>🎵 Audio &amp; nummers toevoegen</h2>
      <p>Beheer → <strong>Audio</strong>. Upload een bestand of voeg een <em>link-only</em> nummer toe (zonder upload, alleen "open in"-links). Per nummer vul je titel, artiest, cover, en optioneel album/positie in. In een post toon je een nummer met de shortcode <code>[[track:id]]</code>, een album met <code>[[album:Naam]]</code>, een playlist met <code>[[playlist:id]]</code>.</p>
    </section>

    <section class="hb-item">
      <h2>© Credit, licentie &amp; "open in"</h2>
      <p>Per nummer kun je een <strong>eigenaar/credit</strong> (met © -knop) en een <strong>licentie</strong> instellen — die worden ook in de mp3-metadata geschreven. Met de <strong>open-in</strong>-velden (Spotify / YouTube / SoundCloud) verschijnen knoppen om het nummer op die platforms te openen.</p>
    </section>

    <section class="hb-item">
      <h2>⬇ Downloads <small>(premium)</small></h2>
      <p>Markeer een nummer als <strong>downloadbaar</strong> in Beheer → Audio (⬇-knop). Bezoekers vinden ze op de <strong>/downloads</strong>-pagina en laten hun e-mail achter om het bestand te krijgen (komt op je mailinglijst). Wil je downloads prominent in de feed? Maak een gewone post met slug <code>downloads</code> en pin 'm.</p>
    </section>

    <section class="hb-item">
      <h2>📃 Albums &amp; playlists</h2>
      <p>Geef nummers hetzelfde <strong>album</strong> + een <strong>positie</strong> om een album te vormen. Playlists maak je in Beheer → <strong>Playlists</strong>. Beide toon je in een post met <code>[[album:Naam]]</code> of <code>[[playlist:id]]</code>.</p>
    </section>

    <section class="hb-item">
      <h2>📅 Agenda / evenementen <small>(premium)</small></h2>
      <p>Beheer → <strong>Agenda</strong>. Zet bovenaan <strong>"Agenda tonen op de site"</strong> aan — dan verschijnt de Agenda-knop in de balk en is de agendapagina bereikbaar. Voeg evenementen toe (datum, plaats, locatie, tickets). Bezoekers kunnen zich (los van de nieuwsbrief) aanmelden voor een seintje bij een nieuw evenement.</p>
    </section>

    <section class="hb-item">
      <h2>📰 Perskit <small>(premium)</small></h2>
      <p>Een deelbare perspagina op <strong>/pers</strong>. Bewerk 'm via de <strong>✎ Bewerken</strong>-knop op die pagina zelf (alleen jij ziet die). Stel een korte pers-bio + contact in, en kies <strong>tot 5 nummers</strong> die getoond worden (of laat leeg = automatisch de top-5 meest beluisterd).</p>
    </section>

    <section class="hb-item">
      <h2>🔗 Cirkels (federatie)</h2>
      <p>In Beheer → Instellingen zet je je site op <strong>Cirkel</strong>-modus. Daarna voeg je in Beheer → <strong>Cirkel</strong> andere Klonkt-sites toe; hun publieke posts verschijnen dan in je <strong>/cirkel</strong>-feed. Wat anderen van jóu zien is de titel + de "Samenvatting &amp; Cirkel Preview". Hubs doen niet mee aan cirkels (alleen solo-sites).</p>
    </section>

    <section class="hb-item">
      <h2>📊 Statistieken <small>(premium)</small></h2>
      <p>Beheer → <strong>Statistieken</strong>. Cookievrij gemeten. <strong>Bezoeker-dagen</strong> = unieke bezoekers per dag, opgeteld (géén aantal personen). <strong>Weergaven</strong> = home/feed- en post-loads. Beheerder-bezoeken en bots tellen niet mee. Goed voor trends; absolute aantallen met een korrel zout.</p>
    </section>

    <section class="hb-item">
      <h2>✉️ Nieuwsbrief <small>(premium)</small></h2>
      <p>Beheer → <strong>Nieuwsbrief</strong>: stel een bericht op en stuur het naar je bevestigde abonnees. Bezoekers melden zich aan via de footer of <strong>/nieuwsbrief</strong>. Versturen vereist dat e-mail (SMTP) is ingesteld.</p>
    </section>

    <section class="hb-item">
      <h2>🔗 Link-in-bio <small>(premium)</small></h2>
      <p>Een Linktree-achtige pagina op <strong>/links</strong> met je profiel-links. De kliks per link zie je terug in Statistieken.</p>
    </section>

    <section class="hb-item">
      <h2>▶️ Embedbare speler <small>(premium)</small></h2>
      <p>Beheer → Audio toont een kopieerbare <code>&lt;iframe&gt;</code>-code (<strong>/embed</strong>) waarmee je je speler op een andere website kunt insluiten.</p>
    </section>

    <section class="hb-item">
      <h2>🎨 Uiterlijk (thema, foto, accent)</h2>
      <p>Beheer → <strong>Uiterlijk</strong>: stel je sitenaam, tagline, profielfoto, accentkleur en kleurpalet in, en de standaard feed-weergave (Tijdlijn of Grid).</p>
    </section>

    <section class="hb-item">
      <h2>👥 Solo- / Hub-modus</h2>
      <p>Beheer → <strong>Instellingen</strong>: <em>Solo</em> = één site (jij). <em>Hub</em> = een bedrijfs-/labelsite met meerdere makers, elk een eigen Klonkt onder <code>/user/&lt;naam&gt;</code>. <em>Cirkel</em> = solo + federatie met andere sites.</p>
    </section>

    <section class="hb-item">
      <h2>⭐ Premium / Patreon</h2>
      <p>Premium-functies (Hub, Statistieken, Agenda, Downloads, Perskit, Nieuwsbrief, Link-in-bio, Embed, fan-login) ontgrendel je in Beheer → Instellingen door Patreon te koppelen ($10 lifetime). Updates en de kernapp blijven altijd gratis.</p>
    </section>

    <section class="hb-item">
      <h2>🔑 Google-login (bezoekers)</h2>
      <p>Beheer → Instellingen → <strong>Google</strong>. Optioneel: laat bezoekers/fans met Google inloggen om te reageren. Jij beheert met je wachtwoord — Google geeft nooit beheerrechten. Vul je eigen Google-client-gegevens in (per site).</p>
    </section>

    <section class="hb-item">
      <h2>🔄 Updates</h2>
      <p>Beheer → <strong>Updates</strong> (alleen god) toont de huidige versie en of er een nieuwere is. Met "Nu bijwerken" haal je de laatste versie binnen.</p>
    </section>

  </div>

  <p class="hb-empty" id="hb-empty" hidden>Geen onderwerpen gevonden voor je zoekopdracht.</p>
</div>

<style>
  .hb { max-width: 760px; }
  .hb h1 { margin-bottom: .25rem; }
  .hb-intro { color: var(--ink-muted, var(--ink-soft)); margin: 0 0 1rem; }
  .hb-search input {
    width: 100%; box-sizing: border-box;
    padding: 0.7rem 0.9rem; font-size: 1rem;
    border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper); color: var(--ink);
    -webkit-appearance: none; appearance: none;
  }
  .hb-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
  .hb-count { color: var(--ink-muted, var(--ink-soft)); font-size: .82rem; margin: .5rem 0 1rem; min-height: 1em; }
  .hb-list { display: flex; flex-direction: column; gap: .75rem; }
  .hb-item { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; }
  .hb-item h2 { font-family: var(--font-display, serif); font-size: 1.15rem; margin: 0 0 .4rem; }
  .hb-item h2 small { font-weight: 400; font-size: .72rem; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem; vertical-align: middle; }
  .hb-item p { margin: 0; line-height: 1.55; color: var(--ink); }
  .hb-item code { background: var(--paper); padding: .08rem .35rem; border-radius: 4px; font-size: .88em; }
  .hb-item.hb-hidden { display: none; }
  .hb-item mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 2px; }
  .hb-empty { color: var(--ink-muted, var(--ink-soft)); padding: 1rem; text-align: center; }
</style>
<script>
(function () {
  var q = document.getElementById('hb-q');
  var items = [].slice.call(document.querySelectorAll('.hb-item'));
  var empty = document.getElementById('hb-empty');
  var count = document.getElementById('hb-count');
  if (!q) return;
  // Bewaar de originele tekst per item (voor highlight-reset).
  items.forEach(function (it) { it._txt = it.textContent.toLowerCase(); });
  function run() {
    var term = q.value.trim().toLowerCase();
    var shown = 0;
    items.forEach(function (it) {
      var hit = !term || it._txt.indexOf(term) >= 0;
      it.classList.toggle('hb-hidden', !hit);
      if (hit) shown++;
    });
    empty.hidden = shown !== 0;
    count.textContent = term ? (shown + ' onderwerp' + (shown === 1 ? '' : 'en') + ' gevonden') : '';
  }
  q.addEventListener('input', run);
})();
</script>