I have had little time for coding since the holidays. I focused on developing the article writing features. The most important things for me were: adding links and images and making it easier to write the articles themselves.
Links in articles
I have already added links in previous articles, but they were not optimized for my needs. The behavior I am interested in is:
- External vs Internal - Internal links should open in the same window, while external links should open in a new tab.
- Analytics - Every link click should post back in analytics with information from which article the click was from and what external page it was to (anonymously, of course).
So I created a small component in which I fastened both logics:
---
interface Props {
target: string;
text: string;
blank: boolean;
}
const { target, text, blank } = Astro.props;
---
<a
href={target}
target={blank ? "_blank" : undefined}
rel={blank ? "noopener noreferrer" : undefined}
data-umami-event="article-link"
data-umami-event-article={Astro.url}
data-umami-event-target={target}
>
{text}
</a>
As you can see, the component accepts 3 values: the link text, the link and information whether the link should open in a new window. For the part related to Umami Analytics, I still use Astro.url which tells me what page the event was fired from.
Images in articles
Creating the images component was not a problem either. For now, it’s a very simple component that inserts an image with the maximum width of the article and optimizes it. In the future I will still add the ability to open an enlarged image, or a special component for presenting mobile screens with comments. For now, however, this one will suffice.
---
import type { ImageMetadata } from "astro";
import { Picture } from "astro:assets";
interface Props {
src: ImageMetadata;
alt: string;
}
const { src, alt } = Astro.props;
---
<Picture {src} width={672} formats={["avif", "webp"]} {alt} />
Unfortunately, when using the built-in Picture component, you have to import images directly into the file in which you use them, and this is tedious. Fortunately, I use a special CMS for this.
Front Matter CMS
In my opinion, Front Matter CMS is one of the most interesting tools you can install in VS Code. It is an extension that is de facto a full CMS for projects that rely on Markdown and MDX files.
Not only can you easily navigate between articles, but you can also add your own pieces of code. This is especially useful for automatically importing images into articles.
You can also manage images added to folders in your project very easily. You can easily define information such as alt text.
Using selected text in snippets.
An additional super power of snippets is the ability to define selected text as a default value:
"frontMatter.content.snippets": {
"External Link": {
"description": "",
"body": "<ArtLink target=\"[[&Target]]\" text=\"[[Text]]\" blank/>",
"fields": [
{
"name": "Target",
"title": "Target",
"type": "string",
"single": true,
"default": ""
},
{
"name": "Text",
"title": "Text",
"type": "string",
"single": true,
"default": "FM_SELECTED_TEXT" // <- TUTAJ
}
]
},
}
This allows me to write an article first, and then link specific things in it, under external materials.
Update Umami Analytics
I also managed to do an Umami Analytics update on the server over the weekend. This required me to backup the current database. The free DBeaver which allows you to explore and backup databases came in handy for this.
The update itself also went very easily, as all I had to do was select a new docker image. However, as is always the case with self-hosted applications - there was stress whether everything would go well.
New version of Umami allows me to better track visits and provides much better reports. At For example, you can view filtered results of all blog articles, or track the effectiveness of UTM campaigns better.
Summary
I’m getting tired of having little time to sit properly on the site or articles lately, but at least I try to use every free moment to do a little tweaking. Really, even a small 10-minute work during the day, at the end of the week accumulates into a nice result. This is very comforting.