feat: use tiptap editor

.eslintrc.json

@@ -5,6 +5,10 @@
     "space-before-blocks": "error",
     "space-before-function-paren": [2, "never"],
     "object-curly-spacing": ["error", "always"],
-    "indent": ["error", 2]
+    "indent": ["error", 2],
+    "max-len": ["error", {
+      "code":  120,
+      "ignorePattern": "className"
+    }]
   }
 }

components/AddLinkDialog.tsx

@@ -0,0 +1,89 @@
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
+interface AddLinkDialogProps {
+  open: boolean
+  close(): void
+  save(url: string): void
+}
+
+export function AddLinkDialog({ open, close, save }: AddLinkDialogProps) {
+  const [url, setUrl] = useState<string>()
+
+  return (
+    <>
+      <Transition
+        show={open}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          onClose={close}
+        >
+          <div className="min-h-screen px-4 text-center">
+            <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"
+            >
+              <Dialog.Overlay className="fixed inset-0 bg-grey-100" />
+            </Transition.Child>
+
+            {/* This element is to trick the browser into centering the modal contents. */}
+            <span
+              className="inline-block h-screen align-middle"
+              aria-hidden="true"
+            >
+              &#8203;
+            </span>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
+                <Dialog.Title
+                  as="h3"
+                  className="text-lg font-medium leading-6 text-gray-900"
+                >
+                  Provider a Link
+                </Dialog.Title>
+                <div className="mt-2">
+                  <input
+                    onChange={e => setUrl(e.target.value)}
+                    type='text'
+                    placeholder="Link"
+                    className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                  />
+                </div>
+                <div className="mt-4">
+                  <button
+                    type="button"
+                    className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
+                    onClick={() => save(url)}
+                  >
+                    Save
+                  </button>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}

components/ArticleItem.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react"
+
+interface ArticleItemProps {
+  imageURL: string,
+  name: string
+  tags: string
+  authors: string
+  path: string
+}
+
+export const ArticleItem = memo<ArticleItemProps>(({ imageURL, tags, authors, name, path }) => {
+  return (
+    <div className="p-4 md:w-1/3">
+      <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
+        <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={imageURL} alt={name} />
+        <div className="p-6">
+          <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{ tags }</h2>
+          <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{ name }</h1>
+          <p className="leading-relaxed mb-3">{ authors }</p>
+          <div className="flex items-center flex-wrap ">
+            <a className="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" href={"/article?cid=" + path}>Goto
+              <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"
+                fill="none" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M5 12h14"/>
+                <path d="M12 5l7 7-7 7"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+ArticleItem.displayName = 'ArticleItem'