lots of stuff :P

frontend/src/components/CardLink.astro

@@ -1,35 +1,39 @@
 ---
 export interface Props {
   link: string;
+  isExternal?: boolean;
 }
 
 const random = Math.round(Math.random() * 10) % 4;
 
-const { link } = Astro.props;
+const { link, isExternal = false } = Astro.props;
 ---
 
 <li
   class:list={[
-    'border-primary-800 border-2 transition-shadow duration-100 w-96 max-w-full mb-3 group/card',
+    'border-primary-800 hover:cursor-alias border-2 hover:shadow-primary-800 active:shadow-primary-800 transition-shadow duration-100 w-96 max-w-full group/card',
     {
-      'hover:shadow-[-5px_-5px] hover:shadow-primary-800 ctive:shadow-[-5px_-5px] ctive:shadow-primary-800':
+      'hover:shadow-[-5px_-5px] active:shadow-[-5px_-5px]': random === 0,
-        random === 0,
+      'hover:shadow-[-5px_5px] active:shadow-[-5px_5px]': random === 1,
-      'hover:shadow-[-5px_5px] hover:shadow-primary-800 active:shadow-[-5px_5px] active:shadow-primary-800':
+      'hover:shadow-[5px_-5px] active:shadow-[5px_-5px]': random === 2,
-        random === 1,
+      'hover:shadow-[5px_5px] active:shadow-[5px_5px]': random === 3,
-      'hover:shadow-[5px_-5px] hover:shadow-primary-800 active:shadow-[5px_-5px] active:shadow-primary-800':
-        random === 2,
-      'hover:shadow-[5px_5px] hover:shadow-primary-800 active:shadow-[5px_5px] active:shadow-primary-800':
-        random === 3,
     },
   ]}
 >
-  <a href={link} class="px-4 py-3 block">
+  <a
+    href={link}
+    class:list={[
+      'px-4 py-3 block',
+      isExternal ? 'group-hover/card:cursor-alias' : '',
+    ]}
+  >
     <slot />
     <div class="flex justify-end">
       <span
-        class="pr-3 text-xl group-hover/card:pr-0 transition-[padding] duration-100"
+        class="pr-3 text-3xl group-hover/card:pr-0 transition-[padding] duration-100"
-        >→</span
       >
+        {isExternal ? '⤤' : '→'}
+      </span>
     </div>
   </a>
 </li>

frontend/src/components/InlineLink.astro

@@ -1,12 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-export type Props = HTMLAttributes<'a'>;
+export interface Props extends HTMLAttributes<'a'> {
+  isExternal?: boolean;
+}
+
+const { isExternal = false } = Astro.props;
 ---
 
 <a
   class:list={[
     'text-primary-800 underline transition-colors duration-100 hover:text-primary-700',
+    isExternal ? 'hover:cursor-alias' : '',
     Astro.props.class,
   ]}
   {...Astro.props}><slot /></a

frontend/src/components/mdx/components/InlineLink.astro

@@ -3,12 +3,13 @@ import type { HTMLAttributes } from 'astro/types';
 
 export type Props = HTMLAttributes<'a'>;
 
-console.log(Astro.props);
+const isExternal = Astro.props.href?.toString().startsWith('https://');
 ---
 
 <a
   class:list={[
     'text-primary-800 underline transition-colors duration-100 hover:text-primary-700',
+    isExternal ? 'hover:cursor-alias' : '',
     Astro.props.class,
   ]}
   {...Astro.props}><slot /></a

frontend/src/components/mdx/components/LinkToFootnote.astro

@@ -2,10 +2,9 @@
 import InlineLink from '../../InlineLink.astro';
 import langToFootnoteString from '../../../lib/langToFootnoteString';
 
-// @ts-expect-error Seems to be a bug between patches on Astro's side?
 const footnoteString = langToFootnoteString(Astro);
 
-// This is an incredible hack!! Ahah
+// This is a huge hack!! Ahah
 // Not sure if safe, but seems to be
 declare global {
   var footnoteCounts:

frontend/src/content/blog/pt/voto-digital.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Voto digital e como democratizar a democracia'
+title: Voto digital e como democratizar a democracia
 slug: voto-digital-e-como-democratizar-a-democracia
 summary: >
   Como podemos usar o voto digital para tornar a democracia

frontend/src/content/config.ts

@@ -7,6 +7,8 @@ const libraryCollection = defineCollection({
     checkedOut: z.boolean(),
     link: z.string().url(),
     description: z.ostring(),
+    date: z.date(),
+    mainAuthor: z.ostring(),
   }),
 });
 

frontend/src/content/library/en/doughnut-economics.yaml

@@ -1,6 +1,8 @@
 title: 'Doughnut Economics: Seven Ways to Think Like a 21st-Century Economist'
 checkedOut: true
 link: 'https://www.kobo.com/ie/en/ebook/doughnut-economics'
+date: 2024-03-03
+mainAuthor: Kate Raworth
 description: >
   I loved it and highly recommend it! It's a book about economics, but a very unorthodox one.
   It has a degrowth side to it, but it's a great read for any person that wants a breath of

frontend/src/content/library/en/limits-to-growth-30.yaml

@@ -1,6 +1,8 @@
 title: 'Limits to Growth: The 30-Year Update'
 checkedOut: true
 link: 'https://www.kobo.com/ie/en/ebook/limits-to-growth-1'
+date: 2024-03-03
+mainAuthor: D. Meadows, J Randers, D. Meadows
 description: >
   This book completely solidified my urge to study political economics and
   system dynamics. It takes on a realistic but duly urgent approach about the problems

frontend/src/content/library/en/mission-economy.yaml

@@ -1,6 +1,8 @@
 title: 'Mission Economy: A Moonshot Guide to Changing Capitalism'
 checkedOut: true
-link: 'https://www.kobo.com/us/en/ebook/mission-economy-1'
+link: https://www.kobo.com/us/en/ebook/mission-economy-1
+date: 2024-03-03
+mainAuthor: Mariana Mazzucato
 description: >
   I've read about half of the book (maybe a bit more, if you don't count references, etc).
   I can't say I was impressed. The book tries to use the case of Nasa's Apolo XIII project

frontend/src/content/library/en/the-strange-library.yaml

@@ -0,0 +1,12 @@
+title: The Strange Library
+checkedOut: true
+link: https://www.kobo.com/us/en/ebook/the-strange-library-1
+date: 2024-03-04
+mainAuthor: Haruki Murakami
+description: >
+  This is a Murakami book that's very different from his other works.
+  It's tiny and it's as much visual as verbal, with beautiful illustrations
+  intertwined with the story. The creepy, unsettling and sometimes magical plot
+  is not new to the author, and he still managed to make me feel new emotions:
+  this time of fear and loneliness. The only unfortunate part is that the book
+  is so short that these strange emotions can be more fleeting than one would wish.

frontend/src/content/library/pt/doughnut-economics.yaml

@@ -1,6 +1,8 @@
 title: 'Economia Donut: Sete Formas de Pensar Como um Economista no Século XXI'
 checkedOut: true
 link: 'https://www.wook.pt/ebook/economia-donut-kate-raworth/21400895'
+mainAuthor: Kate Raworth
+date: 2024-03-03
 description: >
   'Adorei e recomendo vivamente! É um livro sobre economia, mas muito pouco ortodoxo.
   Tem uma faceta decrescentista, mas é uma ótima leitura para qualquer pessoa que queira

frontend/src/content/library/pt/limits-to-growth-30.yaml

@@ -1,6 +1,8 @@
 title: 'Limites do Crescimento: A Atualização de 30 Anos'
 checkedOut: true
 link: 'https://www.scribd.com/document/422266661/Limites-Do-Crescimento-A-Atualizacao-de-30-Anos'
+date: 2024-03-03
+mainAuthor: D. Meadows, J Randers, D. Meadows
 description: >
   Este livro solidificou por completo a minha vontade de estudar economia política
   e dinâmica de sistemas. É uma abordagem realista mas devidamente urgente sobre os

frontend/src/content/library/pt/mission-economy.yaml

@@ -1,6 +1,8 @@
 title: 'Economia de Missão: Um guia ousado e inovador para mudar o capitalismo'
 checkedOut: true
 link: 'https://www.wook.pt/ebook/economia-de-missao-mariana-mazzucato/25383261'
+date: 2024-03-03
+mainAuthor: Mariana Mazzucato
 description: >
   Já li cerca de metade do livro (talvez mais, se excluir referências, etc).
   Não posso dizer que fiquei impressionado. O livro tenta usar o caso do projeto Apolo XIII

frontend/src/content/library/pt/the-strange-library.yaml

@@ -0,0 +1,13 @@
+title: The Strange Library
+checkedOut: true
+link: https://www.fnac.pt/The-Strange-Library-Haruki-Murakami/a807074?NUMERICAL=Y#bl=FA_ebook
+mainAuthor: Haruki Murakami
+date: 2024-03-04
+description: >
+  Este é um livro de Murakami que é muito diferente das suas outras obras.
+  É minúsculo e é tanto visual como verbal, contando com belíssimas ilustrações
+  que alternam com a estória. O enredo pertubador, desconcertante e por vezes
+  mágico não é novo para o autor, e ainda assim conseguiu provocar-me novas
+  emoções: desta vez, de medo e solidão. A única parte infeliz é que o livro é
+  tão curto que estas emoções estranhas podem ser mais efémeres do que gostaríamos.
+  (Ainda não foi traduzido para português)

frontend/src/layouts/Layout.astro

@@ -49,17 +49,17 @@ const hasFooter = !!footer;
         </ul>
         <ul class="flex gap-3">
           <li>
-            <InlineLink href="https://social.filipesm.eu/@filipe">
+            <InlineLink isExternal href="https://social.filipesm.eu/@filipe">
               Fediverso
             </InlineLink>
           </li>
           <li>
-            <InlineLink href="https://git.filipesm.eu/filipe">
+            <InlineLink isExternal href="https://git.filipesm.eu/filipe">
               <span class="italic">Software</span>
             </InlineLink>
           </li>
           <li>
-            <InlineLink href="https://bandcamp.com/filipesm">
+            <InlineLink isExternal href="https://bandcamp.com/filipesm">
               Bandcamp
             </InlineLink>
           </li>

frontend/src/pages/biblioteca/index.astro

@@ -5,9 +5,9 @@ import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 
-const libraryItems = await getCollection('library', ({ id }) =>
+const libraryItems = (
-  id.startsWith('pt'),
+  await getCollection('library', ({ id }) => id.startsWith('pt'))
-);
+).sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 ---
 
 <Layout
@@ -18,29 +18,33 @@ const libraryItems = await getCollection('library', ({ id }) =>
 >
   <header class="mb-10">
     <PageTitle class="mb-3">Biblioteca</PageTitle>
-    <h2>
+    <p>
-      Livros, artigos, <span class="italic">etc.</span> que já li e que
+      Livros, artigos, <span class="italic">etc.</span> que já li e que recomendo
-      recomendo ou que quero ler num futuro próximo. Se um item tiver uma marca
+      ou que quero ler num futuro próximo. Se um item tiver uma marca "<span
-      "<span class="text-primary-700">✓</span>", siginifca que eu já o li, vi, <span
+        class="text-primary-700">✓</span
-        class="italic">etc.</span
+      >", siginifca que eu já o li, vi, <span class="italic">etc.</span>
-      >
+    </p>
-    </h2>
   </header>
-  <ol class="grid lg:grid-cols-3 md:grid-cols-2 items-start gap-4">
+  <ol class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 items-start">
     {
-      libraryItems.map(({ data: { title, description, link, checkedOut } }) => (
+      libraryItems.map(
-        <CardLink link={link}>
+        ({ data: { title, description, link, checkedOut, mainAuthor } }) => (
-          <article>
+          <CardLink link={link} isExternal>
-            <div class="flex gap-2">
+            <article>
-              <h2 class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
+              <div class="flex gap-2">
-                {title}
+                <h2 class="text-lg sm:text-xl font-medium break-words text-primary-700 block">
-              </h2>
+                  {title}
-              {checkedOut && <span class="text-primary-700 text-3xl">✓</span>}
+                </h2>
-            </div>
+                {checkedOut && <span class="text-primary-700 text-3xl">✓</span>}
-            <p class="mb-5">{description}</p>
+              </div>
-          </article>
+              {mainAuthor && (
-        </CardLink>
+                <h3 class="mb-3 sm:text-lg text-end">{mainAuthor}</h3>
-      ))
+              )}
+              <p class="mb-5">{description}</p>
+            </article>
+          </CardLink>
+        ),
+      )
     }
   </ol>
   <Fragment slot="footer">

frontend/src/pages/blog/[slug]/index.astro

@@ -1,5 +1,5 @@
 ---
-import BlogPostSubtitle from '../../../components/mdx/BlogPostSubtitle.astro';
+import BlogPostSubtitle from '../../../components/BlogPostSubtitle.astro';
 import ButtonLink from '../../../components/ButtonLink.astro';
 import PageTitle from '../../../components/PageTitle.astro';
 import Layout from '../../../layouts/Layout.astro';
@@ -73,7 +73,7 @@ const formattedPublishDate = publishDate.toLocaleDateString('pt', {
       <BlogPostSubtitle content={subtitle} />
       <span class="text-lg sm:text-xl">
         <time datetime={formattedPublishDate}>{formattedPublishDate}</time>
-         &bull;
+        &bull;
         {readTime}
       </span>
     </header>

frontend/src/pages/blog/index.astro

@@ -5,22 +5,24 @@ import CardLink from '../../components/CardLink.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 
-const posts = await getCollection('blog', ({ id }) => id.startsWith('en'));
+const posts = (
+  await getCollection('blog', ({ id }) => id.startsWith('en'))
+).sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
 ---
 
 <Layout title="Blog - Filipe Medeiros" ptUrl="/blogue" enUrl="/blog" lang="en">
   <header class="mb-10">
     <PageTitle class="mb-3">Blog</PageTitle>
-    <h2>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</h2>
+    <p>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</p>
   </header>
-  <ol>
+  <ol class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 items-start">
     {
       posts.map(({ data: { title, publishDate, summary }, slug }) => (
         <CardLink link={`/blog/${slug}`}>
           <article class="flex flex-col gap-2">
-            <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
+            <h2 class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
-            </span>
+            </h2>
             <time
               datetime={publishDate.toLocaleDateString('pt', {
                 dateStyle: 'short',

frontend/src/pages/blogue/[slug]/index.astro

@@ -1,5 +1,5 @@
 ---
-import BlogPostSubtitle from '../../../components/mdx/BlogPostSubtitle.astro';
+import BlogPostSubtitle from '../../../components/BlogPostSubtitle.astro';
 import ButtonLink from '../../../components/ButtonLink.astro';
 import PageTitle from '../../../components/PageTitle.astro';
 import Layout from '../../../layouts/Layout.astro';
@@ -73,7 +73,7 @@ const formattedPublishDate = publishDate.toLocaleDateString('pt', {
       <BlogPostSubtitle>{subtitle}</BlogPostSubtitle>
       <span class="text-lg sm:text-xl">
         <time datetime={formattedPublishDate}>{formattedPublishDate}</time>
-         &bull;
+        &bull;
         {readTime} min
       </span>
     </header>

frontend/src/pages/blogue/index.astro

@@ -6,7 +6,9 @@ import Layout from '../../layouts/Layout.astro';
 
 import { getCollection } from 'astro:content';
 
-const posts = await getCollection('blog', ({ id }) => id.startsWith('pt'));
+const posts = (
+  await getCollection('blog', ({ id }) => id.startsWith('pt'))
+).sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
 ---
 
 <Layout
@@ -17,16 +19,16 @@ const posts = await getCollection('blog', ({ id }) => id.startsWith('pt'));
 >
   <header class="mb-10">
     <PageTitle class="mb-3">Blogue</PageTitle>
-    <h2>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</h2>
+    <p>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</p>
   </header>
-  <ol>
+  <ol class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 items-start">
     {
       posts.map(({ data: { title, publishDate, summary }, slug }) => (
         <CardLink link={`/blogue/${slug}`}>
           <article class="flex flex-col gap-2">
-            <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
+            <h2 class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
-            </span>
+            </h2>
             <time
               datetime={publishDate.toLocaleDateString('pt', {
                 dateStyle: 'short',

frontend/src/pages/home.astro

@@ -14,28 +14,41 @@ import Layout from '../layouts/Layout.astro';
     <p class="mb-3">
       I like animals, politics, reading about economics. I don't like to cook
       (yet) and I don't like cold wind. Occasionally, I like to program some
-      stuff and take care of my <InlineLink href="https://git.filipesm.eu">
+      stuff and take care of my <InlineLink
+        isExternal
+        href="https://git.filipesm.eu"
+      >
         {'little'}
       </InlineLink>{' '}
-      <InlineLink href="https://social.filipesm.eu">{'corner'}</InlineLink> on
+      <InlineLink isExternal href="https://social.filipesm.eu">
-      the internet.
+        {'corner'}
+      </InlineLink> on the internet.
     </p>
     <p class="mb-3">
-      I'm an ecologial and environmental activist (I help <InlineLink
+      I'm an ecologial and environmental activist (I help environmental
-        href="https://www.climaximo.pt/english/"
+      organisations
-      >
-        {'Climáximo'}
-      </InlineLink> and other organisations
       <InlineLink
+        isExternal
         href="https://sicnoticias.pt/pais/2023-05-13-Gas-e-morte-morte-e-Gas-mais-de-150-ativistas-em-marcha-no-centro-de-Sines-b856581e"
       >
-        {'whenever I can'}
+        {'from time to time'}
       </InlineLink>) and I support <InlineLink
-        href="https://pt.wikipedia.org/wiki/Ecossocialismo"
+        isExternal
+        href="https://wikipedia.org/wiki/Ecossocialism"
+      >
+        {'ecosocialism CONFIRMAR'}
+      </InlineLink> (I'm a member of <InlineLink
+        isExternal
+        href="https://diem25.org"
       >
-        {'ecosocialism'}
-      </InlineLink> (I'm a member of <InlineLink href="https://diem25.org">
         {'DiEM25'}
+      </InlineLink>, of <InlineLink isExternal href="https://partidolivre.pt">
+        {'LIVRE'}
+      </InlineLink> and of the <InlineLink
+        isExternal
+        href="https://ecolecon.eu"
+      >
+        {'European Society of Ecological Economics CONFIRMAR'}
       </InlineLink>).
     </p>
     <p class="mb-3">
@@ -43,19 +56,25 @@ import Layout from '../layouts/Layout.astro';
       That means I'm not really interested in making ultra-advanced robots, but
       more interested in helping people from the whole world live together and
       be happy. I'm in favor of <InlineLink
+        isExternal
         href="https://www.w3.org/standards/faq#std"
         class="italic"
       >
         {'standards'}
       </InlineLink>, free libre open source software (<InlineLink
+        isExternal
         href="https://git.filipesm.eu/filipe/personal-website"
       >
         {'just like this wesbite!'}
-      </InlineLink>), <InlineLink href="https://wikipedia.org/wiki/Copyleft">
+      </InlineLink>), <InlineLink
+        isExternal
+        href="https://wikipedia.org/wiki/Copyleft"
+      >
         <span class="italic">{'copyleft'}</span> licenses
       </InlineLink>
-       and
+      and
       <InlineLink
+        isExternal
         href="https://www.ica.coop/en/cooperatives/what-is-a-cooperative"
       >
         {'cooperatives'}
@@ -63,22 +82,25 @@ import Layout from '../layouts/Layout.astro';
     </p>
     <p class="mb-3">
       I'm very passionate about <InlineLink
+        isExternal
         href="https://doughnuteconomics.org/about-doughnut-economics"
       >
         {'Doughnut Economics'}
-      </InlineLink> and political, social and ecological/environmental
+      </InlineLink> and political, social and ecological/environmental economics.
-      economics. I used to be a progammer. These day I study <InlineLink
+      I used to be a progammer. These day I study <InlineLink
+        isExternal
         href="https://wikipedia.org/wiki/System_Dynamics"
       >
         {'system dynamics'}
       </InlineLink>
-       at the <InlineLink href="https://www.uib.no">
+      at the <InlineLink isExternal href="https://www.uib.no">
         {'University of Bergen'}
       </InlineLink>, so that one day I can be an economist or build policies
       (not to be a politician); who knows, maybe for the Europen Union.
     </p>
     <p class="mb-3">
       I live (at the moment) in <InlineLink
+        isExternal
         href="https://www.bergen.kommune.no"
       >
         {'Bergen, Norway'}
@@ -88,15 +110,17 @@ import Layout from '../layouts/Layout.astro';
       If you wanna see a picture of me, <InlineLink href="/me.jpeg">
         {'here'}
       </InlineLink>
-       you have it!
+      you have it!
     </p>
     <p>
       This website tries to be as sustainable as possible: we save energy on
       your device and on servers. It's powered by renewables (courtesy of <InlineLink
+        isExternal
         href="https://uberspace.de"
       >
         {'Uberspace'}
       </InlineLink>) and heavily inspired by <InlineLink
+        isExternal
         href="https://solar.lowtechmagazine.com"
       >
         {"Low Tech Magazine's solar version"}

frontend/src/pages/index.astro

@@ -19,27 +19,38 @@ import Layout from '../layouts/Layout.astro';
     <p class="mb-3">
       Gosto de política, de ler sobre economia e de animais. Não gosto de
       cozinhar (ainda) nem de vento frio. Ocasionalmente gosto de programar
-      algumas coisas e manter o meu <InlineLink href="https://git.filipesm.eu">
+      algumas coisas e manter o meu <InlineLink
+        isExternal
+        href="https://git.filipesm.eu"
+      >
         {'cantinho'}
       </InlineLink>{' '}
-      <InlineLink href="https://social.filipesm.eu">{'digital'}</InlineLink>.
+      <InlineLink isExternal href="https://social.filipesm.eu">
+        {'digital'}
+      </InlineLink>.
     </p>
     <p class="mb-3">
-      Sou ativista ecológico e ambiental (ajudo a <InlineLink
+      Sou ativista ecológico e ambiental (ajudo organizações de ativismo
-        href="https://climaximo.pt"
+      ambiental
-      >
-        {'Climáximo'}
-      </InlineLink> e outras organizações
       <InlineLink
+        isExternal
         href="https://sicnoticias.pt/pais/2023-05-13-Gas-e-morte-morte-e-Gas-mais-de-150-ativistas-em-marcha-no-centro-de-Sines-b856581e"
       >
-        {'quando posso'}
+        {'de tempos a tempos'}
       </InlineLink>) e apoio o <InlineLink
+        isExternal
         href="https://pt.wikipedia.org/wiki/Ecossocialismo"
       >
         {'ecosocialismo'}
-      </InlineLink> (sou membro do <InlineLink href="https://diem25.org/pt/">
+      </InlineLink> (sou membro do <InlineLink
+        isExternal
+        href="https://diem25.org/pt/"
+      >
         {'DiEM25'}
+      </InlineLink>, do <InlineLink isExternal href="https://partidolivre.pt">
+        {'LIVRE'}
+      </InlineLink> e da <InlineLink isExternal href="https://ecolecon.eu">
+        {'Sociedade Europeia de Economia Ecológia CONFIRMAR'}
       </InlineLink>).
     </p>
     <p class="mb-3">
@@ -47,21 +58,27 @@ import Layout from '../layouts/Layout.astro';
       justa e sustentável. Isso significa que não estou muito interessado em
       fazer robôs ultra-avançados, mas mais interessado em ajudar as pessoas de
       todo o mundo a conviver e serem felizes. Sou a favor de <InlineLink
+        isExternal
         href="https://www.w3.org/standards/faq#std"
         class="italic"
       >
         {'standards'}
       </InlineLink>, <span class="italic">software</span> de código aberto livre
       e grátis (<InlineLink
+        isExternal
         href="https://git.filipesm.eu/filipe/personal-website"
       >
         {'como é este site!'}
-      </InlineLink>), <InlineLink href="https://pt.wikipedia.org/wiki/Copyleft">
+      </InlineLink>), <InlineLink
+        isExternal
+        href="https://pt.wikipedia.org/wiki/Copyleft"
+      >
         {'licenças '}
         <span class="italic">{'copyleft'}</span>
       </InlineLink>
-       e de
+      e de
       <InlineLink
+        isExternal
         href="https://www.ica.coop/en/cooperatives/what-is-a-cooperative"
       >
         {'cooperativas'}
@@ -69,22 +86,27 @@ import Layout from '../layouts/Layout.astro';
     </p>
     <p class="mb-3">
       Sou apaixonado pela <InlineLink
+        isExternal
         href="https://doughnuteconomics.org/about-doughnut-economics"
       >
         {'Economia do Donut'}
-      </InlineLink> e por economia política, social e ambiental/ecológica. Já
+      </InlineLink> e por economia política, social e ambiental/ecológica. Já fui
-      fui programador. Hoje estudo <InlineLink
+      programador. Hoje estudo <InlineLink
+        isExternal
         href="https://pt.wikipedia.org/wiki/Din%C3%A2mica_de_sistemas"
       >
         {'dinâmica de sistemas'}
       </InlineLink>
-       na <InlineLink href="https://www.uib.no">
+      na <InlineLink isExternal href="https://www.uib.no">
         {'Universidade de Bergen'}
       </InlineLink>, para um dia poder ser economista ou construir políticas
       (não ser "político"); quem sabe, talvez para a União Europeia.
     </p>
     <p class="mb-3">
-      Moro (neste momento) em <InlineLink href="https://www.bergen.kommune.no">
+      Moro (neste momento) em <InlineLink
+        isExternal
+        href="https://www.bergen.kommune.no"
+      >
         {'Bergen, Noruega'}
       </InlineLink>.
     </p>
@@ -92,17 +114,15 @@ import Layout from '../layouts/Layout.astro';
       Se quiseres ver-me, tens <InlineLink href="/me.jpeg">
         {'aqui'}
       </InlineLink>
-       uma foto minha!
+      uma foto minha!
     </p>
     <p>
-      Este <span class="italic">site</span> tenta ser o mais sustentável
+      Este <span class="italic">site</span> tenta ser o mais sustentável possível:
-      possível: poupamos energia no teu dispositivo e em servidores. É
+      poupamos energia no teu dispositivo e em servidores. É alimentado por energia
-      alimentado por energia renóvavel (cortesia do <InlineLink
+      renóvavel (cortesia do <InlineLink isExternal href="https://uberspace.de">
-        href="https://uberspace.de"
-      >
         {'Uberspace'}
       </InlineLink>) e teve muita inspiração da
-      <InlineLink href="https://solar.lowtechmagazine.com">
+      <InlineLink isExternal href="https://solar.lowtechmagazine.com">
         {'versão solar da Low Tech Magazine'}
       </InlineLink>.
     </p>

frontend/src/pages/library/index.astro

@@ -5,9 +5,9 @@ import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 
-const libraryItems = await getCollection('library', ({ id }) =>
+const libraryItems = (
-  id.startsWith('en'),
+  await getCollection('library', ({ id }) => id.startsWith('en'))
-);
+).sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 ---
 
 <Layout
@@ -18,25 +18,34 @@ const libraryItems = await getCollection('library', ({ id }) =>
 >
   <header class="mb-10">
     <PageTitle class="mb-3">Library</PageTitle>
-    <h2>
+    <p>
-      Books, articles, <span class="italic">etc.</span> that I've read and
+      Books, articles, <span class="italic">etc.</span> that I've read and recommend
-      recommend or that I want to check out in the near future. If an item has a
+      or that I want to check out in the near future. If an item has a checkmark
-      checkmark "<span class="text-primary-700">✓</span>", that means I've read
+      "<span class="text-primary-700">✓</span>", that means I've read it,
-      it, listened to it,
+      listened to it,
       <span class="italic">etc.</span>
-    </h2>
+    </p>
   </header>
-  <ol>
+  <ol class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 items-start">
     {
-      libraryItems.map(({ data: { title, description, link, checkedOut } }) => (
+      libraryItems.map(
-        <CardLink link={link}>
+        ({ data: { title, description, link, checkedOut, mainAuthor } }) => (
-          <span class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
+          <CardLink link={link} isExternal>
-            {title}
+            <article>
-          </span>
+              <div class="flex gap-2">
-          <p class="mb-5">{description}</p>
+                <h2 class="text-lg sm:text-xl font-medium break-words text-primary-700 block">
-          {checkedOut && <span class="text-primary-700 text-3xl">✓</span>}
+                  {title}
-        </CardLink>
+                </h2>
-      ))
+                {checkedOut && <span class="text-primary-700 text-3xl">✓</span>}
+              </div>
+              {mainAuthor && (
+                <h3 class="mb-3 sm:text-lg text-end">{mainAuthor}</h3>
+              )}
+              <p class="mb-5">{description}</p>
+            </article>
+          </CardLink>
+        ),
+      )
     }
   </ol>
   <Fragment slot="footer">