+++ date = "2022-05-05T09:25:23+00:00" publishdate = "2023-12-29T07:08:55+00:00" title = "Micro Blog" slug = "micro-blog" author = "Thedro" tags = ["hugo"] type = "projects" summary = "It’s been a while since putting together a personal project and this time it’s the ever so popular micro blog." draft = "" syntax = "" toc = "" updated = "" +++ ![A Micro Blog](/images/micro-blog.png " Mobile view of the front page." ) [Demo](https://micro.thedroneely.com/m/tags/docs/) and [Source](https://www.thedroneely.com/git/thedroneely/canory/) It's been a while since putting together a personal {{< sidenote mark="project" set="left" >}} 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. {{< /sidenote >}} and this time it's the ever so popular [micro blog](https://en.wikipedia.org/wiki/Microblogging). After writing [a brief on Hugo](/posts/hugo-is-good/), 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, and [Mastodon](https://joinmastodon.org/)). ![Desktop Layout](/images/micro-blog-desktop.png " Desktop Layout" ) The project's name is canory, and no it's not a play on the [domestic canary](https://en.wikipedia.org/wiki/Domestic_canary). It's the result of a {{< sidenote mark="[portmanteau](https://github.com/tdro/dotfiles/blob/8ea84da5b2ade1043d05c30289ef97835c4b1499/.local/bin/portmanteau)" set="right" >}} Poor man's fake `GPT` (Generative Pre--trained Transformer) this word does not exist generator. {{< /sidenote >}} 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](https://micro.thedroneely.com/m/default/messages/quickstart/#default-messages-quickstart) 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](https://developer.mozilla.org/en-US/docs/Web/HTML) --- it's the {{< sidenote mark="final" set="left" >}} Technically the [`HTML` specification](https://html.spec.whatwg.org/dev/) is the final source of truth, but you get the idea. {{< /sidenote >}} 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](https://developer.mozilla.org/en-US/docs/Web/CSS)) is much easier this way. Further application of this approach ventures into the realm of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), but only custom elements are written, without using any of the [`JavaScript`](https://developer.mozilla.org/en-US/docs/Web/JavaScript) `APIs` [(Application Programming Interface)](https://en.wikipedia.org/wiki/API) or splitting similar constructions into components. The _semantic pact_ is my jargon for this approach. ## Content Security Policy Embedding is {{< sidenote mark="nasty" set="right" >}}Embedding is avoided like the plague on my main blog. {{< /sidenote >}} 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (`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 `` tags. Many fine folks [already do this](https://blog.jeremylikness.com/blog/create-content-security-policy-csp-in-hugo/) 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and you probably won't even notice the difference, but there are some [progressive enhancements](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) using standard `JavaScript`. [Deno](https://deno.land/) is the _secret sauce_ and a very {{< sidenote mark="important" set="left" >}} 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. {{< /sidenote >}} program for strategically avoiding the [`npm`](https://www.npmjs.com/) ecosystem and creating a dynamic website. Inside the box, there's optional [`TypeScript`](https://www.typescriptlang.org/), bundling, executable compilation, [remote imports](https://deno.land/manual@v1.26.1/examples/import_export#remote-import) 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](/posts/hugo-is-good/), there's no mention of Hugo's [remote data fetching](https://gohugo.io/templates/data-templates/#get-remote-data) 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](https://en.wikipedia.org/wiki/RSS)) feeds (hacky) at build time. Hugo can fetch a wide array of data types including `JSON` [(JavaScript Object Notation)](https://www.json.org/json-en.html), `CSV` [(Comma Separated Values)](https://en.wikipedia.org/wiki/Comma-separated_values), and `XML` [(Extensible Markup Language)](https://www.w3.org/XML/). ## 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](https://github.com/gohugoio/hugo/issues/9737) this limitation. **Page Data Structure**: It would be nice to programmatically instantiate a page without [Markdown](https://www.markdownguide.org/getting-started/) ([page resources](https://gohugo.io/content-management/page-resources/) may [already allow](https://www.thenewdynamic.com/article/toward-using-a-headless-cms-with-hugo-part-2-building-from-remote-api/) this by pre--generating `markdown`). 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 relative to any layout position, 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.