feat: move to theme-ui

.eslintrc

@@ -1,3 +1,6 @@
 {
- "extends": "next"
+ "extends": "next",
+ "rules": {
+ "@next/next/no-img-element": "off"
+ }
 }

lib/NavLinks.ts

@@ -6,22 +6,27 @@ export function getUserNavLinks(): LinkListNode[] {
  {
  name: "Overview",
  href: baseUrl,
+ initial: true,
  },
  {
  name: "Projects",
  href: `${baseUrl}/projects`,
+ initial: true,
  },
  {
  name: "Quests",
  href: `${baseUrl}/quests`,
+ initial: true,
  },
  {
  name: "Achievements",
  href: `${baseUrl}/achievements`,
+ initial: true,
  },
  {
  name: "Locations",
  href: `${baseUrl}/locations`,
+ initial: true,
  },
  {
  name: "Scales",
@@ -75,6 +80,14 @@ export function CampusNavLinks(): LinkListNode[] {
  name: "Events",
  href: `${baseUrl}/events`,
  },
+ {
+ name: "Clusters",
+ href: `${baseUrl}/clusters`,
+ },
+ {
+ name: "Checkins",
+ href: `${baseUrl}/checkins`,
+ },
  ];
 }
 

lib/constants.ts

@@ -1,4 +1,5 @@
 export const apiBaseUrl = "https://api.intra.42.fr";
+export const AVATAR_DEFAULT = "https://cdn.intra.42.fr/users/default.jpg";
 export const locale = "en-UK";
 export const REPO = "https://github.com/leeoocca/42extra";
 export const TITLE_DEPRECATED_ID = 82;

lib/refreshAccessToken.ts

@@ -36,7 +36,7 @@ async function refreshAccessToken(token) {
  console.error(error);
 
  return {
- ...token,
+ // ...token,
  error: "RefreshAccessTokenError",
  };
  }

package.json

@@ -12,7 +12,6 @@
  "dependencies": {
  "@badrap/bar-of-progress": "^0.1.2",
  "@emotion/react": "^11.8.2",
- "@tailwindcss/forms": "^0.5.0",
  "@theme-ui/presets": "^0.13.1",
  "datebook": "^7.0.8",
  "kbar": "0.1.0-beta.33",
@@ -34,13 +33,10 @@
  "devDependencies": {
  "@types/node": "^17.0.21",
  "@types/react": "^17.0.41",
- "autoprefixer": "^10.4.4",
  "eslint": "8.11.0",
  "eslint-config-next": "^12.1.0",
- "postcss": "^8.4.12",
  "prettier": "^2.6.2",
  "prettier-plugin-organize-imports": "^2.3.4",
- "tailwindcss": "^3.0.23",
  "typescript": "^4.6.2",
  "vercel": "^24.0.0"
  }

pages/events/[id].tsx

@@ -54,7 +54,7 @@ function EventHeader() {
  useEffect(() => {
  setPrimaryColor(data ? colors[event.kind] : "" || "");
  return () => setPrimaryColor();
- }, []);
+ }, [event]);
 
  const locatonIsUrl = isUrl(event.location);
 

pages/users/[login]/index.tsx

@@ -181,8 +181,10 @@ export default function UserOverview() {
  <RelativeTime
  date={new Date(
  Date.parse(user.anonymize_date) -
- 365 * 24 * 60 * 60 * 1000
+ 365 * 24 * 60 * 60 * 1000 +
+ 2 * 60 * 60 * 1000
  ).toISOString()}
+ // TODO check if works fine with other time zones
  unit="day"
  />
  </Text>
@@ -230,7 +232,7 @@ export default function UserOverview() {
  {cursus.cursus.name}
  </Text>
  <Text sx={{ opacity: "75%" }}>
- {cursus.level}
+ {cursus.level.toFixed(2)}
  </Text>
  </Flex>
  </Link>

styles/globals.css

@@ -1,10 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
- --nav: 55, 55, 55;
- --nav-opacity: 0.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

types/LinkListNode.d.ts

@@ -1,5 +1,5 @@
 export interface LinkListNode {
  name: string;
  href: string;
- className?: string;
+ initial?: boolean;
 }

ui/Avatar.tsx

@@ -1,52 +1,28 @@
+import { Box, Avatar as TAvatar } from "@theme-ui/components";
+import { AVATAR_DEFAULT } from "lib/constants";
 import Image from "next/image";
-import styles from "./Avatar.module.css";
 
-function Avatar({
+export default function Avatar({
  url,
  size,
- className,
  deprecated = false,
 }: {
- url: string | null;
+ url: string;
  size: number;
- className?: string;
  deprecated?: boolean;
 }) {
  return (
- <div
- className={`${styles.container}${className ? ` ${className}` : ""}`}
- style={{
- width: !className && size,
- height: !className && size,
+ <Box
+ sx={{
+ w: size,
+ h: size,
  filter: `grayscale(${deprecated ? "1" : "0"})`,
  }}
  >
- {url && (
- <Image
- src={url}
- height={size * 2}
- width={size * 2}
- className={styles.avatar}
- quality={75}
- />
- )}
- </div>
- );
-}
-
-export default Avatar;
-
-export function LoadingAvatar({ size }: { size: number }) {
- return (
- <div
- className={styles.container}
- style={{ width: size, height: size }}
- ></div>
- );
-}
-
-export function ErrorAvatar({ size }: { size: number }) {
- return (
- <Avatar url="https://cdn.intra.42.fr/users/default.jpg" size={size} />
+ <TAvatar
+ src={url ? url : AVATAR_DEFAULT}
+ sx={{ height: size, width: size, objectFit: "cover" }}
+ />
+ </Box>
  );
 }

ui/Footer.tsx

@@ -1,18 +1,40 @@
+import { Container, Link as TLink, Text } from "@theme-ui/components";
+import { REPO } from "lib/constants";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function Footer() {
+ const { pathname } = useRouter();
  return (
- <footer className="w-full my-4 text-sm font-light text-center text-gray-400">
- <a
- href="https://github.com/leeoocca/42extra"
- className="font-normal text-gray-200"
+ <Container
+ as="footer"
+ my={3}
+ sx={{
+ display: "flex",
+ justifyContent: "space-between",
+ fontWeight: 300,
+ fontSize: 12,
+ color: "gray",
+ }}
+ >
+ <Text>
+ <TLink href={REPO}>42extra</TLink> — a project by{" "}
+ <Link href="/users/lrocca" passHref>
+ <TLink>lrocca</TLink>
+ </Link>
+ </Text>
+ <TLink
+ href={`${REPO}/blob/main/pages${
+ pathname === "/" ? "/index" : pathname
+ }.tsx`}
  >
- 42extra
- </a>{" "}
- — a project by{" "}
- <Link href="/users/lrocca">
- <a className="text-gray-200">lrocca</a>
- </Link>
- </footer>
+ Edit this page on GitHub
+ </TLink>
+ </Container>
  );
 }
+
+// about the project
+// source code
+// open an issue
+// star on gh

ui/NavLink.tsx

@@ -1,24 +1,65 @@
+import { Link as TLink, Text } from "@theme-ui/components";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { LinkListNode } from "types/LinkListNode";
 
-function NavLink({ name, href, className }: LinkListNode) {
+const activeOverrides = {
+ borderBottomColor: "white",
+ opacity: "100%",
+ fontWeight: 600,
+};
+
+function NavLink({ name, href, initial }: LinkListNode) {
  const router = useRouter();
 
  const active = router.pathname === href;
 
- return (
- <Link href={{ pathname: href, query: router.query }}>
- <a
-  className={`${
-  active
-  ? "opacity-100 border-white"
-  : "opacity-75 border-transparent"
- } hover:opacity-100 hover:text-white border-b-2 px-1 py-2 font-medium ease-in-out transition-opacity focus:opacity-100 ${className}`}
+ const Wrap = ({ children }) =>
+ active ? (
+ children
+ ) : (
+ <Link
+ href={{ pathname: href, query: router.query }}
+ passHref
+ scroll={false}
  >
- {name}
- </a>
- </Link>
+ <TLink
+ sx={{
+ color: "text",
+ textDecoration: "none",
+ }}
+ >
+ {children}
+ </TLink>
+ </Link>
+ );
+
+ return (
+ <Text
+ as="li"
+ sx={{
+ p: 2,
+ minWidth: "auto",
+ borderBottom: "transparent solid 2px",
+ opacity: "75%",
+ fontWeight: 500,
+ ...(active && activeOverrides),
+ "&:hover": {
+ opacity: "100%",
+ },
+ }}
+ >
+ <Wrap>
+ {initial === true ? (
+ <>
+ <Text as="u">{name.slice(0, 1)}</Text>
+ {name.slice(1)}
+ </>
+ ) : (
+ name
+ )}
+ </Wrap>
+ </Text>
  );
 }