steve-for-jekyll 0.2.0 → 1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e7fb39c832ed2eb9d093d4131a7e3c595dce2245ac308dd7a6f673a3ea2d098
-  data.tar.gz: 9b73274ce1690634e611dc397e8b81d55c4b823775028024941ad2d5b6a41070
+  metadata.gz: c51e855c1fb3004217431097199681e09854d74c217f9ef853ea18cd8e1a468b
+  data.tar.gz: 745845b405d92e8fed26ee0a31fcf2d8b3f4ea150c4572e838c37bd84b786478
 SHA512:
-  metadata.gz: 7ecfd9e650e00f09aba73733ab1b76da0139306c6effdb0bde0fd0457f1efd4c66a1eb3db17be0f6784dea55c38f547f6c6d15a7bff2eb9fc0f2f852ab2edf7f
-  data.tar.gz: 517cec4bfd0c25d6e7a1aa8dcfab7f0762d95f10d8339c9d7fd510eba243a63525b3c011c3bcb2f7f17c1e3dc0b844719e8b73c40722f912e19b46bd3fb9a835
+  metadata.gz: 166223275238afedf0f4b9a1e195793df2cf020549325122cef3968029bda8aa8617ea75e331266202b8fd03a478a021e1ccc786083276fcd9a9b07c36e68938
+  data.tar.gz: 1df804482f3eadb8ca485cecfd4d7d7cd67f9da9bfd7636c7c92986842ba3495755a67ff8962828eed153a099eb12da5bc48f0f0ee20ec677eb5954019a6dfd0

data/README.md

@@ -1,6 +1,6 @@
 # Steve for Jekyll
 
-Steve is a charming and fun blog theme for [Jekyll](https://jekyllrb.com/), the static site generator. It's developed by [@arthrfrts](https://github.com/arthrfrts) to be used on the [Esporo](https://esporo.net/) website.
+Steve is a charming and fun blog theme for [Jekyll](https://jekyllrb.com/), the static site generator. It's developed by [@arthrfrts](https://github.com/arthrfrts) to be used on the [Esporo](https://esporo.net/) websites — but feel free to use it in any project you may find it fitting.
 
 See it in action on the [demo site](https://esporo.github.io/steve).
 
@@ -28,11 +28,160 @@ Or install it yourself as:
 
 ## Usage
 
-### 1. Install dependencies
+Steve is made to be used with zero-configuration needed. Even so, you can customize it further with theme settings, style variables, content includes and plugin-specific configurations. We will guide you through each one of those.
+
+### Theme settings
+
+Steve's settings are defined in your site's `_config.yml`:
+
+```yaml
+steve:
+  intensedebate_account: # get one at <https://intensedebate.com/install>
+  archives: # Prefixes used with archive titles
+    date: Posts from
+    tag: More about…
+    category: Posts filed in
+  date_formats: # Uses <http://strftime.net>
+    post: "%b %e, %Y" # The date format used in the post layout.
+    archives: # The date formats for the archive layout.
+      day: "%b %e, %Y"
+      month: "%b, %Y"
+      year: "%Y"
+  page_404: |+
+    The page you're looking for could not be found.
+
+    Maybe the search can help.
+  pagination: # Strings used in the blog- and post-pagination.
+    next_page: "&laquo; Next"
+    prev_page: "Previous &raquo;"
+    prev_post: "Previous:"
+    next_post: "Next:"
+  post: # Strings used in the post layout.
+    byline: "By"
+    tags: More about…
+  search: # Strings used in the search form.
+    label: Search this blog
+    placeholder: What you're looking for?
+    submit: Go!
+```
+
+The above are the default values that Steve will use. Feel free to change the ones you want. This is useful if you want to localize the theme strings or change the date formats used by the theme.
+
+### Style variables
+
+You can change Steve's appearance with a different color scheme or typography setting custom variables. Follow these instructions:
+
+1. Create a `screen.scss` file in `assets/css`.
+2. Add the following content:
+    ```scss
+    ---
+    ---
+
+    @import "{{ site.theme }}";
+    ```
+3. Before the `@import` declaration, you can set the following custom SCSS variables:
+
+```scss
+/*
+  Color Scheme
+*/
+
+$color__background-content: #fff; // posts, pages and sidebar background color.
+$color__background-body: #e4f0f6; // body background color:
+$color__text: #000112; // body text color
+
+$color__link: #4e9dd8; // color for links and accents
+$color__link-hover: #2361a7; // alternate color for active or focused links and accents
+
+$color__details: #939496; // color for details such as borders and shadows
+$color__details-lighter: #f0f1f4; // lighter alternative for details
+$color__details-darker: #6d6e70; // darker alternative for details
+
+/*
+  Typography
+*/
+
+$font__body: sans-serif; // used for the main, body typography
+$font__headings: sans-serif; // used for headings and feature elements
+$font__code: monospace; // used for pre-formatted text and code.
+
+
+/*
+  Layout
+*/
+$layout__container-width: 1180px; // the width of the main content (content + sidebar)
+$layout__gutter: 2rem ; // the spacing unit between elements.
+```
+
+You can change the values to any variable you want. Steve will replace the default values set by the theme with the ones you choose. Be sure that the variable definitions are **above** your `@import "{{ site.theme }}"` declaration.
+
+### Content includes
+
+Steve supports two editable areas and three different menus.
+
+#### Editable areas
+
+You can add any content you want in your site's sidebar or footer.
+
+* Create a `custom-widgets.html` file in `_includes/blog/` to add custom content to your site's sidebar.
+* Create a `custom-text.html` file in `_includes/footer` to add custom content to your site's footer.
+
+#### Menus
+
+Steve has three menu positions controlled using [Jekyll data files](https://jekyllrb.com/docs/datafiles/):
+
+* `_data/menu.yml` &mdash; The main menu, above the website content.
+* `_data/social.yml` &mdash; The social menu, in the website sidebar.
+* `_data/links.yml` &mdash; And a third menu at the bottom of your website's footer.
+
+Create the respective data file for the menu you want to use. Menus are a YAML List with the following structure:
+
+```yaml
+- title: "About this site" # The item title
+  url: "/about/" # The item URL or path
+  external: true # Optional, if the link points to an external resource.
+  color: "#336699" # Only on `_data/menu.yml`, the background color of this menu item.
+  icon: "<svg ...>" # Only on `_data/social.yml`, the SVG icon markup for this item -- get one in <https://simpleicons.org>
+```
+
+#### Blogrolls
+
+Blogrolls are linked lists shown in your site's sidebar.Like menus, you can set up as any blogrolls as you want using the `_data/blogroll.yml` data file.
+
+```yaml
+- title: Blogroll # The blogroll title shown in the sidebar
+  links: # The list of links in this blogroll
+  - title: Link 1
+    url: "https://example.com"
+  - title: Link 2
+    url: "https://example.net"
+  - title: Link 3
+    url: "https://example.org"
+- title: Blogroll 2
+  links:
+    - title: Link 1
+      url: "https://example.com"
+    - title: Link 2
+      url: "https://example.net"
+    - title: Link 3
+      url: "https://example.org"
+``` 
+
+### Plugin-specific settings
+
+Steve uses the following Jekyll plugins to create sitemaps, RSS feeds, archives and much more.
+
+- [jekyll-feed](https://github.com/jekyll/jekyll-feed) &mdash; generates the RSS feed.
+- [jekyll-seo-map](https://github.com/jekyll/jekyll-seo-tag) &mdash; generates site's OpenGraph and SEO meta tags.
+- [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) &mdash; generates the XML sitemap.
+- [jekyll-paginate](https://github.com/jekyll/jekyll-paginate) &mdash; paginates the home post list.
+- [jekyll-archives](https://github.com/jekyll/jekyll-archives) &mdash; generates the archives by date, tag and category.
+
+While Steve sets initial configurations for these plugins, you may want to change them in your `_config.yml`. Please refer to these plugins documentations for further reading about how to change their config options.
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at <https://github.com/esporo/steve>. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ## Development
 

data/_config.yml

@@ -7,28 +7,47 @@ email: steve-support@esporo.net
 
 lang: en
 
-url: "https://esporo.github.io"
+url: "https://esporo.github.io/steve"
 baseurl: ""
 
 # Theme settings
 steve:
   intensedebate_account: # get one at <https://intensedebate.com/install>
-  archive_title:
-    date: "Posts from"
-    tag: "More about"
-    category: "Category:"
-  date_formats:
-    archive:
-      day: "%m/%d/%Y"
-      month: "%m/%Y"
+  archives: # Prefixes used with archive titles
+    date: Posts from
+    tag: More about…
+    category: Posts filed in
+  date_formats: # Uses <http://strftime.net>
+    post: "%b %e, %Y"
+    archives:
+      day: "%b %e, %Y"
+      month: "%b, %Y"
       year: "%Y"
-    post: "%m/%d/%Y"
+  page_404: |+
+    The page you're looking for could not be found.
+
+    Maybe the search can help.
+  pagination:
+    next_page: "&laquo; Next"
+    prev_page: "Previous &raquo;"
+    prev_post: "Previous:"
+    next_post: "Next:"
+  post:
+    byline: "By"
+    tags: More about…
+  search:
+    label: Search this blog
+    placeholder: What you're looking for?
+    submit: Go!
+
 
 # Build settings
 markdown: kramdown
 permalink: "/:year/:month/:day/:title/"
 
-paginate: 2
+theme: steve-for-jekyll
+
+paginate: 6
 paginate_path: "/page/:num/"
 
 plugins:

data/_includes/blog/custom-widgets.html

@@ -0,0 +1,3 @@
+{% comment %}
+  Add your custom sidebar widgets here!
+{% endcomment %}

data/_includes/blog/post.html

@@ -1,7 +1,3 @@
-{% assign lang = page.lang | default: site.lang %}
-
-{% assign locale = site.data.locales[lang] %}
-
 <article class="content post">
   <header class="content-header">
     {% if post.title != "" %}
@@ -13,7 +9,7 @@
     <div class="content-meta">
       <a class="content-date" href="{{ post.url }}" rel="bookmark">
         <time datetime="{{ post.date | date_to_xmlschema }}">
-          {{ post.date | date: locale.date_formats.post }}
+          {{ post.date | date: site.steve.date_formats.post }}
         </time>
       </a>
 
@@ -25,7 +21,7 @@
             {{ author.name }}
           </a>
         {% else %}
-          <a class="content-author" href="{{ site.twitter.username | append: 'https://twitter.com/' }}" rel="author">
+          <a class="content-author" href="{{ post.author | prepend: 'https://twitter.com/' }}" rel="author">
             {{ post.author }}
           </a>
         {% endif %}

data/_includes/blog/sidebar.html

@@ -1,39 +1,42 @@
-{% assign lang = page.lang | default: site.lang %}
-
-{% assign locale = site.data.locales[lang] %}
-
 {% include search-form.html class="widget -search" %}
 
-<aside class="widget -sidebar">
-  {% if site.data.social %}
-    <ul class="social-links">
-      {% for link in site.data.social %}
-        <li class="link">
-          <a href="{{ link.url }}" rel="external">
-            {{ link.icon }}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  {% endif %}
+{% capture custom_widgets %}
+  {% include blog/custom-widgets.html %}
+{% endcapture %}
 
-  {% if site.data.blogroll %}
-    {% for blogroll in site.data.blogroll %}
-      <section class="blogroll">
-        <h4 class="blogroll-title">{{ blogroll.title }}</h4>
+{% assign custom_widgets = custom_widgets | strip | strip_newlines | normalize_whitespace %}
 
-        <ul class="blogroll-list">
-          {% for link in blogroll.links %}
-            <li class="link">
-              <a href="{{ link.url }}" {% if link.external %} rel="external" {% endif %}>
-                {{ link.title }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      </section>
-    {% endfor %}
-  {% endif %}
+{% if site.data.social or site.data.blogroll or custom_widgets != "" %}
+  <aside class="widget -sidebar">
+    {% if site.data.social %}
+      <ul class="social-links">
+        {% for link in site.data.social %}
+          <li class="link">
+            <a href="{{ link.url }}" rel="external">
+              {{ link.icon }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    {% if site.data.blogroll %}
+      {% for blogroll in site.data.blogroll %}
+        <section class="blogroll">
+          <h4 class="blogroll-title">{{ blogroll.title }}</h4>
 
-  {% include blog/custom-widgets.html %}
-</aside>
+          <ul class="blogroll-list">
+            {% for link in blogroll.links %}
+              <li class="link">
+                <a href="{{ link.url }}" {% if link.external %} rel="external" {% endif %}>
+                  {{ link.title }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </section>
+      {% endfor %}
+    {% endif %}
+
+    {{ custom_widgets }}
+  </aside>
+{% endif %}

data/_includes/footer.html

@@ -4,8 +4,6 @@
       <a href="{{ site.url }}">{{ site.title }}</a>
     </h5>
 
-    {{ site.description }}
-
     {% include footer/custom-text.html %}
   </div>
 

data/_includes/footer/custom-text.html

@@ -1,3 +1,5 @@
 {% comment %}
   Create a file like this and add your own custom content that should be shown at the bottom of your website.
 {% endcomment %}
+
+{{ site.description }}

data/_includes/header.html

@@ -1,5 +1,5 @@
 {% capture site_branding %}
-<a href="{{ site.url }}">
+<a href="{{ "/" | relative_url }}">
   {% if site.logo %}
     <img class="logo" src="{{ site.logo }}" alt="{{ site.title }}" />
   {% else %}

data/_includes/search-form.html

@@ -1,16 +1,12 @@
-{% assign lang = page.lang | default: site.lang %}
-
-{% assign locale = site.data.locales[lang] %}
-
 <form action="//duckduckgo.com" method="get" {% if include.class %}class="{{ include.class }}"{% endif %}>
-  <label for="search_terms">{{ locale.search.label }}</label>
+  <label for="search_terms">{{ site.steve.search.label }}</label>
 
   <div class="search-controls">
 
-    <input id="search_terms" placeholder="{{ locale.search.placeholder }}" type="search" name="q" required />
+    <input id="search_terms" placeholder="{{ site.steve.search.placeholder }}" type="search" name="q" required />
     <input type="hidden" name="sites" value="{{ site.url | remove: 'https://' }}" />
     <button type="submit">
-      {{ locale.search.submit }}
+      {{ site.steve.search.submit }}
     </button>
 
   </div>

data/_layouts/archive.html

@@ -2,19 +2,15 @@
 layout: blog
 ---
 
-{% assign lang = page.lang | default: site.lang %}
-
-{% assign locale = site.data.locales[lang] %}
-
 <header class="archive-header">
   {% if page.date %}
     <h1>
-      {{ locale.archives.date }}<br />
-      <strong>{{ page.date | date: locale.date_formats.archives[page.type] }}</strong>
+      {{ site.steve.archives.date }}<br />
+      <strong>{{ page.date | date: site.steve.date_formats.archives[page.type] }}</strong>
     </h1>
   {% else %}
     <h1>
-      {{ locale.archives[page.type] }}<br />
+      {{ site.steve.archives[page.type] }}<br />
       <strong>{{ page.title }}</strong>
     </h1>
   {% endif %}

data/_layouts/home.html

@@ -0,0 +1,23 @@
+---
+layout: blog
+---
+
+{% for post in paginator.posts %}
+  {% include blog/post.html %}
+{% endfor %}
+
+{% if paginator.total_pages > 1 %}
+  <nav class="content-navigation">
+    {% if paginator.previous_page %}
+      <a class="nav-link prev-link" href="{{ paginator.previous_page_path }}" rel="prev">
+        {{ site.steve.pagination.next_page }}
+      </a>
+    {% endif %}
+
+    {% if paginator.next_page %}
+      <a class="nav-link next-link" href="{{ paginator.next_page_path }}" rel="next">
+        {{ site.steve.pagination.prev_page }}
+      </a>
+    {% endif %}
+  </nav>
+{% endif %}

data/_layouts/post.html

@@ -2,10 +2,6 @@
 layout: blog
 ---
 
-{% assign lang = page.lang | default: site.lang %}
-
-{% assign locale = site.data.locales[lang] %}
-
 <article class="content post">
   <header class="content-header">
     {% if page.title != "" %}
@@ -17,7 +13,7 @@ layout: blog
     <div class="content-meta">
       <a class="content-date" href="{{ page.url }}" rel="bookmark">
         <time datetime="{{ page.date | date_to_xmlschema }}">
-          {{ page.date | date: locale.date_formats.post }}
+          {{ page.date | date: site.steve.date_formats.post }}
         </time>
       </a>
 
@@ -29,7 +25,7 @@ layout: blog
             {{ author.name }}
           </a>
         {% else %}
-          <a class="content-author" href="{{ site.twitter.username | append: 'https://twitter.com/' }}" rel="author">
+          <a class="content-author" href="{{ page.author | prepend: 'https://twitter.com/' }}" rel="author">
             {{ page.author }}
           </a>
         {% endif %}
@@ -49,7 +45,7 @@ layout: blog
 
   {% if page.tags.size > 0 %}
     <footer class="content-footer">
-      <p>{{ locale.post.tags }}</p>
+      <p>{{ site.steve.post.tags }}</p>
 
       <ul class="content-tags">
         {% for tag in page.tags %}
@@ -82,13 +78,13 @@ layout: blog
   <nav class="content-navigation">
     {% if page.previous %}
       <a class="nav-link prev-link" href="{{ page.previous.url }}" rel="prev">
-        {{ locale.pagination.prev_post }} <strong>{{ page.previous.title }}</strong>
+        {{ site.steve.pagination.prev_post }} <strong>{{ page.previous.title }}</strong>
       </a>
     {% endif %}
 
     {% if page.next %}
       <a class="nav-link next-link" href="{{ page.next.url }}" rel="next">
-        {{ locale.pagination.next_post }} <strong>{{ page.next.title }}</strong>
+        {{ site.steve.pagination.next_post }} <strong>{{ page.next.title }}</strong>
       </a>
     {% endif %}
   </nav>

data/_sass/steve/_base.scss

@@ -53,7 +53,8 @@ body {
   ol,
   figure,
   iframe,
-  table {
+  table,
+  .highlight {
     margin-bottom: var(--gap);
   }
 }

data/_sass/steve/_layout.scss

@@ -22,9 +22,14 @@ body {
     margin-bottom: var(--gap);
     text-align: center;
     color: var(--color-link);
+    overflow: visible;
 
     .logo {
+      display: inline-block;
       max-width: 250px;
+      margin: calc(var(--gap) / 4);
+      box-shadow: none;
+      filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
     }
 
     &:hover,
@@ -71,6 +76,7 @@ body {
 }
 
 .menu-item {
+  flex: 0 0 auto;
   color: rgba(255, 255, 255, 0.7);
   background-color: var(--color-link);
   border-radius: 1.5rem;
@@ -101,6 +107,11 @@ body {
   padding: calc(var(--gap) * 2);
   margin-bottom: var(--gap);
 
+  @media screen and (max-width: 600px) {
+    padding-left: var(--gap);
+    padding-right: var(--gap);
+  }
+
   & > *:last-child {
     margin-bottom: 0;
   }
@@ -132,6 +143,10 @@ body {
   }
 }
 
+.content-body > :last-child {
+  margin-bottom: 0;
+}
+
 .content-footer {
   margin-top: var(--gap);
   font-size: 0.75rem;
@@ -195,7 +210,8 @@ body {
 // The Blog Layout
 .layout-blog,
 .layout-post,
-.layout-archive {
+.layout-archive,
+.layout-home {
   .container {
     display: grid;
     gap: var(--gap);
@@ -328,6 +344,7 @@ label[for="search_terms"] {
 .search-controls {
   display: flex;
   flex-flow: row nowrap;
+  font-size: 0.75rem;
 
   input[name="q"] {
     max-width: 400px;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: steve-for-jekyll
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: '1.0'
 platform: ruby
 authors:
 - Arthur Freitas
@@ -112,16 +112,16 @@ dependencies:
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.2'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.2'
+        version: '0'
 description:
 email:
 - email@arthr.me
@@ -145,6 +145,7 @@ files:
 - _layouts/archive.html
 - _layouts/blog.html
 - _layouts/default.html
+- _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
 - _sass/steve.scss