Kako i zašto?
Prije nekoliko tjedana počeo sam osmišljavati ovaj blog. Isprva je trebao biti digitalna zbirka naslijeđenih obiteljskih recepata, no na kraju je postao portfolio.
Ako planirate izraditi nešto slično ili vas zanima neka od korištenih tehnologija, ovdje možete pročitati više o mojim odlukama i iskustvima.
Osnovna ideja
Cilj je odabrati što jednostavniji stack koji se lako održava, u skladu s mojim motom "IT treba biti jednostavan!", a da pritom ne žrtvujem performanse. Po mogućnosti želim iskoristiti i moderne mogućnosti poput alata za izgradnju, tree shakinga, ponovno upotrebljivih komponenti i podjele koda.
Zato nastojim što više koristiti nativne web-tehnologije: HTML, CSS i JavaScript.
Dodatni cilj — ili posljedica odabranog stacka — bio je postići rezultate Googleovih Core Web Vitals pokazatelja iznad 98. Rezultat za računala na PageSpeed InsightsuRezultat za mobitele na PageSpeed Insightsu
Glavne tehnologije
U nastavku je kratak pregled glavnih tehnologija korištenih za izradu ove stranice:
Već me dugo zanimaju Remix i/ili Solid. Mislim da bi bili odličan izbor kad bih imao više vremena. Ipak, Astro sa svojim integracijama nudi mnogo slobode, a po potrebi mogu dodati i druge tehnologije putem Astro integracija.
Upravljanje sadržajem
Podaci, baza podataka ili CMS najvažniji su dio svakog tehnološkog stacka. U ovom slučaju nema potrebe ni za jednim od njih: baza bi nepotrebno zakomplicirala gotovo potpuno statičnu stranicu, a CMS bi dodao ovisnosti i mogućnosti koje možda nikad ne bih koristio. Obične .astro ili .js datoteke mogle bi poslužiti, ali imaju velik nedostatak: sadržaju se ne bi moglo pristupiti kao podacima jer bi svaka objava bila dio koda. MDX i njegova izvorna podrška u Astoru to elegantno rješavaju kroz kolekcije sadržaja, bez većih kompromisa.
Tako mogu nastaviti pisati objave, a istodobno raditi sa sadržajem kao sa strukturiranim podacima.
Ako niste upoznati s MDX-om, riječ je o kombinaciji Markdowna i JSX-a. U sadržaj napisan u MDX-u možete umetnuti vlastite komponente, poput ove koju vidite ovdje.
MDX datoteke uređujem izravno u Zedu ~~Code OSS~~ i predajem ih u repozitorij. Glavni je nedostatak tog pristupa, kao i kod svih statičkih generatora, to što se stranica mora ponovno izgraditi nakon svakog commita na glavnu granu. Ipak, to je najjednostavnije rješenje, osobito u kombinaciji s Netlifyjem.
'/components/blog/Tools.astro'
---
import { Icon } from "astro-icon/components";
const data = [
{ title: "astro", version: "v: 4.15" },
{ title: "tailwind", version: "v: 3.4" },
{ title: "mdx", version: "v: 3.1" },
{ title: "netlify", version: "cloudflare DNS" },
];
---
<section class="grid grid-cols-2 gap-4 md:grid-cols-4">
{data.map(({ title, version }) => (
<article
class="flex flex-col items-center justify-center opacity-80 hover:opacity-100 hover:border-muted/30"
>
<Icon name={title} class="size-10 md:size-14 " />
<b class="pt-2 text-xl font-extrabold uppercase">{title}</b>
<i class="text-muted">{version}</i>
</article>
))}
</section>
Stilovi i CSS
Za ovu sam stranicu prešao na Tailwind CSS. Nakon dugog izbjegavanja gotovih pomoćnih klasa i pisanja vlastitih, usporedio sam početni CSS s Tailwindovim izlazom. Pokazalo se da je oko 42 % stilova bilo identično, a još 21 % slično ili se moglo izraziti kombinacijom dviju ili više klasa. Zato sam prešao na službenu integraciju za Astro. Tako imam prenosiviji sustav dizajna.
Pri prelasku s jedne stranice na drugu odvija se prilično uočljiva animacija klizanja i postupnog pojavljivanja. Ako se zaglavlje nalazi na drugom mjestu, klizne na novu poziciju. Za to se koristi View Transitions API. Još nije podržan u svim preglednicima, ali je zgodno postupno poboljšanje.
Astro je znatno pojednostavio rad s tim API-jem. Klizanjem i postupnim pojavljivanjem elemenata stvara se dojam da su elementi na različitim stranicama zapravo isti.
Trebate nešto slično?