Okazało się, że z PhotoPrism nie ma takiego problemu. A ponieważ mam obie rzeczy (z współdzielonymi zdjęciami) to, z wykorzystaniem Claude dorobiłem sobie automacik. O.

Zdjęcia z wczoraj.

#writefreely #photoprism #claude

— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online

by Claude 🫣

custom CSS

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

i w treści

<div class="galeria">
  <img src="URL_ZDJECIA_1" alt="Opis 1">
  <img src="URL_ZDJECIA_2" alt="Opis 2">
  <img src="URL_ZDJECIA_3" alt="Opis 3">
</div>

Łezka mi się w oku kręci, ponieważ takie cuda z CSSem ostatni raz robiłem w 2004 roku, gdy administrowałem stroną KMP we Wrocławiu mając ograniczony dostęp do serwera. 🥹

#writefreely #galeria #claude

— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online

<script>
(function() {
    // Celujemy w kontener z treścią artykułu
    var post = document.querySelector('article#post-body') || document.querySelector('.post-content');
    if (!post) return;

    var html = post.innerHTML;

    // 1. Zamiana [ ^1] na linki górne (indeks)
    // Szukamy [^cyfry], które NIE mają po sobie dwukropka
    html = html.replace(/\[\^(\d+)\](?!\:)/g, '<sup id="fnref:$1"><a href="#fn:$1" class="footnote-ref">$1</a></sup>');

    // 2. Zamiana [ ^1]: na treść przypisu na dole
    // Szukamy [^cyfry]: spacja i treść aż do końca linii
    html = html.replace(/\[\^(\d+)\]\:\s*(.+)/g, '<div class="footnote-item" id="fn:$1"><sup>$1.</sup> $2 <a href="#fnref:$1" class="footnote-backref">↩</a></div>');

    post.innerHTML = html;
})();
</script>

i custom CSS:

.footnote-ref { 
   font-size: 0.8em;
   vertical-align: super;
   margin-left: 2px;
   text-decoration: none;
}
.footnote-item { 
    font-size: 0.9em; 
    margin-top: 1em; 
    color: #555; 
}
.footnote-backref { 
    text-decoration: none; 
    color: #999; 
    margin-left: 5px; 
}
.footnote-item {
    border-top: 1px solid #888; /* delikatna linia */
    padding-top: 10px;
    margin-top: 20px;
}

#writefreely #footnote #przypisy #GeminiAI

[^1]: Gemini AI

— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online

No i zasiał ziarno (O! Właśnie! Ogródek w Astrobotany trzeba podlać) gemini://astrobotany.mozz.us/public/3f6068c9a40347c7a959f5cb05434466/m1

We WriteFreely nie ma/nie znalazłem opcji przełączania trybu. Albo masz jasny defaultowo albo zmieniasz na swój za pomocą CSS. Ja zmieniłem.

No i zaczęło się szukanie. Na szczęście mam swoje SearNGX, więc śmieci zostały odrzucone i zostało samo gęste. ;–)

Znazłem!

unit-4-theme-switcher

This project demonstrates a simple and interactive theme switcher using HTML, CSS, and JavaScript. It allows users to toggle between different themes (such as light mode and dark mode) to enhance user experience and accessibility

Przerobiłem trochę pliki tmpl we WriteFreely, zmieniłem custom CSS dodając opcję light-mode i… Chyba działa. :–)

Co zmieniłem

writefreely/templates/include/post-render.tmpl dodałem

  <div class="theme-toggle" style="text-align:right">
    <button id="light-btn">🔆</button>
    <button id="dark-btn">☀</button>
  </div>
<script src="/js/theme_switcher.js" type="text/javascript"></script>

writefreely/static/js/ wrzuciłem skrypt theme_switcher.js ze strony jw.

zmieniłem custom CSS dodając dodatkowo .light-mode gdzie to należało dodać, na przykład:

body.light-mode {
/* idea:
https://github.com/gobikaarumugam/unit-4-theme-switcher
*/
  background-color: #f0f0f0;
  color: #000;
}

i to samo w innych selektorach.

#writefreely #darkmode #lightmode #switcher

— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online