chore: add eslint rule and lint-staged

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next", "prettier"],
   "rules": {
     "semi": [2, "never"],
     "space-before-blocks": "error",
@@ -19,6 +19,9 @@
         "code": 120,
         "ignorePattern": "className"
       }
-    ]
+    ],
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
+    "react/jsx-closing-bracket-location":[2, "after-props"],
+    "react/jsx-indent-props": [2, 2]
   }
 }

.gitignore

@@ -46,8 +46,7 @@ artifacts
 # contract type generation
 /contracts/types
 
-package-lock.json
-
 version.js
 yarn.lock
 *_bak
+.eslintcache

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

components/AddLinkDialog.tsx

@@ -19,13 +19,11 @@ export function AddLinkDialog({ open, close, save }: AddLinkDialogProps) {
         enterTo="transform scale-100 opacity-100"
         leave="transition duration-75 ease-out"
         leaveFrom="transform scale-100 opacity-100"
-        leaveTo="transform scale-95 opacity-0"
-      >
+        leaveTo="transform scale-95 opacity-0">
         <Dialog
           as="div"
           className="fixed inset-0 z-10 overflow-y-auto"
-          onClose={close}
-        >
+          onClose={close}>
           <div className="min-h-screen px-4 text-center">
             <Transition.Child
               as={Fragment}
@@ -34,16 +32,14 @@ export function AddLinkDialog({ open, close, save }: AddLinkDialogProps) {
               enterTo="opacity-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
+              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"
-            >
+              aria-hidden="true">
               &#8203;
             </span>
             <Transition.Child
@@ -53,29 +49,25 @@ export function AddLinkDialog({ open, close, save }: AddLinkDialogProps) {
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
+              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"
-                >
+                  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"
-                  />
+                    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)}
-                  >
+                    onClick={() => save(url)}>
                     Save
                   </button>
                 </div>

components/ArticleItem.tsx

@@ -12,15 +12,23 @@ export const ArticleItem = memo<ArticleItemProps>(({ imageURL, tags, authors, na
   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} />
+        <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">
+            <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>

components/Editor.tsx

@@ -151,7 +151,7 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
     setCachedTags([...newValue])
   }
 
-  const onSubmit = async(data: IFormInputs) => {
+  const onSubmit = async (data: IFormInputs) => {
     let imageURL
     let filesize
     let filename
@@ -240,15 +240,16 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
 
   return (
     <div className='relative w-full flex justify-center p-6'>
-      <form style={{ width: '720px' }} onSubmit={handleSubmit(onSubmit, onError)}>
+      <form style={{ width: '720px' }}
+        onSubmit={handleSubmit(onSubmit, onError)}>
         <div className='inline-flex absolute -top-10 right-2 items-center'>
-          <Menu as="div" className="relative inline-block text-left">
+          <Menu as="div"
+            className="relative inline-block text-left">
             <div>
               <Menu.Button className="px-2 flex items-center">
                 <ExclamationIcon
                   className="w-8 h-8"
-                  aria-hidden="true"
-                />
+                  aria-hidden="true"/>
               </Menu.Button>
             </div>
             <Transition
@@ -258,8 +259,7 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
               enterTo="transform opacity-100 scale-100"
               leave="transition ease-in duration-75"
               leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
+              leaveTo="transform opacity-0 scale-95">
               <Menu.Items
                 className="absolute right-0 w-80 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="px-6 py-8">
@@ -294,8 +294,7 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
                 setValue('description', cache)
                 trigger()
               }
-            }}
-          >
+            }}>
             {`Publish${isSubmitting ? '...' :''}`}
           </button>
         </div>
@@ -304,41 +303,52 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
             {
               !preview &&
               <div className="inline-flex bg-gray-200 text-gray-500 rounded-full px-2 cursor-pointer">
-                <svg viewBox="0 0 24 24" className="w-3">
+                <svg viewBox="0 0 24 24"
+                  className="w-3">
                   <path
                     d="M12 1.5v21M1.5 12h21"
                     stroke="#343F44"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     fill="none"
-                    fillRule="evenodd"
-                  />
+                    fillRule="evenodd"/>
                 </svg>
                 <span className="inline-block p-1 text-sm">
                 Add feature image
                 </span>
               </div>
             }
-            <input type="file" name="Asset" className="hidden" {...register("files")} />
+            <input type="file"
+              name="Asset"
+              className="hidden"
+              {...register("files")}/>
             {
               preview &&
-              <img className="lg:h-48 md:h-36 w-full object-cover object-center cursor-pointer" src={preview} />
+              <img className="lg:h-48 md:h-36 w-full object-cover object-center cursor-pointer"
+                src={preview} />
             }
           </label>
         </div>
         <div className="pt-12">
           <TextareaAutosize
             placeholder="Give a title"
-            className="border-0 outline-0 text-5xl w-full resize-none" {...register("name")}
-          />
+            className="border-0 outline-0 text-5xl w-full resize-none"
+            {...register("name")}/>
         </div>
         <div className="my-6 mb-4">
           <div className="text-gray-800 flex items-center">
             <div className="w-8 h-8 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
-              <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
-                className="w-4 h-4" viewBox="0 0 24 24">
+              <svg fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4"
+                viewBox="0 0 24 24">
                 <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
-                <circle cx="12" cy="7" r="4"/>
+                <circle cx="12"
+                  cy="7"
+                  r="4"/>
               </svg>
             </div>
             <span
@@ -353,8 +363,7 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
               }
               placeholder="Input Authors"
               onChange={handleAuthorsChange}
-              options={authorsInLocal ?? []}
-            />
+              options={authorsInLocal ?? []}/>
           </div>
           <div className="pt-3 flex justify-start items-center text-gray-500">
             <span>Tags:</span>
@@ -366,13 +375,14 @@ export const Editor = memo<EditorProps>(({ account, article, publishLink, cid })
               placeholder="Input Post Tags"
               onChange={handleTagsChange}
               // @ts-ignore
-              options={tagsInLocal ?? []}
-            />
+              options={tagsInLocal ?? []}/>
           </div>
         </div>
         <Tiptap initValue={article?.description} />
       </form>
-      <Dialog as='div' open={isOpen} onClose={() => setIsOpen(false)}>
+      <Dialog as='div'
+        open={isOpen}
+        onClose={() => setIsOpen(false)}>
         <Dialog.Overlay />
 
         <Dialog.Title>Deactivate account</Dialog.Title>

components/Layout.tsx

@@ -3,7 +3,8 @@ import { Footer } from "./Footer"
 
 export const Layout =memo( ({ children }) => {
   return (
-    <main style={{ minHeight: 'calc(100vh - 140px)' }} className='flex flex-col justify-between'>
+    <main style={{ minHeight: 'calc(100vh - 140px)' }}
+      className='flex flex-col justify-between'>
       { children }
       <Footer />
     </main>

components/Navigation.tsx

@@ -39,8 +39,10 @@ export const Navigation = () => {
     <div className="flex mt-4 grow flex-wrap">
       { config.map((item) => {
         return (
-          <Link key={item.path} href={item.path}>
-            <a className={`mr-4 text-pink-500 _nav ${ isActivePath(item.path) && 'current'}`} id="_home">
+          <Link key={item.path}
+            href={item.path}>
+            <a className={`mr-4 text-pink-500 _nav ${ isActivePath(item.path) && 'current'}`}
+              id="_home">
               {item.name}
             </a>
           </Link>

components/Tiptap.tsx

@@ -81,15 +81,22 @@ export const Tiptap = ({ initValue }: TiptapProps) => {
 
   return (
     <div>
-      {editor && <BubbleMenu editor={editor} pluginKey={'menu'}>
-        <MenuUI editor={editor} openHyperLinkDialog={() => setOpenHyperDialog(true)} />
+      {editor && <BubbleMenu editor={editor}
+        pluginKey={'menu'}>
+        <MenuUI editor={editor}
+          openHyperLinkDialog={() => setOpenHyperDialog(true)} />
       </BubbleMenu>}
-      <UploadImageDialog open={openImageDialog} close={() => setOpenImageDialog(false)} save={handleImage} />
-      <AddLinkDialog open={openHyperLinkDialog} close={() => setOpenHyperDialog(false)} save={handleHyperLink} />
+      <UploadImageDialog open={openImageDialog}
+        close={() => setOpenImageDialog(false)}
+        save={handleImage}/>
+      <AddLinkDialog open={openHyperLinkDialog}
+        close={() => setOpenHyperDialog(false)}
+        save={handleHyperLink}/>
       <EditorContent editor={editor} />
       <div className='fixed bottom-6 inset-x-0'>
         <div className="flex justify-center">
-          <FixedMenuUI editor={editor} openImageDialog={() => setOpenImageDialog(true)} />
+          <FixedMenuUI editor={editor}
+            openImageDialog={() => setOpenImageDialog(true)} />
         </div>
       </div>
     </div>
@@ -103,23 +110,20 @@ const FixedMenuUI = ({ editor, openImageDialog }: {editor: Editor, openImageDial
       <div className="p-2 text-gray-800">
         <button
           onClick={(e) => { editor.chain().focus().toggleBulletList().run(); e.preventDefault() }}
-          className={editor.isActive('bulletList') ? 'is-active' : ''}
-        >
+          className={editor.isActive('bulletList') ? 'is-active' : ''}>
           Bullet list
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
           onClick={(e) => {editor.chain().focus().toggleOrderedList().run(); e.preventDefault()}}
-          className={editor.isActive('orderedList') ? 'is-active' : ''}
-        >
+          className={editor.isActive('orderedList') ? 'is-active' : ''}>
           Order list
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
-          onClick={(e) => { e.preventDefault(); openImageDialog()}}
-        >
+          onClick={(e) => { e.preventDefault(); openImageDialog()}}>
           Image
         </button>
       </div>
@@ -134,40 +138,35 @@ const MenuUI = ({ editor, openHyperLinkDialog }: {editor: Editor, openHyperLinkD
       <div className="p-2 text-gray-800">
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-          className={editor.isActive('h-1') ? 'is-active' : ''}
-        >
+          className={editor.isActive('h-1') ? 'is-active' : ''}>
           h1
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-          className={editor.isActive('h-2') ? 'is-active' : ''}
-        >
+          className={editor.isActive('h-2') ? 'is-active' : ''}>
           h2
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
           onClick={e => {e.preventDefault(); openHyperLinkDialog() }}
-          className={editor.isActive('link') ? 'is-active' : ''}
-        >
+          className={editor.isActive('link') ? 'is-active' : ''}>
           link
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? 'is-active' : ''}
-        >
+          className={editor.isActive('bold') ? 'is-active' : ''}>
         bold
         </button>
       </div>
       <div className="p-2 text-gray-800">
         <button
           onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? 'is-active' : ''}
-        >
+          className={editor.isActive('italic') ? 'is-active' : ''}>
         italic
         </button>
       </div>