I just launched http://javasnippets.tk, a site for a repo where I plan to collect all my most used Java snippets and tricks, so that I don't have to be searching the web when I need something.
Check out the portfolio post.
Loading all the pages in a menu
Whenever I have a menu, I like to use the ul
tag. Some people use links directly, but if you are browsing the site with stylesheets disabled or with a text browser (like lynx in linux terminals, for example), the links appear together with no separation between them, which make them difficult to read. You could use a separator like |
, but then you need to put it between span
tags to hide it from visual browsers like Firefox. The un-ordered list tag feels natural and more semantic as a way to list items in a menu (at least for me).
Now, the liquid syntax (used by Jekyll to generate the code of your site) allows you to use a for
loop to list your pages so that you don't have to write or update them manually. The problem is that they are listed in alphabetical order (or anti-alpha order).
So, if I want to list my pages in a particular order, I have to do it by hand. For example, I wanted to have a "How to" page as the first item in the menu, so I placed it manually and then coded the automatic menu generation within the for
loop for the rest of the pages.
<ul>
<li><a class="menu" href="{{ site.baseurl }}/howto/">How to</a></li>{% for page in site.pages %}{% if page.menuname %}
<li><a class="menu" href="{{ page.url | prepend: site.baseurl }}">{{ page.menuname }}</a></li>{% endif %}{% endfor %}
</ul>
I also prefer to use specific classes for the list items (class "menu"
) instead of playing inception with the tags (.class tag tag tag ...etc {...}
), since it has less CSS specificity, so it's more performant.
I added yet another small twist: a Front Matter variable in every page, called menuname
. In this variable I store a short name for the page in the menu. Otherwise, I would have to use something like the title, which is too long for the sidebar:
---
layout: default
title: "ProcessBuilder with multi-threading"
menuname: "PB Multithread"
permalink: /pbmultithread/
---
The "How to" page doesn't have this variable in the Front Matter, to prevent the for
loop from placing it again in the menu.
And that's all! I also used permalinks in the Front Matter to strip the html extension from the url (if it was hosted in another server, I could use an .htaccess file for that instead). Finally, I'm using prefix-free, prismjs and MathJax as usual.
Layouts folder
Just one default layout. The prismjs and MathJax libraries are included here instead of in the footer.
Includes folder
To keep it simple, I have a file for the head
tag, another for the sidebar, and a footer. In the sidebar, there is a menu where I list all the pages I have in the site. I thought it made more sense to have the snippets in pages than to have them in blog posts.
Sass files
This is also the first time I use sass, so this Jekyll site has a _sass
folder where all the partials are stored. This is the order in which they are loaded in my main.scss
file, which lives inside the css
folder:
/* Import partials from `sass_dir` (defaults to `_sass`) */
@import
"normalize",
"base",
"layout",
"prism",
"mediaqueries"
;
The first one is Nicolas Gallagher's famous reset stylesheet "normalize". Then I have basic styling stuff for html tags. The layout
partial is where I have what I would call the actual theme, although the separation is not that sharp; part of the theme's styling can be found in the _base
partial too. Then I have Lea Verou's syntax highlighter prism, and finally, the media queries for responsiveness, which I like to keep together in a separate file.
I think this is a good organization model and I might be using something very similar in future sites.
You can find the code of this site at GitHub.