I made a Glayu theme builder

[gnucifer]

Hi! This is not a very polished project, but when developing a very simple site I made this Bootswatch-theme builder for Glayu based on gulp. I'm not really a front-end developer, so I tried to keep the theme it self as close to a generic bootstrap theme as possible, but I still made some small adjustments. The most prominent "features" are probably the syncing-functionality using browser sync which was very handy during development, and the kind of weird but also kind of nice menu system. "Pages" (excluding index.md) are listed first in the menu followed by all top level categories. The "category" page has a breadcrumb and navigation for current level categories, and a "featured" relevant posts area for posts with relevancy > 10. I'm not 100% happy with the category pages navigation, but think it kind of works. Here is demo for a theme build with the default settings: http://glayu-bootswatch-demo.dagu.nu

As all this is quite unpolished and documentation is largely missing, perhaps this is not very useful for most people. One thing that could be achieved is to run a script to build pre-complied Glau-themes for all bootswatch themes, to increase the selection of themes available, but really could use some extra polishing before that is a good idea. How navigation works for categories is also kind of weird, and not very intuitive. Would like to make it a bit more "generic", right now it is more made to fit my current use case.

https://github.com/gnucifer/glayu-bootswatch

[pmartinezalvarez]

Wow! Fantastic Project :)

Please let me know how can I help you with it, feel free to contact me via email pablo.martinez.alvarez@gmail.com or chat via skype pablo_podes.

I will include it on the Glayu themes page.

What do you think about these suggestions:

• Including a drop down menu with the subcategories on the top menu navbar? I think it could be rendered using a recursive function on navar.eex, please let me think about it.

• I think pagination is needed, I will try to incorporate it in Glayu asap.

I can help you addind the remaining Bootswatch themes as well.

Thanks so much!

[gnucifer]

Thank you, I had not expected such a positive response! Regarding your suggestions, a drop down would be nice, and would probably be pretty simple to implement. I have forgotten the name of the kind of UI pattern for navigation I was aiming to implement (I read a use case about it somewhere, and have used it some times for other projects), but the basic idea is to only show the next level plus a breadcrumb for going back. Usability-wise I think a tree-menu or multi level drop down is slightly better, one nice thing about the breadcrumb + primary links + subnav is that it scales a bit better (mostly limited by breadcrumb length). But its probably rare to have more than 3 levels anyway, so might not be a real problem. The current implementation is a bit sucky though, I would be interesting to play around with other variants. One alternative layout of the menu could also be to remove the categories on the right and place them horizontally directly under the breadcrumbs, this would make the relation between the subcategories and breadcrumb a little more clear for the user I think, and you don't have to move as much when navigating up and down in the category hierarchy.

I though a little bit about pagination, but it must be a little bit tricky to implement for static page generators? You would have to generate serveral pages for each category-page, and now in advance how to split them? it would be really interesting if this could be solved. I don't have much experience from other static page generators and how this is usually dealt with.

[pmartinezalvarez]

Hi!

I agree with you about the drop down menu depth.

About the navigation between subsections, I like the way media sites like the New York Times or Financial Times deal with it, having a lateral menu with all the site sections and on each category page a top menu with the list of subsections. But I am not a UX guy… and each site will have their own requirements.

About how to solve the pagination problem. I think all static site generators solve it in a similar fashion, that is generating multiple static pages per each category index as you have pointed. Jekyll offers a paginator plugin that exposes a set of variables to enable the navigation between pages, and a variable with the available post in the current page.

Implementing it on Glayu will result in something like this:

Add some variables on the _config.yml file, like:

Variable	Description	Default
paginate*	Enables the pagination, and specifies the max number of posts displayed per category page	5
__paginate_path*__	Format for the pagination pages	/pages/page_:num

Update the category_page.ex to retrieve the category posts from the SiteTree and group them based on the paginate variable value defined in the configuration file. Then we can generate the required number of pages and populate each page context with a paginator structure like this:

Variable	Description
paginator.page*	current page structure
paginator.page.number*	current page number
paginator.page.path*	current page path
__paginator.next_page*__	next page structure
__paginator.previous_page*__	previous page structure
paginator.posts*	List with the page posts
__paginator.total_pages*__	Number of total pages

In category.eex we could iterate over the page posts using the paginator structure:

<!-- This loops through the paginated posts -->
<%= for post <- @paginator.posts do %>
<!-- article preview -->
<% end %>

<!-- Pagination links -->
<div class="pagination">
  <%= if @paginator.previous_page %>
    <a href="<%= @paginator.previous_page.path %>" class="previous">Previous</a>
  <% else %>
    <span class="previous">Previous</span>
  <% end %>
  <span class="page_number ">Page: <%= @paginator.page.number %> of <%= @paginator.total_pages %></span>
  <%= if @paginator.next_page %>
    <a href="<%= paginator.next_page.path %>" class="next">Next</a>
  <% else %>
    <span class="next ">Next</span>
  <% end %>
</div>

Disadvantages:

• The posts order is predefined and can not be defined in the template using a function like category_posts(@page.category.keys, [limit: 10, sort_fn: &(&1.score > &2.score)]).
• Only one paginator per category page is supported (If you have a category with multiple subcategories and you want to include the paginated listings of the articles in each subcategory, this will not be supported).

My dreamed solution will be a paginator macro like:

<%= for post <- category_posts(@page.category.keys, [sort_fn: &(&1.score > &2.score)]) do %>
  <!-- article preview -->
  <% paginator(5, "/sorted_pages/page_:num") %>
<% end %>

That could generate the required pages when paced inside a loop. But I am not sure if it can be implemented.

Now I am working on spliting glayu in multiple applications and reviewing the supervision trees, but I will be happy to start working on the pagination asap.

[gnucifer]

Hi! Yes New York Times is a fantastic site in general, and I agree the menu is nice. I'm a bit lazy so I like when the exact same navigation-mechanics can be used both on desktop and mobile, so that's another reason why I did not go for a drop-down-menu (but perhaps bootstrap will take care of this). But it would be interesting to play around with different options and try implementing drop-down as I'm not entirely happy with the way navigation within categories currently works. Your draft for pagination looks excellent. I agree it would be really cool to somehow employ macros to make pagination more dynamic and integrated with theme development, but that is some really hard stuff to figure out if even possible! :)

I'm now back and busy at work after my vacation, so will have less time to work on fun stuff like this :) But I would like to improve the menu, and also, as an exercise in Elixir, perhaps write an escript cli-application for concurrently generating git repositories for all Bootswatch themes, genererate all the different themes locally, and push them to the repositories. In that way they would be easy to keep up to date, and available in the format Glayu expects themes to be for the theme_uri option.

[gnucifer]

I tried playing around with the bootstrap drop-down yesterday, but one problem is that parent links are not clickable (the click event is used for expands the children). One way of solving this is to expand on hover instead, but then you probably need a workaround for mobile. As a quick fix for the current navigation I will instead try to place the secondary navigation under the breadcrumbs to make navigation more intuitive, this will probably also be better on mobile than the current layout since secondary navigation will then appear directly under the primary instead of at the bottom of the page.

[pmartinezalvarez]

Hi! sorry for the late reply, I have been out this week. The cli-app to generate the Bootswatch themes is a great idea :)

About the drop-down menu, I have been looking for UX solutions that solve the problem of expanding the children and enabling linking to the category page at the same time (on mobile). I have found this solution meanMenu, this is the demo, It is not a bootstrap solution but maybe could give you some ideas.

[gnucifer]

No problem at all. I couple of days a ago a started and almost mostly finished implementing an alternative navigation that I think may be slightly better than the current one. But I have not pushed it yet since need to adjust the styling a bit more, I think I will finish it within a week or so. I will also have a look on the menu script, I see it does support visiting parent links also which is great. Just started a very small Elixir pet project for handling MARC-data and would like to get some kind of basic functionality in place so can get it off my mind, so it's also taking a little bit longer because of that.