Współpraca z Immichem pod kątem wrzucania jakoś z automatu zdjęć z udostępnianych albumów szła jak po grudzie.
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
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. 🥹
— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online
Z pomocą Gemini AI[^1] (🫣) dodałem przypisy do WriteFreely.
<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
Wczoraj, w uprzejmy i elegancki sposób, Kuba zwrócił mi uwagę, że nie każdy lubi dark mode przy czytaniu, na przykład tego blogu.
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. ;–)
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. :–)
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