Skip to content

Commit 24dbae5

Browse files
nooobcodernooobcoder
committed
First UI build remix-jokes
1 parent dfbba89 commit 24dbae5

25 files changed

+7380
-0
lines changed

‎remix-jokes/.eslintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
3+
}

‎remix-jokes/.gitignore

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

‎remix-jokes/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-jokes/app/entry.client.tsx

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

‎remix-jokes/app/entry.server.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { EntryContext } from "@remix-run/node";
2+
import { RemixServer } from "@remix-run/react";
3+
import { renderToString } from "react-dom/server";
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-jokes/app/root.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import type { LinksFunction, MetaFunction } from "@remix-run/node";
2+
import { Links, LiveReload, Outlet } from "@remix-run/react";
3+
4+
import globalStylesUrl from "./styles/global.css";
5+
import globalMediumStylesUrl from "./styles/global-medium.css";
6+
import globalLargeStylesUrl from "./styles/global-large.css";
7+
8+
const meta: MetaFunction = () => ({
9+
charset: "utf-8",
10+
title: "New Remix App",
11+
viewport: "width=device-width,initial-scale=1",
12+
});
13+
14+
const links: LinksFunction = () => [
15+
{
16+
rel: "stylesheet",
17+
href: globalStylesUrl,
18+
},
19+
{
20+
rel: "stylesheet",
21+
href: globalMediumStylesUrl,
22+
media: "print, (min-width: 640px)",
23+
},
24+
{
25+
rel: "stylesheet",
26+
href: globalLargeStylesUrl,
27+
media: "screen and (min-width: 1024px)",
28+
},
29+
];
30+
31+
export default function App() {
32+
return (
33+
<html lang="en">
34+
<head>
35+
<meta charSet="utf-8" />
36+
<title>Remix: So great, it's funny!</title>
37+
<Links />
38+
</head>
39+
<body>
40+
<Outlet />
41+
<LiveReload />
42+
</body>
43+
</html>
44+
);
45+
}
46+
47+
export { links, meta };

‎remix-jokes/app/routes/index.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { LinksFunction } from "@remix-run/node";
2+
import { Link } from "@remix-run/react";
3+
4+
import stylesUrl from "~/styles/index.css";
5+
6+
const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesUrl }];
7+
8+
export default function IndexRoute() {
9+
return (
10+
<div className="container">
11+
<div className="content">
12+
<h1>
13+
Remix{" "}
14+
<span>
15+
Jokes! by <a href="https://remix.run">remix.run 💿</a>
16+
</span>
17+
</h1>
18+
<nav>
19+
<ul>
20+
<li>
21+
<Link to="jokes">Read Jokes</Link>
22+
</li>
23+
</ul>
24+
</nav>
25+
</div>
26+
</div>
27+
);
28+
}
29+
30+
export { links };

‎remix-jokes/app/routes/jokes.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { LinksFunction } from "@remix-run/node";
2+
import { Link, Outlet } from "@remix-run/react";
3+
4+
import stylesUrl from "~/styles/jokes.css";
5+
6+
const links: LinksFunction = () => {
7+
return [{ rel: "stylesheet", href: stylesUrl }];
8+
};
9+
10+
function jokes() {
11+
return (
12+
<div className="jokes-layout">
13+
<header className="jokes-header">
14+
<div className="container">
15+
<h1 className="home-link">
16+
<Link
17+
to="/"
18+
title="Remix Jokes"
19+
aria-label="Remix Jokes"
20+
>
21+
<span className="logo">🤪</span>
22+
<span className="logo-medium">J🤪KES</span>
23+
</Link>
24+
</h1>
25+
</div>
26+
</header>
27+
<main className="jokes-main">
28+
<div className="container">
29+
<div className="jokes-list">
30+
<Link to=".">Get a random joke</Link>
31+
<p>Here are a few more jokes to check out:</p>
32+
<ul>
33+
<li>
34+
<Link to="some-joke-id">Hippo</Link>
35+
</li>
36+
</ul>
37+
<Link to="new" className="button">
38+
Add your own
39+
</Link>
40+
</div>
41+
<div className="jokes-outlet">
42+
<Outlet />
43+
</div>
44+
</div>
45+
</main>
46+
</div>
47+
);
48+
}
49+
export default jokes;
50+
export { links };

‎remix-jokes/app/routes/jokes/$jokeId.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function JokeRoute() {
2+
return (
3+
<div>
4+
<p>Here's your hilarious joke:</p>
5+
<p>
6+
Why don't you find hippopotamuses hiding in trees?
7+
They're really good at it.
8+
</p>
9+
</div>
10+
);
11+
}

‎remix-jokes/app/routes/jokes/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function JokesIndexRoute() {
2+
return (
3+
<div>
4+
<p>Here's a random joke:</p>
5+
<p>
6+
I was wondering why the frisbee was getting bigger, then it hit
7+
me.
8+
</p>
9+
</div>
10+
);
11+
}

‎remix-jokes/app/routes/jokes/new.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
function NewJoke() {
2+
return (
3+
/* Form with name and content fields */
4+
<div>
5+
<p>Add your own hilarious joke</p>
6+
<form method="post">
7+
<div>
8+
<label>
9+
Name: <input type="text" name="name" />
10+
</label>
11+
</div>
12+
<div>
13+
<label>
14+
Content: <textarea name="content" />
15+
</label>
16+
</div>
17+
<div>
18+
<button type="submit" className="button">
19+
Add
20+
</button>
21+
</div>
22+
</form>
23+
</div>
24+
)
25+
}
26+
27+
export default NewJoke

‎remix-jokes/app/styles/global-large.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
h1 {
2+
font-size: 3.75rem;
3+
line-height: 1;
4+
}
5+
6+
h2 {
7+
font-size: 1.875rem;
8+
line-height: 2.25rem;
9+
}
10+
11+
h3 {
12+
font-size: 1.5rem;
13+
line-height: 2rem;
14+
}
15+
16+
h4 {
17+
font-size: 1.25rem;
18+
line-height: 1.75rem;
19+
}
20+
21+
h5 {
22+
font-size: 1.125rem;
23+
line-height: 1.75rem;
24+
}

‎remix-jokes/app/styles/global-medium.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
h1 {
2+
font-size: 3rem;
3+
line-height: 1;
4+
}
5+
6+
h2 {
7+
font-size: 2.25rem;
8+
line-height: 2.5rem;
9+
}
10+
11+
h3 {
12+
font-size: 1.25rem;
13+
line-height: 1.75rem;
14+
}
15+
16+
h4 {
17+
font-size: 1.125rem;
18+
line-height: 1.75rem;
19+
}
20+
21+
h5,
22+
h6 {
23+
font-size: 1rem;
24+
line-height: 1.5rem;
25+
}
26+
27+
.container {
28+
--gutter: 40px;
29+
}

0 commit comments

Comments
 (0)