Coder Social home page Coder Social logo

jameshamann / jekyll-material-theme Goto Github PK

View Code? Open in Web Editor NEW
165.0 9.0 216.0 14.87 MB

A Jekyll Theme based on Material Design using Materialize.

License: MIT License

Ruby 11.95% HTML 69.38% JavaScript 2.77% CSS 15.90%
jekyll-themes jekyll-site material material-design materialize materializecss material-theme materialize-css material-ui

jekyll-material-theme's Introduction

Jekyll Material Theme

A Jekyll Theme based on Material Design using Materialize.

CircleCI Gem Version Gem

Examples

Cookie Policy

If you use cookies on your site, or choose to use Google Analytics, you're able to notify visitors with this prompt. The Thanks! dialog message can be customised in your _config.yml file.

Tools and Experience Section

If you'd like to display some of your skills and experience, you can do so through using the section below.

Installation

Add this line to your Jekyll site's Gemfile:

gem "jekyll-material-theme"

And add this line to your Jekyll site's _config.yml:

theme: jekyll-material-theme

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-material-theme

Usage

The _config.yml file has the following options.

Please ensure to copy this sample before serving up your site as some variables are required in order to make the site run correctly.

title: Your awesome title
name: Your Name
email: [email protected]
description: Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.

display_footer: inital  #change this to 'none' if you want to hide the footer copyright text

theme: jekyll-material-theme

parallax_image_one: assets/images/startup3.jpg # These are the images used for the parallax background
parallax_image_two: assets/images/startup3.jpg

# Settings for the porfolio section

portfolio_heading: Portfolio
portfolio_type: cards #cards or carousel

project_one: "First Project"
project_one_description: Describe your project!
project_one_url: https://github.com/jameshamann/jekyll-material-theme
project_one_icon: location_on # these are from materiailize css, the full collection is here: http://materializecss.com/icons.html

project_two: Second Project
project_two_description: Describe your project!
project_two_url: https://github.com/jameshamann/jekyll-material-theme
project_two_icon: photo_camera


project_three: Third Project
project_three_description: Describe your project!
project_three_url: https://github.com/jameshamann/jekyll-material-theme
project_three_icon: hotel


project_four: Fourth Project
project_four_description: Describe your project!
project_four_url: https://github.com/jameshamann/jekyll-material-theme
project_four_icon: restaurant

# Skill icons from https://konpa.github.io/devicon/

skills:
  - name: amazonwebservices
  - name: android
  - name: angularjs
  - name: apache
  - name: appcelerator
  - name: apple
  - name: atom
  - name: babel
  - name: backbonejs
  - name: bitbucket
  - name: bootstrap
  - name: bower
  - name: c
  - name: chrome
  - name: codeigniter
  - name: coffescript
  - name: confluence
  - name: cplusplus
  - name: csharp
  - name: css3
  - name: cucumber
  - name: d3js
  - name: debian
  - name: devicon
  - name: django
  - name: docker
  - name: doctrine
  - name: dot-net
  - name: drupal
  - name: erlang
  - name: facebook
  - name: firefox
  - name: foundation
  - name: gatling
  - name: gimp
  - name: git
  - name: github
  - name: gitlab
  - name: go
  - name: google
  - name: gradle
  - name: grunt
  - name: gulp
  - name: heroku
  - name: html5
  - name: ie10
  - name: illustrator
  - name: inkscape
  - name: itellij
  - name: java
  - name: jasmine
  - name: javascript
  - name: laravel
  - name: less
  - name: linux
  - name: meteor
  - name: mocha
  - name: mongodb
  - name: moodle
  - name: mysql
  - name: nginx
  - name: nodejs
  - name: nodewebkit
  - name: oracle
  - name: photoshop
  - name: php
  - name: phpstorm
  - name: protractor
  - name: postgresql
  - name: python
  - name: pycharm
  - name: rails
  - name: react
  - name: redhat
  - name: redis
  - name: ruby
  - name: rubymine
  - name: safari
  - name: sass
  - name: sequelize
  - name: slack
  - name: sourcetree
  - name: ssh
  - name: swift
  - name: symfony
  - name: tomcat
  - name: travis
  - name: trello
  - name: twitter
  - name: typescript
  - name: ubuntu
  - name: vim
  - name: visualstudio
  - name: vuejs
  - name: webpack
  - name: webstorm
  - name: windows8
  - name: wordpress
  - name: yii
  - name: zend
  - name: ansible
    uri: https://upload.wikimedia.org/wikipedia/fr/thumb/4/4b/Ansible_logo.png/220px-Ansible_logo.png # Add external icon, for internal icon use uri: /assets/my_icon.jpg

icon_size: 50 # font-size of icons in px
colored: colored # Leave blank for black and white icons

project_button: Github

github: https://github.com/jameshamann/jekyll-material-theme
medium: https://medium.com

baseurl: # If your site is located at /blog or /home, change it here, otherwise leave it empty
url: http://localhost:4000/ # The URL of your site

# Google tracking, if both are filled, tag manager will prevail. Set up GA through GTM in that case
tag_manager_id: # This looks something like GTM-XXXXXXX
google_analytics_tracking_id: # This looks something like UA-000000000-0 Head over to https://analytics.google.com/ to setup.

cookie_accept_message: Thanks! # The pop-up dialog that appears after accepting the cookie notice.

syntax_highlighting: true # include the css for syntax highlighting

# Build settings
markdown: kramdown
permalink: pretty
plugins:
  - jekyll-feed
  - jekyll-assets
  - jekyll-minifier

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/jameshamann/jekyll-material-theme. 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 and further customise this theme, fork the repo and explore the _assets directory, which includes all the css, js and font folders. If you're adding a feature, please add some tests in the spec directory to ensure everything works as intended.

Contributors

License

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

jekyll-material-theme's People

Contributors

clayrisser avatar ironjan avatar jameshamann avatar kobes avatar sakerdot avatar thomasgazzoni 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  avatar  avatar

jekyll-material-theme's Issues

Site not displaying even with example congif

I found this theme while working on making a personal site and started fiddling with it. When I had the example file in at first and both the local server and my custom domain were working. Them I selected some details to change, to begin customizing the theme for myself. I'm not exactly sure exactly at which commit this happened, but the commit messages reference what I changed back to the default to attempt to get things working again. I eventually just made a fresh -CONFIG.yml to see if that fixed things, and it got the local version displaying again, but not my custom domain after I pushed it to my github pages repo. I then went in an changed the url to match my domain, but still nothing on the live version.

It might be worth noting I am doing this in windows bash and I believe I have installed everything properly, but that took me a while and some weird fiddling, so it's possible I might be missing something.

Here's the repo: https://github.com/high-tech-hobo/hth_site

And here is my terminal output when I serve my site:

Configuration file: /PATH/TO/FILE/_config.yml
Source: /PATH/TO/FILE/
Destination: /PATH/TO/FILE/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.798 seconds.
Auto-regeneration may not work on some Windows versions.
Please see: https://github.com/Microsoft/BashOnWindows/issues/216
If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch.
Auto-regeneration: enabled for /PATH/TO/FILE
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
[2018-04-19 21:11:08] ERROR '/favicon.ico' not found.
[2018-04-19 21:11:08] ERROR '/favicon.ico' not found.

Copyright

Change or remove Copyright at the bottom of the page

Missing files when installing as gem

I followed the instructions to install as gem. It was ok.
Then when I run jekyll serve to test it I get:

Generating... 
  Liquid Exception: Could not locate the included file 'portfolio_.html' in any of ["/home/blue/Downloads/mysite/_includes", "/home/blue/.rvm/gems/ruby-2.4.0/gems/jekyll-material-theme-0.3.0/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source. in /_layouts/home.html
jekyll 3.6.2 | Error:  Could not locate the included file 'portfolio_.html' in any of ["/home/blue/Downloads/mysite/_includes", "/home/blue/.rvm/gems/ruby-2.4.0/gems/jekyll-material-theme-0.3.0/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source.

Should I create the missing files? It seems the gem doesn't installs some necessary files that exists in repo.

Assume leading forward slash on links

The fix for issue #3 only surfaces on GitHub, but nonetheless, I think was still an important fix. However, the fix assumes links start with a leading forward slash. I think the config should be updated to match this.

Jekyll 4 support?

Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Bundler could not find compatible versions for gem "jekyll":
  In snapshot (Gemfile.lock):
    jekyll (= 4.2.2)

  In Gemfile:
    jekyll (~> 4.2.2)

    jekyll-material-theme was resolved to 0.6.2, which depends on
      jekyll (~> 3.5)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict

Trouble building page

Hi!, i do not if i got a trouble or i do not know how to run it the right way

I configured my config.yml with all my stuff & run jekyll serve
then i've been working on the index.html (not .md) the .html, renaming some classes adding others,
and giving some style with css you know, save & refresh the http://127.0.0.1:4000/ and it goes
awesome, everything as i wanted to be
BUT if i change something in the config.yml OR i created another post, the page forgives the whole
new changes i made, and reset the html & css to the theme defaults, also delete the new images i saved on images folder

Am i wrong or smth?

Can i modify the index.html? or is that the problem

Thanks!

Cant update the gem

Cant update gem file as the site was breaking

Fetching bundler-2.2.15.gem
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /usr/bin directory.

bundle don't work

After adding gem "material-theme" to Gemfile, I get below error when I execute bundle:
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java.
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Could not find gem 'material-theme' in any of the gem sources listed in your Gemfile.

Document image usage rights

The images used in this theme are very nice. It would be great if the usage rights could be added.

For me it's unclear, if I can reuse the images in assets etc. freely (CC BY-SA 2.5 or similar) or if they are paid for stock images.

Images are Missing Alt Tags

A bunch of the image tags are missing alt tags on them, not sure if there's a way to make this configurable, but that'd be neat. The result is that a built site with this theme does not pass html-proofer.

_includes/blog-feed.html
7:        <img src="{{post.image}}">

_includes/contact.html
3:    <img class="activator" src="assets/images/contact4.png">

_includes/portfolio_cards.html
5:        <img class="activator" src="../assets/images/desk.jpg">
20:        <img class="activator" src="../assets/images/typewriter.jpg">
38:        <img class="activator" src="../assets/images/contact2.jpg" style="height:366px;">
53:          <img class="activator" src="../assets/images/contact4.png">

Asset links don't work from GitHub

The assets don't load from github. It tries to request them from https://jamrizzi.github.com/portfolioassets instead of https://jamrizzi.github.com/portfolio/assets.

My config looks like the following . . .

# _config.yml

title: "Jam's Portfolio"
name: "Jam Risser"
email: [email protected]
description: An autodidact who beat the Kobayashi Maru Test; Passionate, open-source full-stack software engineer

parallax_image_one: assets/images/austin.jpg
parallax_image_two: assets/images/code-jam.jpg

project_one: "BlogDown"
project_one_description: "A back-end agnostic, zero compilation, markdown blogging platform"
project_one_url: https://github.com/thingdown/blogdown
project_one_icon: location_on

project_two: Second Project
project_two_description: Describe your project!
project_two_url: https://github.com/jameshamann/jekyll-material-theme
project_two_icon: photo_camera


project_three: Third Project
project_three_description: Describe your project!
project_three_url: https://github.com/jameshamann/jekyll-material-theme
project_three_icon: hotel


project_four: Fourth Project
project_four_description: Describe your project!
project_four_url: https://github.com/jameshamann/jekyll-material-theme
project_four_icon: restaurant

project_button: GitHub

github: https://github.com/jamrizzi
medium: https://medium.com/jamrizzi

baseurl: /portfolio/
url: https://jamrizzi.github.io/

google_analytics_tracking_id:

cookie_accept_message: Thanks!

markdown: kramdown
permalink: pretty

plugins:
  - jekyll-remote-theme
  - jekyll-feed
  - jekyll-assets
  - jekyll-minifier

remote_theme: jamrizzi/jekyll-material-theme

syntax-highlighting not found when installing as gem

I'm trying to install this theme as a gem, and i'm getting the following error message when I run bundle exec jekyll serve:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/main.scss':
File to import not found or unreadable: syntax-highlighting. on line 9

I noticed that you had some recent commits related to syntax highlighting, so I'm not sure what I'm doing wrong.

I tried running the repository both locally and here: https://dmcwo.github.io/temp-j4/ https://github.com/dmcwo/temp-j4

Let me know your thoughts and advice!

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.