Micro Blog
It’s been a while since putting together a personal Not all of my projects are online, only projects I’d sort of want to maintain. The Internet to put it mildly, is a very hostile place, and every thing you put out there becomes a dependency, and attack vector. and this time it’s the ever so popular micro blog. After writing a brief on Hugo, further research indicated that standing up a minimal but decent micro blog is not too hard. It should be obvious, but the design is lifted (inspired) collectively from popular micro blogs on the Internet (Twitter, Facebook, Tumblr, Foursquare, and Mastodon).
The project’s name is canory, and no it’s not a play on the
domestic canary. It’s the
result of my
Poor man’s fake GPT (Generative Pre–trained Transformer) this word does not
exist generator.
script smashing the words cannon and
armory together to make canory. Armored cannon is its code name,
presumably. If you’re going to try out this theme, fair warning that it’s
somewhat hacky and incomplete.
Read this thread
for an installation overview.
Pure Static HTML
HTML is powerful and getting much more so. This micro blog is compiled to pure
HTML. The only build steps involve running hugo and copying html files to
a place where the almighty index.html is understood. That could be a server,
content delivery network (CDN), or whatever floats your boat. If you want to explore
the full powers of HTML in all of its glory check out the
MDN (Mozilla Developer Network) Web Docs
— it’s the final source of truth on HTML hands down.
Semantic Pact
The markup consists of semantic tags, custom elements and no classes. Solo
maintaining, and handcrafting CSS
(Cascading Style Sheets) is
much easier this way. Further application of this approach ventures into the
realm of
web components,
but only custom elements are written, without using any of the
JavaScript APIs
(Application Programming Interface) or
splitting similar constructions into components. The semantic pact is my
jargon for this approach.
Content Security Policy
Embedding is
Embedding is avoided like
the plague on my main blog.
business. Even though everything is
static, there’s no end to the perversity that an embed can do or leak into a
webpage.
Content Security Policies
(CSP) allow restricting what can happen on a web page with a fine degree of
accuracy.
Usually my content policies are driven from a server configuration with headers,
but since this theme has to be as pure and as batteries included as possible,
policies are better written using <meta> tags. Many fine folks
already do this
with hugo. All inline scripts have been disabled, but disabling inline
CSS conclusively will take a bit more cleverness.
Deno and JavaScript
This runs nicely without
JavaScript, and you
probably won’t even notice the difference, but there are some
progressive enhancements
using standard JavaScript. Deno is the secret sauce
and a very
Deno is great. It’s my
go to program for deploying JavaScript “strategically”. No more package.json,
node-modules, or other cumbersome solutions to business problems technologists
love to come up with.
program for strategically avoiding the npm ecosystem
and creating a dynamic website. Inside the box, there’s optional
TypeScript, bundling, executable compilation,
remote imports
and more, all for free, and in one executable — deno. Deno for now soft
harnesses bundling a few JavaScript progressive enhancements, nothing especially
fancy.
Fetching Remote Data
In my previous article, there’s no mention of Hugo’s
remote data fetching
ability, and that’s because my tendency is to write about things only after
trying it out completely. Remote data fetching is a very powerful feature,
allowing one to collect dynamic data into the application at compile time and
cache that data. Right now, the micro blog can fetch RSS
(Really Simple Syndication) feeds (hacky)
at build time. Hugo can fetch a wide array of data types including JSON
(JavaScript Object Notation), CSV
(Comma Separated Values), and
XML (Extensible Markup Language).
Current Limitations of Hugo
Hugo is about 80~90% complete by my estimation, at least for my imagined
purposes. This theme uses pretty much every feature of hugo and has brushed up
against some limitations.
Error Handling Generality: Remote data fetching is a lightning rod for failure. At the moment, many types of data fetching errors cannot be handled, so compilation can fall down in varied situations. Fortunately the upstream developers appear to be solving this limitation.
Page Data Structure: It would be nice to programmatically instantiate a page without markdown (page resources may already allow this in a roundabout way). The page data structure is still sort of a mystery and maybe this is already possible — that’s an investigation for another time. Instantiating a post would allow weaving external data into the page map. My theory is that, you’d need to rebuild the page structure manually first to weave in your own data (for example multiple instances of micro blogs connecting to each other in a cohesive way).
Pagination Generality: In terms of pagination, the separation of taxonomy
and term was a nice surprise when making this micro blog — it ultimately
means that my main blog can be vastly simplified. What would be great is if
hugo could paginate any range of data, but this is probably outside of the
scope of hugo's purpose.
Conclusion
There you have it — a quick overview of some technical details of note that arose when crafting this theme. Now the fun of micro blogging begins.