-
Welcome to Remix on Cloudflare Workers
--
-
- - - Remix Docs - - -
- - - Cloudflare Workers Docs - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/cloudflare-workers/app/tailwind.css b/templates/cloudflare-workers/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/cloudflare-workers/app/tailwind.css
+++ b/templates/cloudflare-workers/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/cloudflare-workers/public/logo-dark.png b/templates/cloudflare-workers/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/cloudflare-workers/public/logo-dark.png differ
diff --git a/templates/cloudflare-workers/public/logo-light.png b/templates/cloudflare-workers/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/cloudflare-workers/public/logo-light.png differ
diff --git a/templates/cloudflare-workers/tailwind.config.ts b/templates/cloudflare-workers/tailwind.config.ts
index 34d03da55f6..14d0f00ce6a 100644
--- a/templates/cloudflare-workers/tailwind.config.ts
+++ b/templates/cloudflare-workers/tailwind.config.ts
@@ -3,7 +3,20 @@ import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
} satisfies Config;
diff --git a/templates/cloudflare/app/root.tsx b/templates/cloudflare/app/root.tsx
index 3d3d7332071..61c8b983d28 100644
--- a/templates/cloudflare/app/root.tsx
+++ b/templates/cloudflare/app/root.tsx
@@ -5,8 +5,23 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
+import type { LinksFunction } from "@remix-run/node";
+
import "./tailwind.css";
+export const links: LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
export function Layout({ children }: { children: React.ReactNode }) {
return (
diff --git a/templates/cloudflare/app/routes/_index.tsx b/templates/cloudflare/app/routes/_index.tsx
index 5c68e88b6e2..13a5c00468c 100644
--- a/templates/cloudflare/app/routes/_index.tsx
+++ b/templates/cloudflare/app/routes/_index.tsx
@@ -1,41 +1,138 @@
-import type { MetaFunction } from "@remix-run/cloudflare";
+import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
- {
- name: "description",
- content: "Welcome to Remix on Cloudflare!",
- },
+ { name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
-
+
+
+
+
+ Welcome to Remix +
+
+ 
+ 
+
+
+
+
-
Welcome to Remix on Cloudflare
--
-
- - - Remix Docs - - -
- - - Cloudflare Pages Docs - Remix guide - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/cloudflare/app/tailwind.css b/templates/cloudflare/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/cloudflare/app/tailwind.css
+++ b/templates/cloudflare/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/cloudflare/public/logo-dark.png b/templates/cloudflare/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/cloudflare/public/logo-dark.png differ
diff --git a/templates/cloudflare/public/logo-light.png b/templates/cloudflare/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/cloudflare/public/logo-light.png differ
diff --git a/templates/cloudflare/tailwind.config.ts b/templates/cloudflare/tailwind.config.ts
index 34d03da55f6..14d0f00ce6a 100644
--- a/templates/cloudflare/tailwind.config.ts
+++ b/templates/cloudflare/tailwind.config.ts
@@ -3,7 +3,20 @@ import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
} satisfies Config;
diff --git a/templates/express/app/root.tsx b/templates/express/app/root.tsx
index 3d3d7332071..61c8b983d28 100644
--- a/templates/express/app/root.tsx
+++ b/templates/express/app/root.tsx
@@ -5,8 +5,23 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
+import type { LinksFunction } from "@remix-run/node";
+
import "./tailwind.css";
+export const links: LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
export function Layout({ children }: { children: React.ReactNode }) {
return (
diff --git a/templates/express/app/routes/_index.tsx b/templates/express/app/routes/_index.tsx
index b8a6a8c949b..13a5c00468c 100644
--- a/templates/express/app/routes/_index.tsx
+++ b/templates/express/app/routes/_index.tsx
@@ -9,40 +9,130 @@ export const meta: MetaFunction = () => {
export default function Index() {
return (
-
+
+
+
+
+ Welcome to Remix +
+
+
+
+
+
+
+
-
Welcome to Remix
--
-
- - - 5m Quick Start - - -
- - - 30m Tutorial - - -
- - - Remix Docs - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/express/app/tailwind.css b/templates/express/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/express/app/tailwind.css
+++ b/templates/express/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/express/public/logo-dark.png b/templates/express/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/express/public/logo-dark.png differ
diff --git a/templates/express/public/logo-light.png b/templates/express/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/express/public/logo-light.png differ
diff --git a/templates/express/tailwind.config.ts b/templates/express/tailwind.config.ts
index 34d03da55f6..14d0f00ce6a 100644
--- a/templates/express/tailwind.config.ts
+++ b/templates/express/tailwind.config.ts
@@ -3,7 +3,20 @@ import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
} satisfies Config;
diff --git a/templates/remix-javascript/app/root.jsx b/templates/remix-javascript/app/root.jsx
index 2d9d8b7ba13..90dc3bfcb17 100644
--- a/templates/remix-javascript/app/root.jsx
+++ b/templates/remix-javascript/app/root.jsx
@@ -5,8 +5,22 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
+
import "./tailwind.css";
+export const links = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
export function Layout({ children }) {
return (
diff --git a/templates/remix-javascript/app/routes/_index.jsx b/templates/remix-javascript/app/routes/_index.jsx
index b594bfc90ee..bd1792d9ea0 100644
--- a/templates/remix-javascript/app/routes/_index.jsx
+++ b/templates/remix-javascript/app/routes/_index.jsx
@@ -7,40 +7,130 @@ export const meta = () => {
export default function Index() {
return (
-
+
+
+
+
+ Welcome to Remix +
+
+
+
+
+
+
+
-
Welcome to Remix
--
-
- - - 5m Quick Start - - -
- - - 30m Tutorial - - -
- - - Remix Docs - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/remix-javascript/app/tailwind.css b/templates/remix-javascript/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/remix-javascript/app/tailwind.css
+++ b/templates/remix-javascript/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/remix-javascript/public/logo-dark.png b/templates/remix-javascript/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/remix-javascript/public/logo-dark.png differ
diff --git a/templates/remix-javascript/public/logo-light.png b/templates/remix-javascript/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/remix-javascript/public/logo-light.png differ
diff --git a/templates/remix-javascript/tailwind.config.js b/templates/remix-javascript/tailwind.config.js
index 49d20d5defe..deda7399a3a 100644
--- a/templates/remix-javascript/tailwind.config.js
+++ b/templates/remix-javascript/tailwind.config.js
@@ -1,7 +1,20 @@
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
};
diff --git a/templates/remix/app/root.tsx b/templates/remix/app/root.tsx
index 3d3d7332071..61c8b983d28 100644
--- a/templates/remix/app/root.tsx
+++ b/templates/remix/app/root.tsx
@@ -5,8 +5,23 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
+import type { LinksFunction } from "@remix-run/node";
+
import "./tailwind.css";
+export const links: LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
export function Layout({ children }: { children: React.ReactNode }) {
return (
diff --git a/templates/remix/app/routes/_index.tsx b/templates/remix/app/routes/_index.tsx
index b8a6a8c949b..13a5c00468c 100644
--- a/templates/remix/app/routes/_index.tsx
+++ b/templates/remix/app/routes/_index.tsx
@@ -9,40 +9,130 @@ export const meta: MetaFunction = () => {
export default function Index() {
return (
-
+
+
+
+
+ Welcome to Remix +
+
+
+
+
+
+
+
-
Welcome to Remix
--
-
- - - 5m Quick Start - - -
- - - 30m Tutorial - - -
- - - Remix Docs - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/remix/app/tailwind.css b/templates/remix/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/remix/app/tailwind.css
+++ b/templates/remix/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/remix/public/logo-dark.png b/templates/remix/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/remix/public/logo-dark.png differ
diff --git a/templates/remix/public/logo-light.png b/templates/remix/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/remix/public/logo-light.png differ
diff --git a/templates/remix/tailwind.config.ts b/templates/remix/tailwind.config.ts
index 34d03da55f6..14d0f00ce6a 100644
--- a/templates/remix/tailwind.config.ts
+++ b/templates/remix/tailwind.config.ts
@@ -3,7 +3,20 @@ import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
} satisfies Config;
diff --git a/templates/spa/app/root.tsx b/templates/spa/app/root.tsx
index 1b9c8e4ecc4..10b344357ee 100644
--- a/templates/spa/app/root.tsx
+++ b/templates/spa/app/root.tsx
@@ -5,8 +5,23 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
+import type { LinksFunction } from "@remix-run/node";
+
import "./tailwind.css";
+export const links: LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
export function Layout({ children }: { children: React.ReactNode }) {
return (
diff --git a/templates/spa/app/routes/_index.tsx b/templates/spa/app/routes/_index.tsx
index a78c26c52c3..13a5c00468c 100644
--- a/templates/spa/app/routes/_index.tsx
+++ b/templates/spa/app/routes/_index.tsx
@@ -2,37 +2,137 @@ import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction = () => {
return [
- { title: "New Remix SPA" },
- { name: "description", content: "Welcome to Remix (SPA Mode)!" },
+ { title: "New Remix App" },
+ { name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
-
+
+
+
+
+ Welcome to Remix +
+
+
+
+
+
+
+
-
Welcome to Remix (SPA Mode)
--
-
- - - SPA Mode Guide - - -
- - - Remix Docs - - -
+
);
}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/templates/spa/app/tailwind.css b/templates/spa/app/tailwind.css
index b5c61c95671..303fe158fcf 100644
--- a/templates/spa/app/tailwind.css
+++ b/templates/spa/app/tailwind.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/templates/spa/public/logo-dark.png b/templates/spa/public/logo-dark.png
new file mode 100644
index 00000000000..b24c7aee3a8
Binary files /dev/null and b/templates/spa/public/logo-dark.png differ
diff --git a/templates/spa/public/logo-light.png b/templates/spa/public/logo-light.png
new file mode 100644
index 00000000000..4490ae79307
Binary files /dev/null and b/templates/spa/public/logo-light.png differ
diff --git a/templates/spa/tailwind.config.ts b/templates/spa/tailwind.config.ts
index 34d03da55f6..14d0f00ce6a 100644
--- a/templates/spa/tailwind.config.ts
+++ b/templates/spa/tailwind.config.ts
@@ -3,7 +3,20 @@ import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ "ui-sans-serif",
+ "system-ui",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ },
},
plugins: [],
} satisfies Config;
+
+
+
+
+ Welcome to Remix +
+
+
+
+
+
+
+