notetoself - About this blog

2025-02-05

Features 🔗

WebGL Javascript circleSimple.js

A tree MD

Code highlighting 🔗

def main():
    print("Abc")

Mermaid charts 🔗

graph TD A[Public web] -->|HTTP request| B(Firewall) B --> C{Is port open} C -->|Yes| D[App] C -->|No| E[Return error]
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d

special characters 🔗

https://altcodeunicode.com/alt-codes-check-mark-cross-x-mark-ballot-box-symbols/

ToDos 🔗

Images 🔗

IMG_20250117-142446 IMG_4944
IMG_4944 IMG_20250117-142446
A tree img

A tree MD

URL transformation 🔗

location /.11ty/ {
    proxy_pass http://127.0.0.1:8007/.11ty/;
}
location /common/ {
    proxy_pass http://127.0.0.1:8007/common/;
}
location / {
    rewrite ^/sitename/(.*)$ /$1 permanent;
    proxy_pass http://127.0.0.1:8007/sitename/;
    sub_filter_once off;
    sub_filter "/sitename/" "/";
...

Videos 🔗

input="input.mp4"

# Output filenames
output_webm="${input%.mp4}.webm"
output_ogg="${input%.mp4}.ogg"

# Convert to .webm
ffmpeg -i "$input" -c:v libvpx -c:a libvorbis "$output_webm"

# Convert to .ogg
ffmpeg -i "$input" -c:v libtheora -c:a libvorbis "$output_ogg"
ffmpeg -i MVI_3897.MP4  -vf "scale=1280:720" -c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k output.mp4 

ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx -c:a libvorbis MVI_3897_scaled.webm
ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx -b:v 0 -crf 10 -c:a libvorbis -q:a 4 MVI_3897_scaled-2.webm

ffmpeg -i MVI_3897.MP4 -c:v libvpx-vp9 -lossless 1 -c:a libopus -b:a 512k MVI_3897_scaled-3.webm

ffmpeg -i MVI_3897.MP4 -c:v libvpx -lossless -c:a libvorbis ants_vs_centipede_4.webm

time ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx-vp9  -c:a libvorbis ants_vs_centipede_6.webm
time ffmpeg -speed 2 -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx-vp9  -c:a libvorbis ants_vs_centipede_7.webm
time ffmpeg -speed 2 -i MVI_3849.MP4 -vf "scale='if(gt(iw,ih),1280,trunc(iw*1280/ih/2)*2)':'if(gt(ih,iw),1280,trunc(ih*1280/iw/2)*2)'" -c:v libvpx-vp9  -c:a libvorbis MVI_3849.webm

for f in *.webm; do ffmpeg -i $f -vf "select=eq(n\,0)" -vsync vfr -q:v 2 $(basename $f .webm).png; done
<video width="640" height="360" controls>
  <source src="/assets/videos/your-video.mp4" type="video/mp4">
  <source src="/assets/videos/your-video.webm" type="video/webm">
  <source src="/assets/videos/your-video.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

services 🔗

@reboot tmux new-session -d -s sync-blogs \
    wrap-11ty/inotifysync/waitandsync.sh \
    my-server.com:/path/to/served-sites \
    path/to/blog1/ \
    path/to/blog2/

Read 🔗

blog.frost.kiwi 🔗

AAA - Analytical Anti-Aliasing https://news.ycombinator.com/item?id=42191709

FrostKiwi's treasure chest layout packages eleventy.js

nicolas-hoizey.com 🔗

https://github.com/nhoizey/nicolas-hoizey.com

11ty / eleventy 🔗

syntax highlighting 🔗

images 🔗

embeddings 🔗

misc 🔗

https://markllobrera.com/posts/upgrading-eleventy-v3/

Mermaid 🔗

Statistics 🔗

Page source ## Features <details> <summary>WebGL Javascript <a target="_blank" href="circleSimple.js">circleSimple.js</a></summary> <canvas width="100%" height="400px" style="max-height: 400px; aspect-ratio: 1.71" id="canvasSimple"></canvas> <div class="toggleRes" style="border-radius: 50px"> <div> <input type="radio" id="showCirclelabel" name="showQuad" value="false" checked=""> <label for="showCirclelabel">Draw Circle</label> </div> <div> <input type="radio" id="showQuadlabel" name="showQuad" value="true"> <label for="showQuadlabel">Show Quad</label> </div> </div> <script src="circleSimple.js"></script> <script>setupSimple("canvasSimple", "showQuad");</script> </details> {% gallery true %} ![A tree MD](_res/IMG_4944.jpg "Title") {% endgallery %} {% gallery %} ![A tree MD](_res/IMG_4944.jpg "Title") ![IMG_20250117-142446](_res/IMG_20250117-142446.jpg){.glightbox} {% endgallery %} ### Code highlighting ```python def main(): print("Abc") ``` ### Mermaid charts ```mermaid graph TD A[Public web] -->|HTTP request| B(Firewall) B --> C{Is port open} C -->|Yes| D[App] C -->|No| E[Return error] ``` ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d ``` ### special characters https://altcodeunicode.com/alt-codes-check-mark-cross-x-mark-ballot-box-symbols/ - ☐ ☒ ⮽ ☑ 🗹 ⮾ ⮿ ✘ ✔ 🗸 ❎ ❌ ✅✘ ## ToDos * [ ] visualize gpx * [ ] show source * [ ] Search * [ ] Comments * [ ] Site statistics (who, how often, etc) * [ ] Notification / RSS * [ ] show videos * [ ] login / permissions * [ ] Fix: index.html -> infinit recursion * [ ] individual templates * [ ] fix eleventy-plugin-page-assets/ * [ ] nicely sorted Index / TOC * [x] sync: ignore .git and others * [ ] Style / Template - [ ] page break separators >>> - [ ] nice boilerplate / imprint - [ ] nice tables - [ ] show creation / modification / render time - [x] fix checkbox - [x] nicer code blocks * [ ] markdown-it options - [ ] auto-links - [ ] line breaks - [ ] relative links * [ ] Nice Pictures - set size * [ ] Image gallery * [x] Automatic reload * [x] hosting via nginx * [x] debug mode * [x] Pictures from Markor * [x] Code highlighting * [x] Mermaid * [x] Checkboxes * [x] persistence / rebootability ## Images | | | | - | - | | ![IMG_20250117-142446](_res/IMG_20250117-142446.jpg) | ![IMG_4944](_res/IMG_4944.jpg) | | ![IMG_4944](_res/IMG_4944.jpg) | ![IMG_20250117-142446](_res/IMG_20250117-142446.jpg) | <picture><source type="image/webp" srcset="/.11ty/image/?src=sites%2Fnotetoself%2F_res%2FIMG_4944.jpg&width=200&format=webp&via=transform 200w" sizes="1200"><img loading="lazy" decoding="async" src="/.11ty/image/?src=sites%2Fnotetoself%2F_res%2FIMG_4944.jpg&width=200&format=jpeg&via=transform" alt="A tree img" width="200" height="133"></picture> ![A tree MD](_res/IMG_4944.jpg "Title") ## URL transformation * Is there a way to access `sitename`? * `{{ post.url }}` -> `/sitename/rel-post` * `href="/node_modules/sakura.css/css/sakura-ink.css"` * `https://notetoself.om-office.de/common/style/sakura/sakura-ink.css` ``` location /.11ty/ { proxy_pass http://127.0.0.1:8007/.11ty/; } location /common/ { proxy_pass http://127.0.0.1:8007/common/; } location / { rewrite ^/sitename/(.*)$ /$1 permanent; proxy_pass http://127.0.0.1:8007/sitename/; sub_filter_once off; sub_filter "/sitename/" "/"; ... ``` ## Videos ```bash input="input.mp4" # Output filenames output_webm="${input%.mp4}.webm" output_ogg="${input%.mp4}.ogg" # Convert to .webm ffmpeg -i "$input" -c:v libvpx -c:a libvorbis "$output_webm" # Convert to .ogg ffmpeg -i "$input" -c:v libtheora -c:a libvorbis "$output_ogg" ``` ``` ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k output.mp4 ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx -c:a libvorbis MVI_3897_scaled.webm ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx -b:v 0 -crf 10 -c:a libvorbis -q:a 4 MVI_3897_scaled-2.webm ffmpeg -i MVI_3897.MP4 -c:v libvpx-vp9 -lossless 1 -c:a libopus -b:a 512k MVI_3897_scaled-3.webm ffmpeg -i MVI_3897.MP4 -c:v libvpx -lossless -c:a libvorbis ants_vs_centipede_4.webm time ffmpeg -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx-vp9 -c:a libvorbis ants_vs_centipede_6.webm time ffmpeg -speed 2 -i MVI_3897.MP4 -vf "scale=1280:720" -c:v libvpx-vp9 -c:a libvorbis ants_vs_centipede_7.webm time ffmpeg -speed 2 -i MVI_3849.MP4 -vf "scale='if(gt(iw,ih),1280,trunc(iw*1280/ih/2)*2)':'if(gt(ih,iw),1280,trunc(ih*1280/iw/2)*2)'" -c:v libvpx-vp9 -c:a libvorbis MVI_3849.webm for f in *.webm; do ffmpeg -i $f -vf "select=eq(n\,0)" -vsync vfr -q:v 2 $(basename $f .webm).png; done ``` ```html <video width="640" height="360" controls=""> <source src="/assets/videos/your-video.mp4" type="video/mp4"> <source src="/assets/videos/your-video.webm" type="video/webm"> <source src="/assets/videos/your-video.ogv" type="video/ogg"> Your browser does not support the video tag. </video> ``` <video width="140" height="360" controls=""> <source src="_res/VID_20250119_120152.webm" type="video/webm"> Your browser does not support the video tag. </video> ## services * Syncthing * Sync on modification ``` @reboot tmux new-session -d -s sync-blogs \ wrap-11ty/inotifysync/waitandsync.sh \ my-server.com:/path/to/served-sites \ path/to/blog1/ \ path/to/blog2/ ``` ## Read ### blog.frost.kiwi [AAA - Analytical Anti-Aliasing](https://blog.frost.kiwi/analytical-anti-aliasing/) https://news.ycombinator.com/item?id=42191709 [FrostKiwi's treasure chest](https://github.com/FrostKiwi/treasurechest) [layout](https://github.com/FrostKiwi/treasurechest/blob/main/_includes/layout.html) [packages](https://github.com/FrostKiwi/treasurechest/blob/main/package.json) [eleventy.js](https://github.com/FrostKiwi/treasurechest/blob/main/.eleventy.js) ### nicolas-hoizey.com https://github.com/nhoizey/nicolas-hoizey.com ### 11ty / eleventy * nice to read font: https://chipsandcheese.com/p/pushing-amds-infinity-fabric-to-its * [Eleventy is a simpler static site generator](https://www.11ty.dev/) * [Quick From Scratch Intro](https://www.youtube.com/watch?v=kzf9A9tkkl4) * [11ty/assets](https://www.11ty.dev/docs/assets/) * [eleventy-plugin-page-assets](https://www.npmjs.com/package/eleventy-plugin-page-assets) - has a `const`/`let` bug in `plugin.js` #### syntax highlighting * https://www.11ty.dev/docs/plugins/syntaxhighlight/ * https://github.com/KevinGimbel/eleventy-plugin-mermaid #### images * [eleventy-img](https://www.11ty.dev/docs/plugins/image) - [GitHub: Use this plugin with markdown images #90](https://github.com/11ty/eleventy-img/issues/90) * [Optimizing Images with the 11ty Image Plugin](https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin) * https://sharp.pixelplumbing.com/api-output#jpeg * [Image (Shortcodes)](https://www.11ty.dev/docs/plugins/image-shortcodes/) * [Responsive Images in Markdown with Eleventy Image](https://tomichen.com/blog/posts/20220416-responsive-images-in-markdown-with-eleventy-image/) * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images) * [How to optimize and lazy-loading images on eleventy (11ty)](https://maw.sh/blog/how-to-optimize-and-lazyloading-images-on-eleventy/) * [sharp](https://sharp.pixelplumbing.com/api-output) * https://github.com/arve0/markdown-it-attrs * https://github.com/Antonio-Laguna/markdown-it-image-figures ### gallery * https://11tybundle.dev/categories/image-galleries/ * 2024.06.11 https://markllobrera.com/posts/upgrading-eleventy-v3/ * 2021.01.22 https://markllobrera.com/posts/eleventy-building-image-gallery-photoswipe/ * https://github.com/dirtystylus/mllty * 2022.11.09 https://www.bash.lk/posts/tech/1-elventy-image-gallery/ * 2023.10.25 https://darekkay.com/blog/photography-website/ * 2024.01.05 https://darthmall.net/2024/11ty-photo-gallery/ * https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ * https://biati-digital.github.io/glightbox/#specifications * https://github.com/biati-digital/glightbox?tab=readme-ov-file ### embeddings * [eleventy-plugin-embed-everything](https://www.npmjs.com/package/eleventy-plugin-embed-everything) ### misc https://markllobrera.com/posts/upgrading-eleventy-v3/ * [11ty/pitfalls](https://www.11ty.dev/docs/pitfalls/) * [11ty/markdown](https://www.11ty.dev/docs/languages/markdown/) * [11ty/discussions](https://github.com/11ty/eleventy/discussions) * https://dev.to/psypher1/lets-learn-11ty-part-3-collections-shortcodes-macros-p0a * https://11ty.rocks/posts/going-beyond-static-with-eleventy/ * https://davidea.st/articles/11ty-tips-i-wish-i-knew-from-the-start/ * https://griffa.dev/posts/tips-for-debugging-in-11ty/ * [Let's Learn Eleventy ](https://dev.to/psypher1/series/18202) * [Liquid]https://shopify.github.io/liquid/) * https://www.11ty.dev/docs/languages/liquid/ * [Collections (Using Tags)](https://www.11ty.dev/docs/collections/) * [url Universal Filter](https://www.11ty.dev/docs/filters/url/) * [html-base plugin](https://www.11ty.dev/docs/plugins/html-base/) * [phind](https://www.phind.com/search?cache=rgtjxsp6oeanyeyk0tt34lqu) * [Allow pathPrefix to be blank so navigation is relative #2099](https://github.com/11ty/eleventy/issues/2099) * [How to Create Nginx Redirects (with Examples)](https://gridpane.com/kb/some-nginx-redirect-examples/) * [Eleventy and Vue, a match made to power Netlify.com](https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/) * [11ty Rocks!](https://11ty.rocks/) * [ Learn Eleventy From Scratch](https://learneleventyfromscratch.com/#about-your-instructor) * [Add comments to your 11ty blog with utterances](https://dev.to/antopiras89/add-comments-to-your-static-blog-with-utterances-3jao) * https://gridpane.com/kb/some-nginx-redirect-examples/ * https://www.11ty.dev/docs/programmatic/ * https://github.com/jdsteinbach/eleventy-plugin-toc * https://medium.com/@njfamirm/eleventy-folder-structure-guide-89824d1cb5b7 ### Mermaid * [Gantt diagrams](https://mermaid.js.org/syntax/gantt.html) ### Statistics * https://github.com/matomo-org/matomo