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