update metadata component

2024-03-12 18:35:38 +00:00 · 2024-03-12 18:35:38 +00:00 · 048ccc6ac8
parent dbfea415e5
commit 048ccc6ac8
11 changed files with 78 additions and 73 deletions
--- a/frontend/src/components/BlogPostMetadata.astro
+++ b/frontend/src/components/BlogPostMetadata.astro
@ -1,26 +0,0 @@
---
-import type { CollectionEntry } from 'astro:content';
-import { getImage } from 'astro:assets';
-import allLinkPreviewImages from '../lib/allLinkPreviewImages';
-
-export type Props = CollectionEntry<'blog'>['data']['linkPreview'];
-
-const { description, image, title } = Astro.props;
-
-const imageUrl = (
-  await getImage({
-    src: allLinkPreviewImages[image.path](),
-    width: 1200,
-    height: 630,
-  })
-).src;
---
-
-<meta name="og:title" content={title} />
-<meta name="twitter:title" content={title} />
-<meta name="description" content={description} />
-<meta name="og:description" content={description} />
-<meta name="twitter:description" content={description} />
-<meta name="og:image" content={imageUrl} />
-<meta name="og:image:alt" content={image.altText} />
-<!-- I exclude Twitter meta tags on purpose :) I miss Twitter -->
--- a/frontend/src/components/Metadata.astro
+++ b/frontend/src/components/Metadata.astro
@ -0,0 +1,33 @@
+---
+import { getImage } from 'astro:assets';
+import allLinkPreviewImages from '../lib/allLinkPreviewImages';
+
+export interface Props {
+  title: string;
+  description: string;
+  image?: {
+    path: string;
+    altText: string;
+  };
+}
+
+const { description, image, title } = Astro.props;
+
+const imageUrl = image
+  ? (
+      await getImage({
+        src: allLinkPreviewImages[image.path](),
+        width: 1200,
+        height: 630,
+      })
+    ).src
+  : null;
+---
+
+<title>{title}</title>
+<meta name="og:title" content={title} />
+<meta name="description" content={description} />
+<meta name="og:description" content={description} />
+{imageUrl && <meta name="og:image" content={imageUrl} />}
+{image && <meta name="og:image:alt" content={image.altText} />}
+<!-- I exclude Twitter meta tags on purpose :) I miss Twitter -->
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@ -2,13 +2,12 @@
 import InlineLink from '../components/InlineLink.astro';

 export interface Props {
-  title: string;
  ptUrl: string;
  enUrl: string;
  lang: string;
 }

-const { title, ptUrl, enUrl, lang } = Astro.props;
+const { ptUrl, enUrl, lang } = Astro.props;
 const { footer } = Astro.slots;
 const hasFooter = !!footer;
 ---
@ -18,7 +17,6 @@ const hasFooter = !!footer;
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/favicon" href="/favicon.ico" />
-    <title>{title}</title>
    <slot name="metadata" />
  </head>
  <body class="bg-orange-50 font-serif">
--- a/frontend/src/pages/biblioteca/index.astro
+++ b/frontend/src/pages/biblioteca/index.astro
@ -1,6 +1,7 @@
 ---
 import ButtonLink from '../../components/ButtonLink.astro';
 import CardLink from '../../components/CardLink.astro';
+import Metadata from '../../components/Metadata.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
@ -10,12 +11,11 @@ const libraryItems = (
 ).sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 ---

-<Layout
-  title="Biblioteca - Filipe Medeiros"
-  ptUrl="/biblioteca"
-  enUrl="/library"
-  lang="pt"
->
+<Layout ptUrl="/biblioteca" enUrl="/library" lang="pt">
+  <Metadata
+    title="Biblioteca - Filipe Medeiros"
+    description="A minha biblioteca. Aqui podes encontrar pequenas avaliações que faço de livros e outras coisas."
+  />
  <header class="mb-10">
    <PageTitle class="mb-3">Biblioteca</PageTitle>
    <p>
--- a/frontend/src/pages/blog/[slug]/index.astro
+++ b/frontend/src/pages/blog/[slug]/index.astro
@ -3,7 +3,7 @@ import BlogPostSubtitle from '../../../components/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 Metadata from '../../../components/Metadata.astro';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import blogPostComponents from '../../../components/mdx/blogPostComponents';
@ -53,15 +53,10 @@ const formattedPublishDate = publishDate.toLocaleDateString('pt', {
 });
 ---

-<Layout
-  title={`${title} - Filipe Medeiros`}
-  ptUrl={`/blogue/${slug}`}
-  enUrl={`/blog/${slug}`}
-  lang="en"
->
-  <BlogPostMetadata
+<Layout ptUrl={`/blogue/${slug}`} enUrl={`/blog/${slug}`} lang="en">
+  <Metadata
    slot="metadata"
-    title={linkPreviewTitle ?? title}
+    title={linkPreviewTitle ?? `${title} - Filipe Medeiros`}
    description={linkPreviewDescription ?? summary}
    image={linkPreviewImage}
  />
--- a/frontend/src/pages/blog/index.astro
+++ b/frontend/src/pages/blog/index.astro
@ -4,13 +4,18 @@ import ButtonLink from '../../components/ButtonLink.astro';
 import CardLink from '../../components/CardLink.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
+import Metadata from '../../components/Metadata.astro';

 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">
+<Layout ptUrl="/blogue" enUrl="/blog" lang="en">
+  <Metadata
+    title="Blog - Filipe Medeiros"
+    description="My blog. The posts are mostly about politics, economics or related topics. Sometimes, these entries are translations from the Portuguese versions."
+  />
  <header class="mb-10">
    <PageTitle class="mb-3">Blog</PageTitle>
    <p>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</p>
--- a/frontend/src/pages/blogue/[slug]/index.astro
+++ b/frontend/src/pages/blogue/[slug]/index.astro
@ -3,7 +3,7 @@ import BlogPostSubtitle from '../../../components/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 Metadata from '../../../components/Metadata.astro';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import blogPostComponents from '../../../components/mdx/blogPostComponents';
@ -53,15 +53,10 @@ const formattedPublishDate = publishDate.toLocaleDateString('pt', {
 });
 ---

-<Layout
-  title={`${title} - Filipe Medeiros`}
-  ptUrl={`/blogue/${slug}`}
-  enUrl={`/blog/${slug}`}
-  lang="pt"
->
-  <BlogPostMetadata
+<Layout ptUrl={`/blogue/${slug}`} enUrl={`/blog/${slug}`} lang="pt">
+  <Metadata
    slot="metadata"
-    title={linkPreviewTitle ?? title}
+    title={linkPreviewTitle ?? `${title} - Filipe Medeiros`}
    description={linkPreviewDescription ?? summary}
    image={linkPreviewImage}
  />
--- a/frontend/src/pages/blogue/index.astro
+++ b/frontend/src/pages/blogue/index.astro
@ -1,6 +1,7 @@
 ---
 import ButtonLink from '../../components/ButtonLink.astro';
 import CardLink from '../../components/CardLink.astro';
+import Metadata from '../../components/Metadata.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';

@ -11,12 +12,8 @@ const posts = (
 ).sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
 ---

-<Layout
-  title="Blogue - Filipe Medeiros"
-  ptUrl="/blogue"
-  enUrl="/blog"
-  lang="pt"
->
+<Layout ptUrl="/blogue" enUrl="/blog" lang="pt">
+  <Metadata title="Blogue - Filipe Medeiros" description="" />
  <header class="mb-10">
    <PageTitle class="mb-3">Blogue</PageTitle>
    <p>Uma coleção de artigos que vou escrevendo. Sobretudo por diversão.</p>
--- a/frontend/src/pages/home.astro
+++ b/frontend/src/pages/home.astro
@ -1,11 +1,17 @@
 ---
 import ButtonLink from '../components/ButtonLink.astro';
 import InlineLink from '../components/InlineLink.astro';
+import Metadata from '../components/Metadata.astro';
 import PageTitle from '../components/PageTitle.astro';
 import Layout from '../layouts/Layout.astro';
 ---

-<Layout title="Home page - Filipe Medeiros" ptUrl="/" enUrl="/home" lang="en">
+<Layout ptUrl="/" enUrl="/home" lang="en">
+  <Metadata
+    title="Home page - Filipe Medeiros"
+    description="My personal website. It includes a blog and a space where I review books and othet stuff."
+    slot="metadata"
+  />
  <PageTitle class="mb-10">
    Filipe<br />Medeiros
  </PageTitle>
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@ -3,14 +3,16 @@ import ButtonLink from '../components/ButtonLink.astro';
 import InlineLink from '../components/InlineLink.astro';
 import PageTitle from '../components/PageTitle.astro';
 import Layout from '../layouts/Layout.astro';
+import Metadata from '../components/Metadata.astro';
 ---

-<Layout
-  title="Página inicial - Filipe Medeiros"
-  ptUrl="/"
-  enUrl="/home"
-  lang="pt"
->
+<Layout ptUrl="/" enUrl="/home" lang="pt">
+  <Metadata
+    title="Página inicial - Filipe Medeiros"
+    description="O meu website pessoal. Inclui um blogue e um espaço onde avalio livros e outras coisas."
+    slot="metadata"
+  />
+
  <PageTitle class="mb-10">
    Filipe<br />Medeiros
  </PageTitle>
--- a/frontend/src/pages/library/index.astro
+++ b/frontend/src/pages/library/index.astro
@ -1,6 +1,7 @@
 ---
 import ButtonLink from '../../components/ButtonLink.astro';
 import CardLink from '../../components/CardLink.astro';
+import Metadata from '../../components/Metadata.astro';
 import PageTitle from '../../components/PageTitle.astro';
 import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
@ -10,12 +11,11 @@ const libraryItems = (
 ).sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 ---

-<Layout
-  title="Library - Filipe Medeiros"
-  ptUrl="/biblioteca"
-  enUrl="/library"
-  lang="en"
->
+<Layout ptUrl="/biblioteca" enUrl="/library" lang="en">
+  <Metadata
+    title="Library - Filipe Medeiros"
+    description="My library. Here, you you find my small reviews of books I read and other stuff."
+  />
  <header class="mb-10">
    <PageTitle class="mb-3">Library</PageTitle>
    <p>