FrontMatter CMS i Astro Image

Od świąt miałem mało czasu na kodowanie. Skupiłem się na rozwijaniu funkcji związanych z pisaniem artykułów. Najważniejsze było dla mnie: dodawanie linków i obrazków oraz ułatwienie pisania samych artykułów.

Linki w artykułach

Dodawałem już linki w poprzednich artykułach, jednak nie były one zoptymalizowane pod moje potrzeby. Zachowanie, które mnie interesuje to:

Zewnętrzne vs Wewnętrzne - Linki wewnętrzne powinny się otwierać w tym samym oknie, a linki zewnętrzne w nowej karcie.
Analityka - Każde kliknięcie linku powinno się odkładać w analityce z informacją z którego artykułu było kliknięcie i do jakiej strony zewnętrznej było (oczywiście anonimowo).

Stworzyłem więc mały komponent w którym zapiąłem obie logiki:

---
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>

Jak widzisz komponent przyjmuje 3 wartości: tekst linku, link i informację czy link ma się otwierać w nowym oknie. Do części związanej z Umami Analytics wykorzystuję jeszcze Astro.url który przekazuje mi informację z jakiej strony został odpalony event.

Obrazki w artykułach

Stworzenie komponentu obrazków to też nie był problem. Na razie to bardzo prosty element, który wstawia obrazek o maksymalnej szerokości artykułu i go optymalizuje. W przyszłości będę dodawał jeszcze możliwość otworzenia powiększonego obrazka, albo specjalny komponent do prezentowania mobilnych ekranów z komentarze. Na razie jednak ten wystarczy.

---
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} />

Niestety w przypadku używania wbudowanego komponentu Picture trzeba importować obrazki bezpośrednio do pliku w którym się je używa i jest to upierdliwe. Na szczęście do tego używam specjalnego CMS’a.

Front Matter CMS

Według mnie Front Matter CMS to jedno z najciekawszych narzędzi, które można zainstalować w VS Code. Jest to rozszerzenie, które jest de facto pełnym CMS’em dla projektów, które bazują na plikach Markdown i MDX.

Nie dość, że można łatwo nawigować pomiędzy artykułami, to jeszcze można dodawać swoje własne kawałki kodu. Jest to szczególnie przydatne do automatycznego importu obrazków do artykułów.

Screenshot pokazujący modal edycji snippetu kodu we Front Matter CMS

Można też bardzo łatwo zarządzać obrazkami dodanymi do folderów w projekcie. Łatwo można zdefiniować informacje takie jak alt text.

Używanie zaznaczone tekstu w snippetach

Dodatkową super mocą snippetów jest możliwość zdefiniowania zaznaczonego tekstu, jako domyślnej wartości:

"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
        }
      ]
    },
}

To pozwala mi najpierw napisać artykuł, a potem podlinkować w nim konkretne rzeczy, pod zewnętrzne materiały.

Update Umami Analytics

W weekend udało mi się też zrobić update Umami Analytics na serwerze. Wymagało to ode mnie zrobienia backupu obecnej bazy. Przydał się do tego darmowy DBeaver , który pozwala eksplorować i backupować bazy danych.

Sam update też poszedł bardzo łatwo, bo wystarczyło wybrać nowy obraz dockerowy. Jednak, jak to zawsze z aplikacjami hostowanymi samemu - był stres czy wszystko pójdzie dobrze.

Nowa wersja Umami

pozwala mi lepiej trackować wizyty i udostępnia o wiele lepsze raporty. Na przykład można przeglądać przefiltrować wyniki wszystkich artykułów na blogu, lub śledzić lepiej efektywność kampanii UTM.

Podsumowanie

Męczy mnie, że ostatnio mam mało czasu na porządne posiedzenie nad stroną czy artykułami, ale przynajmniej staram się wykorzystywać każdą wolną chwilę na małe poprawki. Naprawdę, nawet mała 10 minutowa praca w ciągu dnia, na koniec tygodnia kumuluje się w ładny wynik. To bardzo pocieszające.