diff --git a/.eslintrc b/.eslintrc index 15b1ed9..181d121 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,6 @@ { - "extends": "next" + "extends": "next", + "rules": { + "@next/next/no-img-element": "off" + } } diff --git a/lib/NavLinks.ts b/lib/NavLinks.ts index 7bf84e0..f86afe6 100644 --- a/lib/NavLinks.ts +++ b/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`, + }, ]; } diff --git a/lib/constants.ts b/lib/constants.ts index 6e7768e..c151ae9 100644 --- a/lib/constants.ts +++ b/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; diff --git a/lib/refreshAccessToken.ts b/lib/refreshAccessToken.ts index 0f85ec5..3619909 100644 --- a/lib/refreshAccessToken.ts +++ b/lib/refreshAccessToken.ts @@ -36,7 +36,7 @@ async function refreshAccessToken(token) { console.error(error); return { - ...token, + // ...token, error: "RefreshAccessTokenError", }; } diff --git a/package.json b/package.json index 0b88301..c06b594 100644 --- a/package.json +++ b/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" } diff --git a/pages/events/[id].tsx b/pages/events/[id].tsx index 12bbf7f..e7a5f5b 100644 --- a/pages/events/[id].tsx +++ b/pages/events/[id].tsx @@ -54,7 +54,7 @@ function EventHeader() { useEffect(() => { setPrimaryColor(data ? colors[event.kind] : "" || ""); return () => setPrimaryColor(); - }, []); + }, [event]); const locatonIsUrl = isUrl(event.location); diff --git a/pages/users/[login]/index.tsx b/pages/users/[login]/index.tsx index 7a2429c..7e25197 100644 --- a/pages/users/[login]/index.tsx +++ b/pages/users/[login]/index.tsx @@ -181,8 +181,10 @@ export default function UserOverview() { @@ -230,7 +232,7 @@ export default function UserOverview() { {cursus.cursus.name} - {cursus.level} + {cursus.level.toFixed(2)} diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 33ad091..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/styles/globals.css b/styles/globals.css index 06196f6..39ce6f8 100644 --- a/styles/globals.css +++ b/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; } diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 3a3bede..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,22 +0,0 @@ -const defaultTheme = require("tailwindcss/defaultTheme"); - -module.exports = { - mode: "jit", - purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./ui/**/*.{js,ts,jsx,tsx}"], - theme: { - extend: { - fontFamily: { - sans: ["Inter var", ...defaultTheme.fontFamily.sans], - }, - colors: { - background: "var(--background)", - foreground: "var(--foreground)", - nav: "rgba(var(--nav), var(--nav-opacity))", - }, - }, - }, - variants: { - extend: {}, - }, - plugins: [require("@tailwindcss/forms")], -}; diff --git a/types/LinkListNode.d.ts b/types/LinkListNode.d.ts index 1c44551..ccb0d64 100644 --- a/types/LinkListNode.d.ts +++ b/types/LinkListNode.d.ts @@ -1,5 +1,5 @@ export interface LinkListNode { name: string; href: string; - className?: string; + initial?: boolean; } diff --git a/ui/Avatar.module.css b/ui/Avatar.module.css deleted file mode 100644 index ef6deaa..0000000 --- a/ui/Avatar.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.container { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - @apply bg-white rounded-full; -} - -.avatar { - @apply object-cover object-center rounded-full; -} - -.error { - @apply rounded-full text-white; -} - -@keyframes pulse { - 0%, - 100% { - background-color: #ffffff; - } - 50% { - background-color: #ffffff88; - } -} diff --git a/ui/Avatar.tsx b/ui/Avatar.tsx index c6d9dcf..0d281fb 100644 --- a/ui/Avatar.tsx +++ b/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 ( -
- {url && ( - - )} -
- ); -} - -export default Avatar; - -export function LoadingAvatar({ size }: { size: number }) { - return ( -
- ); -} - -export function ErrorAvatar({ size }: { size: number }) { - return ( - + + ); } diff --git a/ui/Footer.tsx b/ui/Footer.tsx index c9c3cca..51ef05a 100644 --- a/ui/Footer.tsx +++ b/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 ( - + Edit this page on GitHub + + ); } + +// about the project +// source code +// open an issue +// star on gh diff --git a/ui/NavLink.tsx b/ui/NavLink.tsx index 938f58e..0e9965d 100644 --- a/ui/NavLink.tsx +++ b/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 ( - - + active ? ( + children + ) : ( + - {name} - - + + {children} + + + ); + + return ( + + + {initial === true ? ( + <> + {name.slice(0, 1)} + {name.slice(1)} + + ) : ( + name + )} + + ); } diff --git a/ui/RelativeTime.tsx b/ui/RelativeTime.tsx index 45f0163..ee42f5e 100644 --- a/ui/RelativeTime.tsx +++ b/ui/RelativeTime.tsx @@ -15,7 +15,7 @@ export default function RelativeTime({ }) { const reset = bh ? 3 : 2; const [relative, setRelative] = useState(reset); - const relativeValue = getTimeAgo(date, new Date(), unit); + const relativeValue = getTimeAgo(date || "", new Date(), unit); const days = ( (Date.parse(date) - Date.now()) / 1000 / @@ -46,11 +46,13 @@ export default function RelativeTime({ ) : (value) => value; + const formattedDate = new Date(date).toLocaleString(); + return wrap( ); } diff --git a/ui/StatusBar.tsx b/ui/StatusBar.tsx index 07b0ae9..15e6887 100644 --- a/ui/StatusBar.tsx +++ b/ui/StatusBar.tsx @@ -69,7 +69,7 @@ export default function StatusBar() { > - + diff --git a/ui/UserCard.tsx b/ui/UserCard.tsx index fc426ba..b45b77c 100644 --- a/ui/UserCard.tsx +++ b/ui/UserCard.tsx @@ -29,7 +29,7 @@ function UserCard({ id }: { id: string | number }) { return (