insipx / material-bliss-jekyll-theme Goto Github PK

A Material Theme for Jekyll created with React, Redux, and React-Router transpiled with Webpack

License: GNU General Public License v3.0

HTML 31.73% CSS 48.40% JavaScript 7.91% Ruby 11.53% Shell 0.44%

material theme jekyll react material-theme dark-theme light-theme dynamic webpack redux jekyll-plugins yml jekyll-plugin ruby javascript css html

material-bliss-jekyll-theme's Introduction

Material Theme for Jekyll!

DEMO: code.liquidthink.net

created with React, Redux, React-Router and transpiled with Webpack.

Made with React and served statically and dynamically

in order to build:

for Production

./build-prod.sh //for production build

for Development:

run both build-dev and npm run jekyll in different terminals

npm run jekyll // in one terminal
./build-dev.sh //in another

Features:

Two Themes: Light and Dark
Fully Responsive for most devices
Dynamic Fuzzy Search
Push-out Menu to save space and create focus for users
Dynamic Project Page in a masonry layout built
The pros of dynamic webpages matched with the awesomeness of static Jekyll
Optimized (99/100 on testmysite by google) with Jekyll Assets and Webpack
included RESTful-like API (with jekyll-react plugin)
Static or Dynamic Pages with just a frontmatter option
MORE TO COME

Screen Shots

Dark Theme

Light Theme

Dark Theme with Push out menu active

Project Page

Single Post

Site Layout

./react-dev/pages

These are static Jekyll components being rendered with react

./react-dev/helpers.js

these are global helpers. Right now all that is included are the static routes of you're site. Put all your static routes there (in 'staticRoutes' array), you don't need the full route just the base after your url So for example, if my posts are static and are at http://www.example.com/posts/this-is-a-post.html you just need "/posts/" this makes the loading of some parts of the site seem almost 'instant', while preserving the SEO of your site since Google can crawl the static content

./react-dev/components/menu_items.js

This is where your menu items are rendered. If you want a new item, add an object to the Hashlist with it's corresponding path (from your root url) Javascript object. IE if it is:

const menuItems = { Home: '/', About: '/about/', Projects: '/projects/' }; and you want another entry, "Coding", with a path '/coding/' from the root url the object should look something like this : const menuItems = { Home: '/', About: '/about/', Projects: '/projects/', Coding: '/coding'};

./react-dev/actions/index.js

this is where the magic happens from the JSON our Jekyll plugins rendered ( Jekyll_pages_api and Jekyll-react) You're going to want to add your site url to the ROOT_URL variable EX: if your site is at http://www.example.com change const ROOT_URL = 'http://test_domain.com:4000'; to const ROOT_URL = 'http://example.com';

Site Config Variables:

any site configuration that you want to let React use, put under 'react' in your _config.yml. This will be grabbed by the siteInfo action creator and put through it's corresponding reducer

TODO:

Contribution

Want to contribute? Found an issue? Jump right in! I welcome any help I can get, and will work with you to fix any issues.

material-bliss-jekyll-theme's People

Contributors

Stargazers

Watchers

material-bliss-jekyll-theme's Issues

Using with Github Pages

Hello
I'm trying to use the theme with Github Pages. Are there any advice for doing this? The site doesn't build because it cannot find icon-github.html (automatic mail from Github). I've commited asseds/js etc. – things that are build by node. Locally bundle exec jekyll serve works, but plain jekyll serve fails at gem 'jekyll-assets'. (Bundler::GemRequireError). I did gem install jekyll-assets (OS X).

Your theme is listed in jekyllthemes.ru

Your theme has been listed on http://jekyllthemes.ru/

Using cookies for theme button

Hello
Could it be possible to save theme in cookies? I've checked that this bool is enough to be changed to make the page start in light theme:

diff --git a/react-dev/components/app.js b/react-dev/components/app.js
index ad93844..e2bb1da 100644
--- a/react-dev/components/app.js
+++ b/react-dev/components/app.js
@@ -85,7 +85,7 @@ const lightMuiTheme = getMuiTheme(null, {
 export default class App extends Component {
   constructor(props) {
     super(props);
-    this.state = { dark: true };
+    this.state = { dark: false };
   }

Maybe it isn't hard to attach a cookie to it?

Key related_posts cannot be set in the drop.

When I run the ./build-prod.sh
it shows ERROR: YOUR SITE COULD NOT BE BUILT: ------------------------------------ Key related_posts cannot be set in the drop.

What should I do? Thanks

Suggestion

Search is a useful function.

Could you or how can I move the search bar to homepage's header? (Actually there's so empty that it's a good place for search bar)

Btw, I love Rust ; )

ERROR `/assets/js/bundle.js' not found.

I was creating my jekyll website using this theme, and when I was running it using jekyll serve, it gives me the following error:


WARN: Unresolved specs during Gem::Specification.reset:
      ffi (< 2, >= 0.5.0)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
Configuration file: /Users/alex/github/Phantom-Page/_config.yml
       Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
            Source: src
       Destination: public
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.712 seconds.
 Auto-regeneration: enabled for 'src'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
[2018-06-13 22:06:48] ERROR `/assets/js/bundle.js' not found.
[2018-06-13 22:06:52] ERROR `/assets/js/bundle.js' not found.

./build-dev.sh command results in error

Running the dev command results in this error output -

Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering.
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <html>. See Default > html > #text.
Warning: validateDOMNesting(...): <script> cannot appear as a child of <html>. See Default > html > script.
null
null
sed: 1: "src/_layouts/post.html": unterminated substitute pattern