GlitchSecure · GlitchWitch · Oct 6, 2023 · Jan 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ assets/js/bundle.js
 node_modules
 _site
 Gemfile.lock
+.idea
+_previews/
diff --git a/Gemfile b/Gemfile
@@ -13,3 +13,5 @@ gem "image_optim"
 gem "image_optim_pack"
 gem "webrick"
 gem 'psych', '< 4'
+gem 'wkhtmltoimage-binary', git: 'https://github.com/GlitchSecure/wkhtmltoimage-binary'
+gem 'imgkit', '< 1.6.2'
diff --git a/_config.yml b/_config.yml
@@ -31,6 +31,9 @@ collections:
   pages:
     output: true
     permalink: "/:title"
+  previews:
+    output: true
+    permalink: /previews/:slug/
 
 
 pagination:

diff --git a/_layouts/autopage_collection.html b/_layouts/autopage_collection.html
diff --git a/_layouts/preview.html b/_layouts/preview.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Page Title</title>
+<style>
+html, body {
+  height: 100%;
+  margin: 0;
+  zoom: 200%
+}
+
+.full-height {
+}
+</style>
+
+</head>
+<body>
+
+<div class="bg-red-200" style="  height: 100%;>
+
+  <h1>{{ page.title }}</h1>
+
+<img src="{% if page.image.feature %}./_site/assets/img/{{ page.image.feature }}{% else %}./assets/img/blog/default-feature.jpg{% endif %}" alt="Card img" class="object-cover object-center mx-auto rounded-xl" />
+
+{{ page.title | escape }}
+
+
+<div class="flex items-center mt-4">
+    <img class="rounded-full flex-shrink-0 mr-4" src="/assets/img/about/team/{{ page.coauthor | truncatewords:1 | slugify}}.jpg" width="40" height="40" alt="{{ page.coauthor }}">
+    <div>
+        <span class="font-medium text-neutral-700 dark:text-neutral-500">{{ page.coauthor }}<br></span>
+    </div>
+</div>
+
+<div class="flex items-center mt-4">
+    <img class="rounded-full flex-shrink-0 mr-4" src="/assets/img/about/team/{{ page.author | truncatewords:1 | slugify}}.jpg" width="40" height="40" alt="{{ page.author }}">
+    <div>
+        <span class="font-medium text-neutral-700 dark:text-neutral-500">{{ page.author }}</span>
+        <br>
+        <span datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished" class="text-neutral-500 dark:text-neutral-400">{{ page.date | date: "%b %-d, %Y" }}</span>
+        <span class="text-neutral-500 dark:text-neutral-400"> · {% assign words = content | number_of_words %} {% if words < 360 %} 1 MINUTE READ {% else %} {{ words | divided_by:180 }} MINUTE READ {% endif %}</span>
+    </div>
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/_layouts/preview1.html b/_layouts/preview1.html
@@ -0,0 +1,40 @@
+<div class="w-full max-w-full mb-16 sm:w-1/2 px-4 lg:w-1/3 flex flex-col">
+  <a href="{{ post.url }}">
+    <img src="{% if post.image.feature %}/assets/img/{{ post.image.feature }}{% else %}/assets/img/blog/default-feature.jpg{% endif %}" alt="Card img" class="object-cover object-center w-full h-48" />
+  </a>
+  <div class="flex flex-grow">
+    <div class="triangle w-0 h-0 border-solid border-r-glitchsecure-purple dark:border-r-glitchsecure-purple-dark border-t-transparent border-b-transparent border-l-transparent border-t-0 border-r-[20px] border-b-[20px] border-l-0"></div>
+    <div class="flex flex-col justify-between px-4 py-6 bg-white dark:bg-neutral-900 border border-neutral-400 dark:border-neutral-900">
+      <div>
+        <a class="inline-flex text-center text-xs text-neutral-200 py-1 px-3 rounded-md bg-glitchsecure-purple" href="/{{ post.category | slugify }}">{{ post.category }}</a>
+          <a
+            href="{{ post.url }}"
+            class="block my-4 text-2xl font-bold leading-tight hover:underline hover:text-glitchsecure-purple dark:text-neutral-200"
+          >
+            {{ post.title | escape }}
+          </a>
+        <p class="mb-4 dark:text-neutral-400">
+
+
+          {% if post.subtitle %}{{ post.subtitle | strip_html | strip_newlines | truncate: 120 }} {% else %} {{ post.content | strip_html | strip_newlines | truncate: 120 }} {% endif %}
+
+        </p>
+      </div>
+      <div>
+        <a href="{{ post.url }}" class="inline-block pb-1 mt-2 text-base font-black text-glitchsecure-purple uppercase border-b border-transparent hover:border-glitchsecure-purple">Read More -></a>
+        </div>
+        <footer class="flex items-center mt-4">
+            <img class="rounded-full flex-shrink-0 mr-4" src="/assets/img/about/team/{{ post.author | truncatewords:1 | slugify}}.jpg" width="40" height="40" alt="{{ post.author }} 04">
+            <div>
+                <span class="font-medium text-neutral-700 dark:text-neutral-500">{{ post.author }}</span>
+                <br>
+                <span class="text-neutral-500 dark:text-neutral-400">
+
+                  {% capture opengraphcontent %}{{ post.content }}{% endcapture %}
+                  {% assign opengraphwordcount = opengraphcontent | number_of_words %}
+                  {% if opengraphwordcount < 360 %} 1 MINUTE READ {% else %} {{ words | divided_by:180 }} MINUTE READ {% endif %}</span>
+            </div>
+        </footer>
+      </div>
+    </div>
+  </div>
diff --git a/_plugins/jekyll_image_optim.rb b/_plugins/jekyll_image_optim.rb
diff --git a/_plugins/opengraph.rb b/_plugins/opengraph.rb
@@ -0,0 +1,56 @@
+require 'fileutils'
+require 'imgkit'
+
+module Previews
+  def self.process(site, payload)
+    begin
+      # On first run it's necessary to create the previews
+      # directory in the generated site
+      FileUtils.mkdir('./_opengraph')
+
+    rescue
+    end
+
+    # Loop through all the previews
+    site.collections['previews'].docs.each do |p|
+      slug = p.data['slug']
+
+      # If the image already exists skip,
+      # in order to speed up generation
+      # To regenerate the preview, delete the file
+      if !File.exists?('./_opengraph/' + slug + '.png')
+
+        # Read the generated html for the preview
+        # And set imgkit up for generating a
+        # 600x315 image at 75 quality
+        kit = IMGKit.new(
+          File.read('./_site/previews/' + slug + '/index.html'),
+          quality: 75,
+          width: 600,
+          height: 315
+        )
+
+        # Attach the local stylesheet for wkhtmltoimage to pick up
+        kit.stylesheets << './_site/assets/css/style.css'
+
+        # Then save the image to the previews directory
+        kit.to_file('./_opengraph/' + slug + '.png')
+
+        # This step requires pngquant
+        # It removes color depth from images and reduces their
+        # size to about a third
+        # And copy it to the generated site
+
+      end
+    end
+  end
+end
+
+# Add a hook that's run after html is written
+Jekyll::Hooks.register :site, :post_write do |site, payload|
+
+  # Check if the site is being built or served locally
+  if !site.config['serving']
+    Previews.process(site, payload)
+  end
+end
diff --git a/_plugins/previews.rb b/_plugins/previews.rb
@@ -0,0 +1,47 @@
+require 'fileutils'
+
+module Filter
+  def self.process(site, payload)
+    site.collections['posts'].docs.select{|x| x.data['auto_image']}.each do |post|
+
+      # Set the path where the copied content will live
+      path = './_previews/' + post.data['slug'] + '.md'
+
+      # Copy the content of the post to the preview collection
+      File.write(path, File.read(post.path))
+
+      # Create a new document in the preview collection
+      preview_doc = Jekyll::Document.new(
+        path,
+        {site: site, collection: site.collections['previews']}
+      )
+
+      preview_doc.read
+
+      # Set the layout to preview
+      preview_doc.data['layout'] = 'preview'
+
+      # Add document to the collection
+      site.collections['previews'].docs << preview_doc
+
+    end
+  end
+end
+
+Jekyll::Hooks.register :site, :post_read do |site, payload|
+  # If the site is being served locally
+  # skip generating previews
+  # Otherwise there'll be an endless loop of previews being
+  # written and regenerated
+  if !site.config['serving']
+    Filter.process(site, payload)
+  end
+end
+
+# At the bottom of previews.rb
+
+module RemovePreviews
+  def self.process(site, payload)
+    FileUtils.rm_rf("./_previews/.", secure: true)
+  end
+end
diff --git a/_posts/2022-07-01-introducing-glitchsecure.md b/_posts/2022-07-01-introducing-glitchsecure.md
@@ -7,7 +7,7 @@ date-updated: 2023-09-29 # Add this if a change is made after the date above
 author: Jade Null # Use "GlitchSecure" if no author
 coauthor:
 category: Updates
-
+auto_image: true
 image:
   feature: blog/1/feature.jpg # Upload a 1200x630px image
   hero: blog/1/header.jpg # Upload a 1920x1008 image