style: minor improvements

src/application/dto/article/articleDTO.ts

@@ -17,7 +17,7 @@ import { renderOptions } from "./utils/renderOptions";
 const PARSER: MarkdownIt = new MarkdownIt();
 
 export const articleDTO: BaseDTO<RawArticle[], ArticleDTO[]> = {
-	render: (raw) => {
+	create: (raw) => {
 		return raw.map((rawArticle) => {
 			const description =
 				rawArticle.fields.description ??

src/application/dto/author/authorDTO.ts

@@ -4,7 +4,7 @@ import { createImage } from "@shared/application/dto/utils/createImage";
 import { getArticlesByAuthor } from "./utils";
 
 export const authorDTO: BaseDTO<RawAuthor[], Promise<AuthorDTO[]>> = {
-	render: async (raw) => {
+	create: async (raw) => {
 		return Promise.all(
 			raw.map(async (rawAuthor) => {
 				const articlesByAuthor = await getArticlesByAuthor(rawAuthor);

src/application/dto/breadcrumb/breadcrumbDTO.ts

@@ -5,7 +5,7 @@ import type { BaseDTO } from "@shared/application/dto/baseDTO.ts";
 export type BreadcrumbDTO = BreadcrumbDTOItem[];
 
 export const breadcrumbDTO: BaseDTO<RawBreadcrumb, BreadcrumbDTO> = {
-	render: ({ currentPath }): BreadcrumbDTO => {
+	create: ({ currentPath }): BreadcrumbDTO => {
 		const pathSegments = currentPath.split("/").filter((segment) => segment.trim() !== "");
 		const breadcrumbs: BreadcrumbDTOItem[] = pathSegments.map((_, index) => {
 			const link = `/${pathSegments.slice(0, index + 1).join("/")}`;

src/application/dto/city/cityDTO.ts

@@ -5,7 +5,7 @@ import type { ContenfulLocation } from "@shared/application/types";
 import { createDate } from "./utils/createDate";
 
 export const cityDTO: BaseDTO<RawCity[], CityDTO[]> = {
-	render: (raw) => {
+	create: (raw) => {
 		return raw.map((rawCity) => {
 			const coordinates = {
 				latitude: (rawCity.fields.coordinates as unknown as ContenfulLocation["fields"]["coordinates"]).lat,

src/application/dto/project/projectDTO.ts

@@ -6,7 +6,7 @@ import type { BaseDTO } from "@shared/application/dto/baseDTO.ts";
 import { createImage } from "@shared/application/dto/utils/createImage";
 
 export const projectDTO: BaseDTO<RawProject[], ProjectDTO[]> = {
-	render: (raw) => {
+	create: (raw) => {
 		return raw.map((rawProject) => {
 			const id = rawProject.fields.id ? rawProject.fields.id : slugify(rawProject.fields.name as unknown as string);
 

src/application/dto/tag/tagDTO.ts

@@ -6,7 +6,7 @@ import { getArticlesByTag } from "./utils/getArticlesByTag";
 import { groupBy } from "./utils/groupBy";
 
 export const tagDTO: BaseDTO<RawTag[], Promise<TagDTO>> = {
-	render: async (raw) => {
+	create: async (raw) => {
 		const articles = await getCollection("articles");
 
 		const tags = await Promise.all(

src/application/dto/testimonial/testimonialDTO.ts

@@ -3,7 +3,7 @@ import type { BaseDTO } from "@shared/application/dto/baseDTO.ts";
 import { createImage } from "@shared/application/dto/utils/createImage";
 
 export const testimonialDTO: BaseDTO<RawTestimonial[], TestimonialDTO[]> = {
-	render: (raw) => {
+	create: (raw) => {
 		return raw.map((rawTestimonial) => {
 			return {
 				author: rawTestimonial.fields.author,

src/application/entities/articles/articles.ts

@@ -10,7 +10,7 @@ export const articles = defineCollection({
 			content_type: "article",
 			order: ["-fields.publishDate"],
 		});
-		const articles = articleDTO.render(rawArticles as unknown as RawArticle[]);
+		const articles = articleDTO.create(rawArticles as unknown as RawArticle[]);
 
 		return articles.map((article) => ({
 			id: article.slug,

src/application/entities/authors/authors.ts

@@ -9,7 +9,7 @@ export const authors = defineCollection({
 		const { items: rawAuthors } = await client.getEntries<RawAuthor>({
 			content_type: "author",
 		});
-		const authors = await authorDTO.render(rawAuthors as unknown as RawAuthor[]);
+		const authors = await authorDTO.create(rawAuthors as unknown as RawAuthor[]);
 
 		return authors.map((author) => ({
 			id: author.name,

src/application/entities/cities/cities.ts

@@ -10,7 +10,7 @@ export const cities = defineCollection({
 			content_type: "city",
 			order: ["fields.startDate"],
 		});
-		const cities = cityDTO.render(rawCities as unknown as RawCity[]);
+		const cities = cityDTO.create(rawCities as unknown as RawCity[]);
 
 		return cities.map((city) => ({
 			id: city.name,

src/application/entities/projects/projects.ts

@@ -10,7 +10,7 @@ export const projects = defineCollection({
 			content_type: "project",
 		});
 
-		return projectDTO.render(rawProjects as unknown as RawProject[]);
+		return projectDTO.create(rawProjects as unknown as RawProject[]);
 	},
 	schema: projectsSchema,
 });

src/application/entities/tags/tags.ts

@@ -11,7 +11,7 @@ export const tags = defineCollection({
 			content_type: "tag",
 		});
 
-		const tags = await tagDTO.render(rawTags as unknown as RawTag[]);
+		const tags = await tagDTO.create(rawTags as unknown as RawTag[]);
 
 		return Object.keys(tags).map((letter) => ({
 			id: letter,

src/application/entities/testimonials/testimonials.ts

@@ -9,7 +9,7 @@ export const testimonials = defineCollection({
 		const { items: rawTestimonials } = await client.getEntries<RawTestimonial>({
 			content_type: "testimonial",
 		});
-		const testimonials = testimonialDTO.render(rawTestimonials as unknown as RawTestimonial[]);
+		const testimonials = testimonialDTO.create(rawTestimonials as unknown as RawTestimonial[]);
 
 		return testimonials.map((testimonial) => ({
 			id: testimonial.author,

src/pages/articles/_article.css

@@ -5,6 +5,13 @@
     line-height: var(--base-line-height);
     margin: 2rem 0;
 
+    @supports (initial-letter: 3 2) {
+        & > p:first-of-type::first-letter {
+            initial-letter: 3 2;
+            padding-right: 0.25rem;
+        }
+    }
+
     @media (width <= 960px) {
         gap: 2rem 0 ;
         padding-inline: 1rem;

src/pages/index.astro

@@ -5,7 +5,7 @@ import MyWork from "@modules/home/components/myWork/MyWork.astro";
 import Testimonials from "@modules/home/components/testimonials/Testimonials.astro";
 import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
-// todo: review classNames (-wraper or __wrapper, etc) (check grid names as well)
+// todo: review classNames (-wraper or __wrapper, etc) --> should be __wrapper
 // todo: check metadata all pages
 // todo: add small transitions & animations
 //        - Latest articles (https://codepen.io/jh3y/pen/MWLyGxo)

src/pages/tags/index.astro

@@ -19,7 +19,7 @@ const tags = await getCollection("tags");
                   <ul class="tags__item__list flex column-wrap">
                     {tags[index].data.tags.map((tag) => (
                         <li class="tag__item font-sans-serif">
-                            <a href={`${PAGES_ROUTES.TAGS}/${tag.slug}`} class="underline-on-action">{tag.name}(&times;{tag.count})</a>
+                            <a href={`${PAGES_ROUTES.TAGS}/${tag.slug}`} class="--underline-on-hover">{tag.name}(&times;{tag.count})</a>
                         </li>
                         <script is:inline type="application/ld+json" set:html={JSON.stringify({
                           '@context': 'https://schema.org',

src/shared/application/dto/baseDTO.ts

@@ -1,3 +1,3 @@
 export type BaseDTO<INPUT, OUTPUT, CONFIGURATION = undefined> = {
-	render: (raw: INPUT, configuration?: CONFIGURATION) => OUTPUT;
+	create: (raw: INPUT, configuration?: CONFIGURATION) => OUTPUT;
 };

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

@@ -3,12 +3,13 @@ import type { SVGProps } from "react";
 
 interface LeftArrowProps extends SVGProps<SVGSVGElement> {
 	classNames?: string;
+	title?: string;
 }
 
-export const LeftArrow = ({ fill = "currentColor", classNames, ...props }: LeftArrowProps) => {
+export const LeftArrow = ({ fill = "currentColor", title = "Arrow", classNames, ...props }: LeftArrowProps) => {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" className={clsx(classNames)} {...props}>
-			<title>Arrow</title>
+			<title>{title}</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/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro

@@ -9,7 +9,7 @@ const articles = await getCollection("articles");
 
 <section class="about-latest-articles__wrapper common-wrapper">
   <h3 class="about-latest-articles__title section-title">
-    Fresh from <a class="clickable underline-on-action" href={`${PAGES_ROUTES.ARTICLES}`}>the blog</a>
+    Fresh from <a class="--is-clickable --underline-on-hover" href={`${PAGES_ROUTES.ARTICLES}`}>the blog</a>
   </h3>
   <div class="about-latest-articles__inner">
     <div class="about-latest-articles__quote__wrapper">

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

@@ -134,7 +134,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 			<div className="world-globe__controls flex row-wrap justify-center">
 				<div className="world-globe__controls__direction-wrapper flex row-wrap">
 					<button
-						className="world-globe__controls__move --left flex clickable"
+						className="world-globe__controls__move --left flex --is-clickable"
 						type="button"
 						onClick={() =>
 							handleAction({
@@ -146,7 +146,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 						<Image src={(horizontalArrow as unknown as ProtoImage).src} alt="Move left" />
 					</button>
 					<button
-						className="world-globe__controls__move --right flex clickable"
+						className="world-globe__controls__move --right flex --is-clickable"
 						type="button"
 						onClick={() =>
 							handleAction({
@@ -160,7 +160,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 				</div>
 				<div className="world-globe__controls__zoom-wrapper flex row-wrap">
 					<button
-						className="world-globe__controls__move --zoom-in clickable"
+						className="world-globe__controls__move --zoom-in --is-clickable"
 						type="button"
 						onClick={() =>
 							handleAction({
@@ -172,7 +172,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 						<Image src={(zoomIn as unknown as ProtoImage).src} alt="Zoom in" />
 					</button>
 					<button
-						className="world-globe__controls__move --zoom-out clickable"
+						className="world-globe__controls__move --zoom-out --is-clickable"
 						type="button"
 						onClick={() =>
 							handleAction({

src/ui/modules/article/components/articleDetails/ArticleDetails.astro

@@ -13,7 +13,7 @@ const { article } = Astro.props as ArticleDetailsProps;
     <h1 class="article__title">
       {article.data.title}
     </h1>
-    <p class="article__author">by <a href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`}>{article.data.author.name}</a></p>
+    <p class="article__author">by <a class="--underline-on-hover" href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`}>{article.data.author.name}</a></p>
     <time class="article__publish-date font-sans-serif" datetime={article.data.publishDate}>
       {article.data.publishDate}
     </time>
@@ -23,7 +23,7 @@ const { article } = Astro.props as ArticleDetailsProps;
           <ul class="article__tags__list flex row-wrap">
             {article.data.tags?.map(({ slug, name }) => (
                 <li class="article__tag__item">
-                    <a href={`${PAGES_ROUTES.TAGS}/${slug}`} class="underline-on-action">#{name}</a>
+                    <a href={`${PAGES_ROUTES.TAGS}/${slug}`} class="--underline-on-hover">#{name}</a>
                 </li>
             ))}
           </ul>

src/ui/modules/articles/components/featuredArticle/FeaturedArticle.astro

@@ -40,22 +40,22 @@ const featuredArticleShareUrl = new URL(`${PAGES_ROUTES.ARTICLES}/${featuredArti
                       featuredArticle.data.tags?.length && (
                           <ul class="featured-article__tags__list flex">
                             {featuredArticle.data.tags?.map(({ name, slug }) => (
-                                <a class="featured-article__tag__item underline-on-action" href={`${PAGES_ROUTES.TAGS}/${slug}`}>
+                                <a class="featured-article__tag__item --underline-on-hover" href={`${PAGES_ROUTES.TAGS}/${slug}`}>
                                     #{name}
                                 </a>
                             ))}
                           </ul>
                       )
                   }
-                    <a href={`${PAGES_ROUTES.ARTICLES}/${featuredArticle.data.slug}`} class="featured-article__cta flex underline-on-action align-center">
+                    <a href={`${PAGES_ROUTES.ARTICLES}/${featuredArticle.data.slug}`} class="featured-article__cta flex --underline-on-hover align-center">
                         Read More
                         <Image src={horizontalArrow} alt="Read more" loading="eager" />
                     </a>
                 </div>
                 <div class="featured-article__share__wrapper flex row-wrap">
                     <p class="featured-article__share__title font-serif">SHARE IT!</p>
                     <ul class="featured-article__share__links__list flex row-nowrap">
-                        <li class="featured-article__share__link__item underline-on-action">
+                        <li class="featured-article__share__link__item --underline-on-hover">
                             <a
                                 target="_blank"
                                 rel="noopener noreferrer"
@@ -64,7 +64,7 @@ const featuredArticleShareUrl = new URL(`${PAGES_ROUTES.ARTICLES}/${featuredArti
                                 Linkedin
                             </a>
                         </li>
-                        <li class="featured-article__share__link__item underline-on-action">
+                        <li class="featured-article__share__link__item --underline-on-hover">
                             <a
                                 target="_blank"
                                 rel="noopener noreferrer"

src/ui/modules/contact/components/contactForm/ContactForm.tsx

@@ -101,7 +101,7 @@ export const ContactForm = () => {
 					onSubmit={(event) => handleSubmit((data) => verifyRecaptcha(data, event))(event)}
 				>
 					<p className="contact-form__text"> My name is</p>
-					<div className="contact-form__input-wrapper underline-on-action">
+					<div className="contact-form__input-wrapper --underline-on-hover">
 						<input
 							id="name"
 							type="text"
@@ -115,7 +115,7 @@ export const ContactForm = () => {
 						{errors.name && <p className="contact-form__input__error-message">{errors.name.message}</p>}
 					</div>
 					<p className="contact-form__text">and my email is</p>
-					<div className="contact-form__input-wrapper underline-on-action">
+					<div className="contact-form__input-wrapper --underline-on-hover">
 						<input
 							id="email"
 							type="text"
@@ -132,7 +132,7 @@ export const ContactForm = () => {
 						I look forward to hearing from you within the next 24 hours to discuss further. <br />I have a message for
 						you,
 					</p>
-					<div className="contact-form__textarea-wrapper flex column-wrap justify-flex-start underline-on-action">
+					<div className="contact-form__textarea-wrapper flex column-wrap justify-flex-start --underline-on-hover">
 						<textarea
 							id="message"
 							placeholder="Why you contact me?"
@@ -159,7 +159,7 @@ export const ContactForm = () => {
 					)}
 					<button
 						ref={submitRef}
-						className="contact-form__submit plane clickable"
+						className="contact-form__submit plane --is-clickable"
 						disabled={formStatus === FormStatus.LOADING}
 						type="submit"
 					>
@@ -173,7 +173,7 @@ export const ContactForm = () => {
 				<div className="contact-form__success-message flex column-wrap">
 					<h4>Form sent correctly! Will be in touch soon</h4>
 					<p>Did you forgot something to say?</p>
-					<button type="button" className="contact-form__success__reset-button clickable" onClick={resetForm}>
+					<button type="button" className="contact-form__success__reset-button --is-clickable" onClick={resetForm}>
 						Make a new inquiry
 					</button>
 				</div>

src/ui/modules/contact/components/tabs/Tabs.astro

@@ -11,8 +11,8 @@ import "./tabs.css";
       <p class="contact-tabs__body">Multiple ways to get in touch with me :)</p>
     </div>
     <ul class="contact-tabs flex">
-      <li class="contact-tab underline-on-action" data-target="tab1">Email me</li>
-      <li class="contact-tab underline-on-action" data-target="tab2">Make an appointment</li>
+      <li class="contact-tab --underline-on-hover" data-target="tab1">Email me</li>
+      <li class="contact-tab --underline-on-hover" data-target="tab2">Make an appointment</li>
     </ul>
     <div id="tab1" class="contact-tab__content --is-active">
       <ContactFormProvider client:load />

src/ui/modules/core/components/articleCard/ArticleCard.astro

@@ -40,13 +40,13 @@ const origin = getLocation(Astro.url);
     </time>
     <h3 class="article__title font-serif inner-section-title">{article.data.title}</h3>
     <p class="article__author">
-        by <a href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`} class="underline-on-action">{article.data.author.name}</a>
+        by <a href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`} class="--underline-on-hover">{article.data.author.name}</a>
     </p>
     <p class="article__excerpt">{article.data.description}</p>
     <p class="article__reading-time">{article.data.readingTime} minutes read</p>
     <ul class="article__tags__list flex">
       {article.data.tags?.map(({ slug, name }, index) => (
-          <a class="article__tag__item underline-on-action" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
+          <a class="article__tag__item --underline-on-hover" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
               #{name}
           </a>
       ))}

src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/ArticleCardAuthor.tsx

@@ -10,7 +10,7 @@ export interface ArticleCardAuthorProps {
 export const ArticleCardAuthor = ({ children, slug }: ArticleCardAuthorProps) => (
 	<p className={"article__author"}>
 		by{" "}
-		<a href={`${PAGES_ROUTES.TAGS}/${slug}`} className="underline-on-action">
+		<a href={`${PAGES_ROUTES.TAGS}/${slug}`} className="--underline-on-hover">
 			{children}
 		</a>
 	</p>

src/ui/modules/core/components/articleCard/atoms/articleCardTagItem/ArticleCardTagItem.tsx

@@ -12,7 +12,7 @@ export interface ArticleCardTagItemProps {
 export const ArticleCardTagItem = ({ children, tag, style }: ArticleCardTagItemProps) => (
 	<a
 		key={tag.name}
-		className="article__tag__item underline-on-action"
+		className="article__tag__item --underline-on-hover"
 		href={`${PAGES_ROUTES.TAGS}/${tag.slug}`}
 		style={style}
 	>

src/ui/modules/core/components/breadcrumbs/Breadcrumbs.astro

@@ -5,7 +5,7 @@ import "./breadcrumbs.css";
 
 const { pathname: currentPath, origin: originPath } = Astro.url;
 
-const breadcrumbs = breadcrumbDTO.render({ currentPath });
+const breadcrumbs = breadcrumbDTO.create({ currentPath });
 const origin = getLocation(Astro.url);
 ---
 
@@ -17,7 +17,7 @@ const origin = getLocation(Astro.url);
       return (
         <li class="breadcrumb__item flex">
           {!isLast ? (
-              <a href={link} class="underline-on-action">{label}</a><span>/</span>
+              <a href={link} class="--underline-on-hover">{label}</a><span>/</span>
             ) : (
             <strong class="--is-current-page">{label}</strong>
             )}

src/ui/modules/core/components/cookieConsent/CookieConsent.tsx

@@ -12,7 +12,11 @@ const CookieConsent = () => {
 	}, []);
 
 	return (
-		<button type="button" className="cookies_consent_button flex justify-center clickable" onClick={showPreferences}>
+		<button
+			type="button"
+			className="cookies_consent_button flex justify-center --is-clickable"
+			onClick={showPreferences}
+		>
 			<Cookie classNames={"cookie_consent_icon"} />
 		</button>
 	);

src/ui/modules/core/components/emailButton/EmailButton.astro

@@ -7,7 +7,7 @@ interface EmailButtonProps {
 const { classNames, text = "Email" } = Astro.props as EmailButtonProps;
 ---
 
-<button class:list={[`${classNames} underline-on-action letter-spacing let mailTo__button`]}>{text}</button>
+<button class:list={[`${classNames} --underline-on-hover --add-letter-spacing let mailTo__button`]}>{text}</button>
 
 <script is:inline data-astro-rerun type="module">
   import { mailTo } from '/src/ui/modules/core/components/emailButton/utils/mailTo';