Hello and welcome to my blog!
Like most other blogs, the goal is to keep things as simple as possible to keep the writing flow going. to do that I've decided to go with markdown. And I've decided to go with PHP as my parser!
Wait, what?
So you might have noticed the fancy url formatting of this page, with the date, and post title all fancy without using http GET variables:
This is the result of a very powerful Apache module called rewrite. The actual line I'm using is:
RewriteRule "^blog/post/(.*)/(.*)" "blog/post.php?date=$1&name=$2"
This accomplishes two things:
Once PHP has the filename, it's easy to grab the markdown into a variable and
run it into Parsedown. Super simple, and
works really great for what we need. We also use the name and date to generate
our <H1> and <H2> tags.
Okay so we're successfully grabbing our markdown, apache rewrite is working properly. But image tags are kind of broken. The image above directs itself to https://primis.org/blog/post/2022-10-28/making-of-this-blog-url.png which is a fake URL based on the name of this markdown file! We could fix this three ways:
I've chosen option three. Presenting the solution:
<?php
$name = $_GET['name'];
if(pathinfo($name, PATHINFO_EXTENSION) != '') {
header("Location: /blog/content/images/".$name);
die();
}
?>This bit of trickery is absolutely terrible. But basically it:
This works out quite well, especially since for articles we're adding the .md ourselves, so basically any file with an extension gets re-routed here.
If you've ever posted a link in slack, twitter, discord, or where ever, you've probably seen something like this:
This is pretty cool and makes people more likely to click on the link. What powers it?
The answer is the <meta> tag! (Also <title>). Specifically, most services
can extract the Title, and description named meta tag information and display
it like that. You can also use the Open Graph properties,
however these are technically non-standard. Though they'll work in a lot of
places, it's best to also include a <meta name="description"> style tag.
For the sake of simplicity, this blog just uses the latter, ignoring Open Graph
entirely. So far it's shown no issues. Almost everything can extract the
<title> and description data without needing the more verbose og tags.
For more info on the <meta> tag, check out
W3 School's article about it.
So where to put that information, since we're just typing plain markdown here, and PHP is handling the rest (page generation, headers, etc)? well, we could get fancy and extend the parser to do that for us, but for the sake of simplicity: we're using a separate file. PHP has a built-in JSON Parser now, so it's pretty easy to have a same-named file with a .json extension instead of a .md extension and just parse that! This way we can have PHP parse that file for us!
Currently, for this article our json contains just two entries.
{
"tags": [
"meta",
"programming"
],
"description": "I decided to make a blog. Here's how I did it."
}The description is read out on the homepage under the name and date of the
article in the listing, and in this file's header for that url preview mentioned
earlier. The tags are shown at the bottom of this article, as well as in the
header for search engine reasons. One day I might make a tag search page for
these, but I don't really see a rush.
Could this have been done easier or better? Absolutely! For starters, this method doesn't support tags internally, searching or any fancy stuff. But it works and is relatively lightweight. The Parsedown php file is included as a single file without external dependencies, is only 1,600 SLOC, and is decently fast!
To me this is the perfect blend of usability (I can just drop markdown files in) and simplicity (I'm not including a multi-megabyte JS library). Sure it's a bit hacky, but I'm a fan of that too!
🏷 meta
🏷 programming