Skip to content

Commit 766ed98

Browse files
nooobcodernooobcoder
committed
pokemon api remix
1 parent 01eaba0 commit 766ed98

File tree

830 files changed

+34757
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

830 files changed

+34757
-0
lines changed

‎remix-pokemon-api/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build

‎remix-pokemon-api/README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Welcome to Remix!
2+
3+
- [Remix Docs](https://remix.run/docs)
4+
5+
## Development
6+
7+
From your terminal:
8+
9+
```sh
10+
npm run dev
11+
```
12+
13+
This starts your app in development mode, rebuilding assets on file changes.
14+
15+
## Deployment
16+
17+
First, build your app for production:
18+
19+
```sh
20+
npm run build
21+
```
22+
23+
Then run the app in production mode:
24+
25+
```sh
26+
npm start
27+
```
28+
29+
Now you'll need to pick a host to deploy it to.
30+
31+
### DIY
32+
33+
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
34+
35+
Make sure to deploy the output of `remix build`
36+
37+
- `build/`
38+
- `public/build/`
39+
40+
### Using a Template
41+
42+
When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
43+
44+
```sh
45+
cd ..
46+
# create a new project, and pick a pre-configured host
47+
npx create-remix@latest
48+
cd my-new-remix-app
49+
# remove the new project's app (not the old one!)
50+
rm -rf app
51+
# copy your app over
52+
cp -R ../my-old-remix-app/app app
53+
```

‎remix-pokemon-api/app/entry.client.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { hydrate } from "react-dom";
2+
import { RemixBrowser } from "remix";
3+
4+
hydrate(<RemixBrowser />, document);

‎remix-pokemon-api/app/entry.server.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { renderToString } from "react-dom/server";
2+
import { RemixServer } from "remix";
3+
import type { EntryContext } from "remix";
4+
5+
export default function handleRequest(
6+
request: Request,
7+
responseStatusCode: number,
8+
responseHeaders: Headers,
9+
remixContext: EntryContext
10+
) {
11+
let markup = renderToString(
12+
<RemixServer context={remixContext} url={request.url} />
13+
);
14+
15+
responseHeaders.set("Content-Type", "text/html");
16+
17+
return new Response("<!DOCTYPE html>" + markup, {
18+
status: responseStatusCode,
19+
headers: responseHeaders
20+
});
21+
}

‎remix-pokemon-api/app/root.tsx

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
import * as React from "react";
2+
import {
3+
Link,
4+
Links,
5+
LiveReload,
6+
Meta,
7+
Outlet,
8+
Scripts,
9+
ScrollRestoration,
10+
useCatch,
11+
useLocation,
12+
useMatches,
13+
} from "remix";
14+
import type { LinksFunction } from "remix";
15+
16+
import tailwindUrl from "~/styles/tailwind.css";
17+
18+
import { ChevronLeftIcon } from "@heroicons/react/solid";
19+
20+
export let links: LinksFunction = () => {
21+
return [{ rel: "stylesheet", href: tailwindUrl }];
22+
};
23+
24+
/**
25+
* The root module's default export is a component that renders the current
26+
* route via the `<Outlet />` component. Think of this as the global layout
27+
* component for your app.
28+
*/
29+
export default function App() {
30+
return (
31+
<Document>
32+
<Layout>
33+
<Outlet />
34+
</Layout>
35+
</Document>
36+
);
37+
}
38+
39+
function Document({
40+
children,
41+
title,
42+
}: {
43+
children: React.ReactNode;
44+
title?: string;
45+
}) {
46+
return (
47+
<html lang="en">
48+
<head>
49+
<meta charSet="utf-8" />
50+
<meta name="viewport" content="width=device-width,initial-scale=1" />
51+
{title ? <title>{title}</title> : null}
52+
<Meta />
53+
<Links />
54+
</head>
55+
<body>
56+
{children}
57+
<RouteChangeAnnouncement />
58+
<ScrollRestoration />
59+
<Scripts />
60+
{process.env.NODE_ENV === "development" && <LiveReload />}
61+
</body>
62+
</html>
63+
);
64+
}
65+
66+
function Layout({ children }: React.PropsWithChildren<{}>) {
67+
const matches = useMatches();
68+
const lastMatch = matches.slice(-1)[0];
69+
70+
return (
71+
<div className="mx-auto max-w-7xl">
72+
<div>
73+
<div>
74+
<nav className="sm:hidden" aria-label="Back">
75+
<Link
76+
to="/"
77+
className="flex items-center text-sm font-medium text-gray-400 hover:text-gray-200"
78+
>
79+
<ChevronLeftIcon
80+
className="flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-500"
81+
aria-hidden="true"
82+
/>
83+
Back
84+
</Link>
85+
</nav>
86+
<nav className="hidden sm:flex" aria-label="Breadcrumb">
87+
<ol role="list" className="flex items-center space-x-4">
88+
<li>
89+
<div className="flex">
90+
<Link
91+
to="/"
92+
className="text-sm font-medium text-gray-400 hover:text-gray-200"
93+
>
94+
Home
95+
</Link>
96+
</div>
97+
</li>
98+
{matches
99+
.filter((match) => match.handle && match.handle.breadcrumb)
100+
.map((match, index) => (
101+
<li key={index}>
102+
<div className="flex">
103+
{match.handle.breadcrumb(match.params)}
104+
</div>
105+
</li>
106+
))}
107+
</ol>
108+
</nav>
109+
</div>
110+
<div className="mt-2 md:flex md:items-center md:justify-between">
111+
<div className="flex-1 min-w-0">
112+
<h2 className="text-2xl font-bold leading-7 text-black sm:text-3xl sm:truncate">
113+
{lastMatch?.handle?.title?.(lastMatch.params) ?? "Pokemon"}
114+
</h2>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div className="p-5">
120+
<div>{children}</div>
121+
</div>
122+
</div>
123+
);
124+
}
125+
126+
export function CatchBoundary() {
127+
let caught = useCatch();
128+
129+
let message;
130+
switch (caught.status) {
131+
case 401:
132+
message = (
133+
<p>
134+
Oops! Looks like you tried to visit a page that you do not have access
135+
to.
136+
</p>
137+
);
138+
break;
139+
case 404:
140+
message = (
141+
<p>Oops! Looks like you tried to visit a page that does not exist.</p>
142+
);
143+
break;
144+
145+
default:
146+
throw new Error(caught.data || caught.statusText);
147+
}
148+
149+
return (
150+
<Document title={`${caught.status} ${caught.statusText}`}>
151+
<Layout>
152+
<h1>
153+
{caught.status}: {caught.statusText}
154+
</h1>
155+
{message}
156+
</Layout>
157+
</Document>
158+
);
159+
}
160+
161+
export function ErrorBoundary({ error }: { error: Error }) {
162+
console.error(error);
163+
return (
164+
<Document title="Error!">
165+
<Layout>
166+
<div>
167+
<h1>There was an error</h1>
168+
<p>{error.message}</p>
169+
<hr />
170+
<p>
171+
Hey, developer, you should replace this with what you want your
172+
users to see.
173+
</p>
174+
</div>
175+
</Layout>
176+
</Document>
177+
);
178+
}
179+
180+
function RemixLogo(props: React.ComponentPropsWithoutRef<"svg">) {
181+
return (
182+
<svg
183+
viewBox="0 0 659 165"
184+
version="1.1"
185+
xmlns="http://www.w3.org/2000/svg"
186+
xmlnsXlink="http://www.w3.org/1999/xlink"
187+
aria-labelledby="remix-run-logo-title"
188+
role="img"
189+
width="106"
190+
height="30"
191+
fill="currentColor"
192+
{...props}
193+
>
194+
<title id="remix-run-logo-title">Remix Logo</title>
195+
<path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
196+
<path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
197+
<path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
198+
<path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
199+
<path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
200+
</svg>
201+
);
202+
}
203+
204+
/**
205+
* Provides an alert for screen reader users when the route changes.
206+
*/
207+
const RouteChangeAnnouncement = React.memo(() => {
208+
let [hydrated, setHydrated] = React.useState(false);
209+
let [innerHtml, setInnerHtml] = React.useState("");
210+
let location = useLocation();
211+
212+
React.useEffect(() => {
213+
setHydrated(true);
214+
}, []);
215+
216+
let firstRenderRef = React.useRef(true);
217+
React.useEffect(() => {
218+
// Skip the first render because we don't want an announcement on the
219+
// initial page load.
220+
if (firstRenderRef.current) {
221+
firstRenderRef.current = false;
222+
return;
223+
}
224+
225+
let pageTitle = location.pathname === "/" ? "Home page" : document.title;
226+
setInnerHtml(`Navigated to ${pageTitle}`);
227+
}, [location.pathname]);
228+
229+
// Render nothing on the server. The live region provides no value unless
230+
// scripts are loaded and the browser takes over normal routing.
231+
if (!hydrated) {
232+
return null;
233+
}
234+
235+
return (
236+
<div
237+
aria-live="assertive"
238+
aria-atomic
239+
id="route-change-region"
240+
style={{
241+
border: "0",
242+
clipPath: "inset(100%)",
243+
clip: "rect(0 0 0 0)",
244+
height: "1px",
245+
margin: "-1px",
246+
overflow: "hidden",
247+
padding: "0",
248+
position: "absolute",
249+
width: "1px",
250+
whiteSpace: "nowrap",
251+
wordWrap: "normal",
252+
}}
253+
>
254+
{innerHtml}
255+
</div>
256+
);
257+
});

0 commit comments

Comments
 (0)