From d987641d7b68fcfa8431b1835411bb1095a37961 Mon Sep 17 00:00:00 2001 From: pdp8 Date: Sun, 28 Jul 2024 09:44:00 +0200 Subject: image albums, flex layout --- Makefile | 35 ++++++++---- climbing.rb | 4 +- html.rb | 1 - html/about.html | 17 ++++-- html/contact.html | 11 ++-- html/robots.txt | 31 ---------- html/slideshow.js | 80 -------------------------- html/style.css | 166 +++++++++++++++++++++--------------------------------- html/tail.html | 23 ++++---- lib.rb | 14 +++-- music.rb | 10 ++-- pictures.rb | 83 ++++++++++++++++++++------- videos.rb | 5 +- 13 files changed, 193 insertions(+), 287 deletions(-) delete mode 100644 html/robots.txt delete mode 100644 html/slideshow.js diff --git a/Makefile b/Makefile index eec9eef..c8db1a6 100644 --- a/Makefile +++ b/Makefile @@ -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 += '
' html += "

#{post[:date]}

" - html += "
' end -html += '

 © pdp8 Creative Commons Attribution 4.0 International License' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'climbing', html diff --git a/html.rb b/html.rb index 5f45ddc..d3def36 100755 --- a/html.rb +++ b/html.rb @@ -161,7 +161,6 @@ def climbing_html html += post[:text] html += '' end - html += '

 © pdp8 Creative Commons Attribution 4.0 International License' 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 @@ -pdp-8 -
-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.

-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. + pdp-8 +
+ 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.

-https://en.wikipedia.org/wiki/PDP-8 + 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. +

+ https://en.wikipedia.org/wiki/PDP-8 \ 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 @@ info@pdp8.info

fediverse

@pdp8@social.pdp8.info -

newsletter

+

+ your email will be used only for the newsletter and won't be shared with anyone +

subscribe

send a mail to info@pdp8.info with subscribe in the subject -(your address will be used only for the newsletter and won't be shared with anyone) +line

unsubscribe

send a mail to info@pdp8.info with unsubscribe 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 @@ - - - +
+ ©pdp8 + Creative Commons Attribution 4.0 International + License +

+ no tracking, cookies, javascript, or server-side scripting. source code: https://git.pdp8.info/pdp8.info/tree/ +

+
+ + + \ No newline at end of file diff --git a/lib.rb b/lib.rb index 3a94d39..b3dbc73 100755 --- a/lib.rb +++ b/lib.rb @@ -7,14 +7,16 @@ SNIPPETS = File.join(File.dirname(__FILE__), 'html') def nav(cat) html = '' html end diff --git a/music.rb b/music.rb index e86e0c5..c63f17d 100755 --- a/music.rb +++ b/music.rb @@ -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 += '
← prev | - faircamp webring | - random | - next →
' +html += '
+faircamp webring:   +← prev | random | next →
' music.each do |dir| date = File.basename(dir).split('_')[0] html += "
" @@ -22,7 +21,7 @@ music.each do |dir| html += '' 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 += '' @@ -46,6 +45,5 @@ music.each do |dir| html += "

Bandcamp: #{bc}" html += '' end -html += '

© pdp8 Creative Commons Attribution 4.0 International License' 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 += "

" + html += '&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 += "
" - html += "

#{collection.gsub('_', ' ')}

\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 += " #{mp4} @@ -29,6 +27,5 @@ videos.each_with_index do |dir, _i| html += lines.join('
') html += '
' end -html += '

 © pdp8 Creative Commons Attribution 4.0 International License' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'videos', html -- cgit v1.2.3