dark theme, lazy img/media loading, climbing integrated, IA links

1 files changed, 45 insertions, 13 deletions

diff --git a/html.rb b/html.rb
index fd944bd..7e9d2f0 100755
--- a/html.rb
+++ b/html.rb
@@ -9,12 +9,12 @@ 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>"
-  %w[music pictures videos code contact].each do |c|
+  %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 += "&nbsp;<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
   end
-  html += "<a class='item' href='/rss.xml'>rss</a>"
-  html += "<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
+  html += "&nbsp;<a class='item' href='/rss.xml'>rss</a>"
+  html += "&nbsp;<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
   html += '</nav>'
   html
 end
@@ -43,30 +43,34 @@ def music_html
   html = File.read(File.join(SNIPPETS, 'head.html'))
   html += nav 'music'
   music.each do |dir|
+    next if dir.match 'alfadeo'
+
     date = File.basename(dir).split('_')[0]
     html += "<div class='post' id='#{date}'>"
     title = File.basename(dir).split('_')[1..-1].join(' ')
     html += "<h1>#{title}</h1>"
-    html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '<p>').gsub("\n", '<br>') + '<p>'
-    cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.jpeg')
-    html += "<img class='cover' src='#{cover}' alt='cover'>"
+    html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '<p>').gsub("\n", '<br>') # + '<p>'
+    cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.webp')
+    html += "<img class='cover' loading='lazy' width='1024' height='1024' src='#{cover}' alt='cover'>"
     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|
       mp3 = File.join(MEDIA_URL, mp3.sub(MEDIA_DIR, ''))
-      name = File.basename(mp3, '.mp3')[3..-1]
+      name = File.basename(mp3, '.mp3')[3..-1].gsub('_', ' ')
       # name += " &copy;#{copyrights[i]}" if copyrights
       html += '<tr>'
+      html += "<td>#{name}</td>"
       html += "<td>
-        <audio controls>
+        <audio preload='none' controls>
         <source src='#{mp3}' type='audio/mpeg'>
         </audio>
         </td>"
-      html += "<td>#{name}</td>"
       html += '</tr>'
     end
     html += '</table>'
+    ia = "https://archive.org/details/pdp8_#{title.gsub(' ', '_')}"
+    html += "<p>Internet Archive: <a href='#{ia}'>#{ia}</a>"
     bc = if File.exist?(File.join(dir, 'bandcamp'))
            File.read(File.join(dir, 'bandcamp')).chomp
          else
@@ -74,7 +78,7 @@ def music_html
          end
     html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>"
     html += '</div>'
-    html += '<hr>'
+    # html += '<hr>'
   end
   html += '<p>&copy; 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'))
@@ -99,22 +103,50 @@ def video_html
     webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm')
     poster = File.join(MEDIA_URL, 'videos', File.basename(dir), 'poster.png')
 
-    html += "<video controls poster='#{poster}'>
+    html += "<video controls preload='none' poster='#{poster}'>
         <source src='#{webm}' type='video/webm'>
         <source src='#{mp4}' type='video/mp4'>
         </video><p>
         "
     html += lines.join('<br>')
     html += '</div>'
-    html += '<hr>'
+    # html += '<hr>'
   end
   html += '<p>&nbsp;&copy; 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
 end
 
+def climbing_html
+  html = File.read(File.join(SNIPPETS, 'head.html'))
+  html += nav 'climbing'
+  Dir[File.join(MEDIA_DIR, 'climbing', '*.txt')].collect do |txt|
+    lines = File.read(txt).lines.collect { |l| l.chomp }
+    { date: lines.shift,
+      text: lines.join('<br>'),
+      mp4: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.mp4'),
+      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|
+    html += '<div class="post">'
+    html += "<h1>#{post[:date]}</h1>"
+    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>
+        </video><p>
+        "
+    html += post[:text]
+    html += '</div>'
+  end
+  html += '<p>&nbsp;&copy; 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
+
 music_html
 video_html
+climbing_html
 
 %w[about code pictures contact].each do |basename|
   file_html basename