fix: persist theme on view transitions

src/assets/images/svg-components/cookie/Cookie.tsx

@@ -20,6 +20,7 @@ export const Cookie = ({ fill = "currentColor", classNames, ...props }: CookiePr
 			fill={fill}
 			{...props}
 		>
+			<title>Cookie</title>
 			<g>
 				<path
 					style={{ fillRule: "evenodd", clipRule: "evenodd" }}

src/assets/images/svg-components/leftArrow/LeftArrow.tsx

@@ -8,6 +8,7 @@ interface LeftArrowProps extends SVGProps<SVGSVGElement> {
 export const LeftArrow = ({ fill = "currentColor", classNames, ...props }: LeftArrowProps) => {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" className={clsx(classNames)} {...props}>
+			<title>Arrow</title>
 			<g id="Left">
 				<polygon
 					points="24 12.001 2.914 12.001 8.208 6.706 7.501 5.999 1 12.501 7.5 19.001 8.207 18.294 2.914 13.001 24 13.001 24 12.001"

src/assets/images/svg-components/pin/Pin.tsx

@@ -9,6 +9,7 @@ interface PinProps extends SVGProps<SVGSVGElement> {
 export const Pin = ({ fill, classNames, ...props }: PinProps) => {
 	return (
 		<svg viewBox="-4 0 36 36" className={clsx(classNames)} {...props}>
+			<title>Pin</title>
 			<path
 				fill={fill}
 				d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"

src/const/const.ts

@@ -1,44 +1,45 @@
-import type { CapitalizeKeys, SeoMetadata, WorldGlobeConfig } from './types.ts';
-
-export const DEFAULT_SEO_PARAMS: CapitalizeKeys<SeoMetadata> = {
-  TITLE:"Bianca Fiore",
-  DESCRIPTION: "Welcome to my website!",
-  ROBOTS: {
-    index: true, follow: true
-  }
-}
-
-export const CONTACT_DETAILS: Record<string, string> = {
-  NAME: "Bianca Fiore",
-  EMAIL_SUBJECT: "Contact form submission",
-  ENCODED_EMAIL_FROM: btoa("[email protected]"),
-  ENCODED_EMAIL_BIANCA: btoa(import.meta.env.PUBLIC_BIANCA_EMAIL),
-};
-
-export const WORLD_GLOBE_CONFIG: WorldGlobeConfig = {
-  ANIMATION_DURATION: 500,
-  MOVEMENT_OFFSET: 20,
-  ZOOM_OFFSET: 0.1,
-  POINTS_MERGE: true,
-  ANIMATE_IN: true,
-  SHOW_ATMOSPHERE: false,
-  BACKGROUND_COLOR: "#FFFFFF00",
-  HEXAGON_POLYGON_COLOR: "#d4a259",
-  MESH_PHONG_MATERIAL_CONFIG: {
-    TRANSPARENT: true,
-    COLOR: "#f7ecd6",
-    OPACITY: 0.7,
-  },
-};
-
-export const DEFAULT_DATE_FORMAT: Intl.DateTimeFormatOptions = {
-  weekday: "long",
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-};
-
-export const THEME_STORAGE_KEY = "theme";
-
-export const DEFAULT_LOCALE_STRING: Intl.LocalesArgument = "es-ES";
-
+import type { CapitalizeKeys, SeoMetadata, WorldGlobeConfig } from "./types.ts";
+
+export const DEFAULT_SEO_PARAMS: CapitalizeKeys<SeoMetadata> = {
+	TITLE: "Bianca Fiore",
+	DESCRIPTION: "Welcome to my website!",
+	ROBOTS: {
+		index: true,
+		follow: true,
+	},
+	IMAGE: "/blog-placeholder-1.jpg",
+};
+
+export const CONTACT_DETAILS: Record<string, string> = {
+	NAME: "Bianca Fiore",
+	EMAIL_SUBJECT: "Contact form submission",
+	ENCODED_EMAIL_FROM: btoa("[email protected]"),
+	ENCODED_EMAIL_BIANCA: btoa(import.meta.env.PUBLIC_BIANCA_EMAIL),
+};
+
+export const WORLD_GLOBE_CONFIG: WorldGlobeConfig = {
+	ANIMATION_DURATION: 500,
+	MOVEMENT_OFFSET: 20,
+	ZOOM_OFFSET: 0.1,
+	POINTS_MERGE: true,
+	ANIMATE_IN: true,
+	SHOW_ATMOSPHERE: false,
+	BACKGROUND_COLOR: "#FFFFFF00",
+	HEXAGON_POLYGON_COLOR: "#d4a259",
+	MESH_PHONG_MATERIAL_CONFIG: {
+		TRANSPARENT: true,
+		COLOR: "#f7ecd6",
+		OPACITY: 0.7,
+	},
+};
+
+export const DEFAULT_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+	weekday: "long",
+	year: "numeric",
+	month: "long",
+	day: "numeric",
+};
+
+export const THEME_STORAGE_KEY = "theme";
+
+export const DEFAULT_LOCALE_STRING: Intl.LocalesArgument = "es-ES";

src/const/types.ts

@@ -1,30 +1,31 @@
-export type CapitalizeKeys<T> = {
-  [K in keyof T as Uppercase<K & string>]: T[K] extends object ? CapitalizeKeys<T[K]> : T[K];
-};
-
-interface MeshPhongMaterialConfig {
-  TRANSPARENT: boolean;
-  COLOR: string;
-  OPACITY: number;
-}
-
-export interface WorldGlobeConfig {
-  ANIMATION_DURATION: number;
-  MOVEMENT_OFFSET: number;
-  ZOOM_OFFSET: number;
-  POINTS_MERGE: boolean;
-  ANIMATE_IN: boolean;
-  SHOW_ATMOSPHERE: boolean;
-  BACKGROUND_COLOR: string;
-  HEXAGON_POLYGON_COLOR: string;
-  MESH_PHONG_MATERIAL_CONFIG: MeshPhongMaterialConfig;
-}
-
-export interface SeoMetadata {
-  title: string;
-  description: string;
-  robots?: {
-    index?: boolean;
-    follow?: boolean;
-  }
-}
+export type CapitalizeKeys<T> = {
+	[K in keyof T as Uppercase<K & string>]: T[K] extends object ? CapitalizeKeys<T[K]> : T[K];
+};
+
+interface MeshPhongMaterialConfig {
+	TRANSPARENT: boolean;
+	COLOR: string;
+	OPACITY: number;
+}
+
+export interface WorldGlobeConfig {
+	ANIMATION_DURATION: number;
+	MOVEMENT_OFFSET: number;
+	ZOOM_OFFSET: number;
+	POINTS_MERGE: boolean;
+	ANIMATE_IN: boolean;
+	SHOW_ATMOSPHERE: boolean;
+	BACKGROUND_COLOR: string;
+	HEXAGON_POLYGON_COLOR: string;
+	MESH_PHONG_MATERIAL_CONFIG: MeshPhongMaterialConfig;
+}
+
+export interface SeoMetadata {
+	title: string;
+	description: string;
+	robots?: {
+		index?: boolean;
+		follow?: boolean;
+	};
+	image: string;
+}

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

@@ -8,15 +8,14 @@ import type { ImageMetadata } from "astro";
 import Breadcrumbs from "@components/molecules/breadcrumbs/Breadcrumbs.astro";
 import { articleDTO } from "@application/dto/article/articleDTO";
 import type { ArticleDTO } from "@application/dto/article/articleDTO";
+import RelatedArticles from "@components/organisms/relatedArticles/RelatedArticles.astro";
 
 export const prerender = true;
 
 interface ArticleProps {
-	currentArticle: ArticleDTO;
+	currentArticle: Promise<ArticleDTO>;
 }
 
-const MAX_RELATED_ARTICLES = 3;
-
 export async function getStaticPaths() {
 	const articles = await getCollection("articles");
 
@@ -36,21 +35,13 @@ const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/**/*.{j
 const articles = await getCollection("articles");
 
 const { slug } = Astro.params;
-const { currentArticle } = Astro.props;
+const { currentArticle } = Astro.props as ArticleProps;
 
 const {
-	data: { featuredImage, title, description, author, publishDate, tags, rest },
+	data: { featuredImage, title, description, author, publishDate, tags, ...rest },
 	render,
 } = await currentArticle;
 const { Content } = await render();
-
-const relatedArticles = await Promise.all(
-	articles
-		.filter(({ data }) => data.tags?.some((tag) => data.title !== title && tags?.includes(tag)))
-		.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf())
-		.splice(0, MAX_RELATED_ARTICLES)
-		.map(articleDTO.render),
-);
 ---
 
 <BaseLayout {...rest}>
@@ -60,7 +51,8 @@ const relatedArticles = await Promise.all(
         <Image
           src={images[featuredImage]()}
           alt={title}
-          class="article__featured__image" />
+          class="article__featured__image"
+        />
       </section>
     )
   }
@@ -69,7 +61,7 @@ const relatedArticles = await Promise.all(
     <h1 class="article__title">
       {title}
     </h1>
-    <p class="article__author">by <a href={`/tags/${author.id}`}>{author.name}</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={publishDate}>
       {publishDate}
     </time>
@@ -111,29 +103,5 @@ const relatedArticles = await Promise.all(
       "@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(({ slug, data: { title, author } }, index) => (
-           <li class="related-articles__item flex">
-              <a href={`/articles/${slug}`} class="related__article__link">
-                <h4 class="related__article__title">{title}</h4>
-                <p class="related__article__author">by {author.data.name}</p>
-              </a>
-            </li>
-            <script type="application/ld+json" set:html={JSON.stringify({
-              "@context": "https://schema.org",
-              "@type": "ItemList",
-              "itemListElement": {
-                "@type": "ListItem",
-                "position": index + 1,
-                "url": new URL(slug, Astro.url).href
-              }
-            })}/>
-          ))}
-        </ul>
-      </section>
-    )}
+  <RelatedArticles currentArticle={currentArticle} />
 </BaseLayout>

src/pages/articles/_article.css

@@ -60,32 +60,4 @@
     .full-bleed {
         grid-column: 1 / -1;
     }
-
-    .related-articles__wrapper{
-        margin: 6rem 0;
-        @media (max-width: 960px) {
-            margin: 4rem 0;
-        }
-    }
-
-    .related-articles__item {
-        --items-per-row: 3;
-        justify-content: center;
-        max-width: calc(100% / var(--items-per-row) - 1rem);
-        width: 100%;
-
-        @media (max-width: 960px) {
-            --items-per-row: 1;
-            justify-content: flex-start;
-        }
-    }
-
-    .related-articles__list {
-        gap: 1rem 0;
-        padding: 0 1rem;
-
-        @media (max-width: 960px) {
-            margin: 2rem 0;
-        }
-    }
 }