jekyll-theme-elementary-blog 1.0.0 → 1.0.1

data/README.md

@@ -0,0 +1,121 @@
+# blog
+
+A static, privacy-respecting blog. In ways inspired by both Medium and the popular Medium-look-alike [mediumish-theme-jekyll](https://github.com/wowthemesnet/mediumish-theme-jekyll).
+
+## Goals
+
+Remember, we moved away from other platforms for very specific reasons.
+
+1. **Completely frictionless** for readers.
+2. **As few external resources as possible**—it slows things down and introduces potential privacy issues.
+3. **Little-to-no JavaScript**—it’s a blog, not a web app. Currently, we only use progressively-enhancing JS for improving the image zoom experience.
+
+## Modern Niceties
+
+Just because it's static and privacy-respecting doesn't mean it's not modern and featureful.
+
+1. **RSS feed support** for all the cross-posting you could desire.
+2. **Completely responsive** design from the start.
+3. **Dark style** support for everything from day zero.
+
+## Editing workflow
+
+Use the GitHub workflow!
+
+1. **Use PRs to propose** and work. That means draft PRs for things that aren't ready to publish, too.
+2. **All PRs should be reviewed** and approved before publishing.
+3. **Use reviews and inline comments**/suggestions to collaboratively edit.
+
+### Handling Images
+
+Ideally, images are put into the `images/` directory with a folder name matching the post slug. Since the normal maximum width of articles is 800 pixels, image sizes should be as follows:
+
+- Up to 800px wide for normal width loDPI
+- Up to 1600px for normal-width HiDPI
+- Up to 800px for half- or third-width images on loDPI
+- Up to 1600px for half- or third-width images on HiDPI
+- 2560px wide for full-bleed (higher than this, even for HiDPI, gets really heavy)
+
+When scaling down, use a high quality interpolator like Sinc (Lanczos3) or NoHalo in GIMP to avoid too much blur/fuzziness.
+
+Name your sized images something sane like `image-name_800.jpg` for the loDPI version, and `image-name_1600.jpg` for the HiDPI version. When writing the markdown, use this format:
+
+```markdown
+![Alt Text]({{ site.baseurl }}/images/post-name/image-name_800.jpg){: srcset="{{ site.baseurl }}/images/post-name/image-name_1600.jpg 2x"}
+```
+
+This is a bit verbose, but ensures:
+
+- Images stay valid even if we ever move the blog
+- We only load the largest version necessary on loDPI or HiDPI
+- Both loDPI and HiDPI images are loaded at the correct physical size
+
+Optimize images with the lowest JPG percent that looks good (i.e. manually in GIMP), and use something like [Image Optimizer](https://appcenter.elementary.io/com.github.gijsgoudzwaard.image-optimizer) for PNGs.
+
+Also consider JPGs instead of PNGs when the majority of the image is photographic or a gradient (i.e. not solid colors), as that will compress way better than a PNG.
+
+## Repos
+
+The blog is actually split into two repos:
+
+1. [@elementary/blog-template](https://github.com/elementary/blog-template), and
+2. [@elementary/blog](https://github.com/elementary/blog) (private)
+
+The template is the source for the design and layout. The private repo holds a copy of the template plus the actual posts themselves, and is set up with GitHub Pages. Layout and design work should always be done against the template repo.
+
+The reason for this separation is to be able to stage future/private blog posts while still letting people benefit from the template work. Ideally we'd have another solution that let us keep the contents of the blog itself public as well, without exposing future posts—or adding significantly to the complexity of maintaining the blog.
+
+## Building & Running Locally
+
+The blog is a simple Jekyll-powered site hosted by GitHub Pages. To run it locally, see [the GitHub docs](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/).
+
+### Dependencies
+
+This guide assumes you're on elementary OS or a similar Ubuntu-based environment.
+
+#### Packages
+
+- `ruby-full` (should include `ruby` and `ruby-dev`)
+- `build-essential`
+- `zlib1g-dev`
+
+#### Ruby Stuff
+
+- `jekyll` and `bundler`
+
+We recommend installing gems to a (hidden) directory in your home folder:
+
+```shell
+echo '' >> ~/.bashrc
+echo '# Install Ruby Gems to ~/.gems' >> ~/.bashrc
+echo 'export GEM_HOME="$HOME/.gems"' >> ~/.bashrc
+echo 'export PATH="$HOME/.gems/bin:$PATH"' >> ~/.bashrc
+echo '' >> ~/.bashrc
+source ~/.bashrc
+```
+
+Install jekyll and bundler:
+
+```shell
+gem install jekyll bundler
+```
+
+Install gems:
+
+```shell
+bundle install
+```
+
+(Adapted from https://jekyllrb.com/docs/installation/)
+
+### Serve
+
+```shell
+bundle exec jekyll serve --host 0.0.0.0
+```
+
+The site should now be available at http://0.0.0.0:4000/ on your local machine, and your local machine's IP address on your network—great for testing on mobile OSes.
+
+#### Drafts & Future Posts
+
+Append `--drafts` to the serve command, and drafts in the `_drafts` folder will show up based on their last-edited time. Similarly, append `--future` to the serve command to show future posts.

data/_config.yaml

@@ -0,0 +1,56 @@
+title: "elementary Blog"
+description: "We design and develop the fast, open, and privacy-respecting replacement for Windows and macOS"
+permalink: /:title/
+theme-color: "#64baff"
+gravatar: eaa3cc978770998ea2bd4382935bf0f4
+
+facebook: elementaryos
+mastodon: elementary
+reddit: elementaryos
+twitter: elementary
+
+authors:
+  aroman:
+    name: "Avi Romanoff"
+    description: "Enthusiasm Evangelist"
+  cassidyjames:
+    name: Cassidy James Blaede
+    description: "Co-founder & CXO"
+    gravatar: 41275ecc8271aca852ce2c0ff72d2610 # Gravatar md5 hash
+  danrabbit:
+    name: Daniel Foré
+    description: "Founder & CEO"
+    gravatar: 1f3cc76b99b5d0dae8381a23f52ea96d
+  karensophia:
+    name: Karen Sophia
+    description: "Customer Engagement"
+    # gravatar: e0ac5d5e717da67a36ac72adf235bc42
+  kgrubb:
+    name: Keli Grubb
+    description: Developer
+    gravatar: 8e8d16d136c38f3a28820490c17928d1
+  peteruithoven:
+    name: Peter Uithoven
+    description: "Front-end Developer"
+    gravatar: f39b1485b28be1dc2b98f269235218bc
+  anonymous:
+    name: "Unknown Author"
+
+plugins:
+  - jekyll-feed
+  - jekyll-paginate
+  - jekyll-redirect-from
+  - jekyll-sitemap
+
+paginate: 7
+paginate_path: "/archive/:num/"
+
+markdown: kramdown
+kramdown:
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    block:
+      line_numbers: true
+
+future: false # Allows us to stage posts
+exclude: [README.md, Gemfile, Gemfile.lock, vendor]

data/_includes/appcenter.html

@@ -0,0 +1,9 @@
+{% if include.rdnn %}
+    {% assign rdnn = include.rdnn %}
+{% else %}
+    {% assign rdnn = page.rdnn %}
+{% endif %}
+
+<aside markdown="1">
+[![Get it on AppCenter](https://appcenter.elementary.io/badge.svg)](https://appcenter.elementary.io/{{ rdnn }})
+</aside>

data/_includes/byline.html

@@ -0,0 +1,36 @@
+{% if site.authors[include.author].name %}
+  {% assign author=site.authors[include.author]  %}
+{% else %}
+  {% assign author=site.authors["anonymous"] %}
+{% endif %}
+
+{% assign date=include.date %}
+
+<div class="byline">
+  <div class="avatar">
+    <img
+      {% if author.gravatar %}
+        srcset="https://www.gravatar.com/avatar/{{ author.gravatar }}?s=96&d=blank 2x"
+        src="https://www.gravatar.com/avatar/{{ author.gravatar }}?s=48&d=blank"
+        alt="Avatar for {{ author.name }}"
+      {% else %}
+        srcset="https://www.gravatar.com/avatar/{{ site.gravatar }}?s=96&d=blank 2x"
+        src="https://www.gravatar.com/avatar/{{ site.gravatar }}?s=48&d=blank"
+        alt="elementary Avatar"
+      {% endif %}
+    />
+  </div>
+  <div class="author">
+    {% if include.link == true %}<a href="{{ site.baseurl }}/authors/#{{ include.author }}">{% endif %}
+    <span class="name">{{ author.name }}</span>
+    {% if include.link == true %}</a>{% endif %}
+    {% if author.description and page.layout == 'post' %}
+      <span class="description">{{ author.description }}</span>
+    {% endif %}
+  </div>
+  <time class="post-date" datetime="{{ date | date:"%Y-%m-%d" }}">{{ date | date: "%a, %b %e, %Y" }}</time>
+  {% if include.content %}
+    {% include read-time.html content=include.content %}
+  {% endif %}
+</div>
+

data/_includes/featured.html

@@ -0,0 +1,27 @@
+{% assign post = include.post %}
+
+<a class="featured{% if post.image %} with-image{% endif %}{% if include.size %} {{ include.size }}{% endif %}" href="{{ post.url | prepend: site.baseurl }}">
+  {% if post.image %}
+    <div class="featured-image" alt="Featured image" style="background-image: url({{ post.image }});"></div>
+  {% endif %}
+
+  <header>
+    <h2>{% include title.html title=post.title %}</h2>
+    {% if post.description %}
+      <h3>
+        {% include title.html title=post.description %}
+        {% if include.post.redirect_to %} →{% endif %}
+      </h3>
+    {% endif %}
+
+    {% include byline.html author=post.author date=post.date content=post.content %}
+  </header>
+
+  {% unless post.image %}
+  <section class="excerpt">
+    <p>{{ post.excerpt | strip_html | truncatewords: 40 }}</p>
+    <span>Read more…</span>
+  </section>
+  {% endunless %}
+</a>
+

data/_includes/footer.html

@@ -0,0 +1,11 @@
+<footer>
+  <p>© {{ site.time | date: '%Y' }} elementary, Inc</p>
+  <ul>
+    <li><a href="https://elementary.io/press" target="_self">Press</a></li>
+    <li><a href="https://elementary.io/brand" target="_self">Brand</a></li>
+    <li><a href="https://elementary.io/oem" target="_self">OEMs</a></li>
+    <li><a href="https://elementary.io/privacy" target="_self">Privacy</a></li>
+    <li><a href="https://elementary.io/team" target="_self">Team</a></li>
+    <li><a href="https://elementary.io/open-source" target="_self">Open Source</a></li>
+  </ul>
+</footer>

data/_includes/head.html

@@ -0,0 +1,48 @@
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>{% if page.title %}{{ page.title }} &sdot; {% endif %}{{ site.title }}</title>
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+  <meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+  <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <link rel="icon" sizes="256x256" href="https://www.gravatar.com/avatar/{{ site.gravatar }}?s=256&d=blank" />
+  <meta itemprop="logo" content="https://www.gravatar.com/avatar/{{ site.gravatar }}?s=256&d=blank" />
+  <link rel="shortcut icon" href="https://elementary.io/favicon.ico">
+  <link rel="apple-touch-icon" href="https://elementary.io/images/launcher-icons/apple-touch-icon.png">
+
+  <link rel="alternate" type="application/rss+xml" title="elementary Blog" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+
+  <meta name="author" content="{% if page.author.name %}{{ page.author.name }}{% else %}{{ site.author }}{% endif %}" />
+  <meta name="theme-color" content="{% if page.theme-color %}{{ page.theme-color }}{% else %}{{ site.theme-color }}{% endif %}" />
+
+  {% if page.image %}
+    {% assign prefix = page.image | slice: 0, 4 %}
+    {% if prefix == "http" %}
+      {% assign image = page.image %}
+    {% else %}
+      {% assign image = page.image | prepend: site.baseurl | prepend: site.url %}
+    {% endif %}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="{{ image }}" />
+  {% else %}
+    <meta name="twitter:card" content="summary" />
+    <meta property="twitter:image" content="https://www.gravatar.com/avatar/{{ site.gravatar }}?s=256&d=blank" />
+  {% endif %}
+  <meta name="twitter:site" content="@{{ site.twitter }}" />
+  <meta name="twitter:creator" content="@{{ site.twitter }}" />
+
+  <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta itemprop="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+
+  <link rel="stylesheet" type="text/css" media="all" href="{{ '/css/main.css' | prepend: site.baseurl | append: '?v=' | append: site.time }}" />
+  {% if jekyll.environment == "production" and site.url == "https://blog.elementary.io" %}
+    <script async defer data-domain="blog.elementary.io" src="https://stats.elementary.io/js/index.js"></script>
+    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+  {% endif %}
+</head>

data/_includes/license.html

@@ -0,0 +1,9 @@
+<div class="license">
+  <a title=" This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License" rel="license" target="_blank" href="http://creativecommons.org/licenses/by-sa/4.0/">
+    Some rights reserved
+  </a>
+  {% include svg/creative-commons.svg %}
+  {% include svg/creative-commons-by.svg %}
+  {% include svg/creative-commons-sa.svg %}
+</div>
+

data/_includes/medium.html

@@ -0,0 +1,8 @@
+<div class="medium">
+  <hr />
+  <article>
+    <h2>Looking for More?</h2>
+    <p>While we're migrating posts to the elementary blog, some older stories are still only on the <a href="https://medium.com/elementaryos" target="_blank" onclick="plausible('Link: Medium')">official elementary Medium publication</a>. Head over there to read more.
+  </article>
+</div>
+

data/_includes/nav.html

@@ -0,0 +1,51 @@
+<header>
+  <nav class="primary">
+    <ul>
+      <li><a href="https://elementary.io" class="logomark" target="_self">
+        {% include svg/logomark.svg %}
+      </a></li>
+
+      <li><a href="https://elementary.io/support" target="_self">Support</a></li>
+      <li><a href="https://developer.elementary.io" target="_self">Developer</a><</li>
+      <li><a href="https://elementary.io/get-involved" target="_self">Get Involved</a></li>
+      <li><a href="https://elementary.io/store/" target="_self">Store</a></li>
+      <li><a href="{{ site.baseurl }}/">Blog</a></li>
+    </ul>
+
+    <ul>
+      <li><a href="{{ site.baseurl }}/feed.xml" title="RSS Feed">
+        {% include svg/rss-square.svg %}
+      </a></li>
+
+      <li><a href="https://www.facebook.com/elementaryos" target="_blank" rel="noopener" title="Facebook">
+        {% include svg/facebook.svg %}
+      </a></li>
+
+      <li><a href="https://mastodon.social/@elementary" target="_blank" rel="noopener" title="Mastodon">
+        {% include svg/mastodon.svg %}
+      </a></li>
+
+      <li><a href="https://www.reddit.com/r/elementaryos" target="_blank" rel="noopener" title="Reddit">
+        {% include svg/reddit.svg %}
+      </a></li>
+
+      <li><a href="https://elementaryos.stackexchange.com" target="_blank" rel="noopener" title="StackExchange">
+        {% include svg/stack-exchange.svg %}
+      </a></li>
+
+      <li><a href="https://twitter.com/elementary" target="_blank" rel="noopener" title="Twitter">
+        {% include svg/twitter.svg %}
+      </a></li>
+
+      <li><a href="https://join.slack.com/t/elementarycommunity/shared_invite/enQtMzU1NDU4OTE1MjY2LWUyOTBkZGNkZGM4MDgzZjE2ZjRiZDgwMDQ1ZTA0MzcxYjI0MDUyNGRlNDI5ZWViNDkwMzMwYzczMDY2ZjA0MTc" target="_blank" rel="noopener" title="Slack">
+        {% include svg/slack.svg %}
+      </a></li>
+    </ul>
+  </nav>
+  <nav class="secondary">
+    <a href="{{ site.baseurl }}/tags/#updates">OS Updates</a>
+    <a href="{{ site.baseurl }}/tags/#appcenter">AppCenter</a>
+    <a href="{{ site.baseurl }}/tags/#devs">Developers</a>
+    <a href="{{ site.baseurl }}/tags/#design">Design</a>
+  </nav>
+</header>

data/_includes/outdated.html

@@ -0,0 +1,14 @@
+{% assign post = include.post %}
+{% assign postSecs = post.date | date: '%s' %}
+{% assign nowSecs = 'now' | date: '%s' %}
+{% assign ageSecs = nowSecs | minus: postSecs %}
+
+{% unless post.tags contains "evergreen" %}
+  {% comment%} Two years in seconds {% endcomment %}
+  {% comment %} TODO: more dynamic age? i.e. "three years ago" or "five years ago", etc.? {% endcomment %}
+  {% if ageSecs > 63072000 %}
+    <aside class="outdated">
+      <strong>Note:</strong> this post was written over two years ago. The information below may be outdated.
+    </aside>
+  {% endif %}
+{% endunless %}

data/_includes/read-time.html

@@ -0,0 +1,5 @@
+<span class="read-time" title="Estimated read time">
+  {% assign words = include.content | strip_html | number_of_words %}
+  {{ words | divided_by: 200 | plus: 1 }} min read
+</span>
+

data/_includes/scripts.html

@@ -0,0 +1,16 @@
+<script>
+  // Makes figure images focusable for zooming
+  let figureImages = document.querySelectorAll ("figure img");
+  figureImages.forEach (function (figureImage) {
+    figureImage.setAttribute ("tabindex", -1);
+    document.addEventListener ('mousedown', event => {
+      if (document.activeElement === figureImage) {
+        // Prevent it from triggering on focusIn
+        setTimeout (function () {
+          document.activeElement.blur ();
+        }, 100);
+      }
+    });
+  });
+</script>
+

data/_includes/social.html

@@ -0,0 +1,102 @@
+<div class="social">
+  <h2>Join the Discussion on Social Media</h2>
+
+  {% if page.twitter or page.mastodon or page.reddit or page.facebook %}
+    <div class="official">
+      <h3>Official Posts</h3>
+
+      {% if page.twitter %}
+        <a
+          href="{{ page.twitter }}"
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+          title="Twitter"
+          onclick="plausible('Social: Twitter')"
+        >
+          <img src="{{ '/images/twitter.svg' | prepend: site.baseurl }}" alt="Twitter" />
+        </a>
+      {% endif %}
+
+      {% if page.mastodon %}
+        <a
+          href="{{ page.mastodon }}"
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+          title="Mastodon"
+          onclick="plausible('Social: Mastodon')"
+        >
+          <img src="{{ '/images/mastodon.svg' | prepend: site.baseurl }}" alt="Mastodon" />
+        </a>
+      {% endif %}
+
+      {% if page.reddit %}
+        <a
+          href="{{ page.reddit }}"
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+          title="Reddit"
+          onclick="plausible('Social: Reddit')"
+        >
+          <img src="{{ '/images/reddit.svg' | prepend: site.baseurl }}" alt="Reddit" />
+        </a>
+      {% endif %}
+
+      {% if page.facebook %}
+        <a
+          href="{{ page.facebook }}"
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+          title="Facebook"
+          onclick="plausible('Social: Facebook')"
+        >
+          <img src="{{ '/images/facebook.svg' | prepend: site.baseurl }}" alt="Facebook" />
+        </a>
+      {% endif %}
+    </div>
+  {% endif %}
+
+  <div class="share">
+    <h3>Share</h3>
+    {% assign share-url = page.url | prepend: site.baseurl | prepend: site.url %}
+
+    <a
+      href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ share-url }}&via={{ site.twitter }}&original_referer={{ share-url }}"
+      rel="noreferrer nofollow noopener"
+      target="_blank"
+      title="Twitter"
+      onclick="plausible('Share: Twitter')"
+    >
+      <img src="{{ '/images/twitter.svg' | prepend: site.baseurl }}" alt="Twitter" />
+    </a>
+
+    <a
+      href="http://www.reddit.com/submit?title={{ page.title }}&url={{ share-url }}"
+      rel="noreferrer nofollow noopener"
+      target="_blank"
+      title="Reddit"
+      onclick="plausible('Share: Reddit')"
+    >
+      <img src="{{ '/images/reddit.svg' | prepend: site.baseurl }}" alt="Reddit" />
+    </a>
+
+    <a
+      href="https://www.facebook.com/sharer/sharer.php?u={{ share-url }}"
+      rel="noreferrer nofollow noopener"
+      target="_blank"
+      title="Facebook"
+      onclick="plausible('Share: Facebook')"
+    >
+      <img src="{{ '/images/facebook.svg' | prepend: site.baseurl }}" alt="Facebook" />
+    </a>
+
+    <a
+      href="{{ page.url | prepend: site.baseurl | prepend: site.url }}"
+
+      title="Permalink"
+      onclick="plausible('Share: Permalink')"
+    >
+      <img src="{{ '/images/edit-copy-32.svg' | prepend: site.baseurl }}" alt="Permalink" />
+    </a>
+  </div>
+</div>
+