First post!

Posted: 2017-02-20
Filed under: meta php

It seems appropriate to christen this blog with a bit of information about how it was assembled. The blog is statically built using Spress, a PHP static site generator using Symfony components. Why not use a more traditional content management system like WordPress? Well, WordPress and other CMS seem to be a bit overkill for just dumping my thoughts onto the screen. At this point I don't consider it necessary to run a database instance to store my posts, for example. At the same time, however, rolling your own pages manually is a bit terse.

The beauty of a tool like Spress is that it lets you have it both ways. It's simpler than spinning up a full CMS, but with legroom to get creative. For instance, using Twig templates you can write your posts almost entirely devoid of HTML if you so choose. On the flip side you can really dive deep into it, and make all sorts of partials or inline something particularly cool. For my purposes, I needed a way to show code snippets inline with syntax highlighting. I opted to use highlightjs, along with a little bit of custom code for the line numbers widget:

--- layout: "default" title: "First post!" description: "Every blog has to start somewhere. In this post I detail the tools used to assemble" tags: ["meta", "php"] date: "2017-02-20" --- <section> <p> <!-- Your content goes here --> </p> </section>
A sample Spress post. It's a combination of a YAML header and some HTML.

As you can see in the snippet above, there's a small bit of YAML which defines attributes. These attributes contain info about the post such as the published date, title and the template layout to use. Beneath the header contains the actual content of the post. This can be plaintext, or a bit of HTML which is injected into the template. For my purposes we'll use a bit of both. 😀

Speaking of HTML, under the hood the site is fully modern, using a Flexbox layout that looks great on desktops as well as mobile. For the icons we're using Font-Awesome, and the CSS is pre-processed from SASS files. There is a little bit of Javascript too, to handle loading syntax highlighting for code blocks and the hamburger menu on mobile. We're nowhere near Single Page App-territory here, but that's modern, too -- ES6 that's been bundled via Webpack. Below is the code which gives us fancy line-numbering:

import hljs from 'highlightjs'; /** * adds syntax highlighting and line numbers to a pair of sibling .classes * @param body .class containing the code tag * @param line .class target for the line numbers */ export function addLineNumbers(body, line) { let codeBlocks = document.querySelectorAll(body); codeBlocks.forEach(function (block) { let codeBlock = block.querySelector('code'); let lineNumbers = block.parentNode.querySelector(line); hljs.highlightBlock(codeBlock); let lines = codeBlock.textContent.split('\n').length; let lineNumbersStr = ''; for (let i = 1; i <= lines; i++) { lineNumbersStr += i + '<br>'; } lineNumbers.innerHTML = lineNumbersStr; }); }
Line numbers for code blocks styled via Highlightjs

That's all for now. I'm hoping to add some in-depth posts soon, but this should give you an idea of what to expect from this site.