Building out Middleman menus with Bootstrap
I’m slowing consolidating all of my online presence into a single git repo. There is a lot to do, it will probably take several years to finish as it’s not that high a priority.
One of the next step is bring some private pages I have detailing various operational notes on subjects like git, aws, etc. This requires building out the navigation menu, and extending the directory structure.
I’m using Bootstrap for styling and behavior. I don’t like the styling and behavior are coupled, but neither am I willing to reimplement the entire site in, say, angular.js. At least, not right now.
Since the whole site is open sourced, there seems little harm in detailing where things are and how stuff gets done.
Git operations
The task for today is adding a operations parent menu with a git submenu. The git submenu points at a long page full of git tips and tricks. This requires the following steps:
- From the repo root,
mkdir source/operations; mkdir source/javascripts. - Copy over the bootstrap.js file and the jquery.js file. I’m not super pleased that Bootstrap relies on jquery, but again, not gonna reimplement from scratch this year.
- Extend the menu in
source/layouts/_nav-global.hamlto point at git.html. - Create the
git.html.markdownfile. - Adjust the layout appropriately for the markdown file to ensure it renders correctly.
New/old page file trick for Middlemanapp
Getting the page to render correctly was tedious, as I’ve forgotten much about how middleman goes about its business. As a result, I’ve added the layout path to a comment in all the layout files, so that I know which file(s) generate the html output. This really isn’t a new trick, it’s just something I haven’t done in very long time as I’ve been working mostly on back end code the last several years. it looks like this:
<body>
<!-- source/layouts/blog_layout.haml -->
<div id='wrap'>
This does expose the file structure of the application to some extent, but since this is all open source, that point is moot.