Make `baseof.html` more modular

[kentnek]

I think we can make the baseof.html more modular by splitting into several partials that powerusers like me might modify, e.g. meta.html, favicon.html, styles.html, etc. you get the idea. Some examples are:

partials/base/title.html

This partial would hold the <title> element, for people to customize the website's title.

partials/base/favicon.html

Nowadays including a single favicon.ico is probably not enough for all devices. The best practice would be use a favicon generator to generate multiple sizes and a webmanifest file, so the icon would look crisp in all scenarios.

I personally use realfavicongenerator to help me prepare the icon package, and I'd put this chunk in baseof.html to configure:

<!-- Icons -->
<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192x192.png" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | relURL }}" color="#FF3DB4">
<meta name="theme-color" content="#ffffff">

If we have the partial favicon.html, I can just replace the existing line

<link rel="shortcut icon" type="image/png" href="/favicon.ico" />

with that chunk without needing to clone the baseof.html file.

[jakewies]

Yes I think this is a good solution for use cases I haven't thought about. Makes the theme more extensible.

[kentnek]

Okay I'll work on this then.

[kentnek]

While looking at docuapi I see that they have this cool concept of "hooks". Basically they are partials that are inserted at strategic locations. I'd personally create a post-end (end of post to add in custom comment widgets).

@jakewies if you like this idea too I can implement this along side this PR as they are both related to refactoring baseof.html.

[jakewies]

Definitely!

[wilsonehusin]

I'm running into the same issue / want today, albeit a slightly different use case — I want a simple emoji to be my favicon

@kentnek are you still working on this? if not, I can PR in the addition for append_head or such

[kentnek]

@wilsonehusin oh please feel free to tackle it. I'm currently busy with real life so I can't work on this at the moment. Thank you!

[wilsonehusin]

I've raised the PR (#131) I personally do not have any use case for hooks, so I decided not to implement it immediately, unless you have other thoughts on this, @jakewies.

[jakewies]

Thanks @wilsonehusin I will make sure to take a peak. I have a lot of stuff to tackle for this project, been very busy IRL.

[wilsonehusin]

no problem @jakewies -- it's a one-liner change so perhaps it can be some entertainment on a tough day :D

anyhow, thanks for the wonderful work! truly appreciate that you open source the product :)

[jakewies]

Thank you @wilsonehusin for #131 !

Would you be interested and also working on a few other partials? If you haven't come across the need in your own work, then not to worry. Just curious. I seee that #46 aims to address a few other parts of the base template like title.

[wilsonehusin]

I'll stop by again when I come across some other use cases, I don't have anything in mind at the moment though 🙂

[jakewies]

No worries! I will keep this Issue open for future newcomers who might want to make some contributions.