robbinjohansson / haywire-grav

:rocket: Starter theme for Grav CMS

This theme is in no longer being maintained actively as I do not use Grav myself, please feel free to contribute if you need something to be updated.

Starter theme for Grav CMS

Starter theme for Grav CMS using modern tools and frameworks such as Laravel Mix, Vuejs, Bulma.

Features

• Laravel Mix
• Vuejs
• Bulma

Installation / Usage

(Recommended) bin/gpm (Grav Package Manager)

# @ path/to/grav/installation
$ bin/gpm install haywire
$ cd user/themes/haywire
$ yarn && yarn production

Manual installation

# @ path/to/grav/installation
$ cd user/themes/
$ git clone https://github.com/robbinworks/haywire-grav.git haywire
$ cd haywire
$ yarn && yarn production

Activate theme

After installation navigate to user/config/system.yaml and update the theme:

pages:
  theme: haywire

Demo

Installing through bin/gpm will prompt you to install the demo content automatically.

However if you install the theme manually, copy the contents of user/themes/haywire/_demo/pages/ into your user/pages/ folder for a quick demo content of your site.

Laravel Mix

Laravel Mix is preconfigured when installing a fresh instance of this theme. However it might be a good idea to review the full documentation on GitHub.

# Compile assets without minification
$ yarn dev

# Watch working assets
$ yarn watch

# Minify and compile assets for production
$ yarn production

Compiled assets goes into the dist/ directory, these files are generated for you through Laravel Mix, you should not edit these files manually! Your working directory is resources/.

Updating

bin/gpm update

The easiest way to update this theme is via the Grav Package Manager:

$ bin/gpm update haywire

Contribute

If you're interested in contributing, please read the contribution guidelines.

Credits

• Robbin Johansson
• All Contributors

License

Haywire grav theme is an open-sourced software licensed under the MIT license.

haywire-grav's Issues

Responsive problem with Highlight

Submit a bug report or feature request

• This is a feature request
• This is a bug report
• This is a help-wanted
• This request isn't a duplicate of an existing issue

---

Bug report

Hi, There is problem when I add an Highlight on a page, the responsive doesn't work well, check on this page for example : https://stnetwork.fr/linux/centos/softether-vpn-on-a-centos-7-vps-using-local-bridge-dnsmasq

This only happen when I add an Highlight as you will see on the other pages like home, the responsive works well, thanks to solve this problem please. Thanks !

Your environment

CentOS 7 CENTMINMOD Nginx
Last Version of Chrome

Manual installation in README

Submit a bug report or feature request

• This is a feature request
• This is a bug report
• This is a help-wanted
• This request isn't a duplicate of an existing issue

---

Bug report

Tiny error - it should be noted that if manual installation is chosen, users should navigate to user/themes, not grav-installation root.

https://github.com/robbinfellow/haywire-grav/blob/develop/README.md#manual-installation

RuntimeException (400) Template "external.html.twig" is not defined.

When trying to clone the Github page to insert another external link, I get the following error:

RuntimeException (400)
Template "external.html.twig" is not defined.

I'm using haywire 0.3.3 and Grav v1.4.0-rc.1 with Admin v1.7.0-rc.2

UPDATE:
Ok, so it seem that some settings did this:
I made the page non-visible and then entered its direct path into the browser bar.

####

sorry. I posted in wrong repo.
If I could delete it, believe me, I would.

menu is not working on microsoft edge for android

I use your great theme with the latest grav cms. when i open the page on microsoft edge for android the burger menu will not open.

environment

• Microsoft edge 1.0.0
• Android 6.0.1

Debug bar is not shown

The debug bar needs jQuery to work.

So in the head.twig the following needs to be added:

{% if config.system.debugger.enabled %}
    {% do assets.addJs('jquery', 101) %}
{% endif %}
{{ assets.js() }}

See the following link:
https://muut.com/i/getgrav/general:debug-bar-does-not-show-up

some small changes

Submit a bug report or feature request

• This is a feature request
• This request isn't a duplicate of an existing issue

---

Feature request

Hello,
I know this is visual request, but still, I hope you'll appreciate some of these suggestions.
I know that you're minifying everything, so I'll just write code here:

1. please add selection color:

::selection {
    background-color: #e8eaf6;
}

::-moz-selection {
  background-color: #e8eaf6;
}

2. if you would, please add nice modern scrollbar for webkit based browsers:

-webkit-scrollbar {
    width: 0;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    background-color: #ecf0f1;
    border-radius: 2px;
}
 
::-webkit-scrollbar-track {
    background-color: whitesmoke;
}

alternatively , you could look into implementing this:
https://github.serafin.io/vuebar/

3. Back to top [which is usual stuff in any theme]

Question

Since theme already uses vue with bulma, wouldn't it be good to make it use buefy?

Would you be willing to add a container around content, that distincts it from background?

Well, that's all.
I gotta tell you how great it is that you switched over to bulma,
and that you made that dropdown menu properly. That thing sure bugged me.
Thank You for great theme! 👍 👍 👍 👍 👍

moving css to a higher level

Hello :-)

Thank you for this theme! A true lifesaver :-D

I have trouble moving the CSS out of the dist/css directory and moving it to top level. I have looked through the Grav Theme docs, but I just cannot figure out what I have to do. Can you point me in the right direction?

Thank you.

hello

would you mind giving me coadmin access to this repo so theme development can go on?

feature request: allow custom.css

would be great if the theme could allow custom modifications like animatter theme.
should be easy :-). see: https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/partials/base.html.twig#L17

[BUG] Undefined index: assetPath upon upgrade

Submit a bug report or feature request

• This is a bug report

---

Bug report

Subject of the issue

Describe your issue here.

"Undefined index: assetPath" after upgrading to the last version. switching back to 0.3.1 solves the issue

Your environment

• Running on Docker with no isssues
• OSX High Sierra
• Chrome and Firefox

Steps to reproduce

Updated from 0.3.1 to the most recent version

Expected behaviour

the Template should not have problems with assetPath

Resize doesn't work on the frontpage

Hi!

I've just switched to using Haywire on my blog, but I have a problem.

Locally everything works fine, but in production my images on the frontpage are not resized.
They just keep their actual size which obviously breaks the design.

I can see that there's a function called "cropResize" being called on the images, but apparently that doesn't work.

Any ideas what could be going wrong?
I've installed Yarn and run the needed commands in the Haywire folder.

How to utilize vue?

• This is a help-wanted

---

Help wanted

Question

Hi

I'd like to know more on how to utilize vue in this theme.
Like, could we automatically write data into .js files with vue in grav?
If you could explain what could be achieved, for example, I'd be grateful.

I know this is very general question but you don't have to answer extensively.

Navigation when lots of items

Is it possible to make navigation automatically drop down
when lots of pages are listed in it. I know that we can make
sub pages, but still, when lots of pages are in it, it would be
better if automatically drops downs and acts as they are
subnavigation links, if possible.

(maybe if chevron, or haburger menu appeared in the end, when too much items)?

currently, links get swallowed and don't display @ all.

something is wrong with app.css

it doesn't load bulma @ all in latest version of theme.
@ least not for me.

Demo is Down

https://haywire.me/haywire-grav-demo/

JSComments / IntenseDebate not loading

Submit a bug report or feature request

• This is a feature request
• This is a bug report
• This is a help-wanted
• This request isn't a duplicate of an existing issue

---

Bug report

Running JSComments with IntenseDebate does not work correctly on pages.

Subject of the issue

I tried adding IntenseDebate comments to a page through JSComments and it's not loading the IntenseDebate comments. I swapped back to the antimatter theme to test and the IntenseDebate comments loaded there.

Your environment

• browser (including version): Chrome Version 64.0.3282.167
• OS: Connecting on Windows, Grav is running off of CloudLinux release 7.4 (Georgy Grechko)

Steps to reproduce

Try installing JSComments plugin on Grav, configuring it with an IntenseDebate account, and adding "{{ jscomments()|raw }}" to the bottom of a page.

Expected behaviour

It should load the IntenseDebate div with the comments section.

Actual behaviour

The IntenseDebate comments section is not loaded.

How to connect vuex and other components?

Question

How to properly connect vuex and other components? Can you give an example?

yarn add vuex
`
window.Vue = require('vue');
window.Vuex = require('vuex');
Vue.config.devtools = true
Vue.use(Vuex)

`

Support: adding sourceMaps when not built for production

First off thanks for creating a great start theme that lets more design focused guys like me use features I would have trouble setting up on my own.

I was wondering how I can add source maps to the theme when its running in watch mode, but have them disabled when I build for production. There is a lot going on with webpack and yarn I don't understand, which is great using what you already have. I just have trouble knowing how to extend it. I have used things like grunt or gulp but web-pack seems to go at it a bit differently.

Haywire / Laravel Mix / Webpack / BrowserSync not reloading on change

Submit a bug report or feature request

• This is a feature request
• This is a bug report
• This is a help-wanted
• This request isn't a duplicate of an existing issue

---

Bug report

Subject of the issue

Love the theme and the attention to detail you have put into it. I am wondering if you have been able to get BrowserSync working in your Grav applications.

Your environment

• browser (including version) - Chrome / Safari / Edge
• OS - MacOSX 10.12.6
• Application running within a docker container using Nginx / PHP-fpm

Steps to reproduce

add browserSync to webpack.mix.js

var mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath('dist')
   .js('js/app.js', 'js/app.js')
   .sass('sass/app.sass', 'css/app.css')
   .options({
      processCssUrls: false
    });

mix.browserSync({
    proxy: 'localhost'
});

Expected behaviour

Editing a SASS or JS file should trigger a reload.

Actual behaviour

BrowserSync initializes on load but no reloads are triggered.

---

Help wanted

Question

I know it is out of scope for your theme, I am just wondering if this error is an artifact of my environment or a known issue for the theme.

Thanks again,
Austin

element

Submit a bug report or feature request

• [x ] This is a feature request

---

Feature request

Hello, bulma is great, I wonder would you mind
making version of haywire with Element http://element.eleme.io/#/en-US ?

up bulma | collections

bulma is now 0.7.2. hopefully you'll update

also - would you add a collections template?
for grouping pages with the same tags into one collection

Update npm dependencies

The npm dependencies of this theme needs to be updated, looking for a setup similar to what adam has done here:
https://github.com/adamwathan/laravel-preset/

TLDR;

• Replace Bulma with the latest version of tailwindcss (v1.1.3 as of this writing)
• Update all template files using tailwindcss instead of bulma (the design should be similar to what we have today)
• Update webpack.mix.js according to the reference link above.
• Replace sass with css (add postcss-nesting and postcss-import)
• Add laravel-mix-purgecss
• Update readme features

These Fields

Feature request

Hello
I was wondering could you maybe add these option fields to your theme?
These are taken from here

Demo content

Hi @robbinfellow ,

can you provide a demo content of the pages you used? You can just place them in the _demo folder of your theme.

up bulma

• This is a feature update request

Feature request

bulma is now in v. 0.7.1.
so you'd probably wanna update it.

Buefy - Vue.js based on Bulma

Hi,

I would like to start on your theme with : https://buefy.github.io/#/

Do you think it's possible ? and how I can start ?

make a release

hello

you should make a releaase so theme would be adequatly updated on Grav Package Manager and available via admin.
In current reelase form no1 can use it. Since it's outdated for newer versions of Grav.

Adding page with list of post

Submit a bug report or feature request

• This is a feature request
• This is a bug report
• This is a help-wanted
• This request isn't a duplicate of an existing issue

Help wanted

Question

Having troubles with something theme-related? Please describe your problem as detailed as possible.

I added a post using page template item, and now I wanted to have a page with list of posts. From what I understand, it just adding a blog page, but it doesnt show up. Can you direct me to the right direction?

Create demo page

Create a demo page at http://haywire.me/haywire-grav-demo