~repos /edge-city

#react#js#ssr

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes

Readme
|
Commits
|
Files
32da7e67 — Peter John

2 years ago 
add 404 page not found routing
Files changed (5) hide show
  1. packages/example/routes/404/page.css +38 -0
  2. packages/example/routes/404/page.jsx +17 -0
  3. packages/example/routes/page.css +6 -1
  4. packages/parotta/cli.js +14 -10
  5. packages/parotta/router.js +10 -12
packages/example/routes/404/page.css ADDED
@@ -0,0 +1,38 @@
1
+ .notfound-page {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+ justify-content: center;
6
+ color: #000;
7
+ background: #fff;
8
+ font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
9
+ height: 100vh;
10
+ text-align: center;
11
+
12
+ & h1 {
13
+ display: inline-block;
14
+ border-right: 1px solid rgba(0, 0, 0, .3);
15
+ margin: 0;
16
+ margin-right: 20px;
17
+ padding: 10px 23px 10px 0;
18
+ font-size: 24px;
19
+ font-weight: 500;
20
+ vertical-align: top;
21
+ }
22
+
23
+ & .content {
24
+ display: inline-block;
25
+ text-align: left;
26
+ line-height: 49px;
27
+ height: 49px;
28
+ vertical-align: middle;
29
+ }
30
+
31
+ & h2 {
32
+ font-size: 14px;
33
+ font-weight: normal;
34
+ line-height: inherit;
35
+ margin: 0;
36
+ padding: 0;
37
+ }
38
+ }
packages/example/routes/404/page.jsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import "./page.css";
3
+
4
+ const NotFound = () => {
5
+ return (
6
+ <div className="notfound-page">
7
+ <div>
8
+ <h1>404</h1>
9
+ <div className="content">
10
+ <h2>This page could not be found</h2>
11
+ </div>
12
+ </div>
13
+ </div>
14
+ )
15
+ }
16
+
17
+ export default NotFound;
packages/example/routes/page.css CHANGED
@@ -1,5 +1,10 @@
1
+ body {
2
+ margin: 0;
3
+ }
4
+
1
5
  .home-page {
2
- padding: 10px;
6
+ padding: 20px;
7
+ margin: 0;
3
8
  background-color: turquoise;
4
9
 
5
10
  & .count {
packages/parotta/cli.js CHANGED
@@ -17,7 +17,7 @@ import { renderToReadableStream } from 'react-dom/server';
17
17
 
18
18
  const version = (await import(path.join(import.meta.dir, "package.json"))).default.version;
19
19
  console.log(`parotta v${version}`)
20
- console.log("running in folder:", path.basename(process.cwd()), "env:", process.env.NODE_ENV);
20
+ console.log(`running with cwd=${path.basename(process.cwd())} node_env=${process.env.NODE_ENV}`);
21
21
  // console.log("deleting cache");
22
22
  // rmSync(path.join(process.cwd(), ".cache"), { force: true, recursive: true })
23
23
 
@@ -280,16 +280,20 @@ export default {
280
280
  return renderApi(`/routes${match.api}`, req);
281
281
  }
282
282
  }
283
+ if (req.headers.get("Accept")?.includes('text/html')) {
284
+ return renderPage(`/routes/404/page.jsx`, url, {});
285
+ }
283
- return new Response(`Not Found`, {
286
+ return new Response(`{"message": "not found"}`, {
284
- headers: { 'Content-Type': 'text/html' },
287
+ headers: { 'Content-Type': 'application/json' },
285
288
  status: 404,
286
289
  });
287
290
  },
288
- // error(error) {
291
+ error(error) {
292
+ console.log("error", error);
289
- // return new Response(`<pre>${error}\n${error.stack}</pre>`, {
293
+ return new Response(`<pre>${error}\n${error.stack}</pre>`, {
290
- // headers: {
294
+ headers: {
291
- // "Content-Type": "text/html",
295
+ "Content-Type": "text/html",
292
- // },
296
+ },
293
- // });
297
+ });
294
- // },
298
+ },
295
299
  }
packages/parotta/router.js CHANGED
@@ -2,20 +2,18 @@ import React, { createContext, useContext, useState, useEffect } from "react";
2
2
 
3
3
  export const RouterContext = createContext(undefined);
4
4
 
5
+ const getRoute = (radixRouter, pathname) => {
6
+ const matchedPage = radixRouter.lookup(pathname);
7
+ if (!matchedPage) {
8
+ return radixRouter.lookup("/404");
9
+ }
10
+ return matchedPage;
11
+ }
12
+
5
13
  export const Router = ({ App, history, radixRouter }) => {
6
- const [Page, setPage] = useState(radixRouter.lookup(history.location.pathname));
14
+ const [Page, setPage] = useState(() => getRoute(radixRouter, history.location.pathname));
7
15
  useEffect(() => {
8
- return history.listen(({ action, location }) => {
16
+ return history.listen(({ location }) => setPage(getRoute(radixRouter, location.pathname)));
9
- const matchedPage = radixRouter.lookup(location.pathname);
10
- if (!matchedPage) {
11
- matchedPage = '/404.jsx';
12
- console.log('route not matched');
13
- setPage(() => <h1> Not found</h1>);
14
- } else {
15
- console.log('route match', matchedPage);
16
- setPage(matchedPage);
17
- }
18
- });
19
17
  }, [])
20
18
  console.log('Router');
21
19
  return React.createElement(RouterContext.Provider, {