feat: add microdata

.env.example

@@ -1,3 +1,4 @@
+PUBLIC_SITE_URL=https://biancafiore.me
 PUBLIC_GOOGLE_ANALYTICS_ID=YOUR_PUBLIC_GOOGLE_ANALYTICS_ID
 PUBLIC_GOOGLE_TAG_MANAGER_ID=YOUR_PUBLIC_GOOGLE_TAG_MANAGER_ID
 PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY=YOUR_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY

.gitignore

@@ -43,20 +43,19 @@ jspm_packages/
 *.tgz
 
 # Yarn
-yarn-error.log
 .yarn-integrity
 .pnp/
 .pnp.js
+yarn-error.log
 
 # Environment variables files
 .env*
 !.env.example
 
 # Astro files
 .cache
-public
-dist/
 .astro/
+dist/
 
 # Local Netlify folder
 .netlify/

package.json

@@ -42,7 +42,7 @@
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.7.0",
-		"@astrojs/cloudflare": "^10.3.0",
+		"@astrojs/cloudflare": "^10.4.0",
 		"@astrojs/mdx": "^3.1.0",
 		"@astrojs/partytown": "^2.1.0",
 		"@astrojs/react": "^3.5.0",
@@ -72,7 +72,7 @@
 	},
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.8.0",
-		"@biomejs/biome": "1.8.0",
+		"@biomejs/biome": "1.8.1",
 		"@commitlint/cli": "^19.3.0",
 		"@commitlint/config-conventional": "^19.2.2",
 		"@testing-library/react": "^16.0.0",

public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Disallow: /terms-and-conditions
+Disallow: /privacy-policy
+
+Sitemap: https://www.biancafiore.me/sitemap-index.xml

src/consts.ts

@@ -2,6 +2,7 @@ export const SITE_TITLE = "Bianca Fiore";
 export const SITE_DESCRIPTION = "Welcome to my website!";
 
 export const CONTACT_DETAILS: Record<string, string> = {
+	NAME: "Bianca Fiore",
 	EMAIL_SUBJECT: "Contact form submission",
 	ENCODED_EMAIL_FROM: btoa("[email protected]"),
 	ENCODED_BIANCA_EMAIL: btoa("[email protected]"),

src/content/articles/first-post.md

@@ -4,7 +4,7 @@ description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 08 2024'
 featuredImage: '/src/assets/images/jpg/web-content.jpg'
 tags: ['first', 'post']
-author: 'Bianca Fiore'
+author: 'bianca-fiore'
 slug: 'first-post'
 isFeatured: false
 ---

src/content/articles/markdown-style-guide.md

@@ -4,7 +4,7 @@ description: 'Here is a sample of some basic Markdown syntax that can be used wh
 publishDate: 'Jul 01 2022'
 featuredImage: ''
 tags: ['second', 'post']
-author: 'Bianca Fiore'
+author: 'bianca-fiore'
 slug: 'markdown-style-guide'
 isFeatured: true
 ---

src/content/articles/second-post.md

@@ -4,7 +4,7 @@ description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 22 2022'
 featuredImage: ''
 tags: ['post']
-author: 'Bianca Fiore'
+author: 'bianca-fiore'
 slug: 'second-post'
 isFeatured: true
 ---

src/content/articles/third-post.md

@@ -4,7 +4,7 @@ description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 15 2022'
 featuredImage: '/src/assets/images/jpg/stories-of-impact.jpg'
 tags: ['test', 'post']
-author: 'Bianca Fiore'
+author: 'bianca-fiore'
 slug: 'third-post'
 isFeatured: false
 ---

src/content/articles/using-mdx.mdx

@@ -4,7 +4,7 @@ description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 02 2022'
 featuredImage: ''
 tags: ['empty', 'tags', 'array', 'for', 'now']
-author: 'Bianca Fiore'
+author: 'bianca-fiore'
 slug: 'using-mdx'
 isFeatured: false
 ---

src/content/authors/bianca-fiore.md

@@ -0,0 +1,9 @@
+---
+id: 'bianca-fiore'
+name: 'Bianca Fiore'
+description: 'Best content writter ever'
+jobTitle: 'Chief in Chief'
+currentCompany: 'WorldReader'
+profileImage: '/src/assets/images/jpg/bianca-fiore.jpg'
+socialNetworks: ['https://instagram.com', 'https://x.com', 'https://linkedin.com']
+---

src/content/config.ts

@@ -1,4 +1,4 @@
-import { defineCollection, z } from "astro:content";
+import { defineCollection, reference, z } from "astro:content";
 
 const articles = defineCollection({
 	type: "content",
@@ -9,9 +9,22 @@ const articles = defineCollection({
 		updatedDate: z.coerce.date().optional(),
 		featuredImage: z.string().optional(),
 		tags: z.string().array().optional(),
-		author: z.string(),
+		author: reference("authors"),
 		isFeatured: z.boolean(),
 	}),
 });
 
-export const collections = { articles };
+const authors = defineCollection({
+	type: "content",
+	schema: z.object({
+		id: z.string(),
+		name: z.string(),
+		description: z.string(),
+		jobTitle: z.string(),
+		currentCompany: z.string(),
+		profileImage: z.string().optional(),
+		socialNetworks: z.string().array().optional(),
+	}),
+});
+
+export const collections = { articles, authors };

src/env.d.ts

@@ -1,7 +1,9 @@
 /// <reference path="../.astro/actions.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 interface ImportMetaEnv {
+	readonly PUBLIC_SITE_URL: string;
 	readonly PUBLIC_GOOGLE_ANALYTICS_ID: string;
+	readonly PUBLIC_GOOGLE_TAG_MANAGER_ID: string;
 	readonly PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY: string;
 	readonly GOOGLE_RECAPTCHA_SECRET_KEY: string;
 	readonly FIREBASE_PRIVATE_KEY_ID: string;

src/pages/about.astro

@@ -1,14 +1,47 @@
 ---
+import { CONTACT_DETAILS } from "../consts";
+import { getCollection } from "astro:content";
 import BaseLayout from "@components/templates/baseLayout/BaseLayout.astro";
 import AboutIntro from "@components/molecules/aboutIntro/AboutIntro.astro";
 import LittleMoreOfMe from "@components/organisms/littleMoreOfMe/LittleMoreOfMe.astro";
 import AboutLatestArticles from "@components/organisms/aboutLatestArticles/AboutLatestArticles.astro";
 import Breadcrumbs from "@components/molecules/breadcrumbs/Breadcrumbs.astro";
+
+const authors = await getCollection("authors");
+const articles = await getCollection("articles");
+const bianca = authors.find((author) => author.data.name === CONTACT_DETAILS.NAME);
+const latestArticleByBianca = articles
+	.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf())
+	.find((article) => article.data.author.slug === bianca.data.id);
 ---
 
 <BaseLayout title="" description="">
   <Breadcrumbs classNames="about-page" />
   <AboutIntro />
   <LittleMoreOfMe />
   <AboutLatestArticles />
+  <script type="application/ld+json" set:html= {JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "ProfilePage",
+    "mainEntity": {
+      "@id": "#bianca",
+      "@type": "Person",
+      "name": bianca.data.name,
+      "url": new URL(Astro.url).href,
+      "image": new URL(bianca.data.profileImage, Astro.url).href,
+      "jobTitle": bianca.data.jobTitle,
+      "worksFor": {
+        "@type": "Organization",
+        "name": bianca.data.currentCompany
+      }
+    },
+    "hasPart": [{
+      "@type": "Article",
+      "headline": latestArticleByBianca.data.title,
+      "url": new URL(`articles/${latestArticleByBianca.slug}`, Astro.url).href,
+      "datePublished": latestArticleByBianca.data.publishDate,
+      "author": { "@id": "#bianca" }
+    }],
+    "sameAs":[...bianca.data.socialNetworks]
+  })}/>
 </BaseLayout>

src/pages/articles/[...slug].astro

@@ -1,13 +1,14 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import { getCollection } from "astro:content";
+import { getCollection, getEntry } from "astro:content";
 import { Image } from "astro:assets";
 import BaseLayout from "@components/templates/baseLayout/BaseLayout.astro";
 import "./_article.css";
 import { DEFAULT_DATE_FORMAT } from "src/consts";
 import { slugify } from "@shared/utils/slugify";
 import type { ImageMetadata } from "astro";
 import Breadcrumbs from "@components/molecules/breadcrumbs/Breadcrumbs.astro";
+import { generateExcerpt } from "@shared/utils/generateExcerpt";
 
 export const prerender = true;
 
@@ -31,7 +32,11 @@ const articles = await getCollection("articles");
 
 const { slug } = Astro.params;
 const { currentArticle } = Astro.props as ArticleProps;
-const { featuredImage, author, title, publishDate, tags } = currentArticle.data;
+const { featuredImage, title, author: authorData, publishDate, tags } = currentArticle.data;
+const description =
+	currentArticle.data.description ?? generateExcerpt({ parser, content: currentArticle.body }).excerpt;
+const author = await getEntry(authorData.collection, authorData.slug);
+
 const relatedArticles = articles
 	.filter(({ data }) => data.tags?.some((tag) => data.title !== currentArticle.data.title && tags?.includes(tag)))
 	.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf())
@@ -55,12 +60,12 @@ const { Content } = await currentArticle.render();
     <h1 class="article__title">
       {title}
     </h1>
-    <p class="article__author">by <a href={`/tags/${slugify(author)}`}>{author}</a></p>
+    <p class="article__author">by <a href={`/tags/${author.data.id}`}>{author.data.name}</a></p>
     <time class="article__publish-date font-sans-serif" datetime={String(publishDate)}>
       {publishDate.toLocaleDateString('en', DEFAULT_DATE_FORMAT)}
     </time>
     {
-      (tags && tags?.length > 0) && (
+      tags?.length > 0 && (
         <ul class="article__tags__list flex row-wrap">
           {tags.map((tag) => (
             <li class="article__tag__item">
@@ -74,22 +79,53 @@ const { Content } = await currentArticle.render();
   <article class="article__wrapper">
     <Content />
   </article>
-
+  <script type="application/ld+json" set:html={JSON.stringify(  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": title,
+    "description": description,
+    ...(featuredImage && {"image": featuredImage}),
+    "datePublished": new Date(publishDate).toISOString(),
+    "dateModified": new Date(publishDate).toISOString(),
+    "author": {
+      "@type": "Person",
+      "name": author.data.name,
+      "jobTitle": author.data.jobTitle,
+      "url": new URL("/about", import.meta.env.PUBLIC_SITE_URL)
+    },
+    "publisher": {
+      "name": author.data.name,
+      "url": new URL(import.meta.env.PUBLIC_SITE_URL)
+    },
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "@id": Astro.url.href
+    }
+  })}/>
   {
-    relatedArticles.length > 0 &&
-    <section class="related-articles__wrapper">
-      <h3 class="related-articles__title section-title">You might also like</h3>
-      <ul class="related-articles__list flex row-wrap">
-        {relatedArticles.map((article) => (
-          <li class="related-articles__item flex">
+    relatedArticles.length > 0 && (
+      <section class="related-articles__wrapper">
+        <h3 class="related-articles__title section-title">You might also like</h3>
+        <ul class="related-articles__list flex row-wrap">
+          {relatedArticles.map(async (article) => {
+            const author = await getEntry(authorData.collection, authorData.slug)
+           return <li class="related-articles__item flex">
               <a href={`/articles/${article.slug}`} class="related__article__link">
                 <h4 class="related__article__title">{article.data.title}</h4>
-                <p class="related__article__author">by {article.data?.author}</p>
+                <p class="related__article__author">by {author.data.name}</p>
               </a>
-          </li>
-        ))}
-      </ul>
-    </section>
-  }
-
+            </li>
+          })}
+        </ul>
+      </section>
+      <script type="application/ld+json" set:html={JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "ItemList",
+        "itemListElement": relatedArticles.map((article, index) => ({
+          "@type": "ListItem",
+          "position": index + 1,
+          "url": new URL(article.slug, Astro.url).href
+        }))
+      })}/>
+    )}
 </BaseLayout>

src/pages/articles/_articles.css

@@ -174,7 +174,7 @@
         grid-area: Publish-Date;
     }
 
-    .article__card__description {
+    .article__card__excerpt {
         grid-area: Excerpt;
     }