a lot of new stuff; not building but running in dev

frontend/src/components/BlogPostMetadata.astro

@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import { getImage } from 'astro:assets';
+import allLinkPreviewImages from '../lib/allLinkPreviewImages';
 
 export type Props = CollectionEntry<'blog'>['data']['linkPreview'];
 
@@ -8,11 +9,9 @@ const { description, image, title } = Astro.props;
 
 const imageUrl = (
   await getImage({
-    src: import.meta
-      .glob('/src/assets/blog/*.{jpeg,jpg,png,gif,webp}')
-      [image.path](),
-    width: 2,
-    height: 3,
+    src: allLinkPreviewImages[image.path](),
+    width: 1200,
+    height: 630,
   })
 ).src;
 ---

frontend/src/components/mdx/blogPostComponents.ts

@@ -12,7 +12,7 @@ import Heading4 from './components/Heading4.astro';
 import Heading5 from './components/Heading5.astro';
 import Heading6 from './components/Heading6.astro';
 import Paragraph from './components/Paragraph.astro';
-import FootnoteMark from './components/FootnoteMark.astro';
+import Footnote from './components/Footnote.astro';
 
 const components = {
   img: ShowableFigure,

frontend/src/components/mdx/components/Footnote.astro

@@ -1,5 +1,4 @@
 ---
-import type { PortableTextListItemBlock } from '@portabletext/types';
 import InlineLink from '../../InlineLink.astro';
 import langToFootnoteString from '../../../lib/langToFootnoteString';
 

frontend/src/components/mdx/components/ShowableFigure.astro

@@ -1,30 +1,21 @@
 ---
-import { PortableText } from 'astro-portabletext';
 import ShowableImage from './ShowableImage.astro';
-import type { Props as ShowableImageProps } from './ShowableImage.astro';
-import InlineLink from './InlineLink.astro';
 
-export interface Props extends ShowableImageProps {}
+const caption = Astro.slots.default;
 
-const { node: value } = Astro.props;
+console.log();
 ---
 
 {
-  !value.caption ? (
+  !caption ? (
     <ShowableImage {...Astro.props} />
   ) : (
     <figure class="flex flex-col gap-1 mb-4 mt-4">
       <ShowableImage {...Astro.props} />
-      <figcaption class="text-sm text-start">
-        <PortableText
-          components={{
-            mark: {
-              link: InlineLink,
-            },
-          }}
-          value={value.caption}
-        />
-      </figcaption>
+      <figcaption
+        class="text-sm text-start"
+        set:html={Astro.slots.render('default')}
+      />
     </figure>
   )
 }

frontend/src/components/mdx/components/ShowableImage.astro

@@ -1,35 +1,27 @@
 ---
-import type { PortableTextBlock } from '@portabletext/types';
-import urlFor from '../../../lib/cms/urlFor';
+import { Image, getImage } from 'astro:assets';
 
-export interface Props {
-  node: BlogPostContentImage;
-}
-
-export interface BlogPostContentImage {
-  lqip: string;
-  _type: 'image';
-  asset: {
-    _type: 'reference';
-    ref: string;
-  };
-  caption: PortableTextBlock[];
-  aspectRatio: number;
-  altText: string;
-}
-
-const { node: value } = Astro.props;
+const originalImageUrl = (
+  await getImage({
+    src: (await import(/* @vite-ignore */ Astro.props.src.src)).default,
+    // these dimensions are required by https://docs.astro.build/en/reference/errors/missing-image-dimension/
+    // although we don't need them here because I will replace this big image over the scaled down version
+    // so we avoid CLS "manually" :)
+    width: 100000,
+    height: 100000,
+  })
+).src;
 ---
 
 <showable-image>
   <div class="relative w-full group" role="button" data-wrapper>
-    <img
-      src={value.lqip}
-      alt={`${value.altText} Quando esta página carrega, esta imagem está desfocada para poupar dados e energia. Podes carregar na imagem para mostrar a imagem completa.`}
+    <Image
+      src={Astro.props.src}
+      alt={`${Astro.props.alt} Quando esta página carrega, esta imagem está desfocada para poupar dados e energia. Podes carregar na imagem para mostrar a imagem completa.`}
       class="w-full border-2 border-primary-800"
-      data-url={urlFor(value).url()}
-      style={{ aspectRatio: value.aspectRatio }}
-      title={value.altText}
+      data-url={originalImageUrl}
+      title={Astro.props.alt}
+      height={10}
     />
     <div
       data-tooltip

frontend/src/content/blog/pt/somos-uma-familia-pobre copy.mdx

@@ -0,0 +1,35 @@
+---
+title: '“Somos uma família pobre”: como o caso da Nobre é um sintoma da doença capitalista'
+subtitle: >
+  Depois das manifestações e greves dos trabalhadores e trabalhadoras da Nobre Alimentação,
+  fica mais uma vez claro que a máquina de gerar lucros que é o capitalismo não cumpre
+  o seu propósito na sociedade.
+slug: somos-uma-familia-pobre-a-doenca-capitalista-copy
+summary: >
+  No dia 1 de maio, uma análise das greves e manifestações das trabalhadoras da
+  Nobre e como o sistema capitalista provoca esta situação de forma permanente.
+publishDate: 2023-05-01
+linkPreview:
+  image:
+    path: /src/assets/blog/link-preview-images/somos-uma-familia-pobre_link-preview-image.jpeg
+    altText: >
+      Uma foto de uma manifestação, mas que só mostra as bandeiras que as pessoas
+      seguram sobre as suas cabeça. A bandeira no centro é roxa, da Extinction Rebellion.
+      Também há um punho vermelho socialista, de cartão. No fundo, vê-se um prédio alto,
+      desfocado.
+---
+
+import ShowableFigure from '../../../components/mdx/components/ShowableFigure.astro'
+import Footnote from '../../../components/mdx/components/Footnote.astro'
+import image from '../../../assets/blog/posts/somos-uma-familia-pobre/somos-uma-familia-pobre.jpeg'
+
+Recentemente, com grande taxa de adesão, as trabalhadoras e trabalhadores da Nobre Alimentação - conhecida pelo fabrico de enchidos - [organizaram greves e manifestações](https://sicnoticias.pt/pais/2023-04-28-Uma-familia-pobre-trabalhadores-da-Nobre-em-greve-9e790445), utilizando essas ferramentas fundamentais para expressar o seu profundo descontentamento em relação à empresa.
+Lutam por salários mais altos, carga horária mais baixa e mais dias de férias, para além de um sistema de progressão nas carreiras que, até agora, parece ser completamente inexistente.
+Nas manifestações, a falar à comunicação social, uma das funcionárias afirma que a empresa criou um lema interno que usava para comunicar às pessoas que lá trabalham: “Somos uma família Nobre”.
+As manifestantes aproveitaram para virar este lema do avesso e trazê-lo para a realidade que conhecem: “Somos uma família pobre”.
+
+# Something
+
+<ShowableFigure src={image} alt="alt text">Some [caption](https://example.com)</ShowableFigure>
+
+<Footnote>Olá</Footnote>

frontend/src/content/blog/pt/somos-uma-familia-pobre.mdx

@@ -11,7 +11,7 @@ summary: >
 publishDate: 2023-05-01
 linkPreview:
   image:
-    path: /src/assets/blog/somos-uma-familia-pobre_link-preview-image.jpeg
+    path: /src/assets/blog/link-preview-images/somos-uma-familia-pobre_link-preview-image.jpeg
     altText: >
       Uma foto de uma manifestação, mas que só mostra as bandeiras que as pessoas
       seguram sobre as suas cabeça. A bandeira no centro é roxa, da Extinction Rebellion.
@@ -19,6 +19,10 @@ linkPreview:
       desfocado.
 ---
 
+import ShowableFigure from '../../../components/mdx/components/ShowableFigure.astro'
+import Footnote from '../../../components/mdx/components/Footnote.astro'
+import image from '../../../assets/blog/posts/somos-uma-familia-pobre/somos-uma-familia-pobre.jpeg'
+
 Recentemente, com grande taxa de adesão, as trabalhadoras e trabalhadores da Nobre Alimentação - conhecida pelo fabrico de enchidos - [organizaram greves e manifestações](https://sicnoticias.pt/pais/2023-04-28-Uma-familia-pobre-trabalhadores-da-Nobre-em-greve-9e790445), utilizando essas ferramentas fundamentais para expressar o seu profundo descontentamento em relação à empresa.
 Lutam por salários mais altos, carga horária mais baixa e mais dias de férias, para além de um sistema de progressão nas carreiras que, até agora, parece ser completamente inexistente.
 Nas manifestações, a falar à comunicação social, uma das funcionárias afirma que a empresa criou um lema interno que usava para comunicar às pessoas que lá trabalham: “Somos uma família Nobre”.
@@ -26,4 +30,6 @@ As manifestantes aproveitaram para virar este lema do avesso e trazê-lo para a
 
 # Something
 
-Go there [there](#something)
+<ShowableFigure src={image} alt="alt text">Some [caption](https://example.com)</ShowableFigure>
+
+<Footnote>Olá</Footnote>

frontend/src/lib/allLinkPreviewImages.ts

@@ -0,0 +1,5 @@
+const allLinkPreviewImages = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/blog/link-preview-images/**/*.{jpeg,jpg,png,gif,webp}',
+);
+
+export default allLinkPreviewImages;

frontend/src/lib/cms/client.ts

@@ -1,12 +0,0 @@
-import { createClient } from '@sanity/client';
-
-const client = createClient({
-  projectId: 'tzamgyrm',
-  dataset: 'production',
-  apiVersion: '2023-02-08',
-  useCdn: false,
-  token: import.meta.env.PUBLIC_SANITY_TOKEN,
-  perspective: import.meta.env.DEV ? 'previewDrafts' : 'published',
-});
-
-export default client;

frontend/src/lib/cms/queries/blogPosts.ts

@@ -1,41 +0,0 @@
-import groq from 'groq';
-
-export const forBlogPostPage = groq`
-    *[
-        _type == "blogPost" &&
-        language == $lang
-    ]
-    {
-        "slug": slug.current,
-        title,
-        subtitle,
-        content[]{
-            _type == 'image' => {
-                ...,
-                "lqip": @.asset->metadata.lqip,
-                "alt": @.asset->altText,
-                "aspectRatio": @.asset->metadata.dimensions.aspectRatio
-            },
-            _type != 'image' => @
-        },
-        headerImage,
-        readTime,
-        publishDate,
-        linkPreviewImage,
-        linkPreviewDescription,
-        twitterCardType
-    }`;
-
-export const forBlogPage = groq`
-    *[
-        _type == "blogPost" &&
-        language == $lang
-    ]
-    {
-        title,
-        summary,
-        publishDate,
-        "slug": slug.current
-    }
-    | order(publishDate desc)
-`;

frontend/src/lib/cms/queries/libraryItems.ts

@@ -1,14 +0,0 @@
-import groq from 'groq';
-
-export const forLibraryPage = groq`
-    *[
-        _type == "libraryItem" &&
-        language == $lang
-    ]
-    {
-        title,
-        description,
-        checkedOut,
-        link
-    }
-`;

frontend/src/lib/cms/types.ts

@@ -1,5 +0,0 @@
-export interface ImageObject {
-  _type: 'image';
-  _key: string;
-  asset: { _type: 'reference'; ref: string };
-}

frontend/src/lib/cms/urlFor.ts

@@ -1,10 +0,0 @@
-import urlBuilder from '@sanity/image-url';
-import type { SanityImageSource } from '@sanity/image-url/lib/types/types';
-
-import client from './client';
-
-const builder = urlBuilder(client);
-
-export default function urlFor(source: SanityImageSource) {
-  return builder.image(source);
-}

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

@@ -1,58 +1,54 @@
 ---
-import type { PortableTextBlock } from "@portabletext/types";
-import client from "../../../lib/cms/client";
-import { forBlogPostPage } from "../../../lib/cms/queries/blogPosts";
-import BlogPostContent from "../../../components/portableText/BlogPostContent.astro";
-import BlogPostSubtitle from "../../../components/portableText/BlogPostSubtitle.astro";
-import ButtonLink from "../../../components/ButtonLink.astro";
-import PageTitle from "../../../components/PageTitle.astro";
-import Layout from "../../../layouts/Layout.astro";
-import BlogPostMetadata from "../../../components/BlogPostMetadata.astro";
-import type { ImageObject } from "../../../lib/cms/types";
-import BlogPostFootnotes from "../../../components/BlogPostFootnotes.astro";
+import BlogPostSubtitle from '../../../components/mdx/BlogPostSubtitle.astro';
+import ButtonLink from '../../../components/ButtonLink.astro';
+import PageTitle from '../../../components/PageTitle.astro';
+import Layout from '../../../layouts/Layout.astro';
+import BlogPostMetadata from '../../../components/BlogPostMetadata.astro';
+import BlogPostFootnotes from '../../../components/BlogPostFootnotes.astro';
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import blogPostComponents from '../../../components/mdx/blogPostComponents';
 
 export interface Props {
-  title: string;
-  subtitle: PortableTextBlock[];
-  content: PortableTextBlock[];
-  publishDate: string;
-  headerImage: ImageObject;
-  summary: string;
-  readTime: string;
-  twitterCardType: "summary" | "summary_large_image" | "player" | "app";
-  linkPreviewDescription: string;
-  linkPreviewImage: ImageObject;
+  blogPost: CollectionEntry<'blog'>;
 }
 
 export async function getStaticPaths() {
-  const posts: (Props & {
-    slug: string;
-  })[] = await client.fetch(forBlogPostPage, {
-    lang: "en_EN",
-  });
+  const posts = await getCollection('blog', ({ id }) => id.startsWith('pt'));
 
   return posts.map(({ slug, ...blogPost }) => {
     return {
       params: { slug },
-      props: blogPost,
+      props: { blogPost },
     };
   });
 }
 
-const {
-  title,
-  content,
-  subtitle,
-  publishDate,
-  headerImage,
-  summary,
-  readTime,
-  twitterCardType,
-  linkPreviewDescription,
-  linkPreviewImage,
-} = Astro.props;
-
+const { blogPost } = Astro.props;
 const { slug } = Astro.params;
+
+const {
+  data: {
+    title,
+    subtitle,
+    summary,
+    publishDate,
+    linkPreview: {
+      title: linkPreviewTitle,
+      description: linkPreviewDescription,
+      image: linkPreviewImage,
+    },
+  },
+  body,
+} = blogPost;
+
+const readTime = Math.ceil(body.length / 5 / 180);
+
+const { Content } = await blogPost.render();
+
+const formattedPublishDate = publishDate.toLocaleDateString('pt', {
+  dateStyle: 'short',
+});
 ---
 
 <Layout
@@ -63,24 +59,25 @@ const { slug } = Astro.params;
 >
   <BlogPostMetadata
     slot="metadata"
-    title={title}
+    title={linkPreviewTitle ?? title}
     description={linkPreviewDescription ?? summary}
-    image={linkPreviewImage ?? headerImage}
-    twitterCardType={twitterCardType}
+    image={linkPreviewImage}
   />
   <article class="max-w-prose m-auto pt-8">
     <header class="mb-5">
       <PageTitle class="mb-2 break-words">{title}</PageTitle>
       <BlogPostSubtitle content={subtitle} />
       <span class="text-lg sm:text-xl">
-        <time datetime={publishDate}>{publishDate}</time>
-        &bull;
+        <time datetime={formattedPublishDate}>{formattedPublishDate}</time>
+         &bull;
         {readTime}
       </span>
     </header>
-    <BlogPostContent content={content} />
+    <div class="text-justify">
+      <Content components={blogPostComponents} />
+    </div>
     <hr class="my-5 border-t border-primary-700" />
-    <BlogPostFootnotes blogPostContent={content} />
+    <!-- <BlogPostFootnotes blogPostContent={content} /> -->
   </article>
   <Fragment slot="footer">
     <nav class="flex gap-4">

frontend/src/pages/blog/index.astro

@@ -1,19 +1,11 @@
 ---
-import client from '../../lib/cms/client';
-import { forBlogPage } from '../../lib/cms/queries/blogPosts';
+import { getCollection } from 'astro:content';
 import ButtonLink from '../../components/ButtonLink.astro';
 import CardLink from '../../components/CardLink.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 
-const posts: {
-  title: string;
-  publishDate: string;
-  summary: string;
-  slug: string;
-}[] = await client.fetch(forBlogPage, {
-  lang: 'en_EN',
-});
+const posts = await getCollection('blog', ({ id }) => id.startsWith('en'));
 ---
 
 <Layout title="Blog - Filipe Medeiros" ptUrl="/blogue" enUrl="/blog" lang="en">
@@ -23,14 +15,21 @@ const posts: {
   </header>
   <ol>
     {
-      posts.map(({ title, slug, publishDate, summary }) => (
+      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">
               {title}
             </span>
-            <time datetime={publishDate} class="text-sm text-primary-800">
-              {publishDate}
+            <time
+              datetime={publishDate.toLocaleDateString('pt', {
+                dateStyle: 'short',
+              })}
+              class="text-sm text-primary-800"
+            >
+              {publishDate.toLocaleDateString('pt', {
+                dateStyle: 'short',
+              })}
             </time>
             <span>{summary}</span>
           </article>

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

@@ -44,7 +44,7 @@ const {
 
 const readTime = Math.ceil(body.length / 5 / 180);
 
-const { Content, headings } = await blogPost.render();
+const { Content } = await blogPost.render();
 
 const formattedPublishDate = publishDate.toLocaleDateString('pt', {
   dateStyle: 'short',