feat: add authors with hyperlinks in all issue items #70 (#76)

* 🏷️ types/author: add author interface

* ♻️ refactor/author: add separate Author component

* ♻️ refactor: add separate TipOfTheWeek component with author

* ♻️ refactor: add author in Tech Talks

* 🚨   Fix linting errors

* review: add optional chaining & defualt values

* 💄 review: move Authors above Tags in Tech Talk

* 🚨 fix all lint errors

Co-authored-by: Prateek Surana <prateeksurana3255@gmail.com>

Author: gupta-ji6

components/ArticleItem.tsx

@@ -3,9 +3,12 @@ import Text from './common/Text';
 import Tags from './common/Tags';
 import { useThemeState } from '../theme/ThemeContext';
 import Markdown from './Markdown';
+import Authors from './Authors';
 
-const ArticleItem = ({ article: { title, desc, url, author, tags } }: { article: Article }): JSX.Element => {
+const ArticleItem = ({ article }: { article: Article }): JSX.Element => {
   const theme = useThemeState();
+  const { title, desc, url, authors, tags } = article;
+
   return (
     <div className="mt-0 mx-0 py-4" key={url}>
       <a href={url} target="_blank" rel="noreferrer">
@@ -16,12 +19,8 @@ const ArticleItem = ({ article: { title, desc, url, author, tags } }: { article:
       <Text type="base" additionalStyles="py-2">
         <Markdown>{desc}</Markdown>
       </Text>
-      <Text type="small" color="text-gray-600" additionalStyles="py-2">
-        by <span className="uppercase">{author}</span>
-      </Text>
-      <span>
-        <Tags tags={tags} />
-      </span>
+      <Authors authors={authors} />
+      <Tags tags={tags} />
     </div>
   );
 };

components/Authors.tsx

@@ -0,0 +1,26 @@
+import Author from '../interfaces/author';
+import Text from './common/Text';
+
+function Authors({ authors }: { authors: Author[] }): JSX.Element {
+  return (
+    <div className="pb-2">
+      <Text inline type="small" color="text-gray-600" additionalStyles="py-2 pr-1">
+        by
+      </Text>
+      {authors.length
+        ? authors?.map((author, index) => {
+            const isLastElement = index === authors.length - 1;
+            return (
+              <a href={author.website} target="_blank" rel="noreferrer" key={author.id}>
+                <Text inline additionalStyles="uppercase hover:underline" type="small" color="text-gray-600">
+                  {isLastElement ? author.name : `${author.name}, `}
+                </Text>
+              </a>
+            );
+          })
+        : null}
+    </div>
+  );
+}
+
+export default Authors;

components/TechTalk.tsx

@@ -4,23 +4,25 @@ import Text from './common/Text';
 import Tags from './common/Tags';
 import Markdown from './Markdown';
 import { useThemeState } from '../theme/ThemeContext';
+import Authors from './Authors';
 
 // TODO: Create a loading indicator for this
 // eslint-disable-next-line react/display-name
 const ReactPlayer = dynamic(() => import('react-player/lazy'), { loading: (): JSX.Element => <p>Loading...</p> });
 
 const TechTalk = ({ techTalk }: { techTalk: Talk }): JSX.Element => {
   const theme = useThemeState();
+  const { title, authors, talkURL, desc, tags } = techTalk;
 
   return (
     <div className="py-8">
       <Text type="h2" additionalStyles="pb-4" color={`text-${theme}-600`}>
-        {techTalk.title}
+        {title}
       </Text>
-      <div className="player-wrapper">
+      <div className="player-wrapper py-3">
         <ReactPlayer
           className="react-player"
-          url={techTalk.talkURL}
+          url={talkURL}
           controls={true}
           pip={true}
           width="100%"
@@ -29,9 +31,10 @@ const TechTalk = ({ techTalk }: { techTalk: Talk }): JSX.Element => {
         />
       </div>
       <Text additionalStyles="my-4">
-        <Markdown>{techTalk.desc}</Markdown>
+        <Markdown>{desc}</Markdown>
       </Text>
-      <Tags tags={techTalk.tags} />
+      <Authors authors={authors} />
+      <Tags tags={tags} />
     </div>
   );
 };

components/TipOfTheWeekItem.tsx

@@ -0,0 +1,21 @@
+import Text from './common/Text';
+import Markdown from './Markdown';
+import Authors from './Authors';
+import TipOfTheWeek from '../interfaces/tipOfTheWeek';
+import CodeSnippet from './common/CodeSnippet';
+
+const TipOfTheWeekItem = ({ tipOfTheWeek }: { tipOfTheWeek: TipOfTheWeek }): JSX.Element => {
+  const { snippet, desc, authors } = tipOfTheWeek;
+
+  return (
+    <div className="mt-0 mx-0 py-4">
+      <Text type="base" additionalStyles="py-4 relative z-10">
+        <Markdown>{desc}</Markdown>
+      </Text>
+      {snippet ? <CodeSnippet snippet={snippet} /> : null}
+      <Authors authors={authors} />
+    </div>
+  );
+};
+
+export default TipOfTheWeekItem;

components/ToolItem.tsx

@@ -2,25 +2,29 @@ import Image from 'next/image';
 import ArticleItem from './ArticleItem';
 import Tool from '../interfaces/tool';
 
-const ToolItem = ({ tool: { title, url, logo, author, desc, tags } }: { tool: Tool }): JSX.Element => (
-  <div className="flex flex-wrap sm:flex-no-wrap flex-row items-center">
-    <a
-      href={url}
-      className="w-full mr-8 max-w-fc my-4 p-1 transform transition duration-700 hover:scale-105 img-shadow-sm hover:img-shadow-none"
-      target="_blank"
-      rel="noreferrer"
-      aria-label={title}
-    >
-      <Image
-        className="h-32 w-32 inline rounded object-contain p-2 self-center"
-        width={120}
-        height={120}
-        alt={title}
-        src={logo}
-      />
-    </a>
-    <ArticleItem article={{ title, url, desc, author, tags }} />
-  </div>
-);
+const ToolItem = ({ tool: { title, url, logo, authors, desc, tags } }: { tool: Tool }): JSX.Element => {
+  const article = { title, url, desc, authors, tags };
+
+  return (
+    <div className="flex flex-wrap sm:flex-no-wrap flex-row items-center">
+      <a
+        href={url}
+        className="w-full mr-8 max-w-fc my-4 p-1 transform transition duration-700 hover:scale-105 img-shadow-sm hover:img-shadow-none"
+        target="_blank"
+        rel="noreferrer"
+        aria-label={title}
+      >
+        <Image
+          className="h-32 w-32 inline rounded object-contain p-2 self-center"
+          width={120}
+          height={120}
+          alt={title}
+          src={logo}
+        />
+      </a>
+      <ArticleItem article={article} />
+    </div>
+  );
+};
 
 export default ToolItem;

components/common/Tags.tsx

@@ -6,7 +6,7 @@ function Tags({ tags = [] }: { tags?: Array<string> }): JSX.Element {
   const theme = useThemeState();
   return (
     <div className="flex space-x-2 flex-wrap">
-      {tags.map((tag, index) => (
+      {tags?.map((tag, index) => (
         <Text
           type="small"
           color={`text-${theme}-600`}

interfaces/article.ts

@@ -1,7 +1,8 @@
+import Author from './author';
 export default interface Article {
   title: string;
   url: string;
   desc: string;
-  author: string;
+  authors: Author[];
   tags: string[];
 }

interfaces/author.ts

@@ -0,0 +1,5 @@
+export default interface Author {
+  id: number;
+  name: string;
+  website: string;
+}

interfaces/talk.ts

@@ -1,6 +1,9 @@
+import Author from './author';
+
 export default interface Talk {
-  talkURL: string;
-  title: string;
+  authors: Author[];
   desc: string;
   tags: string[];
+  talkURL: string;
+  title: string;
 }

interfaces/tipOfTheWeek.ts

@@ -1,8 +1,8 @@
+import Author from './author';
 import CodeSnippet from './codeSnippet';
 
 export default interface TipOfTheWeek {
   snippet?: CodeSnippet;
   desc: string;
-  sourceName: string;
-  sourceURL: string;
+  authors: Author[];
 }