Install styled React Aria Components and use it

sergiodxa · Jan 21, 2024 · 218edca · 218edca
1 parent b2bd695
commit 218edca
Show file tree

Hide file tree

Showing 61 changed files with 2,699 additions and 368 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -43,6 +43,7 @@ module.exports = {
 		"react-hooks/exhaustive-deps": "error",
 
 		"jsx-a11y/anchor-is-valid": "off",
+		"jsx-a11y/anchor-has-content": "off",
 
 		"import/order": [
 			"error",

diff --git a/app/components/page-header.tsx b/app/components/page-header.tsx
@@ -7,13 +7,11 @@ type Props = { t: TFunction };
 export function PageHeader({ t }: Props) {
 	return (
 		<header className="flex flex-col gap-2">
-			<h1 className="text-3xl font-bold tracking-tight text-gray-900">
-				{t("header.title")}
-			</h1>
+			<h1 className="text-3xl font-bold tracking-tight">{t("header.title")}</h1>
 
 			<Trans
 				parent="p"
-				className="text-xl text-gray-800"
+				className="text-zing-800 text-xl dark:text-zinc-200"
 				t={t}
 				i18nKey="header.description"
 			/>

diff --git a/app/components/subscribe.tsx b/app/components/subscribe.tsx
@@ -0,0 +1,21 @@
+import type { TFunction } from "i18next";
+
+import { Trans } from "react-i18next";
+
+import { Link } from "~/ui/Link";
+
+type SubscribeProps = { t: TFunction };
+
+export function Subscribe({ t }: SubscribeProps) {
+	return (
+		<Trans
+			t={t}
+			parent="p"
+			className="text-zing-600 text-sm dark:text-zinc-400"
+			i18nKey="subscribe.cta"
+			components={{
+				rss: <Link href="/rss" className="text-blue-600 underline" />,
+			}}
+		/>
+	);
+}
diff --git a/app/components/support.tsx b/app/components/support.tsx
@@ -6,7 +6,7 @@ export function Support() {
 	return (
 		<aside>
 			<div className="mx-auto flex max-w-7xl flex-col gap-5 px-4 sm:px-0 lg:flex-row lg:items-center lg:justify-between lg:gap-0 lg:px-8">
-				<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+				<h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-zinc-100">
 					{t("title")}
 				</h2>
 

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -90,15 +90,6 @@ export default {
 
 	article: { meta: { title: "{{note}} by sergiodxa" } },
 
-	likes: {
-		meta: { title: "Like of sergiodxa" },
-
-		header: {
-			title: "Likes",
-			description: "Links that I read and liked.",
-		},
-	},
-
 	bookmarks: {
 		meta: { title: "Bookmarks of sergiodxa" },
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -18,8 +18,10 @@ import {
 	ScrollRestoration,
 	useLoaderData,
 	useLocation,
+	useNavigate,
 } from "@remix-run/react";
 import { useEffect } from "react";
+import { RouterProvider } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { jsonHash } from "remix-utils/json-hash";
 import { useShouldHydrate } from "remix-utils/use-should-hydrate";
@@ -91,9 +93,13 @@ export default function App() {
 	let { locale } = useLoaderData<typeof loader>();
 	useChangeLanguage(locale);
 
+	let navigate = useNavigate();
+
 	return (
 		<Document locale={locale}>
-			<Outlet />
+			<RouterProvider navigate={navigate}>
+				<Outlet />
+			</RouterProvider>
 		</Document>
 	);
 }
@@ -183,7 +189,7 @@ function Document({
 					href={`https://sergiodxa.com${location.pathname}`}
 				/>
 			</head>
-			<body className="min-h-full bg-neutral-50 font-sans text-neutral-900">
+			<body className="min-h-full bg-white font-sans text-black dark:bg-zinc-900 dark:text-zinc-50">
 				{children}
 				<ScrollRestoration />
 				{shouldHydrate || process.env.NODE_ENV === "development" ? (

diff --git a/app/routes/_layout.$postType.$/article-view.tsx b/app/routes/_layout.$postType.$/article-view.tsx
@@ -12,7 +12,7 @@ export function ArticleView() {
 
 	return (
 		<article className="mx-auto mb-8 flex max-w-screen-md flex-col gap-8">
-			<div className="prose prose-blue mx-auto w-full max-w-prose space-y-8 sm:prose-lg">
+			<div className="prose prose-blue mx-auto w-full max-w-prose space-y-8 sm:prose-lg dark:prose-invert">
 				<MarkdownView content={loaderData.article.body} />
 			</div>
 			<Support />

diff --git a/app/routes/_layout.$postType.$/tutorial-view.tsx b/app/routes/_layout.$postType.$/tutorial-view.tsx
@@ -1,13 +1,14 @@
 import type { loader } from "./route";
 import type { SerializeFrom } from "@remix-run/cloudflare";
 
-import { Await, Link, useAsyncValue, useLoaderData } from "@remix-run/react";
+import { Await, useAsyncValue, useLoaderData } from "@remix-run/react";
 import { Suspense } from "react";
 import { Trans } from "react-i18next";
 
 import { MarkdownView } from "~/components/markdown";
 import { Support } from "~/components/support";
 import { useT } from "~/helpers/use-i18n.hook";
+import { Link } from "~/ui/Link";
 import { cn } from "~/utils/cn";
 
 type LoaderData = SerializeFrom<typeof loader>;
@@ -24,7 +25,7 @@ export function TutorialView() {
 
 	return (
 		<article className="mx-auto flex max-w-screen-md flex-col gap-8 pb-14">
-			<div className="prose prose-blue mx-auto w-full max-w-prose space-y-8 sm:prose-lg">
+			<div className="prose prose-blue mx-auto w-full max-w-prose space-y-8 sm:prose-lg dark:prose-invert">
 				<Versions />
 
 				<div>
@@ -78,8 +79,8 @@ function Versions() {
 					return (
 						<li key={tag} className="contents">
 							<Link
-								to={to}
-								className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 no-underline visited:text-blue-800"
+								href={to}
+								className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 no-underline visited:text-blue-800 dark:bg-blue-900 dark:text-blue-200 dark:visited:text-blue-300"
 							>
 								{tag}
 							</Link>
@@ -99,8 +100,8 @@ function Recommendations() {
 
 	return (
 		<section className="not-prose mt-4 space-y-4">
-			<header className="border-b border-gray-200 pb-5">
-				<h2 className="text-lg font-medium leading-6 text-gray-900">
+			<header className="border-b border-zinc-200 pb-5">
+				<h2 className="text-lg font-medium leading-6 text-zinc-900 dark:text-zinc-100">
 					{t("title")}
 				</h2>
 			</header>
@@ -120,10 +121,7 @@ function Recommendations() {
 
 					return (
 						<div key={slug} className="flex flex-col gap-2">
-							<Link
-								to={`/tutorials/${slug}`}
-								className="line-clamp-2 block text-blue-900 underline visited:text-violet-900"
-							>
+							<Link href={`/tutorials/${slug}`} className="line-clamp-2 block">
 								<p className="text-xl font-semibold">{title}</p>
 							</Link>
 
@@ -134,13 +132,7 @@ function Recommendations() {
 								i18nKey="reason"
 								values={{ tag }}
 								components={{
-									anchor: (
-										// eslint-disable-next-line jsx-a11y/anchor-has-content
-										<Link
-											to={to}
-											className="text-blue-800 underline visited:text-violet-800"
-										/>
-									),
+									anchor: <Link href={to} />,
 								}}
 							/>
 						</div>

diff --git a/app/routes/_layout._index/feed.tsx b/app/routes/_layout._index/feed.tsx
@@ -4,11 +4,11 @@ import type { sort } from "./queries";
 import type { TFunction } from "i18next";
 import type { ReactNode } from "react";
 
-import { Link } from "@remix-run/react";
 import { Trans } from "react-i18next";
 
 import Icon from "~/components/icon";
 import { useLocale } from "~/helpers/use-i18n.hook";
+import { Link } from "~/ui/Link";
 import { cn } from "~/utils/cn";
 
 type Props = {
@@ -29,17 +29,12 @@ export function FeedList({ t, items }: Props) {
 							body={
 								<Trans
 									parent="p"
-									className="text-sm text-gray-800"
+									className="text-sm text-zinc-800 dark:text-zinc-200"
 									i18nKey="feed.article"
 									t={t}
 									values={{ title: item.payload.title }}
 									components={{
-										"link:article": (
-											<Link
-												to={item.payload.link}
-												className="font-medium text-blue-600"
-											/>
-										),
+										"link:article": <Link href={item.payload.link} />,
 									}}
 								/>
 							}
@@ -65,17 +60,12 @@ export function FeedList({ t, items }: Props) {
 							body={
 								<Trans
 									parent="p"
-									className="text-sm text-gray-800"
+									className="text-sm text-zinc-800 dark:text-zinc-200"
 									i18nKey="feed.tutorial"
 									t={t}
 									values={{ title: item.payload.title }}
 									components={{
-										"link:tutorial": (
-											<Link
-												to={item.payload.link}
-												className="font-medium text-blue-600"
-											/>
-										),
+										"link:tutorial": <Link href={item.payload.link} />,
 									}}
 								/>
 							}
@@ -101,17 +91,13 @@ export function FeedList({ t, items }: Props) {
 							body={
 								<Trans
 									parent="p"
-									className="text-sm text-gray-800"
+									className="text-sm text-zinc-800 dark:text-zinc-200"
 									i18nKey="feed.bookmark"
 									t={t}
 									values={{ title: item.payload.title }}
 									components={{
 										"link:bookmark": (
-											<a
-												href={item.payload.link}
-												rel="nofollow noreferer"
-												className="font-medium text-blue-600"
-											/>
+											<Link href={item.payload.link} rel="nofollow noreferer" />
 										),
 									}}
 								/>
@@ -159,7 +145,7 @@ function Item({
 			<div className="relative pb-8">
 				{index !== size ? (
 					<span
-						className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"
+						className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-white dark:bg-zinc-900"
 						aria-hidden="true"
 					/>
 				) : null}
@@ -168,7 +154,7 @@ function Item({
 						<span
 							className={cn(
 								iconColor,
-								"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-neutral-50",
+								"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white dark:ring-zinc-900",
 							)}
 						>
 							{icon}
@@ -177,7 +163,7 @@ function Item({
 					<div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
 						{body}
 
-						<div className="whitespace-nowrap text-right text-sm tabular-nums text-gray-500">
+						<div className="whitespace-nowrap text-right text-sm tabular-nums text-zinc-500">
 							<time dateTime={createdAt.toISOString()}>
 								{createdAt.toLocaleDateString(locale, {
 									month: "short",

diff --git a/app/routes/_layout._index/route.tsx b/app/routes/_layout._index/route.tsx
@@ -1,10 +1,9 @@
 import { json, type LoaderFunctionArgs } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
-import { Trans } from "react-i18next";
 import { z } from "zod";
 
 import { PageHeader } from "~/components/page-header";
-import { SearchForm } from "~/components/search-form";
+import { Subscribe } from "~/components/subscribe";
 import { useT } from "~/helpers/use-i18n.hook";
 import { Logger } from "~/modules/logger.server";
 
@@ -32,46 +31,23 @@ export function loader({ request, context }: LoaderFunctionArgs) {
 			queryTutorials(context, query),
 		]);
 
-		return json(
-			{
-				query,
-				items: sort(articles, bookmarks, tutorials),
-			},
-			{ headers },
-		);
+		return json({ items: sort(articles, bookmarks, tutorials) }, { headers });
 	});
 }
 
 export default function Index() {
-	let { items, query } = useLoaderData<typeof loader>();
+	let { items } = useLoaderData<typeof loader>();
 	let t = useT("home");
 
 	return (
 		<main className="mx-auto flex max-w-screen-sm flex-col gap-8">
 			<PageHeader t={t} />
 
 			<div className="flex flex-col gap-y-4">
-				<Subscribe />
-				<SearchForm t={t} defaultValue={query ?? undefined} />
+				<Subscribe t={t} />
 
 				<FeedList t={t} items={items} />
 			</div>
 		</main>
 	);
 }
-
-function Subscribe() {
-	let t = useT("home.subscribe");
-	return (
-		<Trans
-			t={t}
-			parent="p"
-			className="text-sm text-gray-600"
-			i18nKey="cta"
-			components={{
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				rss: <a href="/rss" className="text-blue-600 underline" />,
-			}}
-		/>
-	);
-}