[WIP DO NOT MERGE] Accounts setup (codu-code#41)

* Adds login with github and updated nav

* WIP accounts, blog writer and layouts

* Adds profile and settings api/page

* Lockdown drafts, create and add draft page

* Adds edit functionality to profile

* Adds option to delete posts on draft page

* Adds ability to edit and delete posts

* Adds better checks before publishing post

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

components/ArticlePreview/ArticlePreview.tsx

@@ -1,53 +1,66 @@
 import type { NextPage } from "next";
 import Link from "next/link";
-import { Temporal } from '@js-temporal/polyfill';
+import { Temporal } from "@js-temporal/polyfill";
 
 type Props = {
   title: string;
-  description: string;
+  excerpt: string;
   slug: string;
   date: string;
-  readTime: string;
-  author: {
-    name: string;
-    href: string;
-    imageUrl: string;
-  };
+  readTime: number;
+  name: string;
+  image: string;
+  id?: string;
+  canEdit?: boolean;
 };
 
 const ArticlePreview: NextPage<Props> = ({
   title,
-  description,
+  excerpt,
   slug,
-  author,
+  name,
+  image,
   date,
   readTime,
+  id,
+  canEdit,
 }) => {
-
-  const dateTime = Temporal.PlainDate.from(date);
-  const readableDate = dateTime.toLocaleString(['en-IE'], {
+  const dateTime = Temporal.Instant.from(date);
+  const readableDate = dateTime.toLocaleString(["en-IE"], {
     year: "numeric",
     month: "long",
     day: "numeric",
   });
 
   return (
-    <article className="p-4 border-2 border-white my-4 shadow-lg shadow-pink-500/50">
-      <div className="flex space-x-1 text-sm text-gray-500 mb-2">
-        <time dateTime={dateTime.toString()}>{readableDate}</time>
-        {readTime && (
-          <>
-            <span aria-hidden="true">&middot;</span>
-            <span>{readTime} read</span>
-          </>
+    <article className="p-4 my-4 shadow-lg shadow-pink-500/50 border-2 light:border-black border-white">
+      <div className="flex text-sm text-gray-500 mb-2">
+        <div className="flex space-x-1">
+          <time dateTime={dateTime.toString()}>{readableDate}</time>
+          {readTime && (
+            <>
+              <span aria-hidden="true">&middot;</span>
+              <span>{readTime} min read</span>
+            </>
+          )}
+        </div>
+
+        {canEdit && id && (
+          <div className="ml-auto">
+            <Link href={`/create/${id}`}>
+              <a className="bg-white text-black px-2 py-1">Edit</a>
+            </Link>
+          </div>
         )}
       </div>
+
       <Link href={`/articles/${slug}`}>
         <header className="text-2xl leading-6 font-semibold tracking-wide cursor-pointer hover:underline">
           {title}
         </header>
       </Link>
-      <p className="tracking-wide text-sm md:text-base my-3">{description}</p>
+
+      <p className="tracking-wide text-sm md:text-lg my-3">{excerpt}</p>
       <div className="sm:flex justify-between content-center">
         <div className="flex items-center">
           <Link href={`/articles/${slug}`}>
@@ -57,14 +70,14 @@ const ArticlePreview: NextPage<Props> = ({
         <div className="flex justify-end items-center">
           <p className="text-sm font-medium text-gray-500">
             Written by{" "}
-            <span className="text-gray-400 font-semibold">{author.name}</span>
+            <span className="text-gray-400 font-semibold">{name}</span>
           </p>
           <div>
-            <span className="sr-only">{author.name}</span>
+            <span className="sr-only">{name}</span>
             <img
               className="ml-3 h-10 w-10 rounded-full"
-              src={author.imageUrl}
-              alt={`${author.name}'s avatar`}
+              src={image}
+              alt={`${name}'s avatar`}
             />
           </div>
         </div>

components/BioBar/BioBar.tsx

@@ -1,10 +1,19 @@
 import Image from "next/image";
-import { authors } from "../../config/site_settings";
+import Link from "next/link";
 
-const BioFooter = ({ userId = "" }) => {
-  if (!authors[userId]) return null;
+interface Props {
+  author: {
+    image: string;
+    bio: string;
+    name: string;
+    username: string | null;
+  };
+}
 
-  const { name, imageUrl, bio, emoji } = authors[userId];
+const BioFooter = ({ author }: Props) => {
+  if (!author) return null;
+
+  const { name, image, bio, username } = author;
   return (
     <div className="max-w-xl px-4 mx-auto  text-gray-700 dark:text-gray-300 mt-6">
       <div className="flex mx-2 sm:mx-6 md:mx-auto px-4 border-t-2 pt-6 border-gray-300 dark:border-gray-800">
@@ -14,13 +23,18 @@ const BioFooter = ({ userId = "" }) => {
             height={70}
             width={70}
             alt={`Avatar for ${name}`}
-            src={imageUrl}
+            src={image}
           />
         </div>
         <div className="flex flex-col justify-center">
-          <h4 className="text-lg md:text-xl font-bold">
-            Written by {name} • {emoji}
-          </h4>
+          {username && (
+            <h4 className="text-lg md:text-xl font-semibold text-gray-200">
+              Written by{" "}
+              <Link href={`/${username}`}>
+                <a className="underline font-semibold text-white">{name}</a>
+              </Link>
+            </h4>
+          )}
           <p className="mt-1">{bio}</p>
         </div>
       </div>

components/Modal/Modal.tsx

@@ -0,0 +1,46 @@
+import React, { Children, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export function Modal({ open, onClose, children }: Props) {
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed z-10 inset-0 overflow-y-auto">
+          <div className="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative bg-white border-2 border-black px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}