UI: article JSON preview

* ref: cern-sis/issues-scoap3#226

ui/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["next","next/core-web-vitals"],
+  "extends": ["next/babel","next/core-web-vitals"],
   "rules": {
     "react/display-name": "off"
   }

ui/next.config.js

@@ -1,8 +1,9 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   experimental: {
     largePageDataBytes: 256 * 100000,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

ui/src/pages/404.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { SearchOutlined } from "@ant-design/icons";
+
+const PageNotFound = () => {
+  return (
+    <div className="error-page">
+        <SearchOutlined />
+      <h1>
+        Page not found
+      </h1>
+      <p>The page you are looking for could not be found.</p>
+    </div>
+  );
+};
+
+export default PageNotFound;

ui/src/pages/500.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+
+const ServerErrorPage = () => {
+  const router = useRouter();
+
+  return (
+    <div className="error-page">
+      <ExclamationCircleOutlined />
+      <h1>Something went wrong</h1>
+      <p>
+        Please try again later or{" "}
+        <a type="button" onClick={() => router.push('/')}>
+          go to home page
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ServerErrorPage;

ui/src/styles/globals.css

@@ -458,3 +458,20 @@ a {
 #json-preview-card .ant-card-body {
   padding: 0;
 }
+
+ /* ERROR PAGES */
+
+.error-page {
+  color: #777;
+  margin: 15% auto;
+  text-align: center;
+}
+
+.error-page .anticon {
+  font-size: 5rem;
+  margin-bottom: 1rem;
+}
+
+.error-page p {
+  font-size: 1.2rem;
+}