jekyll-google-photos 0.0.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bb7ae1fdffcb3907a967bf77c6aec0862803172c
-  data.tar.gz: 522b31b1cf8985086d371b49d4a15cbb09f65c8a
+  metadata.gz: 4196827dd3a3b94ca00f5a0a3e7c4a5f47c9447a
+  data.tar.gz: ddbb5f23ce3c09a237db5c9a87b1de74315d644c
 SHA512:
-  metadata.gz: c5d7d0de9d3bf09ce125b20a0e42af016c230f0983b213138401ccf824f8e624404b66e2aaf3cd8ec513a79d79d79aedc86b92520cd466af68f6f4fa624eda2b
-  data.tar.gz: 88694193593b3c7a94b678eb61d1a09191b86304bef8008006d78e2843346fb958cdd6c8a45333bfd18dbb25c697691873696665986ddb951790b2cdd2f64762
+  metadata.gz: 427374f095a2a4f984a6b5c0ad6fce8e35c20d9bc310b12af509b13691a7a72de361b2c6c50cf0cad8d6d9378ae09b10d633b8a90d29f1f10d3c40efba33e89e
+  data.tar.gz: 50947e581864842ac80d77aaf70ef155ba31f2b49f8d285642ad4c73edcb95fb89550b46fc82fdaa32cbb5ae5499034d871384372f7ac8a4b49837855f277e86

data/Gemfile

@@ -12,6 +12,3 @@ gem "wdm", "~> 0.1.0" if Gem.win_platform?
 
 gem "nokogiri", "~> 1.10"
 
-gem "image_size", "~> 2.0"
-
-gem "fastimage", "~> 2.1"

data/Gemfile.lock

@@ -15,7 +15,6 @@ GEM
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    image_size (2.0.1)
     jekyll (3.7.4)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -71,7 +70,6 @@ PLATFORMS
 
 DEPENDENCIES
   fastimage (~> 2.1)
-  image_size (~> 2.0)
   jekyll (~> 3.7.2)
   jekyll-feed (~> 0.6)
   minima (~> 2.0)
@@ -79,4 +77,4 @@ DEPENDENCIES
   tzinfo-data
 
 BUNDLED WITH
-   1.17.1
+   2.0.1

data/README.md

@@ -1,3 +1,41 @@
-# jekyll-google-photos
+# Jekyll Google Photos
 
 > 💎 Embedd Google Photos Album to your Jekyll Site
+
+[Check out the Demo](http://chira.ga/trip-to-annecy/)
+
+# Installing
+
+add the following to your Gemfile:
+```
+gem 'jekyll-google-photos'
+gem 'fastimage'
+```
+
+then:
+```
+bundle install
+```
+Note: Simplified installation is still a WIP
+
+You also need to add this plugin to your `_config.yml` file:
+```
+plugins:
+  - jekyll-google-photos
+```
+
+# Usage:
+```
+{% google_photos <Link to Shared Google Photos Album> %}
+```
+Example:
+```
+{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 %}
+```
+
+# Features to implement
+
+* Revamp Grid Layout Algorithm
+* Let users decide how many photos in each row
+* Full-Screen HQ Image View and Slider
+* Do something about Videos

data/_config.yml

@@ -1,9 +1,6 @@
-title: Your awesome title
-email: your-email@example.com
-description: >-
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+title: jekyll-google-photos
+email: me@chia.ro
+description: ""
 baseurl: ""
 url: ""
 twitter_username: jekyllrb

data/_posts/2018-02-22-welcome-to-jekyll.markdown

@@ -5,7 +5,7 @@ date:   2018-02-22 18:29:32 +0000
 categories: jekyll update
 ---
 
-{% google_photos https://photos.app.goo.gl/zSvo8gbDizZE4EKu5 %}
+{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 300 150 100 1280 400 5 %}
 
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
 

data/jekyll-google-photos.gemspec

@@ -6,8 +6,8 @@ Gem::Specification.new do |spec|
   spec.summary       = "Embedd Google Photos Album to your Jekyll Site"
   spec.description   = "Embedd Google Photos Album to your Jekyll Site"
   spec.version       = JekyllGooglePhotos::VERSION
-  spec.authors       = ["heychirag"]
-  spec.email         = ["i@chira.ga"]
+  spec.authors       = ["Chirag Arora"]
+  spec.email         = ["me@chia.ro"]
   spec.homepage      = "https://github.com/heychirag/jekyll-google-photos"
   spec.licenses      = ["MIT"]
   spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r!^(test|spec|features)/!)  }
@@ -17,5 +17,4 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "rspec", "~> 3.5"
   spec.add_development_dependency "rubocop", "~> 0.52"
   spec.add_development_dependency "nokogiri", "~> 1.10"
-  spec.add_development_dependency "fastimage", "~> 2.1"
 end

data/lib/jekyll-google-photos/tag.rb

@@ -2,85 +2,162 @@ require "jekyll"
 require 'open-uri'
 require 'nokogiri'
 require 'fastimage'
-
-# https://jekyllrb.com/docs/plugins/#tags
+require 'net/http'
 
 module JekyllGooglePhotos
   class Tag < Liquid::Tag
-    def initialize(tagName, url, tokens)
+    def initialize(tagName, args, tokens)
       super
-      @url = url
-
-      @doc = Nokogiri::HTML(open(@url.strip).read)
-
-      @scripts = @doc.xpath("//script")
+      args = args.split(" ")
+      url = args[0]
+      @row_height = args[1].to_i
+      @space = args[6].to_i
+      @tablet_max = args[4].to_i
+      @row_height_tablet = args[2].to_i
+      @space_tablet = @space
+      @phone_max = args[5].to_i
+      @row_height_phone = args[3].to_i
+      @space_phone = @space
+      @imgLinks = getImageLinks(url)
+      @dom = createDOM()
+    end
 
-      for $x in @scripts do
-        if $x.inner_html.match(/initDataCallback\(/)
-          @jsonString = $x.inner_html
-          @jsonString = @jsonString.sub(/.*function\(\)\{return /,"")
-          @jsonString["\n}});"] = ""
+    def getImageLinks(url)
+      doc = Nokogiri::HTML(open(url.strip).read)
+      scripts = doc.xpath("//script")
+      for x in scripts do
+        if x.inner_html.match(/initDataCallback\(/)
+          jsonString = x.inner_html
+          jsonString = jsonString.sub(/.*function\(\)\{return /,"")
+          jsonString["\n}});"] = ""
         end
       end
+      json = JSON.parse(jsonString)
+      return json[1]
+    end
 
-      @json = JSON.parse(@jsonString)
-      @imgChildren = @json[1]
-      $i = 0
-      @margin = 7;
-      @imgDOMS = %Q{<div class="google-photos-album" style="position:relative;margin-left:-#{@margin}px;margin-top:-#{@margin}px;">}
-      for $x in @imgChildren do
-        @dims = FastImage.size($x[1][0]);
-        @imgDOMS += (%Q{<img src="#{$x[1][0]}" width="#{@dims[0]}" height="#{@dims[1]}" style="margin-left:#{@margin}px;margin-top:#{@margin}px;" />})
-        puts $i
-        $i += 1
-      end
-      @imgDOMS += %Q{</div>}
+    def flexbinCSS()
+      elem = %Q{
+                  .flexbin {
+                       display: flex;
+                       overflow: hidden;
+                       flex-wrap: wrap;
+                       margin: -#{@space/2.0}px;
+                  }
+                   .flexbin:after {
+                       content: '';
+                       flex-grow: 999999999;
+                       min-width: #{@row_height}px;
+                       height: 0;
+                  }
+                   .flexbin > * {
+                       position: relative;
+                       display: block;
+                       height: #{@row_height}px;
+                       margin: #{@space/2.0}px;
+                       flex-grow: 1;
+                  }
+                   .flexbin > * > img {
+                       height: #{@row_height}px;
+                       object-fit: cover;
+                       max-width: 100%;
+                       min-width: 100%;
+                       vertical-align: bottom;
+                  }
+                   .flexbin.flexbin-margin {
+                       margin: #{@space/2.0}px;
+                  }
+                   @media (max-width: #{@tablet_max}px) {
+                       .flexbin {
+                           display: flex;
+                           overflow: hidden;
+                           flex-wrap: wrap;
+                           margin: -#{@space/2.0}px;
+                      }
+                       .flexbin:after {
+                           content: '';
+                           flex-grow: 999999999;
+                           min-width: #{@row_height_tablet}px;
+                           height: 0;
+                      }
+                       .flexbin > * {
+                           position: relative;
+                           display: block;
+                           height: #{@row_height_tablet}px;
+                           margin: #{@space/2.0}px;
+                           flex-grow: 1;
+                      }
+                       .flexbin > * > img {
+                           height: #{@row_height_tablet}px;
+                           object-fit: cover;
+                           max-width: 100%;
+                           min-width: 100%;
+                           vertical-align: bottom;
+                      }
+                       .flexbin.flexbin-margin {
+                           margin: #{@space/2.0}px;
+                      }
+                  }
+                   @media (max-width: #{@phone_max}px) {
+                       .flexbin {
+                           display: flex;
+                           overflow: hidden;
+                           flex-wrap: wrap;
+                           margin: -#{@space/2.0}px;
+                      }
+                       .flexbin:after {
+                           content: '';
+                           flex-grow: 999999999;
+                           min-width: #{@row_height_phone}px;
+                           height: 0;
+                      }
+                       .flexbin > * {
+                           position: relative;
+                           display: block;
+                           height: #{@row_height_phone}px;
+                           margin: #{@space/2.0}px;
+                           flex-grow: 1;
+                      }
+                       .flexbin > * > img {
+                           height: #{@row_height_phone}px;
+                           object-fit: cover;
+                           max-width: 100%;
+                           min-width: 100%;
+                           vertical-align: bottom;
+                      }
+                       .flexbin.flexbin-margin {
+                           margin: #{@space/2.0}px;
+                      }
+                  }
+
+      }
+      return elem
+    end
 
-      @imgDOMS += %Q{<script>#{insertScript()}</script>}
+    def createDOM()
+      sp = %Q{<style>}
+      sp += flexbinCSS()
+      sp += %Q{</style>}
+      sp += addImages()
+      return sp
     end
 
-    def insertScript
-      result = 'var album = document.getElementsByClassName("google-photos-album")[0];'
-      result += 'var albumImages = album.getElementsByTagName("img");'
-      result += 'var minPicHeight = 200; var albumMargin ='+@margin.to_s+'; var noPics = 4;'
-      result += 'var containerWidth = album.parentElement.clientWidth;'
-      result += 'var xcoor = 0; var ycoor = 0;'
-      result += '/*var setHeight = 0;*/'
-      result += 'for(var i=0;i<albumImages.length;i+=noPics) {'
-      result += 'var currMinHeight = 999999999;'
-      result += 'for(var j=i;j<i+noPics&&j<albumImages.length;j++) {'
-      result += 'if(albumImages[j].height<currMinHeight)'
-      result += 'currMinHeight = albumImages[j].height;'
-      result += '}'
-      result += 'for(var j=i;j<i+noPics&&j<albumImages.length;j++) {'
-      result += 'albumImages[j].width *= currMinHeight/albumImages[j].height;'
-      result += 'albumImages[j].height = currMinHeight;'
-      result += '}'
-      result += 'var currWidth = (noPics)*albumMargin;'
-      result += 'for(var j=i;j<i+noPics&&j<albumImages.length;j++) {'
-      result += 'currWidth += albumImages[j].width;'
-      result += '}'
-      result += 'var k; var limitWidth = 0;'
-      result += 'for(var k=i;k<i+noPics-1&&k<albumImages.length;k++) {'
-      result += 'albumImages[k].width *= containerWidth/currWidth;'
-      result += 'limitWidth = limitWidth + albumImages[k].width + albumMargin;'
-      result += 'albumImages[k].height *= containerWidth/currWidth;'
-      result += '}'
-      result += 'albumImages[k].width = containerWidth-limitWidth;'
-      result += 'albumImages[k].height *= containerWidth/currWidth;'
-      result += '/*var setWidth = 0;'
-      result += 'for(var j=i;j<i+noPics&&j<albumImages.length;j++) {'
-      result += 'albumImages[j].style.transform = "translate3d($setWidth,$setHeight,0px)";'
-      result += 'setWidth += albumImages[j].width;'
-      result += 'setWidth += albumMargin;'
-      result += '}'
-      result += 'setHeight += albumImages[i].height;'
-      result += 'setHeight += albumMargin;*/'
-      result += '}'
+    def addImages()
+      sp = %Q{<div class="flexbin">}
+      for x in @imgLinks
+        link = x[1][0] + %Q{=w#{@tablet_max}}
+        sp += %Q{
+                  <a href="#{x[1][0]}">
+                      <img src="#{link}" />
+                  </a>
+        }
+      end
+      sp += %Q{</div>}
+      return sp
     end
 
     def render(context)
-      "#{@imgDOMS}"
+      @dom
     end
   end
 end

data/lib/jekyll-google-photos/version.rb

@@ -1,3 +1,3 @@
 module JekyllGooglePhotos
-  VERSION = "0.0.2".freeze
+  VERSION = "1.0.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-google-photos
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
 platform: ruby
 authors:
-- heychirag
+- Chirag Arora
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-06 00:00:00.000000000 Z
+date: 2019-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -80,23 +80,9 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.10'
-- !ruby/object:Gem::Dependency
-  name: fastimage
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.1'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.1'
 description: Embedd Google Photos Album to your Jekyll Site
 email:
-- i@chira.ga
+- me@chia.ro
 executables: []
 extensions: []
 extra_rdoc_files: []