Adds Typescript and Tailwind (#18)

Author: soupaJ

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.vscode

components/comments/comment.tsx

@@ -0,0 +1,44 @@
+import dayjs from "../../lib/dayjs";
+import { GithubComment } from "../../types/github";
+import { Link, LinkWithAvatar } from "../link";
+import Markdown from "../markdown/Markdown";
+
+interface CommentProps {
+  body: string;
+  createdAt: string;
+  username: string;
+  avatarURL: string;
+  authorURL: string;
+  commentURL: string;
+}
+
+export default function Comment({
+  body,
+  createdAt,
+  username,
+  avatarURL,
+  authorURL,
+  commentURL,
+}: CommentProps) {
+  return (
+    <div className="pb-7 border-b-gray-100 dark:border-b-gray-700 border-b-2">
+      <LinkWithAvatar
+        href={authorURL}
+        avatarUrl={avatarURL}
+        alt={`@${username}`}
+      >
+        {username}
+      </LinkWithAvatar>
+      <div className="my-3">
+        <Markdown document={body} />
+      </div>
+      <Link
+        variant="subtle"
+        href={commentURL}
+        title={dayjs(createdAt).format("MMM D, YYYY h:mmA")}
+      >
+        {dayjs(createdAt).fromNow()}
+      </Link>
+    </div>
+  );
+}

components/comments/comments.tsx

@@ -0,0 +1,46 @@
+import { Gist, GithubComment } from "../../types/github";
+import Comment from "./comment";
+
+interface GistCommentsProps {
+  gistUrl: string;
+  commentData?: GithubComment[];
+}
+
+export default function GistComments({
+  gistUrl,
+  commentData,
+}: GistCommentsProps) {
+  return (
+    <div className="mt-14">
+      {commentData ? (
+        <>
+          <h2 className="text-2xl">Comments ({commentData.length})</h2>
+          <ul className="mt-4 flex flex-col gap-7">
+            {commentData.map((comment) => (
+              <Comment
+                key={comment.id}
+                body={comment.body}
+                createdAt={comment.created_at}
+                username={comment.user.login}
+                avatarURL={comment.user.avatar_url}
+                authorURL={comment.user.html_url}
+                // This is an undocumented way to link directly to a gist comment
+                commentURL={`${gistUrl}#gistcomment-${comment.id}`}
+              />
+            ))}
+          </ul>
+        </>
+      ) : null}
+      <div className="mt-10">
+        <a
+          href={gistUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-100 block p-4 text-center rounded-full"
+        >
+          Comment on Github
+        </a>
+      </div>
+    </div>
+  );
+}

components/comments/index.ts

@@ -0,0 +1 @@
+export { default as Comments } from "./comments";

components/footer.js

@@ -0,0 +1,14 @@
+import Link from "next/link";
+import Logo from "./logo";
+
+export default function Footer() {
+  return (
+    <div className="mx-4 my-10 flex items-center justify-center">
+      <Link href="/">
+        <a aria-label="Gistdoc" className="h-8 w-8">
+          <Logo />
+        </a>
+      </Link>
+    </div>
+  );
+}