/jekyll-polymer

A material theme for Jekyll built with Polymer

Primary LanguageHTMLMIT LicenseMIT

DEMO

A Jekyll theme built with Google's Polymer library and following the material design specifications. (Currently, this uses Polymer 1.x, but I have plans to update to 2.x.)

There are a few custom web components included designed to match Material design.

I created this theme because I couldn't figure out how to set up a Jekyll project to play nicely with Polymer, and because I didn't find any Jekyll blog themes available that used Polymer or followed Google's material design specifications.

Features

  • Full-text search with simple-jekyll-search
  • Paginated home page
  • Support for featured post images (appear on cards in previews)
  • Threaded comments with Disqus
  • Google Analytics integration
  • One-command deployment to Github Pages
  • Tagged posts with archive by tag
  • Authorship with Gravatar icons

Installation instructions

(Instructions are based off of those for the Polymer Starter Kit.)

  • Clone this repository or download it as a .zip file and unzip.
  • Install jekyll (and any other Ruby gems) with bundle install. (Prerequisite: must have Ruby installed; in Ubuntu/Debian, use sudo apt-get install ruby-dev. You may also have to install bundler with gem install bundler.)
  • From the project root folder, run npm install -g gulp bower && npm install && bower install. (See the old Polymer Starter Kit installation instructions for more details or troubleshooting.)

Structure

  • app/: All Jekyll content is here. (This is where all the editing happens)
    • bower_components: Content installed via bower ends up here
    • elements/: Custom web components using Polymer
    • images/: User images
    • media/: Other user content (PDFs, videos, etc.) for final product
    • scripts/: Javascript files
    • styles/: Custom CSS
    • _data/authors.yml: List of authors for posts and pages
  • dist/: Built output from Gulp. (Use to publish static content)
  • node_modules: Content installed via npm goes here

Deployment

Serve/watch

gulp serve: Starts a jekyll serve process on the default port (4000 or whatever is specified in _config.yml).

gulp serve --port 6666: Start serving on port 6666

gulp serve:dist: Build as below, and serve the result from the dist/ directory. (Useful for testing changes to the gulpfile. Currently does not work with a Jekyll baseurl configured.)

Build and vulcanize

gulp: Builds the files with jekyll, vulcanizes, minimizes, and puts the result in the dist/ directory. (This can be slow.)

Deploy

gulp deploy-gh-pages: Deploy the current build to the gh-pages branch of your repository.

gulp build-deploy-gh-pages: Rebuild and then deploy. (Equivalent to gulp && gulp deploy-gh-pages)

Future Improvements:

  • Improve gulp build
    • Minimize JS, CSS, HTML
  • Search
    • Escape toggles search show
    • arrow keys/tab moves focus on search results
    • better animation for search bar leaving/entering
  • Navigation drawer
    • Change hover effect on drawer items (see Google Music)
    • Make selected/active items in drawer colored
  • Page transition animations
  • Give option of setting card-colorbar color
  • Add ripple effect to nav drawer menu items
  • Pagination:
    • Maybe replace with actual buttons
    • hover effects like buttons?
    • Handle if it gets too wide for screen? (limit number of page links)
  • Tags
    • Allow filtering by tag (have list of all tags)
  • Add material box or lightbox for images
  • Add 'source' option for YAML frontmatter
  • increase spacing between list items
  • Fix things like header-panel to utilize updates to polymer paper elements

Known issues

  • JS and HTML aren't minimized
  • Too much space on cards between end of excerpt and read more button

License

MIT License