Argument for
Literate programming - https://youtu.be/UCEzBNh9ufs?t=461
Versus
Unix style command piping - https://youtu.be/UCEzBNh9ufs?t=559
Last active
December 5, 2024 12:34
-
-
Save NikolaRusakov/d80dd26ea1783f61aacbb434f0147b4c to your computer and use it in GitHub Desktop.
html util gallery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :81 { | |
| root * ./visa-photos | |
| encode gzip | |
| @exists file | |
| handle @exists { | |
| file_server | |
| } | |
| handle { | |
| reverse_proxy index-html:3000 | |
| } | |
| } | |
| # https://caddy.community/t/reverse-proxy-and-file-server/21710/6 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Page Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> --> | |
| <!-- <script src='main.js'></script> --> | |
| </head> | |
| <body> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "preact": "https://esm.sh/preact@10.19.2", | |
| "preact/": "https://esm.sh/preact@10.19.2/", | |
| "htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact", | |
| "react": "https://esm.sh/preact@10.19.2/compat", | |
| "react-dom": "https://esm.sh/preact@10.19.2/compat", | |
| "react/jsx-runtime": "https://esm.sh/preact@10.19.2/jsx-runtime", | |
| "react-photo-album": "https://esm.sh/react-photo-album@2.4.0?alias=react:preact/compat&deps=react&external=preact", | |
| "papaparse": "https://esm.sh/papaparse@5.4.0" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import { render } from "preact"; | |
| import { useReducer, useEffect, useState } from "preact/hooks"; | |
| import { html } from "htm/preact"; | |
| import PhotoAlbum from "react-photo-album"; | |
| import Papa from "papaparse"; | |
| export function App() { | |
| const [count, add] = useReducer((a, b) => a + b, 0); | |
| const [photos, setPhotos] = useState([]); | |
| useEffect(() => { | |
| Papa.parse("./labels.csv", { | |
| download: true, | |
| delimiter: ",", | |
| complete: (results) => { | |
| const photosets = results.data.map(([index, _, title]) => ({ | |
| src: `http://localhost:3000/quality_50,s_600x460,fit_outside/${index}.jpg`, | |
| width: 400, | |
| height: 260, | |
| title, | |
| index, | |
| })); | |
| setPhotos(photosets); | |
| }, | |
| }); | |
| }, []); | |
| // --- https://youtu.be/UCEzBNh9ufs?t=461 | |
| return html` | |
| <${PhotoAlbum} layout="rows" | |
| targetRowHeight="300" | |
| maxPhotos="3" | |
| ...${{ photos }} | |
| renderPhoto=${({ photo, wrapperStyle, renderDefaultPhoto }) => html` | |
| <figure style="position:relative;margin:8px"> | |
| ${renderDefaultPhoto({ wrapped: true })} | |
| ${photo.title && | |
| html` <figcaption | |
| ...${{ | |
| style: { | |
| position: "absolute", | |
| overflow: "hidden", | |
| backgroundColor: "rgba(255 255 255 / .7)", | |
| bottom: -8, | |
| margin: 8, | |
| inset: "auto 0 0 0", | |
| }, | |
| }} | |
| > | |
| <p style="padding: 0 4px;font-size: 10px;"> | |
| <span style="font-weight: bold;" | |
| >Figure No. ${Number(photo.index) + 1} - ${" "} | |
| </span> | |
| ${photo.title} | |
| </p> | |
| </figcaption>`} | |
| </figure> | |
| `} | |
| //> | |
| `; | |
| } | |
| render(html`<${App} />`, document.body); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| index | original | text | date | ||
|---|---|---|---|---|---|
| 3 | 04-cania-gorge-nik.jpg | Cape Hillsborough National Park camping | 23.03.2024 - Cape Hillsborough - Mackay |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env nu | |
| # --- https://youtu.be/UCEzBNh9ufs?t=559 | |
| open labels.csv| enumerate | each { |it| (magick -label $"figure No. ($it.index + 1) - ($it.item.text) \n - ($it.item.date)" $"($it.item.original)" $"($it.index).png") } | |
| magick montage *.png -tile 2x2 -geometry '640x360' montage-final.jpg | |
| magick montage *.png -tile 2x2 -geometry '640x360' montage-final.pdf |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "gallery", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "capture.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "ipx": "npx ipx serve --dir ./visa-photos", | |
| "pdf": "npx playwright pdf --wait-for-timeout=3000 --viewport-size='1680,1050' http://localhost:81/index.html album.pdf" | |
| }, | |
| "author": "", | |
| "license": "ISC" | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment