reset to remix
This commit is contained in:
commit
789cb7bdfb
22 changed files with 23521 additions and 0 deletions
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;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue