update base, add /about, footer

app/components/about.css.ts

@@ -0,0 +1,78 @@
+import { style } from "@vanilla-extract/css";
+
+export const header = style({
+  fontSize: "2rem",
+  padding: "1rem",
+});
+
+export const outer = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "calc(100vh - 300px)",
+  textAlign: "center",
+  flexDirection: "column",
+});
+
+export const link = style({
+  color: "#9e9e9e",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  ":hover": {
+    color: "#d53875",
+  },
+});
+
+export const itemContainer = style({
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+});
+
+export const item = style({
+  listStyle: "none",
+  display: "flex",
+  padding: "1.5rem 1rem",
+  fontSize: "1.5rem",
+  backgroundColor: "#222",
+  margin: "1rem",
+  borderRadius: "0.4rem",
+  justifyContent: "space-between",
+});
+
+export const itemLink = style({
+  display: "block",
+  marginRight: "0.75rem",
+  paddingRight: "0.75rem",
+  borderRight: "1px solid #666",
+  color: "#d53875",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+
+  ":hover": {
+    color: "#efefef",
+  },
+});
+
+export const itemGithubLink = style({
+  display: "flex",
+  alignItems: "center",
+  marginLeft: "0.75rem",
+  paddingLeft: "0.75rem",
+  borderLeft: "1px solid #666",
+  color: "#ddd",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  fontSize: "1rem",
+
+  ":hover": {
+    color: "#efefef",
+  },
+});
+
+export const love = style({
+  fontSize: "0.9rem",
+  color: "#aaa",
+});

app/components/footer.css.ts

@@ -0,0 +1,76 @@
+import { style } from "@vanilla-extract/css";
+import footer from "~/images/footer.jpg";
+
+export const root = style({
+  height: 300,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  lineHeight: 1,
+});
+export const background = style({
+  backgroundImage: `url(${footer})`,
+  backgroundSize: "cover",
+  backgroundPosition: "bottom",
+  maskImage: "linear-gradient(to bottom, transparent 25%, black)",
+  WebkitMaskImage: "linear-gradient(to bottom, transparent 25%, black)",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+});
+
+export const logo = style({
+  fontSize: "3rem",
+  fontWeight: "bold",
+  fontFamily: "Unbounded, monospace",
+  zIndex: 1,
+  textShadow: "0 0 2em black",
+});
+export const logoX = style({
+  color: "#c8a714",
+  position: "relative",
+  top: "0.8rem",
+  left: "0.075rem",
+});
+export const logoLive = style({
+  color: "#d8d8d8",
+});
+export const logoDot = style({
+  display: "inline-block",
+  width: "0.75em",
+  height: "0.75em",
+  borderRadius: "50%",
+  backgroundColor: "#d8d8d8",
+  position: "relative",
+  left: "0.05rem",
+  top: "0.075em",
+  boxShadow: "0 0 2em black",
+  backgroundImage: `conic-gradient(
+    #d30101 0deg 45deg,
+    #991cba 75deg 165deg,
+    #1564cc 195deg 285deg,
+    #d30101 315deg 360deg
+  )`,
+});
+export const lowerLogo = style({
+  textAlign: "right",
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "0.8rem",
+  fontWeight: "bold",
+  fontFamily: "Helvetica, Arial, sans-serif",
+  padding: "0 0.2rem",
+  color: "#aaa",
+});
+export const link = style({
+  color: "#aaa",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  ":hover": {
+    color: "gold",
+  },
+});

app/components/footer.tsx

@@ -1 +1,29 @@
-export const PS2LiveLogo = () => <div></div>;
+import { Link } from "@remix-run/react";
+import * as styles from "./footer.css";
+
+export const Footer = ({ isMainPage }: { isMainPage?: boolean }) => (
+  <footer>
+    <div className={styles.root}>
+      <div className={styles.background}></div>
+      <div className={styles.logo}>
+        PS2
+        <div className={styles.logoDot}></div>
+        <span className={styles.logoLive}>LIVE</span>
+        <div className={styles.lowerLogo}>
+          <div>
+            {isMainPage ? (
+              <Link className={styles.link} to="/about">
+                more stuff »
+              </Link>
+            ) : (
+              <Link className={styles.link} to="/">
+                less stuff »
+              </Link>
+            )}
+          </div>
+          <div>&copy; {new Date().getFullYear()}</div>
+        </div>
+      </div>
+    </div>
+  </footer>
+);

app/reset.css

@@ -0,0 +1,47 @@
+*,*::before,*::after {
+  box-sizing: border-box
+}
+
+body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {
+  margin: 0
+}
+
+ul[role="list"],ol[role="list"] {
+  list-style: none
+}
+
+html:focus-within {
+  scroll-behavior: smooth
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto
+}
+
+img,picture {
+  max-width: 100%;
+  display: block
+}
+
+input,button,textarea,select {
+  font: inherit
+}
+
+@media(prefers-reduced-motion:reduce) {
+  html:focus-within {
+      scroll-behavior: auto
+  }
+
+  *,*::before,*::after {
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: .01ms !important;
+      scroll-behavior: auto !important
+  }
+}

app/root.tsx

@@ -9,12 +9,16 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 import * as styles from "./root.css";
+import "./reset.css";
 
 export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true },
+  { rel: "preconnect", href: "ttps://fonts.googleapis.com", crossorigin: true },
   {
     rel: "stylesheet",
-    href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css",
+    href: "https://fonts.googleapis.com/css2?family=Unbounded:wght@700&display=swap",
   },
+
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 

app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
+import { Footer } from "~/components/footer";
 import { WorldContainer } from "~/components/index-world-container";
 import { outer } from "~/components/index.css";
 import { fetchMetagameWorlds } from "~/utils/metagame";
@@ -31,6 +32,7 @@ export default function Index() {
       <div className={outer}>
         <WorldContainer metagame={data.metagame} population={data.population} />
       </div>
+      <Footer isMainPage />
     </div>
   );
 }

app/routes/about.tsx

@@ -0,0 +1,109 @@
+import { Footer } from "~/components/footer";
+import {
+  header,
+  item,
+  itemContainer,
+  itemGithubLink,
+  itemLink,
+  link,
+  love,
+  outer,
+} from "~/components/about.css";
+
+export default function About() {
+  return (
+    <div>
+      <div className={outer}>
+        <div>
+          <p className={header}>
+            <b>PS2.LIVE</b> is a network of services that report on the ongoing
+            war on Auraxis.
+          </p>
+          <p style={{ fontStyle: "italic" }}>
+            hat tips:{" "}
+            <a className={link} href="https://ps2.fisu.pw/">
+              fisu
+            </a>
+            ,{" "}
+            <a className={link} href="https://wt.honu.pw/">
+              honu &amp; varunda
+            </a>
+            ,{" "}
+            <a className={link} href="https://voidwell.com/">
+              Voidwell &amp; Lampjaw
+            </a>
+            ,{" "}
+            <a className={link} href="https://census.lithafalcon.cc">
+              Sanctuary &amp; Falcon
+            </a>
+            ,{" "}
+            <a className={link} href="https://ps2alerts.co">
+              PS2Alerts team
+            </a>
+            ,{" "}
+            <a className={link} href="https://discord.gg/yVzGEg3RKV">
+              PS2devs Discord
+            </a>
+            , Daybreak Census Team 💖
+          </p>
+        </div>
+        <div>
+          <ul className={itemContainer}>
+            {[
+              {
+                name: "Saerro",
+                url: "https://saerro.ps2.live",
+                github: "https://github.com/genudine/saerro",
+                description:
+                  "Population GraphQL API focussing on deep granularity.",
+              },
+              {
+                name: "Metagame API",
+                url: "https://metagame.ps2.live",
+                github: "https://github.com/genudine/metagame",
+                description: "World states, contininent locks, alerts, etc.",
+              },
+              {
+                name: "Population API",
+                url: "https://agg.ps2.live/population",
+                github: "https://github.com/genudine/agg-population",
+                description: "Population as seen by many services, averaged.",
+              },
+              {
+                name: "Census Playground",
+                url: "https://try.ps2.live",
+                github: "https://github.com/genudine/try.ps2.live",
+                description: "Explore and share the Census API.",
+              },
+              {
+                name: "ps2.live",
+                url: "https://ps2.live",
+                github: "https://github.com/genudine/ps2.live",
+                description: "This website. It's pretty cool.",
+              },
+              {
+                name: "Medkit",
+                url: "https://github.com/genudine/medkit2",
+                github: "https://github.com/genudine/medkit2",
+                description:
+                  "PS2 Discord bot for population/continents in channel names.",
+              },
+            ].map(({ name, url, github, description }, i) => (
+              <li className={item} key={i}>
+                <a href={url} className={itemLink}>
+                  {name}
+                </a>
+                <div>{description} </div>
+                <a href={github} className={itemGithubLink}>
+                  github
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <p className={love}>Built with 💖 by Pomf =3</p>
+      </div>
+      <Footer />
+    </div>
+  );
+}

package.json

@@ -5,34 +5,34 @@
   "scripts": {
     "build": "remix build",
     "dev:remix": "remix watch",
-    "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler",
+    "dev:wrangler": "npm run wrangler",
-    "dev": "npm-run-all build --parallel \"dev:*\"",
+    "dev": "cross-env NODE_ENV=development npm-run-all build --parallel \"dev:*\"",
-    "start": "cross-env NODE_ENV=production npm run wrangler",
+    "start": "cross-env NODE_ENV=production npm run wrangler --live-reload",
     "typecheck": "tsc",
     "wrangler": "wrangler pages dev ./public",
     "pages:deploy": "npm run build && wrangler pages publish ./public"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "^1.16.0",
+    "@remix-run/cloudflare": "^1.17.0",
-    "@remix-run/cloudflare-pages": "^1.16.0",
+    "@remix-run/cloudflare-pages": "^1.17.0",
-    "@remix-run/css-bundle": "^1.16.0",
+    "@remix-run/css-bundle": "^1.17.0",
-    "@remix-run/react": "^1.16.0",
+    "@remix-run/react": "^1.17.0",
     "cross-env": "^7.0.3",
-    "isbot": "^3.6.8",
+    "isbot": "^3.6.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^3.19.0",
+    "@cloudflare/workers-types": "3.x",
-    "@remix-run/dev": "^1.16.0",
+    "@remix-run/dev": "^1.17.0",
-    "@remix-run/eslint-config": "^1.16.0",
+    "@remix-run/eslint-config": "^1.17.0",
-    "@types/react": "^18.0.35",
+    "@types/react": "^18.2.10",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.4",
-    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/css": "^1.11.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.42.0",
     "npm-run-all": "^4.1.5",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
-    "wrangler": "^2.15.1"
+    "wrangler": "^3.1.0"
   },
   "engines": {
     "node": ">=16.13"

remix.config.js

@@ -15,6 +15,7 @@ module.exports = {
   // publicPath: "/build/",
   future: {
     v2_errorBoundary: true,
+    v2_headers: true,
     v2_meta: true,
     v2_normalizeFormMethod: true,
     v2_routeConvention: true,

wrangler.toml

@@ -1,2 +1 @@
-compatibility_date = "2022-04-05"
+compatibility_date = "2023-06-10"
-compatibility_flags = ["streams_enable_constructors"]