refactor: use server side rendering

H01001000 · Oct 2, 2024 · 7d9d0fc · 7d9d0fc
1 parent 305930a
commit 7d9d0fc
Show file tree

Hide file tree

Showing 21 changed files with 504 additions and 542 deletions.
diff --git a/package.json b/package.json
@@ -11,8 +11,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "[email protected]",
-  "resolutions": {
-    "next": "13.4.6"
-  }
+  "packageManager": "[email protected]"
 }
diff --git a/poller/package.json b/poller/package.json
@@ -10,11 +10,11 @@
     "kv-gc": "node ./src/cli/gcMonitors.js"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240718.0",
+    "@cloudflare/workers-types": "^4.20240925.0",
     "@swc/cli": "^0.1.65",
     "@swc/core": "^1.7.0",
     "cf-status-page-types": "*",
-    "eslint": "^8.57.0",
-    "typescript": "^5.5.3"
+    "eslint": "^8.57.1",
+    "typescript": "^5.6.2"
   }
 }
diff --git a/site/package.json b/site/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -13,25 +13,28 @@
     "pages:dev": "yarn dlx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^5.16.4",
-    "@types/node": "20.14.11",
-    "@types/react": "18.3.3",
+    "@mui/material": "^6.1.2",
+    "@mui/material-nextjs": "^6.1.2",
+    "@next/third-parties": "^14.2.14",
+    "@types/node": "20.16.10",
+    "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
-    "eslint": "8.57.0",
-    "eslint-config-next": "13.5.6",
+    "eslint": "8.57.1",
+    "eslint-config-next": "13.5.7",
     "next": "^14.2.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.5",
     "server-only": "^0.0.1",
-    "typescript": "5.5.3"
+    "typescript": "5.6.2"
   },
   "devDependencies": {
-    "@cloudflare/next-on-pages": "^1.12.1",
-    "@cloudflare/workers-types": "^4.20240718.0",
+    "@cloudflare/next-on-pages": "^1.13.3",
+    "@cloudflare/workers-types": "^4.20240925.0",
     "cf-status-page-types": "*",
     "vercel": "^35.1.0"
   }
-}
+}
diff --git a/site/public/next.svg b/site/public/next.svg
diff --git a/site/public/vercel.svg b/site/public/vercel.svg
diff --git a/site/src/app/AllStatus.tsx b/site/src/app/AllStatus.tsx
diff --git a/site/src/app/RootLayout.tsx b/site/src/app/RootLayout.tsx
diff --git a/site/src/app/layout.tsx b/site/src/app/layout.tsx
@@ -1,7 +1,10 @@
 import { Roboto } from 'next/font/google'
-import DefaultRootLayout from './RootLayout'
-import Script from 'next/script.js'
+import RootProvider from '@/components/RootProvider'
 import config from '../../../config.json'
+import { GoogleAnalytics } from "@next/third-parties/google";
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Link from '@/components/Link';
 
 const inter = Roboto({ weight: ['300', '400', '500', '700'], display: 'swap', subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext', 'vietnamese'] })
 
@@ -18,19 +21,26 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className} style={{ minHeight: '100vh' }}>
-        <Script async src="https://www.googletagmanager.com/gtag/js?id=G-21C3KNWYDN" strategy='afterInteractive' />
-        <Script id="google-analytics" strategy="afterInteractive">
-          {`
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'G-21C3KNWYDN');
-          `}
-        </Script>
-        <DefaultRootLayout>
-          {children}
-        </DefaultRootLayout>
+        <RootProvider>
+          <Container maxWidth='md' style={{ padding: '0 0 5vh 0' }}>
+            <Typography variant='h3' component='h1' style={{ margin: '2.5vh 1vw' }}>
+              {config.settings.title}
+            </Typography >
+            {children}
+            <Typography>
+              <Link href='https://github.com/JH0project/Cloudflare-Status-Page'>
+                Cloudflare Status Page
+              </Link>
+              {' by '}
+              <Link href='https://github.com/H01001000'>
+                H01001000
+              </Link>
+            </Typography>
+            <Typography>{'Powered by '}<Link href='https://www.cloudflare.com/'>Cloudflare</Link>{' and '}<Link href='https://nextjs.org/'>Next.js</Link></Typography>
+          </Container >
+        </RootProvider>
       </body>
+      <GoogleAnalytics gaId="G-21C3KNWYDN" />
     </html>
   )
 }
diff --git a/site/src/app/loading.tsx b/site/src/app/loading.tsx
@@ -0,0 +1,32 @@
+import { AllStatus } from "@/components/AllStatus";
+import { Paper, Container, Box, Divider, Link, Typography, Skeleton } from "@mui/material";
+import config from '../../../config.json'
+import OverallResponseGraph from "@/components/OverallResponseGraph";
+import UptimeGraph from "@/components/UptimeGraph";
+
+export default function Loading() {
+  return (<>
+    <AllStatus />
+    <Paper elevation={5} style={{ padding: '5vh 0', margin: '5vh 0' }}>
+      <Container>
+        {config.monitors.map(({ id: monitorName, name, url }, i) =>
+          <Box key={i}>
+            {i !== 0 && <Divider style={{ margin: '2.5vh 0' }} />}
+            <Typography variant='h6' component='h2' sx={{ color: "#2ecc71" }}>
+              <Link style={{ color: 'inherit' }} underline='hover' href={url}>
+                {name}
+              </Link>
+              <Skeleton sx={{ float: 'right' }}>
+                <span >Operational</span>
+              </Skeleton>
+            </Typography >
+            <UptimeGraph checks={{}} monitorName={monitorName} key={monitorName} />
+            <div style={{ height: '20vh', width: '100%' }}>
+              <Skeleton variant="rectangular" sx={{ height: '100%', width: '100%' }} />
+            </div>
+          </Box>
+        )}
+      </Container>
+    </Paper >
+  </>)
+}