jtebert / jekyll-polymer

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