chore: added 404 page

src/app/[_id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { OutputData } from '@editorjs/editorjs';
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import '@/lib/env';
 
@@ -37,7 +38,19 @@ export default function HomePage({ params }: { params: { _id: string } }) {
 
   return (
     <section className='bg-white'>
-      <Editor content={content} onlyReadable={true} />
+      {!content ? (
+        <div className='flex justify-center mt-10 text-xl'>
+          <Image
+            src='/svg/404.gif'
+            className='h-48 rounded'
+            height={20}
+            width={200}
+            alt='404 not found'
+          />
+        </div>
+      ) : (
+        <Editor content={content} onlyReadable={true} />
+      )}
     </section>
   );
 }

src/app/components/Editor.tsx

@@ -56,19 +56,6 @@ import Underline from '@editorjs/underline';
 import Warning from '@editorjs/warning';
 import { useEffect, useRef, useState } from 'react';
 
-const DEFAULT_INITIAL_DATA = {
-  time: new Date().getTime(),
-  blocks: [
-    {
-      type: 'header',
-      data: {
-        text: 'Type something...',
-        level: 2,
-      },
-    },
-  ],
-};
-
 interface PropTypes {
   content?: OutputData | null;
   onlyReadable?: boolean;
@@ -90,13 +77,14 @@ export default function Editor({ saveData, content, onlyReadable }: PropTypes) {
 
   const initEditor = () => {
     const editor = new EditorJS({
+      placeholder: 'Let`s write an awesome story!',
       holder: 'editorjs',
       onReady: () => {
         ejInstance.current = editor;
       },
       autofocus: true,
       readOnly: onlyReadable || false,
-      data: content || DEFAULT_INITIAL_DATA,
+      data: content || undefined,
       onChange: async () => {
         if (!onlyReadable) {
           const contentData = await editor.saver.save();

src/app/layout.tsx

@@ -5,6 +5,7 @@ import '@/styles/globals.css';
 // !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
 import '@/styles/colors.css';
 
+// import '@/styles/custom.css'
 import Footer from '@/app/components/Footer';
 import Header from '@/app/components/Header';
 import { Toaster } from '@/app/components/ui/sonner';

src/styles/custom.css

@@ -0,0 +1,3 @@
+.ce-paragraph.cdx-block:empty {
+  display: none;
+}