reset to remix
This commit is contained in:
commit
789cb7bdfb
22 changed files with 23521 additions and 0 deletions
4
.eslintrc.js
Normal file
4
.eslintrc.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/** @type {import('eslint').Linter.Config} */
|
||||||
|
module.exports = {
|
||||||
|
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
|
||||||
|
};
|
||||||
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
/.cache
|
||||||
|
/functions/\[\[path\]\].js
|
||||||
|
/functions/\[\[path\]\].js.map
|
||||||
|
/public/build
|
||||||
|
.env
|
||||||
1
.node-version
Normal file
1
.node-version
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
16.13.0
|
||||||
22
README.md
Normal file
22
README.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Welcome to Remix!
|
||||||
|
|
||||||
|
- [Remix Docs](https://remix.run/docs)
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
You will be utilizing Wrangler for local development to emulate the Cloudflare runtime. This is already wired up in your package.json as the `dev` script:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# start the remix dev server and wrangler
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open up [http://127.0.0.1:8788](http://127.0.0.1:8788) and you should be ready to go!
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Cloudflare Pages are currently only deployable through their Git provider integrations.
|
||||||
|
|
||||||
|
If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages) and after verifying your email address with Cloudflare, go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything).
|
||||||
|
|
||||||
|
Configure the "Build command" should be set to `npm run build`, and the "Build output directory" should be set to `public`.
|
||||||
20
app/components/Card.tsx
Normal file
20
app/components/Card.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Link } from "@remix-run/react";
|
||||||
|
import { styled } from "styletron-react";
|
||||||
|
|
||||||
|
export const CardBase = styled("div", {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
padding: "1rem",
|
||||||
|
backgroundColor: "#000",
|
||||||
|
border: "2px solid #fff",
|
||||||
|
borderRadius: "0.5rem",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const CardHeader = styled(Link, {
|
||||||
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
backgroundColor: "#ccc",
|
||||||
|
borderRadius: "0.5rem",
|
||||||
|
});
|
||||||
0
app/components/FactionBar.tsx
Normal file
0
app/components/FactionBar.tsx
Normal file
22
app/entry.client.tsx
Normal file
22
app/entry.client.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { RemixBrowser } from "@remix-run/react";
|
||||||
|
import { startTransition, StrictMode } from "react";
|
||||||
|
import { hydrateRoot } from "react-dom/client";
|
||||||
|
|
||||||
|
function hydrate() {
|
||||||
|
startTransition(() => {
|
||||||
|
hydrateRoot(
|
||||||
|
document,
|
||||||
|
<StrictMode>
|
||||||
|
<RemixBrowser />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof requestIdleCallback === "function") {
|
||||||
|
requestIdleCallback(hydrate);
|
||||||
|
} else {
|
||||||
|
// Safari doesn't support requestIdleCallback
|
||||||
|
// https://caniuse.com/requestidlecallback
|
||||||
|
setTimeout(hydrate, 1);
|
||||||
|
}
|
||||||
26
app/entry.server.tsx
Normal file
26
app/entry.server.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import type { EntryContext } from "@remix-run/node";
|
||||||
|
import { renderToString } from "react-dom/server";
|
||||||
|
import { RemixServer } from "@remix-run/react";
|
||||||
|
|
||||||
|
import { collectStyles } from "./styletron";
|
||||||
|
|
||||||
|
export default function handleRequest(
|
||||||
|
request: Request,
|
||||||
|
responseStatusCode: number,
|
||||||
|
responseHeaders: Headers,
|
||||||
|
remixContext: EntryContext
|
||||||
|
) {
|
||||||
|
let markup = renderToString(
|
||||||
|
<RemixServer context={remixContext} url={request.url} />
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add server-rendered styles
|
||||||
|
markup = markup.replace("__STYLES__", collectStyles());
|
||||||
|
|
||||||
|
responseHeaders.set("Content-Type", "text/html");
|
||||||
|
|
||||||
|
return new Response("<!DOCTYPE html>" + markup, {
|
||||||
|
status: responseStatusCode,
|
||||||
|
headers: responseHeaders,
|
||||||
|
});
|
||||||
|
}
|
||||||
11
app/globalStyles.ts
Normal file
11
app/globalStyles.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { styled } from "styletron-react";
|
||||||
|
|
||||||
|
export const Body = styled("body", {
|
||||||
|
backgroundImage:
|
||||||
|
"radial-gradient(ellipse at bottom right, #1b2735 0%,#090a0f 100%)",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundAttachment: "fixed",
|
||||||
|
color: "#fff",
|
||||||
|
lineHeight: 1.6,
|
||||||
|
fontFamily: "Inter, system-ui, sans-serif",
|
||||||
|
});
|
||||||
46
app/root.tsx
Normal file
46
app/root.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import type { LinksFunction, MetaFunction } from "@remix-run/node";
|
||||||
|
import { Provider as StyletronProvider } from "styletron-react";
|
||||||
|
import {
|
||||||
|
Links,
|
||||||
|
LiveReload,
|
||||||
|
Meta,
|
||||||
|
Outlet,
|
||||||
|
Scripts,
|
||||||
|
ScrollRestoration,
|
||||||
|
} from "@remix-run/react";
|
||||||
|
|
||||||
|
import { styletron } from "./styletron";
|
||||||
|
import { Body } from "./globalStyles";
|
||||||
|
|
||||||
|
export const meta: MetaFunction = () => ({
|
||||||
|
charset: "utf-8",
|
||||||
|
title: "New Remix App",
|
||||||
|
viewport: "width=device-width,initial-scale=1",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const links: LinksFunction = () => [
|
||||||
|
{
|
||||||
|
rel: "stylesheet",
|
||||||
|
href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<Meta />
|
||||||
|
<Links />
|
||||||
|
{typeof document === "undefined" ? "__STYLES__" : null}
|
||||||
|
</head>
|
||||||
|
<StyletronProvider value={styletron}>
|
||||||
|
<Body>
|
||||||
|
<Outlet />
|
||||||
|
<ScrollRestoration />
|
||||||
|
<Scripts />
|
||||||
|
<LiveReload />
|
||||||
|
</Body>
|
||||||
|
</StyletronProvider>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
app/routes/index.tsx
Normal file
35
app/routes/index.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { CardBase, CardHeader } from "~/components/Card";
|
||||||
|
import { HiChevronRight } from "react-icons/hi2";
|
||||||
|
import type { IndexResponse, World } from "~/utils/saerro";
|
||||||
|
import { indexQuery } from "~/utils/saerro";
|
||||||
|
import { useLoaderData } from "@remix-run/react";
|
||||||
|
import { json } from "@remix-run/cloudflare";
|
||||||
|
|
||||||
|
export const loader = async () => {
|
||||||
|
return json(await indexQuery());
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
const { allWorlds } = useLoaderData<typeof loader>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{allWorlds.map((world) => (
|
||||||
|
<WorldCard key={world.id} world={world} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorldCard = ({ world }: { world: World }) => {
|
||||||
|
return (
|
||||||
|
<CardBase>
|
||||||
|
<CardHeader to={`/worlds/${world.id}`}>
|
||||||
|
<div>{world.name}</div>
|
||||||
|
<div>
|
||||||
|
<HiChevronRight />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</CardBase>
|
||||||
|
);
|
||||||
|
};
|
||||||
33
app/styletron.ts
Normal file
33
app/styletron.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { Client, Server } from "styletron-engine-atomic"; // or "styletron-engine-monolithic"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The Styletron engine to use on the current runtime.
|
||||||
|
*/
|
||||||
|
export const styletron =
|
||||||
|
typeof document === "undefined"
|
||||||
|
? new Server()
|
||||||
|
: new Client({
|
||||||
|
hydrate: getHydrateClass(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export function isStyletronClient(engine: typeof styletron): engine is Client {
|
||||||
|
return styletron instanceof Client;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isStyletronServer(engine: typeof styletron): engine is Server {
|
||||||
|
return styletron instanceof Server;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function collectStyles(): string {
|
||||||
|
if (!isStyletronServer(styletron)) {
|
||||||
|
throw new Error("Can only collect styles during server-side rendering.");
|
||||||
|
}
|
||||||
|
|
||||||
|
return styletron.getStylesheetsHtml();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getHydrateClass(): HTMLCollectionOf<HTMLStyleElement> {
|
||||||
|
return document.getElementsByClassName(
|
||||||
|
"_styletron_hydrate_"
|
||||||
|
) as HTMLCollectionOf<HTMLStyleElement>;
|
||||||
|
}
|
||||||
90
app/utils/saerro.ts
Normal file
90
app/utils/saerro.ts
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
export const saerroFetch = async <T>(query: string): Promise<T> => {
|
||||||
|
const response = await fetch("https://saerro.ps2.live/graphql", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ query }),
|
||||||
|
});
|
||||||
|
const json: { data: T } = await response.json();
|
||||||
|
return json.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Population = {
|
||||||
|
total: number;
|
||||||
|
nc: number;
|
||||||
|
tr: number;
|
||||||
|
vs: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Zone = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
population: Population;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type World = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
population: Population;
|
||||||
|
zones: {
|
||||||
|
all: Zone[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Health = {
|
||||||
|
ingestReachable: string;
|
||||||
|
ingest: string;
|
||||||
|
database: string;
|
||||||
|
worlds: {
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type IndexResponse = {
|
||||||
|
health: Health;
|
||||||
|
allWorlds: World[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const indexQuery = async (): Promise<IndexResponse> => {
|
||||||
|
const query = `query {
|
||||||
|
health {
|
||||||
|
ingestReachable
|
||||||
|
ingest
|
||||||
|
database
|
||||||
|
worlds {
|
||||||
|
name
|
||||||
|
status
|
||||||
|
}
|
||||||
|
}
|
||||||
|
allWorlds {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
population {
|
||||||
|
total
|
||||||
|
nc
|
||||||
|
tr
|
||||||
|
vs
|
||||||
|
}
|
||||||
|
zones {
|
||||||
|
all {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
population {
|
||||||
|
total
|
||||||
|
nc
|
||||||
|
tr
|
||||||
|
vs
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const indexData: IndexResponse = await saerroFetch(query);
|
||||||
|
|
||||||
|
indexData.allWorlds.sort((a, b) => a.id - b.id);
|
||||||
|
|
||||||
|
return indexData;
|
||||||
|
};
|
||||||
23109
package-lock.json
generated
Normal file
23109
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
40
package.json
Normal file
40
package.json
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"sideEffects": false,
|
||||||
|
"scripts": {
|
||||||
|
"build": "remix build",
|
||||||
|
"dev:remix": "remix watch",
|
||||||
|
"dev:wrangler": "cross-env NODE_ENV=development npm run wrangler",
|
||||||
|
"dev": "remix build && run-p \"dev:*\"",
|
||||||
|
"start": "cross-env NODE_ENV=production npm run wrangler",
|
||||||
|
"typecheck": "tsc",
|
||||||
|
"wrangler": "wrangler pages dev ./public"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/cloudflare": "^1.12.0",
|
||||||
|
"@remix-run/cloudflare-pages": "^1.12.0",
|
||||||
|
"@remix-run/react": "^1.12.0",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@cloudflare/workers-types": "^3.18.0",
|
||||||
|
"@remix-run/dev": "^1.12.0",
|
||||||
|
"@remix-run/eslint-config": "^1.12.0",
|
||||||
|
"@remix-run/node": "^1.12.0",
|
||||||
|
"@types/react": "^18.0.25",
|
||||||
|
"@types/react-dom": "^18.0.8",
|
||||||
|
"eslint": "^8.27.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^2.8.3",
|
||||||
|
"react-icons": "^4.7.1",
|
||||||
|
"styletron-engine-atomic": "^1.5.0",
|
||||||
|
"styletron-react": "^6.1.0",
|
||||||
|
"typescript": "^4.8.4",
|
||||||
|
"wrangler": "^2.2.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
public/_headers
Normal file
2
public/_headers
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/build/*
|
||||||
|
Cache-Control: public, max-age=31536000, s-maxage=31536000
|
||||||
5
public/_routes.json
Normal file
5
public/_routes.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"version": 1,
|
||||||
|
"include": ["/*"],
|
||||||
|
"exclude": ["/build/*"]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
11
remix.config.js
Normal file
11
remix.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/** @type {import('@remix-run/dev').AppConfig} */
|
||||||
|
module.exports = {
|
||||||
|
serverBuildTarget: "cloudflare-pages",
|
||||||
|
server: "./server.js",
|
||||||
|
devServerBroadcastDelay: 1000,
|
||||||
|
ignoredRouteFiles: ["**/.*"],
|
||||||
|
// appDirectory: "app",
|
||||||
|
// assetsBuildDirectory: "public/build",
|
||||||
|
// serverBuildPath: "functions/[[path]].js",
|
||||||
|
// publicPath: "/build/",
|
||||||
|
};
|
||||||
3
remix.env.d.ts
vendored
Normal file
3
remix.env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
/// <reference types="@remix-run/dev" />
|
||||||
|
/// <reference types="@remix-run/cloudflare" />
|
||||||
|
/// <reference types="@cloudflare/workers-types" />
|
||||||
12
server.js
Normal file
12
server.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
|
||||||
|
import * as build from "@remix-run/dev/server-build";
|
||||||
|
|
||||||
|
const handleRequest = createPagesFunctionHandler({
|
||||||
|
build,
|
||||||
|
mode: process.env.NODE_ENV,
|
||||||
|
getLoadContext: (context) => context.env,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function onRequest(context) {
|
||||||
|
return handleRequest(context);
|
||||||
|
}
|
||||||
22
tsconfig.json
Normal file
22
tsconfig.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ES2019"],
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"target": "ES2019",
|
||||||
|
"strict": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["./app/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Remix takes care of building everything in `remix build`.
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue