Coder Social home page Coder Social logo

patdryburgh / hitchens Goto Github PK

View Code? Open in Web Editor NEW
325.0 7.0 412.0 1.04 MB

An inarguably well-designed Jekyll theme.

Home Page: https://patdryburgh.github.io/hitchens/

License: MIT License

Ruby 3.76% HTML 36.61% SCSS 59.63%
jekyll jekyll-theme jekyll-template

hitchens's Introduction

layout title
page
Hitchens

An inarguably well-designed Jekyll theme by Pat Dryburgh.

Hitchens Preview

Undoubtably one of the great minds of our time, Christopher Hitchens challenged his readers to think deeply on topics of politics, religion, war, and science. This Jekyll theme's design is inspired by the trade paperback version his book, Arguably, and is dedicated to his memory.

Quick Start

This theme is, itself, a Jekyll blog, meaning the code base you see has everything you need to run a Jekyll powered blog!

To get started quickly, follow the instructions below:

  1. Click the Fork button at the top of the repository;
  2. Go to your forked repo's Settings screen;
  3. Scroll down to the GitHub Pages section;
  4. Under Source, select the Master branch;
  5. Hit Save.
  6. Follow Jekyll's instructions to configure your new Jekyll site.

Manual Installation

If you've already created your Jekyll site or are comfortable with the command line, you can follow Jekyll's Quickstart instructions add this line to your Jekyll site's Gemfile:

gem "hitchens-theme"

And add the following lines to your Jekyll site's _config.yml:

theme: hitchens-theme

Depending on your site's configuration, you may also need to add:

ignore_theme_config: true

And then on the command line, execute:

$ bundle

Or install the theme yourself as:

$ gem install hitchens-theme

Usage

Home Layout

The home layout presents a list of articles ordered chronologically. The theme uses Jekyll's built-in pagination which can be configured in your _config.yml file.

The masthead of the home page is derived from the title and description set in your site's _config.yml file.

Navigation

To include a navigation menu in your site's masthead and footer:

  1. Create a _data directory in the root of your site.
  2. Add a menu.yml file to the _data directory.
  3. Use the following format to list your menu items:
- title: About
  url: /about.html

- title: Source
  url: https://github.com/patdryburgh/hitchens

Be sure to start your urls with a /.

Pagination

To paginate your posts, add the following line to your site's Gemfile:

gem "jekyll-paginate"

Then, add the following lines to your site's _config.yml file:

plugins:
  - jekyll-paginate

paginate: 20
paginate_path: "/page/:num/"

You can set the paginate and paginate_path settings to whatever best suits you.

Excerpts

To show excerpts of your blog posts on the home page, add the following settings to your site's _config.yml file:

show_excerpts: true

By default, excerpts that have more than 140 characters will be truncated to 20 words. In order to override the number of words you'd like to show for your excerpts, add the following setting to your site's _config.yml file:

excerpt_length: 20

To disable excerpt truncation entirely, simply set excerpt_length to 0 in your site's _config.yml file, like so:

excerpt_length: 0

If you do this, the theme will still respect Jekyll's excerpt_separator feature as described in the Jekyll documentation.

Title-less Posts

If you want to publish posts that don't have a title, add the following setting to the front matter of the post:

title: ""

When you do this, the home page will display a truncated excerpt of the first paragraph of your post.

Note that setting excerpt_length in your site's _config.yml file will set the length of all excerpts, regardless of whether the post has a title or not. For posts with a title, the excerpt will appear under the title and slightly lighter. For title-less posts, the excerpt will appear as if it were a title.

Post Layout

A sparsely decorated layout designed to present long-form writing in a manner that's pleasing to read.

To use the post layout, add the following to your post's front matter:

layout: post

Icons

The JSON Feed spec states that feeds should include an icon. To add your icon, add the following line in your site's _config.yml file:

feed_icon: /assets/images/icon-512.png

Then, replace the /assets/images/icon-512.png file with your own image.

Credits

The theme credits that appear at the bottom of each page can be turned off by including the following line in your site's _config.yml file:

hide_credits: true

Search

The theme uses a custom DuckDuckGo Search Form that can be turned off by including the following line in your site's _config.yml file:

hide_search: true

Font

I spent a good amount of time trying to identify the font used on the front cover of the trade paperback version of Arguably. Unfortunately, I failed to accurately identify the exact font used. If you happen to know what font is used on the book cover, I would appreciate you letting me know :)

The theme includes a version of EB Garamond, designed by Georg Duffner and Octavio Pardo. It's the closest alternative I could come up with that included an open license to include with the theme.

A copy of the license has been included in the assets folder and must be included with any distributions of this theme that include the EB Garamond font files.

Contributing & Requesting Features

Bug reports, feature requests, and pull requests are welcome on GitHub at https://github.com/patdryburgh/hitchens.

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

The theme is setup just like a normal Jekyll site. To test the theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

License

The code for this theme is available as open source under the terms of the MIT License.

The font, EB Garamond, is Copyright 2017 The EB Garamond Project Authors and licensed under the SIL Open Font License Version 1.1.

Graphics are released to the public domain.

hitchens's People

Contributors

patdryburgh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hitchens's Issues

Add pagination example to demo site

Right now, the demo site only displays 3 posts. It should display more posts and the required paginator settings should be added to the _config.yml file so users can see how pagination works with this theme.

Optional post excerpts in post list

Users of this theme should have the option of displaying post excerpts under the post titles in the post list. This might require a slight redesign of the post titles in the list, but we can work on that as we build out this feature.

It should probably be a setting in the _config.yml file, probably a boolean called show_excerpts. Though, I'm open to other possibilities!

Improve vertical rhythm

The leading for headings is inconsistent. This should be fixed in order to improve the vertical rhythm of the page.

Flicker when scrolling

First out: Great looking theme! Thanks for making it open source.

Describe the bug
Some flicker/glitch in white at the bottom and top of the page when scrolling.

To Reproduce
Choose a longer article. Scroll in "skim reading" pace, now and then you should see a white flicker. Both scrolling down and up again.

Expected behavior
No flicker when scrolling. It seems to work in Firefox.

Screenshots
Example in this video https://share.cleanshot.com/v4mhuY

Desktop (please complete the following information):

  • OS: Mac OS
  • Browser: Chrome and Brave
  • Version: Latest versions.

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

RSS feed Template

To make it easier for users to start a blog with this theme, it should include a basic template for an RSS feed.

JSON Feed

To make it easier for users to start a blog with this theme, it should include a basic template for a JSON feed.

Formatting for footnotes

Jekyll (or specifically, kramdown) supports footnotes. It would be nice to have formatting for it.

Here's an example of the generated HTML from a footnote:

<div class="footnotes">
  <ol>
  <li id="fn:emailteam">
  <p>I wrote a <a href="https://speakerdeck.com/">presentation about email at companies</a> that I should revisit and add Missive to. <a href="#fnref:emailteam" class="reversefootnote">&#8617;</a></p>
  </li>
  </ol>
</div>

Small Lighthouse audit details

Just two items from Lighthouse that may impact score and performance could be added, they are:

  • font-auto attribute to load text before the font loads
  • <meta> description attribute (maybe with variable added to _config.yml

I added this in my instance, leaving it up as suggestion.

Pagination support

Currently, all posts are displayed on the homepage. For a blog with a large archive, this could prove to be quite unwieldy.

The theme should support some form of pagination. Subsequent pages should not include the large full-screen title splash, else navigating between pages would be rather cumbersome.

micro blog support

Currently, Hitchens only supports long-form posts with a title. Ideally, it would also allow for shorter posts and/or posts without a title.

My thinking at the moment for how to accomplish this would be to present micro posts in the same “Table of Contents” on the homepage, but display excerpts rather than the full post where currently the post title is displayed.

Valid JSON feeds

Pat, I used your JSON feeds as the basis for my own. Here are the gists I have for a feed.json (which has all the long form blog posts) and a micro.json (which has short posts only):

https://gist.github.com/bmann/38b54d893d506d2eb8bb8b325eafaccf

A note: right now, the micropub server I'm using defaults to setting category of short posts to "social", which I couldn't fix, so I just changed it in my Jekyll install.

Also, because of some of the rest of the Jekyll theme that I inherited, I purposefully don't include title in the micro feed.

Lastly, my theme / setup supports a date modified field, so I included that.

The validator for checking feeds is here: http://validator.jsonfeed.org/

(and apologies for not having a Pull Request for you, a lot of this stuff ends up being pretty blog specific)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.