diff options
| -rw-r--r-- | Makefile | 35 | ||||
| -rwxr-xr-x | climbing.rb | 4 | ||||
| -rwxr-xr-x | html.rb | 1 | ||||
| -rw-r--r-- | html/about.html | 17 | ||||
| -rw-r--r-- | html/contact.html | 11 | ||||
| -rw-r--r-- | html/robots.txt | 31 | ||||
| -rw-r--r-- | html/slideshow.js | 80 | ||||
| -rw-r--r-- | html/style.css | 166 | ||||
| -rw-r--r-- | html/tail.html | 23 | ||||
| -rwxr-xr-x | lib.rb | 14 | ||||
| -rwxr-xr-x | music.rb | 10 | ||||
| -rwxr-xr-x | pictures.rb | 83 | ||||
| -rwxr-xr-x | videos.rb | 5 |
13 files changed, 193 insertions, 287 deletions
@@ -6,43 +6,45 @@ PUB_DIR := /srv/www/pdp8 MUSIC_DIR := $(MEDIA_DIR)/music FLAC := $(wildcard $(MUSIC_DIR)/*/*.flac) -MP3 := $(subst flac, mp3, $(FLAC)) +MP3 := $(subst flac,mp3, $(FLAC)) IMG_DIR := $(MEDIA_DIR)/pictures WEBP_DIR := $(IMG_DIR)/webp JPEG_DIR := $(IMG_DIR)/jpeg +THUMB_DIR := $(IMG_DIR)/thumb TXT_DIR := $(IMG_DIR)/txt JPEG_IMG := $(wildcard $(JPEG_DIR)/*.jpeg) -WEBP_IMG := $(subst jpeg, webp, $(JPEG_IMG)) -TXT_IMG := $(subst jpeg, txt, $(JPEG_IMG)) +WEBP_IMG := $(subst jpeg,webp, $(JPEG_IMG)) +THUMB_IMG := $(addprefix $(THUMB_DIR)/, $(notdir $(WEBP_IMG))) +TXT_IMG := $(subst jpeg,txt, $(JPEG_IMG)) -IMG_COLLECTIONS := $(wildcard $(IMG_DIR)/collections/*) +IMG_ALBUMS := $(wildcard $(IMG_DIR)/albums/*) VIDEO_DIR := /srv/media/videos VIDEO_WEBM := $(wildcard $(VIDEO_DIR)/*/*.webm) -VIDEO_MP4 := $(subst webm, mp4, $(VIDEO_WEBM)) -VIDEO_WEBP := $(subst webm, webp, $(VIDEO_WEBM)) -VIDEO_PNG := $(subst webm, png, $(VIDEO_WEBM)) +VIDEO_MP4 := $(subst webm,mp4, $(VIDEO_WEBM)) +VIDEO_WEBP := $(subst webm,webp, $(VIDEO_WEBM)) +VIDEO_PNG := $(subst webm,png, $(VIDEO_WEBM)) CLIMBING_DIR := /srv/media/climbing CLIMBING_WEBM := $(wildcard $(CLIMBING_DIR)/*.webm) CLIMBING_MP4 := $(subst webm,mp4, $(CLIMBING_WEBM)) CLIMBING_WEBP := $(subst webm,webp, $(CLIMBING_WEBM)) -HTML := index.html music.html pictures.html videos.html climbing.html about.html code.html contact.html social/create.html social/announce.html -OTHER := pdp8.png 540px-PDP-8_.jpg style.css robots.txt sitemap.txt rss.xml +HTML := index.html music.html pictures.html videos.html climbing.html about.html code.html contact.html #social/create.html social/announce.html +OTHER := pdp8.png 540px-PDP-8_.jpg style.css sitemap.txt rss.xml TEST_HTML := $(addprefix $(TEST_DIR)/, $(HTML)) TEST_OTHER := $(addprefix $(TEST_DIR)/, $(OTHER)) PUB_HTML := $(addprefix $(PUB_DIR)/, $(HTML)) all: test - cd $(TEST_DIR); git commit -am "$$(date)"; git push; cd $(PUB_DIR); git pull + cd $(TEST_DIR)/; git commit -am "$$(date)"; git push; cd $(PUB_DIR)/; git pull test: $(TEST_HTML) $(TEST_OTHER) -pictures: $(WEBP_IMG) $(TXT_IMG) +pictures: $(WEBP_IMG) $(THUMB_IMG) $(TEST_DIR)/rss.xml: $(TEST_HTML) ./rss.rb @@ -53,11 +55,17 @@ $(TEST_DIR)/index.html: $(TEST_DIR)/music.html $(TEST_DIR)/music.html: $(MP3) ./music.rb -$(TEST_DIR)/pictures.html: $(IMG_COLLECTIONS) +$(TEST_DIR)/pictures.html: $(IMG_ALBUMS) $(WEBP_IMG) $(THUMB_IMG) ./pictures.rb $(TEST_DIR)/videos.html: $(VIDEO_MP4) $(VIDEO_WEBP) ./videos.rb + +# $(TEST_DIR)/social/create.html: +# ./social.rb create + +# $(TEST_DIR)/social/announce.html: +# ./social.rb announce $(TEST_DIR)/climbing.html: $(CLIMBING_MP4) $(CLIMBING_WEBP) ./climbing.rb @@ -86,5 +94,8 @@ $(TEST_DIR)/%.txt: ./html/%.txt $(WEBP_DIR)/%.webp: $(JPEG_DIR)/%.jpeg magick $< -resize 1536x1024 -quality 85 $@ +$(THUMB_DIR)/%.webp: $(JPEG_DIR)/%.jpeg + magick $< -resize 150x100 -quality 85 $@ + %.mp4: %.webm ffmpeg -i $< -vf scale=1280:-2 -c:v h264 -c:a aac -b:a 128k -strict -2 -movflags faststart $@ diff --git a/climbing.rb b/climbing.rb index 6705aba..139925d 100755 --- a/climbing.rb +++ b/climbing.rb @@ -11,10 +11,9 @@ Dir[File.join(MEDIA_DIR, 'climbing', '*.txt')].collect do |txt| webm: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webm'), webp: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webp') } end.sort_by { |m| m[:date] }.reverse.each do |post| - w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{post[:webm]}`.chomp.split(',') html += '<div class="post">' html += "<h1>#{post[:date]}</h1>" - html += "<video controls preload='none' width='#{w}' height='#{h}' poster=#{post[:webp]}> + html += "<video controls preload='none' poster=#{post[:webp]}> <source src='#{post[:webm]}' type='video/webm'> <source src='#{post[:mp4]}' type='video/mp4'> <a href=#{post[:mp4]}>#{post[:mp4]}</a> @@ -23,6 +22,5 @@ end.sort_by { |m| m[:date] }.reverse.each do |post| html += post[:text] html += '</div>' end -html += '<p> © pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'climbing', html @@ -161,7 +161,6 @@ def climbing_html html += post[:text] html += '</div>' end - html += '<p> © pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'climbing', html end diff --git a/html/about.html b/html/about.html index 55f6131..9e2797c 100644 --- a/html/about.html +++ b/html/about.html @@ -1,7 +1,14 @@ -<img src="540px-PDP-8_.jpg" alt="pdp-8" title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229"> -<br> -The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction set. <p> -The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many new uses. Its continuing significance is as a historical example of value-engineered computer design. + <img src="540px-PDP-8_.jpg" alt="pdp-8" + title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229"> + <br> + The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first + commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design + follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction + set. <p> -<a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a> + The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical + significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many + new uses. Its continuing significance is as a historical example of value-engineered computer design. +<p> + <a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
\ No newline at end of file diff --git a/html/contact.html b/html/contact.html index 4582664..cac00d8 100644 --- a/html/contact.html +++ b/html/contact.html @@ -2,14 +2,13 @@ <a href='mailto:info@pdp8.info'>info@pdp8.info</a> <h1>fediverse</h1> <a href='https://social.pdp8.info/pdp8'>@pdp8@social.pdp8.info</a> -<!-- -<h1>matrix</h1> -<a href='https://matrix.to/#/@pdp8:matrix.pdp8.info'>@pdp8:matrix.pdp8.info</a> ---> <h1>newsletter</h1> +<p> + <em>your email will be used only for the newsletter and won't be shared with anyone</em> +</p> <h2>subscribe</h2> send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>subscribe</b> in the subject -(your address will be used only for the newsletter and won't be shared with anyone) +line <h2>unsubscribe</h2> send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>unsubscribe</b> in the -subject
\ No newline at end of file +subject line
\ No newline at end of file diff --git a/html/robots.txt b/html/robots.txt deleted file mode 100644 index 1bd8b9e..0000000 --- a/html/robots.txt +++ /dev/null @@ -1,31 +0,0 @@ -User-agent: Amazonbot -Disallow: / - -User-agent: ChatGPT-User -Disallow: / - -User-agent: GPTBot -Disallow: / - -User-agent: Google-Extended -Disallow: / - -User-agent: anthropic-ai -Disallow: / - -User-agent: Omgilibot -Disallow: / - -User-agent: Omgili -Disallow: / - -User-agent: FacebookBot -Disallow: / - -User-agent: Bytespider -Disallow: / - -User-agent: ImagesiftBot -Disallow: / - -SITEMAP: https://pdp8.info/sitemap.txt diff --git a/html/slideshow.js b/html/slideshow.js deleted file mode 100644 index 48a5395..0000000 --- a/html/slideshow.js +++ /dev/null @@ -1,80 +0,0 @@ -selection = [] -visited = [] -current = 0 -playing = 1 - -document.addEventListener('keyup', function(event) { - if(event.keyCode == 37) { prev() } // left - else if(event.keyCode == 39) { next() } // right - else if(event.keyCode == 32) { - toggle_play() - } // space - else if(event.keyCode == 13) { new_selection() } // enter -}); - -function new_selection() { - images = Object.keys(distances) - start = images[Math.floor(Math.random()*images.length)] - sortable = [] - for (file in distances[start]) { - if (visited.indexOf(file) == -1) { // not in visited - sortable.push([file,distances[start][file]]) // objects cannot be sorted in js, use array instead - } - } - n = 6 - selection = [] - sorted = sortable.sort(function(a, b) { return a[1] - b[1]; }).slice(0,n); // sort by distance, get first n elements - sorted.forEach(function(img,index) { - selection.push(img[0]) - visited.push(img[0]) - }) - selection = selection.sort(() => Math.random() - 0.5); // shuffle - current = 0 - update() -} - -function src(id,path) { document.getElementById(id).src = path } -function onclick(id,fun) { document.getElementById(id).onclick = fun } - -function hide_controls() { - document.getElementById("prev").style.display = "none" - document.getElementById("next").style.display = "none" -} - -function show_controls() { - document.getElementById("prev").style.display = "block" - document.getElementById("next").style.display = "block" -} - -function toggle_play() { playing == 1 ? stop() : play() } - -function play() { - playing = 1 - interval = setInterval(function () { next() }, 3000); - document.getElementById("play-indicator").title = "Pause slideshow" - document.getElementById("play-indicator").className = "fa fa-inverse fa-pause" - hide_controls() -} - -function stop() { - playing = 0 - clearInterval(interval) - document.getElementById("play-indicator").title = "Play slideshow" - document.getElementById("play-indicator").className = "fa fa-inverse fa-play" - show_controls() -} - -function prev() { - current = (current-1+selection.length) % selection.length // js % cannot handle negative values - update() -} - -function next() { - current = (current+1) % selection.length - update() -} - -function update() { - src('image',"https://media.pdp8.info/pictures/"+selection[current]) -} - diff --git a/html/style.css b/html/style.css index 8478ca3..ddaf027 100644 --- a/html/style.css +++ b/html/style.css @@ -1,91 +1,67 @@ body { + display: flex; + flex-direction: column; background-color: black; color: #eee; - width: 100vw; - margin: 0; + margin: 1em; font-family: sans-serif; } nav { - padding: 0.75em 0 1em 0; -} - -nav a { - padding: 0 1em; - text-decoration: none; + display: flex; + align-items: center; } nav img { height: 2em; - display: inline; - vertical-align: bottom; } -nav #logo img { - height: 2em; +nav .menu { + display: flex; + flex-wrap: wrap; + align-items: baseline; + font-size: larger } -nav .current { - color: white; +nav a { + margin: 0 0.5em; } -nav #menu { - display: none; +nav .current { + color: #eee; + font-weight: bold; } -nav a:hover { - color: white; +a { + color: #888; + transition: 0.5s ease; + text-decoration: none; } -@media screen and (max-width: 600px) { - nav .item { - display: none; - padding-left: 1em; - padding-top: 0.5em; - } - - nav #menu { - float: right; - display: inline; - font-size: 2em; - } +a:hover { + color: white; } -.post { - margin: 2em 1em; +td { + padding-right: 1em; + font-size: larger; } img, video { max-height: 80vh; - max-width: 80vw; + max-width: 95vw; object-fit: contain; - display: block; - margin-left: 0; + margin: 0 auto } -#image { - padding-top: 2.5%; - padding-bottom: 1%; - margin-left: auto; - margin-right: auto; -} - -.gallery { - margin: 1em; - flex-wrap: wrap; - display: flex -} - -.thumb { - margin: 2px 3px; +audio { + width: 12.5em; + height: 2.5em; } -.cover { - max-height: min(50vh, 90vw); - max-width: min(50vh, 90vw); - margin-left: 0; - padding: 1em 0; +audio::-webkit-media-controls-panel { + background-color: #aaa; } iframe { @@ -94,67 +70,51 @@ iframe { border: none; } -a { - color: #888; -} - -td { - padding-right: 1em; - font-size: larger; -} - -audio { - width: 12.5em; - height: 2.5em; +.webring { + display: flex; + flex-wrap: wrap; + margin-top: 2em; + align-items: baseline; } -audio::-webkit-media-controls-panel { - background-color: #aaa; +.post { + /* margin: 1em 2em; */ } -#controller { - position: fixed; - left: 0; - bottom: 2.5%; - width: 100%; - text-align: center; - padding: 0 +.gallery { + display: flex; + flex-wrap: wrap; } -.btn { - display: inline-block; - cursor: pointer; - color: #111; - font-size: 2em; - font-weight: bold; - width: 4em; +.thumb { + margin: 0.25em; } -#prev, -#next { - cursor: pointer; - position: absolute; - color: lightgrey; - font-weight: bold; - font-size: 8em; - transition: 0.5s ease; - bottom: 6vh; +.cover { + max-height: min(50vh, 90vw); + max-width: min(50vh, 90vw); + margin-left: 0; + display: block; + padding: 1em 0; } -#prev { - left: 1%; +.slide { + display: flex; + flex-direction: column; + margin-top: 2em; } -#next { - right: 1%; +.slidenav { + display: flex; + justify-content: space-between; + align-items: center; } -#prev:hover, -#next:hover { - text-decoration: none; +.navarrow { + font-weight: bold; + font-size: 3em; } -#prev:active, -#next:active { - color: black; -} +.license { + margin-top: 3em +}
\ No newline at end of file diff --git a/html/tail.html b/html/tail.html index 53ca8ca..3da431f 100644 --- a/html/tail.html +++ b/html/tail.html @@ -1,11 +1,12 @@ - <script> - function show_vertical_menu() { - document.getElementById("menu").style.display = "none" - items = document.getElementsByClassName("item") - for (i = 0; i < items.length; i++) { - items[i].style.display = "block" - } - } - </script> - </body> -</html> +<div class='license'> + <a href='mailto:info@pdp8.info'>©pdp8</a> + <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International + License</a> + <p> + no tracking, cookies, javascript, or server-side scripting. source code: <a + href='https://git.pdp8.info/pdp8.info/tree/'>https://git.pdp8.info/pdp8.info/tree/</a> + </p> +</div> +</body> + +</html>
\ No newline at end of file @@ -7,14 +7,16 @@ SNIPPETS = File.join(File.dirname(__FILE__), 'html') def nav(cat) html = '<nav>' - html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8'></a>" + html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8 logo'></a>" + html += "<div class='menu'>" %w[music pictures videos climbing code contact].each do |c| - cl = c == cat ? 'item current' : 'item' - html += " <a class='#{cl}' href='/#{c}.html'>#{c}</a>" + html += '<a ' + html += "class='current' " if c == cat + html += "href='/#{c}.html'>#{c}</a>" end - html += " <a class='item' href='/social/create.html'>social</a>" - html += " <a class='item' href='/rss.xml'>rss</a>" - html += " <a id='menu' href='#' onclick='show_vertical_menu()'>≡</a>" + html += "<a #{cat == 'social' ? 'class="current"' : ''} href='/social/create.html'>social</a>" + html += "<a href='/rss.xml'>rss</a>" + html += '</div>' html += '</nav>' html end @@ -5,10 +5,9 @@ require_relative 'lib' music = Dir[File.join(MEDIA_DIR, 'music', '20*')].sort.reverse html = File.read(File.join(SNIPPETS, 'head.html')) html += nav 'music' -html += '<div class="post"><a href="https://faircamp.webr.ing/prev/pdp8.info/music.html">← prev</a> | - <a href="https://faircamp.webr.ing/">faircamp webring</a> | - <a href="https://faircamp.webr.ing/rand">random</a> | - <a href="https://faircamp.webr.ing/next/pdp8.info/music.html">next →</a></div>' +html += '<div class="webring"> +<b><a href="https://faircamp.webr.ing/">faircamp webring:</a></b> +<a href="https://faircamp.webr.ing/prev/pdp8.info/music.html">← prev</a> | <a href="https://faircamp.webr.ing/rand">random</a> | <a href="https://faircamp.webr.ing/next/pdp8.info/music.html">next →</a></div>' music.each do |dir| date = File.basename(dir).split('_')[0] html += "<div class='post' id='#{date}'>" @@ -22,7 +21,7 @@ music.each do |dir| html += '<table>' copyrights_file = File.join(dir, 'copyrights') copyrights = File.readlines(copyrights_file).collect { |l| l.chomp } if File.exist? copyrights_file - Dir[File.join(dir, '*mp3')].each_with_index do |mp3, _i| + Dir[File.join(dir, '*mp3')].each do |mp3| mp3 = File.join(MEDIA_URL, mp3.sub(MEDIA_DIR, '')) name = File.basename(mp3, '.mp3')[3..-1].gsub('_', ' ') html += '<tr>' @@ -46,6 +45,5 @@ music.each do |dir| html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>" html += '</div>' end -html += '<p>© pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'music', html diff --git a/pictures.rb b/pictures.rb index 33c7ec6..246b0c5 100755 --- a/pictures.rb +++ b/pictures.rb @@ -1,37 +1,82 @@ #!/usr/bin/env ruby -require 'json' require_relative 'lib' +require 'fileutils' PICTURE_PATH = '/srv/media/pictures' WEBP_PATH = File.join PICTURE_PATH, 'webp' TXT_PATH = File.join PICTURE_PATH, 'txt' -COLLECTION_PATH = File.join PICTURE_PATH, 'collections' +ALBUM_PATH = File.join PICTURE_PATH, 'albums' -PICTURE_URL = 'https://media.pdp8.info/pictures' +PICTURE_URL = File.join MEDIA_URL, 'pictures' WEBP_URL = File.join PICTURE_URL, 'webp' +THUMB_URL = File.join PICTURE_URL, 'thumb' JPEG_URL = File.join PICTURE_URL, 'jpeg' +def meta(img, album) + basename = File.basename(img, File.extname(img)) + path = File.join(WEBP_PATH, basename + '.webp') + { + basename: basename, + webp: File.join(WEBP_URL, basename + '.webp'), + txt: File.join(TXT_PATH, basename + '.txt'), + src: File.join(JPEG_URL, basename + File.extname(img)), + thumb: File.join(THUMB_URL, basename + '.webp'), + href: File.join('/pictures', File.basename(album), + File.basename(img, File.extname(img)) + '.html') + } +end + +albums = Dir[File.join ALBUM_PATH, '*'].sort_by { |a| File.mtime a }.reverse + +albums.each do |album| + www_dir = File.join('/srv/www/pdp8-test/pictures', File.basename(album)) + FileUtils.mkdir_p www_dir + images = File.readlines(album, chomp: true) + n = images.size + images.each_with_index do |img, i| + before = meta(images[(i - 1) % n], album)[:href] + after = meta(images[(i + 1) % n], album)[:href] + meta = meta img, album + + html = File.read(File.join(SNIPPETS, 'head.html')) + html += nav 'pictures' + html += "<div class='slide'>" + html += '<img ' + html += "alt='#{File.read(meta[:txt])}' " if File.exist?(meta[:txt]) + html += "src='#{meta[:webp]}'>" + html += "<div class='slidenav'>" + html += "<a href='#{before}' class='navarrow'><</a>" + html += "<a href='/pictures.html##{File.basename(album)}'>#{File.basename(album).gsub('_', ' ')}</a>" + html += "<a href='#{after}' class='navarrow'>></a>" + html += '</div>' + html += '</div>' + html += File.read(File.join(SNIPPETS, 'tail.html')) + html_file = File.join(www_dir, File.basename(img, File.extname(img)) + '.html') + File.open(html_file, 'w+') { |f| f.puts html } + puts `tidy -iqm -w 0 #{html_file} 2>&1` + end +end + html = File.read(File.join(SNIPPETS, 'head.html')) html += nav 'pictures' - -Dir[File.join COLLECTION_PATH, '*'] - .sort_by { |c| File.mtime c } - .reverse.each do |collection| - html += "<div class='post'>" - html += "<h1>#{collection.gsub('_', ' ')}</h1>\n" - File.readlines(collection, chomp: true).each do |line| - basename = File.basename(line, File.extname(line)) - path = File.join(WEBP_PATH, basename + '.webp') - url = File.join(WEBP_URL, basename + '.webp') - alt = File.read(File.join(TXT_PATH, basename, '.txt')) - src = File.join(JPEG_URL, basename + File.extname(url)) - w, h = `/etc/profiles/per-user/ch/bin/identify -format "%w %h" #{path}`.chomp.split(' ') - html += "<a href='#{src}'><img loading='lazy' width='#{w}' height='#{h}' " - html += "alt='#{alt}' src='#{url}'></a>" +albums.each do |album| + www_dir = File.join('/srv/www/pdp8-test/pictures', File.basename(album)) + FileUtils.mkdir_p www_dir + images = File.readlines(album, chomp: true) + n = images.size + html += "<div class='post' id='#{File.basename album}'>" + html += "<h1><a href='#{meta(images.first, + album)[:href]}'>#{File.basename(album).gsub('_', ' ')}</a></h1>\n" + html += "<div class='gallery'>" + images.each_with_index do |img, _i| + meta = meta img, album + html += "<a href='#{meta[:href]}'><img class='thumb' loading='lazy' width='150' height='100' " + html += "alt='#{File.read(meta[:txt])}' " if File.exist?(meta[:txt]) + html += "src='#{meta[:thumb]}'></a>" end html += '</div>' + html += '</div>' end - html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'pictures', html @@ -18,9 +18,7 @@ videos.each_with_index do |dir, _i| mp4 = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.mp4') webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm') poster = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webp') - w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{webm}`.chomp.split(',') - - html += "<video controls preload='none' width='#{w}' height='#{h}' poster='#{poster}'> + html += "<video controls preload='none' poster='#{poster}'> <source src='#{webm}' type='video/webm'> <source src='#{mp4}' type='video/mp4'> <a href=#{mp4}>#{mp4}</a> @@ -29,6 +27,5 @@ videos.each_with_index do |dir, _i| html += lines.join('<br>') html += '</div>' end -html += '<p> © pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'videos', html |