piccle 0.1.0.rc1 → 0.1.1.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db3f8798e1dfc0e62bf41b3cdda06bd2f9b55f2331cdf43355734d64b62b2a71
-  data.tar.gz: af3016c01de9d25f078369ea6c0c83865bae176c08230009097fca586792505e
+  metadata.gz: 81cf1f58e254874d67a158e428edc3c308557bdcaa1f890c845c1a579faac74d
+  data.tar.gz: '04148646454d3b3b5b882fa56c8a0f563dd8e6fc311316e20f63e3170998264d'
 SHA512:
-  metadata.gz: ea4bac152db471cf72aaaab4df57779d6fb756657581e4cc86fa425e29d0627793c0d6dde08c4f88a9b593afeed75e65a28792f034ac4846003d9ba4eda8a5f9
-  data.tar.gz: 4cbc517e96ab3b3a49cd7100ad515f3334a9a097bccb7ae10f559e8bc8fdd8b2b8b7a49bdf799167876381c76bac7a2edb2046ba9a29fec6e23fccead6e03ca4
+  metadata.gz: 7ea526664d305b466eaa894817ebc5066391e6d24c51b4287227a7b12a2b7189c96875e572bd900df38ac6d08a26f9898996e0000daba5e92016dbca0bd489fb
+  data.tar.gz: 90d41a1d0d0517b56fe945d672213edf662b59daa5ea864cfebb07e8d0604bc3b13c068ed08571ed7f86be1ec22700d9e3960bf5f57b106bd2dff513e3db30dd

data/NOTES.md

@@ -2,44 +2,38 @@
 
 ## Roadmap
 
-v0.1
-- Test it works on other computers
-- Better iPad display
-- Update readme
-
 v0.2
-- Paginated indexes
 - Render subnav (ie. if you're in 2020 view, it'll show the months)
-- People browser
 - Show most recently added photos
 
 v0.3
 - Track hash changes, generate redirects and htaccess file
-- Collapsible events on the front page (maybe)
 - Better display of streams on photo show page
 
 v0.4
 - Client-side rendering
 
+v0.5
+- Section browse pages
+
 
 ## Bugs
 - Don't fail horribly if there are no images.
   - More useful error output if the given images directory does not exist.
+- Figure out timezones around collapsed events
 
 
 ## Improvements
 
+- Add "section browse" pages?
+- Collapse "collapsed" sections everywhere, EXCEPT that particular stream.
 - Add ordering to all the various substreams. Almost done, apart from sorting days and months in the datestream.
-- Update the photo update method so it also REMOVES keywords from files.
-  - Store changed MD5 hashes, generate redirect pages for those.
+- Store changed MD5 hashes, generate redirect pages for those.
 - Add a cleanup function that removes old images/HTML.
-- Make keywords case insensitive.
-- Write a readme.
-- Add "collapsed" view for events so they show up in one tile. 
-- Add links to event tiles that link to the event page.
 - Can we detect fixed focal length cameras in the metadata? 
 - Maybe combine substream path with include prefix? So we don't have to do two {{foo}}{{bar}} on every link.
 - Put current stream first on photo page
+  - Generally improve the stream display on photo page. Filter out samey streams, maybe only show a maximum of 4?
 - Update nav to render subnav too, for current section.
 - Finish commenting the BaseStream.
 
@@ -52,14 +46,11 @@ v0.4
 ----- All the notes below are kind of outdated ------
 
 - JS slideshow at the top of the index page??
-- Convert database.rake tasks over to the Sequel way of doing things
 - Our current find-or-create for photos relates to the file name/path. It should probably use that, and/or the MD5. 
 - Focal length is currently available as a fraction in the EXIF, but we're storing it as a float. Maybe we'd like to store it as a fraction instead?
 
 # Development notes
 
-- The EXIF tag calls the camera model "model", but in the DB schema we called it "camera_name". We might want to unify this.
-  - NB. Sequel will throw a wobbly if we use "model" as a method name.
 - Add a meaningful "alt" tag in the photo thumbnail.
 
 - Streams should maybe be able to generate "top-level" pages, so we could have paths like "example.com/2008" rather than "example.com/by-date/2008".

data/README.md

@@ -1,3 +1,5 @@
+![Piccle logo](https://github.com/creature/piccle/blob/master/assets/icons/android-chrome-192x192.png?raw=true)
+
 # Piccle
 
 Piccle is a static photo gallery generator. Purposefully designed with no admin interface, it builds the gallery from 
@@ -17,10 +19,24 @@ though these are unlikely to be added unless you set them up first.
 
 ## Getting started
 
+### Quickstart 
+
+```bash
+gem install piccle --pre
+piccle generate -i path/to/your/image/dir # Produces a site in generated/
+piccle help # To see more options
+```
+
+### Installing Piccle
+
 Piccle requires a modern(ish) version of Ruby. If you don't have one already, then I like [rbenv](https://github.com/rbenv/rbenv#readme) 
 as a Ruby version manager. 
 
-1. Run `gem install piccle` to install the software. 
+The default renderer relies on [NodeJS](https://nodejs.org/en/) being available in your `$PATH`. If this isn't possible
+for you, you can run Piccle with `--ruby-renderer` – but this is typically 10 times slower.
+
+
+1. Run `gem install piccle --pre` to install the software. 
 1. Piccle can run from anywhere, but things will be easier if you created a dedicated directory for it: 
     ```bash
     mkdir -p piccle/images
@@ -37,6 +53,8 @@ as a Ruby version manager.
    open `generated/index.html` in your browser.
 1. You're done! 
 
+## Available Options
+
 Piccle has two subcommands, `generate` and `geocode`. `generate` is the default task and is the same as running 
 without specifying a subcommand. `geocode` uses the Data Science Toolkit to look up locations in the database. 
 `piccle help generate` will display the various options:
@@ -54,6 +72,8 @@ without specifying a subcommand. `geocode` uses the Data Science Toolkit to look
   (so people can subscribe to updates) and OpenGraph tags (which give nice embeds on social media) require a full URL. 
   They won't be generated if this is not set. 
 * `--debug` turns on debug mode, which adds some extra logging.
+* `--ruby-renderer` uses a rendering engine that does not require your system to have NodeJS installed (instead, it 
+  uses a [wrapper for libv8](https://github.com/rubyjs/therubyracer)). The output is the same, but it's much slower.
 
 
 ## Metadata Used
@@ -64,6 +84,33 @@ without specifying a subcommand. `geocode` uses the Data Science Toolkit to look
 * **Keywords** are shown, and exposed as "topics". 
 * **Location** is shown. If your photos have a city/state/country specified in their data, then that's used; otherwise, 
   Piccle will attempt to geocode them based on embedded latitude/longitude.
+* **People** are browsable, based on the "Person Shown" IPTC field.
+
+
+## Events 
+
+Piccle allows you to create named events in a separate [YAML file](https://learnxinyminutes.com/docs/yaml/). Each event 
+gets a dedicated index page, and a callout on the main index. It's useful for highlighting pictures from a particular 
+photoshoot, or drawing attention to a trip. 
+
+Events must have a name, and must either be `at` a particular date or within a particular date span (`from` and `to`). 
+Events may also be marked as `collapsed`; collapsed events don't show all their photos on an index page. Instead, they 
+show a quilt tile with some of the photos. It's a good way to avoid flooding your front page with a lot of 
+similar-looking photos. 
+
+This `events.yaml` file defines two events: a photoshoot I did themed around googly eyes, and a trip to the UK in 2019. 
+(The example shows dates only, but you can include times too.)
+
+```yaml
+-
+  name: Googly Eyes
+  at: 2019-03-23
+  collapsed: true
+-
+  name: UK 2019
+  from: 2019-01-24
+  to: 2019-02-09
+```
 
 -------
 
@@ -71,8 +118,9 @@ without specifying a subcommand. `geocode` uses the Data Science Toolkit to look
 
 Geolocation is provided by the free [Data Science Toolkit API](http://www.datasciencetoolkit.org/developerdocs#coordinates2politics).
 The test images are public domain images by [Sasin Tipchai](https://pixabay.com/photos/elephant-animals-asia-large-1822636/), 
-[Timo Schlüter](https://pixabay.com/photos/kingfisher-bird-blue-plumage-1905255/), and 
-[Jill Wellington](https://pixabay.com/photos/spring-bird-bird-spring-blue-2295431/). 
+[Timo Schlüter](https://pixabay.com/photos/kingfisher-bird-blue-plumage-1905255/),
+[Jill Wellington](https://pixabay.com/photos/spring-bird-bird-spring-blue-2295431/), and 
+[Pascal Vannevel](https://pixabay.com/photos/usa-canyonlands-mesa-arch-natuur-5009894/). 
 
 
 ## License
@@ -96,37 +144,37 @@ tool for managing metadata yet, but here are some options:
 ### Adobe Bridge
 
 Pros
-: Available for free, without a paid Creative Cloud subscription
-: Lets you build a library of keywords, with a nested heirarchy, so it's easier to use a set of standard tags with your photos
-: Can [edit titles, descriptions, and locations](https://helpx.adobe.com/ca/bridge/using/metadata-adobe-bridge.html)
-: Good filtering support: it's easy to find pictures lacking metadata
+- Available for free, without a paid Creative Cloud subscription
+- Lets you build a library of keywords, with a nested heirarchy, so it's easier to use a set of standard tags with your photos
+- Can [edit titles, descriptions, and locations](https://helpx.adobe.com/ca/bridge/using/metadata-adobe-bridge.html)
+- Good filtering support: it's easy to find pictures lacking metadata
 
 Cons
-: You still need a Creative Cloud account to download it
-: You must install the Adobe Creative Cloud stuff to get Bridge
-: Can't place photos on a map for adding latitude/longitude.
+- You still need a Creative Cloud account to download it
+- You must install the Adobe Creative Cloud stuff to get Bridge
+- Can't place photos on a map for adding latitude/longitude.
 
 
 ### macOS Preview
 
 Pros
-: If you use macOS you already have it
-: Access the inspector (⌘-I or File → Inspect) and choose the "Keywords" panel to add/remove keywords
+- If you use macOS you already have it
+- Access the inspector (⌘-I or File → Inspect) and choose the "Keywords" panel to add/remove keywords
 
 Cons 
-: Can't edit title, description, or location
-: Can't build a library of tags
+- Can't edit title, description, or location
+- Can't build a library of tags
 
 
 ### Affinity Photo
 
 Pros
-: Lets you edit titles, descriptions, locations, keywords, and add latitude/longitude via a map
-: Is generally a delightful image editor
+- Lets you edit titles, descriptions, locations, keywords, and add latitude/longitude via a map
+- Is generally a delightful image editor
 
 Cons
-: Longwinded for bulk edits: open photo, switch to Develop mode, change to metadata tab, switch between "File" and "IPTC (Image)" sections
-: No tag library - you must type in a comma-separated string
+- Longwinded for bulk edits: open photo, switch to Develop mode, change to metadata tab, switch between "File" and "IPTC (Image)" sections
+- No tag library - you must type in a comma-separated string
 
 
 ## Automation

data/assets/css/default.css

@@ -10,22 +10,6 @@ a {
   color: #7b6240;
 }
 
-ul li a {
-  transition: opacity ease-in 0.22s;
-  color: #444444;
-  text-decoration: none;
-}
-
-ul:hover a {
-  opacity: 0.5;
-}
-
-ul:hover a:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-
-
 header, footer {
   max-width: 960px;
   margin-right: auto;
@@ -110,12 +94,27 @@ nav li a {
   display: block;
 }
 
+nav ul li a {
+  transition: opacity ease-in 0.22s;
+  color: #444444;
+  text-decoration: none;
+}
+
+nav ul:hover a {
+  opacity: 0.5;
+}
+
+nav ul:hover a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
 section h2 {
   font-size: 1em;
 }
 
 /* This is both a flexbox item (of the main element) and a Flexbox container itself (for the photos). */
-.photos {
+#photos {
   flex: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -123,7 +122,7 @@ section h2 {
   align-content: start;
 }
 
-.photos a img {
+#photos a img {
   width: 100%;
   height: auto;
 }
@@ -143,9 +142,16 @@ section h2 {
   overflow: hidden;
 }
 
+.event_block:hover a {
+  color: #fff;
+  text-decoration: underline;
+}
+
+
 .event_block a {
   color: #ddd;
   text-decoration: none;
+  transition: all 0.22s;
 }
 
 .event_block.event_start {
@@ -166,6 +172,33 @@ section h2 {
   padding-left: 1rem;
 }
 
+.event_block.collapsed {
+  background-size: cover;
+}
+
+.event_block.collapsed a {
+  -webkit-backdrop-filter: blur(5px) contrast(40%);
+  backdrop-filter: blur(5px);
+  border-radius: 5px;
+  padding: 1rem;
+}
+
+.pagination {
+  display: flex;
+  margin: 2rem;
+  justify-content: center;
+}
+
+.pagination ol {
+  list-style-type: none;
+  margin: 0 1rem;
+  padding: 0;
+}
+
+.pagination ol li {
+  display: inline-block;
+}
+
 .keywords {
   margin: 72px 72px 18px;
   line-height: 2;
@@ -300,6 +333,7 @@ ul.location li:last-of-type:after {
   object-fit: contain;
   min-width: 0;
   max-width: 100%;
+  max-height: 100vh;
 }
 
 /* --------- Mobile styles ---------- */
@@ -363,10 +397,18 @@ ul.location li:last-of-type:after {
     width: 50%;
   }
 
-  .photos {
+  #photos {
     grid-template-columns: repeat(3, 1fr);
   }
 
+  .pagination {
+    justify-content: space-evenly;
+  }
+
+  .pagination ol { /* No page numbers on tiny displays, just next/previous */
+    display: none;
+  }
+
   .event_block {
     font-size: 18px;
   }
@@ -393,5 +435,31 @@ ul.location li:last-of-type:after {
     margin-left: 1rem;
     margin-right: 1rem;
   }
+}
+
+/* Smaller margins on smallish displays (like iPads) */
+@media(min-width: 689px) and (max-width: 1024px) {
+  body {
+    margin: 0 30px;
+  }
+
+  nav {
+    margin-right: 15px;
+    max-width: 150px;
+  }
+}
+
+/* More room for pages on smallish screens (ie. phones or tablets, probably) */
+@media(max-width: 1024px) {
+  .pagination {
+    justify-content: space-between;
+  }
+
+  .pagination ol li {
+    margin-right: 1rem;
+  }
 
+  .pagination ol li:last-child {
+    margin-right: 0;
+  }
 }

data/bin/piccle

@@ -163,6 +163,9 @@ class CLI < Thor
     start_time = Time.now
     puts "Generating website..."
 
+    FileUtils.mkdir_p(Piccle.config.output_dir)
+    generate_templates
+
     parser = new_parser_with_streams
     parse_photos(parser)
     renderer = if Piccle.config.ruby_renderer?
@@ -171,8 +174,6 @@ class CLI < Thor
                 Piccle::JsRenderer.new(parser)
                end
 
-    FileUtils.mkdir_p(Piccle.config.output_dir)
-    generate_templates(renderer)
     generate_atom_feeds(parser, renderer)
     generate_html_indexes(parser, renderer)
     generate_html_photos(parser, renderer)
@@ -190,6 +191,7 @@ class CLI < Thor
       p.add_stream(Piccle::Streams::LocationStream)
       p.add_stream(Piccle::Streams::EventStream)
       p.add_stream(Piccle::Streams::CameraStream)
+      p.add_stream(Piccle::Streams::PersonStream)
       p.add_stream(Piccle::Streams::KeywordStream)
     end
   end
@@ -206,16 +208,24 @@ class CLI < Thor
   # Given a parser object, generate some HTML index pages from the data it contains.
   def generate_html_indexes(parser, renderer)
     puts "    ... generating HTML indexes ..."
-    print "        ... generating main index ... "
-    File.write(File.join(Piccle.config.output_dir, "index.html"), renderer.render_main_index)
+    print "        ... generating main index "
+    paginated_main_index = renderer.render_main_index
+    print "(#{paginated_main_index.count} page(s)) ... "
+    paginated_main_index.each_with_index do |page, index|
+      File.write(File.join(Piccle.config.output_dir, "#{renderer.index_page_name_for(index)}.html"), page)
+    end
     puts "Done."
 
     parser.subsections.each do |subsection|
       if parser.subsection_photo_hashes(subsection).any?
         subdir = File.join(Piccle.config.output_dir, *subsection)
-        print "        ... generating #{subdir} index ... "
+        print "        ... generating #{subdir} index "
         FileUtils.mkdir_p(subdir)
-        File.write(File.join(subdir, "index.html"), renderer.render_index(subsection))
+        paginated_subsection_index = renderer.render_index(subsection)
+        print "(#{paginated_subsection_index.count} page(s)) ... "
+        paginated_subsection_index.each_with_index do |page, index|
+          File.write(File.join(subdir, "#{renderer.index_page_name_for(index)}.html"), page)
+        end
         puts "Done."
       end
     end
@@ -295,6 +305,10 @@ class CLI < Thor
   # Generates "quilts" - stitched together images for each section, which we use in OpenGraph tags.
   def generate_quilts(parser)
     puts "Generating gallery quilts (preview images for sharing galleries on social media)..."
+    unless Piccle.config.open_graph?
+      puts "    Not generating most quilts, because no home URL is set."
+    end
+
     if Piccle.config.open_graph?
       thumbnail_path_proc = Proc.new { |k, v| File.join(Piccle.config.output_dir, "images", "thumbnails", "#{v[:hash]}.#{v[:file_name]}") }
 
@@ -303,23 +317,22 @@ class CLI < Thor
       main_quilt = Piccle::QuiltGenerator.generate_for(main_thumbnails)
       main_quilt.write(File.join(Piccle.config.output_dir, "quilt.jpg"))
       puts " Done."
+    end
 
-      parser.subsections.each do |subsection|
-        thumbnails = parser.subsection_photos(subsection).map(&thumbnail_path_proc)
-        if thumbnails.any?
-          output_path = File.join(Piccle.config.output_dir, *subsection, "quilt.jpg")
-          print "    ... Creating gallery quilt #{output_path}..."
-          quilt = Piccle::QuiltGenerator.generate_for(thumbnails.first(9))
-          quilt.write(output_path)
-          puts " Done."
-        end
+    parser.subsections.each do |subsection|
+      thumbnails = parser.subsection_photos(subsection).map(&thumbnail_path_proc)
+      # All sections get quilts if we're rendering OpenGraph tags; otherwise just collapsed sections.
+      if thumbnails.any? && (Piccle.config.open_graph? || parser.subsection_collapsed?(subsection))
+        output_path = File.join(Piccle.config.output_dir, *subsection, "quilt.jpg")
+        print "    ... Creating gallery quilt #{output_path}..."
+        quilt = Piccle::QuiltGenerator.generate_for(thumbnails.first(9))
+        quilt.write(output_path)
+        puts " Done."
       end
-    else
-      puts "    Not generating gallery quilt images, because no home URL is set."
     end
   end
 
-  def generate_templates(_renderer)
+  def generate_templates
     puts "    ... generating templates..."
     FileUtils.mkdir_p(File.join(Piccle.config.output_dir, "js"))
     File.write(File.join(Piccle.config.output_dir, "js", "index.handlebars"), Piccle::TemplateHelpers.compile_template("index"))