feat: add authors to page

src/app/article/[slug]/article.module.css

@@ -53,4 +53,11 @@
 
 .content img {
     max-width: 100%;
+}
+
+.authors {
+    display: flex;
+    gap: 25px;
+    flex-wrap: wrap;
+    margin: 30px 0;
 }

src/app/article/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { articleTypes, getArticle } from '@/utils/news';
 import { NEWS_DEFAULT_BANNER, NEWS_IMAGES_URL } from '@/utils/constants';
 import Footer from '@/components/Footer';
 import Markdown from 'react-markdown';
+import Author from '@/components/News/Author';
 
 type Props = {
   params: {
@@ -30,6 +31,12 @@ const ArticlePage: React.FC<Props> = async ({ params }) => {
     </Header>
 
     <main className={styles.main}>
+      <div className={styles.authors}>
+        {
+          article.authors.map(author => <Author key={author.displayName} {...author} />)
+        }
+      </div>
+
       <div className={styles.content}>
         <Markdown>{article.content}</Markdown>
       </div>

src/app/globals.css

@@ -5,7 +5,7 @@
   --maxWidth: 1200px;
 
   --background: white;
-  --foreground: #333;
+  --foreground: #7A7A7A;;
 
   --heroBackground: #060811;
   --headerBackground: #05060B;
@@ -37,6 +37,6 @@ a {
 main {
   position: relative;
   margin: 0 auto;
-  width: 90%;
+  width: 80%;
   max-width: var(--max-width);
 }

src/components/News/Author/author.module.css

@@ -0,0 +1,22 @@
+.author {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+}
+
+.author .avatar {
+    display: flex;
+    align-items: center;
+
+    border-radius: 100%;
+    width: 48px;
+    aspect-ratio: 1;
+}
+
+.author .info .name {
+    font-weight: 600;
+}
+
+.author .info .role {
+    font-size: 0.7em;
+}

src/components/News/Author/index.tsx

@@ -0,0 +1,23 @@
+import { NEWS_IMAGES_URL } from "@/utils/constants";
+import styles from "./author.module.css";
+import Image from "next/image";
+
+type Props = {
+    displayName: string,
+    avatar?: string,
+    role?: string,
+}
+
+const Author: React.FC<Props> = ({ displayName, avatar, role }) => {
+    return <div className={styles.author}>
+        <div className={styles.avatar}>
+            <Image src={`${NEWS_IMAGES_URL}/avatars/${avatar}`} alt={`${displayName}'s avatar`} width={48} height={48} />
+        </div>
+        <div className={styles.info}>
+            <div className={styles.name}>{ displayName }</div>
+            <div className={styles.role}>{ role }</div>
+        </div>
+    </div>;
+}
+
+export default Author;

src/utils/news.ts

@@ -18,7 +18,7 @@ export type ArticleTypes = z.infer<typeof ValidArticleTypes>;
 
 export const ArticleAuthor = z.object({
     displayName: z.string(),
-    avatar: z.string().url().optional(),
+    avatar: z.string().optional(), // TO-DO: create a refine for checking if string = `filename.{png|jpg|jpeg|webp}`
     role: z.string().optional(),
 });
 
@@ -100,5 +100,5 @@ export const getArticle = async (slug: string): Promise<Article> => {
 
 export const getAuthorData = async (id: string) => {
     const raw: ArticleAuthor = await fetch(`${NEWS_SOURCE}/authors/${id}.json`, { next: { tags: ["articles", `article-author-${id}`] } }).then(res => res.json());
-    return raw;
+    return ArticleAuthor.parse(raw);
 }