From 5ac72d2f77e66ecb10165a808193a553e0e19147 Mon Sep 17 00:00:00 2001
From: orta <git@orta.io>
Date: Fri, 10 Nov 2023 09:55:43 +0000
Subject: [PATCH] More fixes for subdomain

---
 .gitignore                           |   2 +
 next.config.js                       |   8 +-
 pages/index.tsx                      |   3 +-
 src/incidents/hooks/useIncidents.tsx |   2 +-
 src/incidents/index.tsx              | 144 ++++++++++++++-------------
 5 files changed, 84 insertions(+), 75 deletions(-)

diff --git a/.gitignore b/.gitignore
index d093a0b52004..1800473f129c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+out
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 53f26c3aa1e9..21275280113b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,10 +3,14 @@ const production = process.env.NODE_ENV === "production";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  assetPrefix: production ? '/' : '',
+  // assetPrefix: production ? '/' : '',
   reactStrictMode: true,
   swcMinify: true,
-  basePath: "/status"
+  basePath: "/status",
+  images: {
+    unoptimized: true,
+  }
+  
 }
 
 module.exports = nextConfig
diff --git a/pages/index.tsx b/pages/index.tsx
index f5d508f9e142..d40334fb0241 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,4 @@
 import type { NextPage } from 'next'
-import Image from 'next/image'
 import IncidentsSection from "../src/incidents"
 import ServicesSection from "../src/services"
 
@@ -9,7 +8,7 @@ const Home: NextPage = () => {
       <div className="mt-20 absolute inset-0 bg-[url(/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
       <div className="w-full h-40 absolute bg-light-purple dark:purple dark:bg-black">
         <div className="sm:ml-0 ml-5 mr-0 mt-3 md:pl-80 md:pr-80 sm:w-full h-full bg-purple-500 dark:bg-black">
-          <Image src="/vercel.svg" width={150} height={100} className="w-40 h-16" alt="Tailwind Play" />
+          <img src="/vercel.svg" width={150} height={100} className="w-40 h-16" alt="Tailwind Play" />
         </div>
       </div>
       <div className='mt-20 w-full absolute overflow-scroll	'>
diff --git a/src/incidents/hooks/useIncidents.tsx b/src/incidents/hooks/useIncidents.tsx
index 8c9839a498c1..b68aa9cd5748 100644
--- a/src/incidents/hooks/useIncidents.tsx
+++ b/src/incidents/hooks/useIncidents.tsx
@@ -15,7 +15,7 @@ function useIncidents() {
                 const monthlyIncident = divideMonthly(issues.map((issue: any) => ({
                     id: issue.id,
                     title: issue.title,
-                    desciption: issue.body,
+                    description: issue.body,
                     status: issue.state,
                     created_at: issue.created_at,
                     closed_at: issue.closed_at,
diff --git a/src/incidents/index.tsx b/src/incidents/index.tsx
index 9fe6d39f91c1..0f08ec5c2a7d 100644
--- a/src/incidents/index.tsx
+++ b/src/incidents/index.tsx
@@ -1,79 +1,83 @@
 import useIncidents from "./hooks/useIncidents";
 import type { NextPage } from "next";
-import {Incident} from "./types/Incident";
-import {MonthlyIncident} from "./types/MonthlyIncident";
+import { Incident } from "./types/Incident";
+import { MonthlyIncident } from "./types/MonthlyIncident";
 
 const IncidentsSection: NextPage = () => {
-	const [monthlyIncidents, isIncidentsLoading] = useIncidents();
+  const [monthlyIncidents, isIncidentsLoading] = useIncidents();
 
-	const formatDate = (date: string) => {
-		return new Date(date).toLocaleString([], {
-			month: "short",
-			day: "numeric",
-			hour: "numeric",
-			minute: "numeric",
-		});
-	};
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+  };
 
-	return (
-		<div className="mt-5">
-			{isIncidentsLoading ? (
-				<p>Loading...</p>
-			) : (
-				<div>
-					{(monthlyIncidents as MonthlyIncident[]).map((incidents) => (
-						<div className="mb-10" key={incidents.month}>
-							<p className="mr-5 text-2xl font-semibold leading-6 text-gray-900">{incidents.month}</p>
-							<div className="mt-2 flex-1 h-px  bg-gray-300" />
-							<div className="ml-6 border-l-4">
-								{(incidents.incidents as Incident[]).map((incident) => (
-									<div className="flex" key={incident.id}>
-										<div className="-ml-4 mt-6 flex rounded-full w-7 h-7 bg-gray-300">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												width="14"
-												height="17"
-												viewBox="0 0 14 14"
-												fill="none"
-												className="m-auto fill-gray-500 text-disrupted"
-											>
-												<path d="M6.99999 2.3C10.14 2.3 12.7 4.86 12.7 8C12.7 11.14 10.14 13.7 6.99999 13.7C3.85999 13.7 1.29999 11.14 1.29999 8C1.29999 4.86 3.85999 2.3 6.99999 2.3ZM7 1C3.14 1 0 4.14 0 8C0 11.86 3.14 15 7 15C10.86 15 14 11.86 14 8C14 4.14 10.86 1 7 1ZM8 4H6V9H8V4ZM8 10H6V12H8V10Z" />
-											</svg>
-										</div>
-										<div className="items-center ml-3 mt-6">
-											<p className="text-base font-semibold leading-6 text-gray-900">
-												{incident.title}
-											</p>
-											{incident.status === "closed" ? (
-												<div>
-													<p className="text-sm text-gray-500">
-														This incident has been resolved.
-													</p>
-													<p className="text-sm text-gray-500">
-														{formatDate(incident.created_at)} -{" "}
-														{formatDate(incident.closed_at)}
-													</p>
-												</div>
-											) : (
-												<div>
-													<p className="text-sm text-gray-500">
-														This incident is currently being investigated.
-													</p>
-													<p className="text-sm text-gray-500">
-														{formatDate(incident.created_at)}
-													</p>
-												</div>
-											)}
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
-					))}
-				</div>
-			)}
-		</div>
-	);
+  if (isIncidentsLoading) {
+    return (
+      <div className="mt-5">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-5">
+      {(monthlyIncidents as MonthlyIncident[]).map((incidents) => (
+        <div className="mb-10" key={incidents.month}>
+          <p className="mr-5 text-2xl font-semibold leading-6 text-gray-900">
+            {incidents.month}
+          </p>
+          <div className="mt-2 flex-1 h-px  bg-gray-300" />
+          <div className="ml-6 border-l-4">
+            {(incidents.incidents as Incident[]).map((incident) => (
+              <div className="flex" key={incident.id}>
+                <div className="-ml-4 mt-6 flex rounded-full w-7 h-7 bg-gray-300">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="17"
+                    viewBox="0 0 14 14"
+                    fill="none"
+                    className="m-auto fill-gray-500 text-disrupted"
+                  >
+                    <path d="M6.99999 2.3C10.14 2.3 12.7 4.86 12.7 8C12.7 11.14 10.14 13.7 6.99999 13.7C3.85999 13.7 1.29999 11.14 1.29999 8C1.29999 4.86 3.85999 2.3 6.99999 2.3ZM7 1C3.14 1 0 4.14 0 8C0 11.86 3.14 15 7 15C10.86 15 14 11.86 14 8C14 4.14 10.86 1 7 1ZM8 4H6V9H8V4ZM8 10H6V12H8V10Z" />
+                  </svg>
+                </div>
+                <div className="items-center ml-3 mt-6">
+                  <p className="text-base font-semibold leading-6 text-gray-900">
+                    {incident.title}
+                  </p>
+                  {incident.status === "closed" ? (
+                    <div>
+                      <p className="text-sm text-gray-500">
+                        This incident has been resolved.
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        {formatDate(incident.created_at)} -{" "}
+                        {formatDate(incident.closed_at)}
+                      </p>
+                    </div>
+                  ) : (
+                    <div>
+                      <p className="text-sm text-gray-500">
+                        This incident is currently being investigated.
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        {formatDate(incident.created_at)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default IncidentsSection;