Astro Nano serves as a brilliant starting place for this blog, well, any blog really. However, I’ve made some adjustments to suit my own preferences and clean things up a little bit.
In short, I’ve modified the following:
- Copyright year
- Favicon
- List styling
- Page header
- Date format
None of these changes are that astronomical but I think they help to clean up the site.
Copyright year
Initally, the year shown on the left side of the footer, next to the copyright, is hardcoded to 2024 and therefore needs to be updated every year. This might be a good thing, since if the blog is abandoned, you can see which year it stopped getting updates. However, like most programmers, I’m lazy. That’s not a bad thing. Being lazy manifests itself as finding a better/quicker/more efficient way to do something, instead of just sitting there and mindlessly doing it. Changing the date is not a difficult nor mindless activity, however we can automate it!
The snippet responsible for the footer contains a single line for the copyright section
<div>
© 2024 {`|`} {SITE.NAME}
</div>
We can see the site name is grabbed from a variable elsewhere, but the year is static. We can replace this with a simple statement to grab the current date and extract the year. Now, whether you’re reading this in 2030 and I’m still posting, or in 2090 and I’m long gone, the year will stay updated.
<div>
© {new Date().getFullYear()} {`|`} {SITE.NAME}
</div>
Favicon
The default favicon is set to the Astro logo with these lines:
Head.astro
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/x-icon" href="/favicon-light.svg">
I obviously want something related to the blog so I set about creating something simple with Photopea. I created a blank 128x128 transparent file then added a single letter: “J”. It’s in the Indigo font, regular weight, 110px, #ff7800 and centered horizontally and vertically. When exporting from Photopea, I used the rasterise text option to ensure it’s rendered correctly everywhere. It comes out at 3.6KB or 2.6KB minified. You can see it below and in your tab bar.
Since the background is transparent and the main colour contrasts with both white and black, I have no need for a light and dark themed favicon. In the future I might change this and need a themed favicon. For that reason I’ve left the themed lines in the HTML, but set them all to the same.
Head.astro
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/x-icon" href="/favicon.svg">
List styling
Page header
The page header that comes with this boilerplate is nice, however when in the dark theme it has a slight tint. I would be okay with this if the tint was also present in the light theme, and technically it is, however you can’t see it. I’ve tested it and I think it looks better without.
After some playing around with the inspector tools, I found the header is being modified with the saturate(2) CSS filter, not the background-color as I initially suspected. After a simple search for saturate in the source, I discovered it was being set by this CSS block:
styles/globals.css
header {
@apply fixed top-0 left-0 right-0 z-50 py-5;
@apply bg-stone-100/75 dark:bg-stone-900/25;
@apply backdrop-blur-sm saturate-200;
}
My fix is simple, just remove saturate-200:
styles/globals.css
header {
@apply fixed top-0 left-0 right-0 z-50 py-5;
@apply bg-stone-100/75 dark:bg-stone-900/25;
@apply backdrop-blur-sm;
}
Date format
This template handily containts a component src/components/FormattedDate.astro that is used to display date/time values. By default, it is set to en-us as the desired format. I’m not in the US, so I’m not accustomed to viewing dates in a MM/DD/YY format. Thinking purely logically, DD/MM/YY makes much more sense and a large majority of the world agrees. Therefore, I changed the format to be en-gb.
To make your own change, locate the FormattedDate.astro component, which uses the JavaScript toLocaleDateString function to perform the transformation, and specify the BCP47 locale string you would like to use. You can find a list of these here
In src/libs/utils.ts the function string dateRange(Date, Date) parses two dates and displays the them like so month year - month year. It also allows the second date to be a string, in which case it displays this format: month year - string. This function uses the "default" locale, which will adjust the output format based on where the server hosting the site is deployed. We don’t want this, so I have simply changed the locale specification from "default" to "en-gb"