Skip to content

Commit fa5de84

Browse files
yowariyowari
authored
feat: update remix to version 2.13 (#6)
Co-authored-by: yowari <[email protected]>
1 parent d12b237 commit fa5de84

File tree

97 files changed

+13946
-9952
lines changed

Some content is hidden

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

97 files changed

+13946
-9952
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎exercise/03-routing/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# 03. Routing
22

3+
Before doing any modification regarding the routes, remove Tailwind styling. The default Remix template comes with
4+
Tailwind preconfigured.
5+
6+
Go to `app/tailwind.css` and remove all the content. We will put it again when we will need Tailwind, we promess!
7+
38
Remix uses file based routing which means that the url is based on the file name. Each route is specified by a file located in `app/routes`. The route file needs at least a default exported function that returns a React Node.
49

510
For our pizza app, we need 2 pages: the first one is where the user specify the pizza size and toppings, the second is used to display a confirmation message.
@@ -17,6 +22,9 @@ export default function Index() {
1722
}
1823
```
1924

25+
Remove the `resources` variable, we won't need that. Also, you can remove the Remix logo images `public/logo-dark.png` and
26+
`public/logo-light.png`.
27+
2028
create a file `app/routes/confirmation.tsx`
2129

2230
```jsx

‎exercise/04-form/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,5 @@ checkbox inputs for toppings selection.
4848
<button type="submit">Commander</button>
4949
</form>
5050
```
51+
52+
Once you submit the form you get **405 Method Not Allowed**. No worry, we will get over it on next exercise.

‎exercise/08-tailwind/README.md

+7-32
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,22 @@
11
# 08. Tailwind
22

33
To style our project we'd like to use Tailwind CSS.
4-
Since Remix uses Vite, most of the setup of Tailwind CSS is the same as the setup on the Vite project.
4+
The default Remix template comes with Tailwind preconfigured but remember we disabled the Tailwind styling. It now time
5+
to put it back.
56

6-
```
7-
npm install -D tailwindcss postcss autoprefixer
8-
npx tailwindcss init --ts -p
9-
```
10-
11-
In `tailwind.config.ts`, add the paths of the template files
12-
13-
```typescript
14-
import type { Config } from "tailwindcss";
15-
16-
export default {
17-
content: ["./app/**/*.{js,jsx,ts,tsx}"], // Add the template files
18-
theme: {
19-
extend: {},
20-
},
21-
plugins: [],
22-
} satisfies Config;
23-
```
24-
25-
Create `./app/tailwind.css` and add the tailwind directives
7+
On `app/tailwind.css` put back the Tailwind directives
268

279
```css
2810
@tailwind base;
2911
@tailwind components;
3012
@tailwind utilities;
3113
```
3214

33-
In `./app/root.tsx` import the newly-created `./app/tailwind.css` file
34-
35-
```typescript
36-
import type { LinksFunction } from "@remix-run/node";
37-
import stylesheet from "~/tailwind.css?url";
38-
39-
export const links: LinksFunction = () => [
40-
{ rel: "stylesheet", href: stylesheet },
41-
];
42-
```
15+
And that it!
4316

44-
And that's it!
17+
If for some reason you hate Tailwind and you don't want to use it on your personal or professional project, you can
18+
remove it completely. After all, a Remix project is just a Vite project. You can reverse the Tailwind setup as showed in
19+
the guide on [Installing Tailwind CSS with Remix](https://tailwindcss.com/docs/guides/remix).
4520

4621
For more integration like css-in-js solutions, you can check the
4722
[examples repository](https://github.com/remix-run/examples).

‎exercise/11-tests/README.md

+3-11
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,9 @@ We'll need to add a test script to our package.json file.
1313
},
1414
```
1515

16-
Vitest needs a setup file and some browser polyfills to run our tests. We will create these files in a folder called `test` in the root of our project:
16+
Vitest needs a setup file. We create the file in a folder called `test` in the root of our project:
1717

18-
`polyfills.ts`:
19-
20-
```typescript
21-
import { installGlobals } from "@remix-run/node";
22-
23-
installGlobals();
24-
```
25-
26-
`setup-test-env.ts`:
18+
`test/setup-test-env.ts`:
2719

2820
```typescript
2921
import "@testing-library/jest-dom/vitest";
@@ -50,7 +42,7 @@ export default defineConfig({
5042
include: ["./app/**/*.spec.{ts,tsx}"],
5143
globals: true,
5244
environment: "happy-dom",
53-
setupFiles: ["./test/polyfills.ts", "./test/setup-test-env.ts"],
45+
setupFiles: ["./test/setup-test-env.ts"],
5446
},
5547
});
5648
```

‎final/01-initialize-remix/progressive-pizza/README.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Welcome to Remix + Vite!
1+
# Welcome to Remix!
22

3-
📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
3+
- 📖 [Remix docs](https://remix.run/docs)
44

55
## Development
66

7-
Run the Vite dev server:
7+
Run the dev server:
88

99
```shellscript
1010
npm run dev
@@ -34,3 +34,7 @@ Make sure to deploy the output of `npm run build`
3434

3535
- `build/server`
3636
- `build/client`
37+
38+
## Styling
39+
40+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

‎final/01-initialize-remix/progressive-pizza/app/root.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@ import {
55
Scripts,
66
ScrollRestoration,
77
} from "@remix-run/react";
8+
import type { LinksFunction } from "@remix-run/node";
9+
10+
import "./tailwind.css";
11+
12+
export const links: LinksFunction = () => [
13+
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
14+
{
15+
rel: "preconnect",
16+
href: "https://fonts.gstatic.com",
17+
crossOrigin: "anonymous",
18+
},
19+
{
20+
rel: "stylesheet",
21+
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
22+
},
23+
];
824

925
export function Layout({ children }: { children: React.ReactNode }) {
1026
return (

‎final/01-initialize-remix/progressive-pizza/app/routes/_index.tsx

+124-27
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,130 @@ export const meta: MetaFunction = () => {
99

1010
export default function Index() {
1111
return (
12-
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13-
<h1>Welcome to Remix</h1>
14-
<ul>
15-
<li>
16-
<a
17-
target="_blank"
18-
href="https://remix.run/tutorials/blog"
19-
rel="noreferrer"
20-
>
21-
15m Quickstart Blog Tutorial
22-
</a>
23-
</li>
24-
<li>
25-
<a
26-
target="_blank"
27-
href="https://remix.run/tutorials/jokes"
28-
rel="noreferrer"
29-
>
30-
Deep Dive Jokes App Tutorial
31-
</a>
32-
</li>
33-
<li>
34-
<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
35-
Remix Docs
36-
</a>
37-
</li>
38-
</ul>
12+
<div className="flex h-screen items-center justify-center">
13+
<div className="flex flex-col items-center gap-16">
14+
<header className="flex flex-col items-center gap-9">
15+
<h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
16+
Welcome to <span className="sr-only">Remix</span>
17+
</h1>
18+
<div className="h-[144px] w-[434px]">
19+
<img
20+
src="/logo-light.png"
21+
alt="Remix"
22+
className="block w-full dark:hidden"
23+
/>
24+
<img
25+
src="/logo-dark.png"
26+
alt="Remix"
27+
className="hidden w-full dark:block"
28+
/>
29+
</div>
30+
</header>
31+
<nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
32+
<p className="leading-6 text-gray-700 dark:text-gray-200">
33+
What&apos;s next?
34+
</p>
35+
<ul>
36+
{resources.map(({ href, text, icon }) => (
37+
<li key={href}>
38+
<a
39+
className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
40+
href={href}
41+
target="_blank"
42+
rel="noreferrer"
43+
>
44+
{icon}
45+
{text}
46+
</a>
47+
</li>
48+
))}
49+
</ul>
50+
</nav>
51+
</div>
3952
</div>
4053
);
4154
}
55+
56+
const resources = [
57+
{
58+
href: "https://remix.run/start/quickstart",
59+
text: "Quick Start (5 min)",
60+
icon: (
61+
<svg
62+
xmlns="http://www.w3.org/2000/svg"
63+
width="24"
64+
height="20"
65+
viewBox="0 0 20 20"
66+
fill="none"
67+
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
68+
>
69+
<path
70+
d="M8.51851 12.0741L7.92592 18L15.6296 9.7037L11.4815 7.33333L12.0741 2L4.37036 10.2963L8.51851 12.0741Z"
71+
strokeWidth="1.5"
72+
strokeLinecap="round"
73+
strokeLinejoin="round"
74+
/>
75+
</svg>
76+
),
77+
},
78+
{
79+
href: "https://remix.run/start/tutorial",
80+
text: "Tutorial (30 min)",
81+
icon: (
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
width="24"
85+
height="20"
86+
viewBox="0 0 20 20"
87+
fill="none"
88+
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
89+
>
90+
<path
91+
d="M4.561 12.749L3.15503 14.1549M3.00811 8.99944H1.01978M3.15503 3.84489L4.561 5.2508M8.3107 1.70923L8.3107 3.69749M13.4655 3.84489L12.0595 5.2508M18.1868 17.0974L16.635 18.6491C16.4636 18.8205 16.1858 18.8205 16.0144 18.6491L13.568 16.2028C13.383 16.0178 13.0784 16.0347 12.915 16.239L11.2697 18.2956C11.047 18.5739 10.6029 18.4847 10.505 18.142L7.85215 8.85711C7.75756 8.52603 8.06365 8.21994 8.39472 8.31453L17.6796 10.9673C18.0223 11.0653 18.1115 11.5094 17.8332 11.7321L15.7766 13.3773C15.5723 13.5408 15.5554 13.8454 15.7404 14.0304L18.1868 16.4767C18.3582 16.6481 18.3582 16.926 18.1868 17.0974Z"
92+
strokeWidth="1.5"
93+
strokeLinecap="round"
94+
strokeLinejoin="round"
95+
/>
96+
</svg>
97+
),
98+
},
99+
{
100+
href: "https://remix.run/docs",
101+
text: "Remix Docs",
102+
icon: (
103+
<svg
104+
xmlns="http://www.w3.org/2000/svg"
105+
width="24"
106+
height="20"
107+
viewBox="0 0 20 20"
108+
fill="none"
109+
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
110+
>
111+
<path
112+
d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
113+
strokeWidth="1.5"
114+
strokeLinecap="round"
115+
/>
116+
</svg>
117+
),
118+
},
119+
{
120+
href: "https://rmx.as/discord",
121+
text: "Join Discord",
122+
icon: (
123+
<svg
124+
xmlns="http://www.w3.org/2000/svg"
125+
width="24"
126+
height="20"
127+
viewBox="0 0 24 20"
128+
fill="none"
129+
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
130+
>
131+
<path
132+
d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
133+
strokeWidth="1.5"
134+
/>
135+
</svg>
136+
),
137+
},
138+
];

‎final/01-initialize-remix/progressive-pizza/app/tailwind.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
html,
6+
body {
7+
@apply bg-white dark:bg-gray-950;
8+
9+
@media (prefers-color-scheme: dark) {
10+
color-scheme: dark;
11+
}
12+
}

0 commit comments

Comments
 (0)