fix: small fixes

.env.example

@@ -16,4 +16,7 @@ FIREBASE_CLIENT_CERT_URL=YOUR_FIREBASE_CLIENT_CERT_URL
 RESEND_API_KEY=YOUR_RESEND_API_KEY
 CONTENTFUL_SPACE_ID=YOUR_CONTENTFUL_SPACE_ID
 CONTENTFUL_DELIVERY_TOKEN=YOUR_CONTENTFUL_DELIVERY_TOKEN
-CONTENTFUL_PREVIEW_TOKEN=YOUR_CONTENTFUL_PREVIEW_TOKEN
+CONTENTFUL_PREVIEW_TOKEN=YOUR_CONTENTFUL_PREVIEW_TOKEN
+CONTENTFUL_SIGNIN_TOKEN=YOUR_CONTENTFUL_SIGNIN_TOKEN
+ALGOLIA_API_KEY=YOUR_ALGOLIA_API_KEY
+ALGOLIA_APP_ID=YOUR_ALGOLIA_APP_ID

astro.config.mjs

@@ -29,7 +29,7 @@ export default defineConfig({
 			},
 		}),
 	],
-	output: "server",
+	output: "hybrid",
 	adapter: cloudflare({
 		platformProxy: {
 			enabled: isProd,

package.json

@@ -25,7 +25,7 @@
 		"prepare": "husky",
 		"dev": "astro dev",
 		"start": "yarn dev",
-		"build": "astro check && astro build",
+		"build": "astro build",
 		"preview": "astro preview",
 		"sync": "astro sync",
 		"format": "biome check --write",
@@ -51,19 +51,22 @@
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@fontsource/baskervville": "^5.0.20",
 		"@hookform/resolvers": "^3.9.0",
+		"algoliasearch": "^4.24.0",
 		"astro": "^4.13.1",
 		"clsx": "^2.1.1",
 		"contentful": "^10.13.1",
 		"firebase": "^10.12.5",
 		"firebase-admin": "^12.3.0",
 		"gsap": "^3.12.5",
+		"instantsearch.css": "^8.4.0",
 		"markdown-it": "^14.1.0",
 		"million": "^3.1.11",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-globe.gl": "^2.27.2",
 		"react-google-recaptcha-v3": "^1.10.1",
 		"react-hook-form": "^7.52.2",
+		"react-instantsearch": "^7.12.3",
 		"react-router-dom": "^6.26.0",
 		"resend": "^3.5.0",
 		"swiper": "^11.1.9",

src/actions/index.ts

@@ -1,9 +1,10 @@
+// @ts-ignore
 import { ActionError, defineAction, z } from "astro:actions";
 import { DEFAULT_LOCALE_STRING } from "@const/index.ts";
+import { app } from "@infrastructure/database/server.ts";
 import { sendEmail } from "@infrastructure/email/server.ts";
-import { app } from "@infrastructure/firebase/server.ts";
+import type { FormData } from "@ui/modules/contact/components/contactForm";
 import { getFirestore } from "firebase-admin/firestore";
-import type { FormData } from "src/ui/components/contact/contactForm";
 
 type ContactDetails = Omit<FormData, "recaptcha">;
 

src/env.d.ts

@@ -20,6 +20,9 @@ interface ImportMetaEnv {
 	readonly CONTENTFUL_SPACE_ID: string;
 	readonly CONTENTFUL_DELIVERY_TOKEN: string;
 	readonly CONTENTFUL_PREVIEW_TOKEN: string;
+	readonly CONTENTFUL_SIGNIN_TOKEN: string;
+	readonly ALGOLIA_API_KEY: string;
+	readonly ALGOLIA_APP_ID: string;
 }
 
 interface ImportMeta {

src/infrastructure/search/client.ts

@@ -0,0 +1,3 @@
+import algoliasearch from "algoliasearch/lite";
+
+export const client = algoliasearch(process.env.ALGOLIA_APP_ID as string, process.env.ALGOLIA_API_KEY as string);

src/pages/articles/_articles.css

@@ -1,5 +1,5 @@
     .articles__grid__list {
-        gap: 5rem 0;
+        gap: 5rem 3rem;
         margin: 12rem 0;
 
         @media (width <= 960px) {

src/pages/articles/index.astro

@@ -11,11 +11,10 @@ import "./_articles.css";
 
 const { items: rawArticles } = await client.getEntries<RawArticle>({
 	content_type: "article",
+	order: ["-fields.publishDate"],
 });
 
-const articles = articleDTO
-	.render(rawArticles as RawArticle[])
-	.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
+const articles = articleDTO.render(rawArticles as RawArticle[]);
 
 const featuredArticle = getFeaturedArticle(articles);
 ---
@@ -25,7 +24,7 @@ const featuredArticle = getFeaturedArticle(articles);
     <Breadcrumbs />
     <FeaturedArticle featuredArticle={featuredArticle} />
     <section class="articles__grid common-wrapper">
-        <ul class="articles__grid__list flex row-wrap justify-space-between">
+        <ul class="articles__grid__list flex row-wrap">
           {
             articles
                 .filter(({ slug }) => slug !== featuredArticle.slug)

src/pages/index.astro

@@ -5,7 +5,7 @@ import Welcome from "@modules/home/components/welcome/Welcome.astro";
 import BaseLayout from "@shared/ui/components/baseLayout/BaseLayout.astro";
 import LatestArticles from "@shared/ui/components/latestArticles/LatestArticles.astro";
 
-// todo: add Algolia + filters (+ URL filtering) https://www.algolia.com/developers/contentful-search-algolia/
+// todo: add Algolia + filters (+ URL filtering) https://www.algolia.com/developers/contentful-search-algolia/ (webhook problem)
 // todo: check tags semantics (buttons clickable, etc)
 // todo: SEO meta desc and baseLayout data, ARIA, ...
 // todo: how to deploy cloudfare pages

src/pages/rss.xml.ts

@@ -1,20 +1,26 @@
-import { getCollection } from "astro:content";
 import { articleDTO } from "@application/dto/article";
+import type { RawArticle } from "@application/dto/article/types.ts";
 import rss from "@astrojs/rss";
 import { DEFAULT_SEO_PARAMS } from "@const/const.ts";
+import { client } from "@infrastructure/cms/client.ts";
 import type { APIRoute } from "astro";
 
 export const GET: APIRoute = async (context) => {
-	const articles = await articleDTO.render(await getCollection("articles"));
+	const { items: rawArticles } = await client.getEntries<RawArticle>({
+		content_type: "article",
+		order: ["-fields.publishDate"],
+	});
+
+	const articles = articleDTO.render(rawArticles as unknown as RawArticle[]);
 
 	return rss({
 		title: DEFAULT_SEO_PARAMS.TITLE,
 		description: DEFAULT_SEO_PARAMS.DESCRIPTION,
 		site: context.site ?? DEFAULT_SEO_PARAMS.SITE,
 		items: articles.map((article) => ({
-			title: article.data.title,
-			description: article.data.description,
-			pubDate: article.data.publishDate,
+			title: article.title,
+			description: article.description,
+			pubDate: new Date(article.publishDate),
 			link: `/articles/${article.slug}/`,
 		})),
 	});

src/pages/tags/_tag.css

@@ -1,5 +1,5 @@
 .tag__article__list {
-    gap: 0 1rem;
+    gap: 0 3rem;
     margin-block: 2rem;
     position: relative;
 

src/shared/ui/components/articleCard/article-card.css

@@ -4,6 +4,7 @@
 @import url('atoms/articleCardPublishDate/article-card-publish-date.css');
 @import url('atoms/articleCardTagsList/article-card-tags-list.css');
 @import url('atoms/articleCardTitle/article-card-title.css');
+@import url('atoms/articleCardReadingTime/article-card-reading-time.css');
 
     .article__item__wrapper {
         backface-visibility: hidden;
@@ -31,25 +32,23 @@
 
         &.--no-image-variant {
             grid:
-        'Publish-Date' auto
-        'Title' 1fr
-        'Author' auto
-        'Excerpt' auto
-        'Tags' auto
-        'Reading-Time' auto
-        / 1fr;
+        'Publish-Date Publish-Date' auto
+        'Title Title' auto
+        'Author Reading-Time' auto
+        'Excerpt Excerpt' auto
+        'Tags Tags' auto
+        / 1fr 1fr;
         }
 
         &.--default-variant {
             grid:
-        'Publish-Date' auto
-        'Featured-Image' 1fr
-        'Title' auto
-        'Author' auto
-        'Excerpt' auto
-        'Tags' auto
-        'Reading-Time' auto
-        / 1fr;
+        'Publish-Date Publish-Date' auto
+        'Featured-Image Featured-Image' 1fr
+        'Title Title' auto
+        'Author Reading-Time' auto
+        'Excerpt Excerpt' auto
+        'Tags Tags' auto
+        / 1fr 1fr;
         }
 
         &.--is-articles, &.--is-about, &.--is-tag{

src/shared/ui/components/articleCard/atoms/articleCardImage/ArticleCardImage.tsx

@@ -4,5 +4,5 @@ import "./article-card-image.css";
 export type ArticleCardImageProps = Pick<HTMLImageElement, "src" | "alt">;
 
 export const ArticleCardImage = ({ src, alt }: ArticleCardImageProps) => (
-	<Image classNames="article__item__featured" src={src} alt={alt} />
+	<Image classNames="article__item__featured-image" src={src} alt={alt} />
 );

src/shared/ui/components/articleCard/atoms/articleCardReadingTime/article-card-reading-time.css

@@ -1,3 +1,4 @@
 .article__reading-time {
     grid-area: Reading-Time;
+    justify-self: flex-end;
 }

src/shared/ui/components/relatedArticles/RelatedArticles.astro

@@ -12,7 +12,7 @@ const { relatedArticles } = article;
     relatedArticles.length > 0 && (
     <section class="related-articles__wrapper common-wrapper">
         <h3 class="related-articles__title section-title">You might also like</h3>
-        <ul class="related-articles__grid__list flex row-wrap">
+        <ul class="related-articles__grid__list flex row-wrap justify-space-between">
           {relatedArticles.map((relatedArticle, index) => (
               <li class="related-articles__grid__item">
                   <RelatedArticleCard {...relatedArticle} />

src/shared/ui/components/relatedArticles/atoms/relatedArticleCard/related-article-card.css

@@ -23,23 +23,23 @@
 
     &.--no-image-variant {
         grid:
-        'Publish-Date' auto
-        'Title' 1fr
-        'Author' auto
-        'Excerpt' auto
-        'Tags' auto
-        / 1fr;
+        'Publish-Date Publish-Date' auto
+        'Title Title' auto
+        'Author Reading-Time' auto
+        'Excerpt Excerpt' auto
+        'Tags Tags' auto
+        / 1fr 1fr;
     }
 
     &.--default-variant {
         grid:
-        'Publish-Date' auto
-        'Featured-Image' 1fr
-        'Title' auto
-        'Author' auto
-        'Excerpt' auto
-        'Tags' auto
-        / 1fr;
+        'Publish-Date Publish-Date' auto
+        'Featured-Image Featured-Image' 1fr
+        'Title Title' auto
+        'Author Reading-Time' auto
+        'Excerpt Excerpt' auto
+        'Tags Tags' auto
+        / 1fr 1fr;
     }
 }
 

src/ui/modules/about/components/worldGlobe/WorldGlobe.tsx

@@ -135,7 +135,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 						type="button"
 						onClick={() =>
 							handleAction({
-								movementDirection: Direction.CLOCKWISE,
+								movementDirection: Direction.COUNTERCLOCKWISE,
 								type: MovementType.MOVE,
 							})
 						}
@@ -147,7 +147,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 						type="button"
 						onClick={() =>
 							handleAction({
-								movementDirection: Direction.COUNTERCLOCKWISE,
+								movementDirection: Direction.CLOCKWISE,
 								type: MovementType.MOVE,
 							})
 						}