Skip to content

Migrate to React Router v7 + Cloudflare Pages #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rajatkulkarni95 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Migrate to React Router v7 + Cloudflare Pages #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e710604
Migrate from Next.js/Vercel to React Router v7/Cloudflare Pages
rajatkulkarni95 Mar 27, 2026
5aaa8ab
Add skeleton loaders and YC URL redirect
rajatkulkarni95 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
Expand All @@ -8,12 +6,9 @@
# testing
/coverage

# next.js
/.next/
/out/

# production
# build
/build
/.react-router

# misc
.DS_Store
Expand All @@ -31,8 +26,5 @@ yarn-error.log*
.env.production.local
.env.*

# vercel
.vercel

# typescript
*.tsbuildinfo
37 changes: 17 additions & 20 deletions src/components/Comments/Comment.tsx → app/components/Comments/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { prettyTime } from "~/helpers/time";
import { Fragment, RefObject, useEffect, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import { TComment } from "~/types/story";
import { ChevronDownIcon, ChevronUpIcon, ClipboardIcon } from "~/icons";
import { contains } from "~/helpers/contains";
Expand Down Expand Up @@ -28,11 +28,10 @@ const Comment: React.FC<Props> = (props: Props) => {
op,
} = props;
const isCommenterOP = user === op;
const [collapsed, setCollapsed] = useState<Boolean>(false);
const [collapsed, setCollapsed] = useState<boolean>(false);

const [hoverRef, isHovered] = useHover<HTMLDivElement>();

// find quotes and apply styles
useEffect(() => {
contains("p", ">", "quotes");
}, []);
Expand All @@ -46,13 +45,13 @@ const Comment: React.FC<Props> = (props: Props) => {
return (
<div className="flex" ref={hoverRef}>
<section
className={`pt-0 pr-2 pb-1 pl-3 flex flex-col my-2 relative w-full border-l-2 border-primary`}
className={`pt-0 pr-2 pb-1 pl-3 flex flex-col my-2 relative w-full border-l-2 border-border-primary`}
style={{ marginLeft: `calc(${margin}px * ${level})` }}
>
<div className="flex justify-between">
<span
className={`text-xs text-secondary font-mono py-1 px-2 rounded flex items-center ${
isCommenterOP ? "bg-op" : "bg-secondary"
className={`text-xs text-text-secondary font-mono py-1 px-2 rounded flex items-center ${
isCommenterOP ? "bg-bg-op" : "bg-bg-secondary"
}`}
>
{user}
Expand All @@ -63,21 +62,21 @@ const Comment: React.FC<Props> = (props: Props) => {
className="p-1 ml-2 group focus-visible:ring-1 focus-visible:ring-blue-500"
onClick={() => {
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_VERCEL_URL}/stories/${id}`
`${window.location.origin}/stories/${id}`
);
}}
>
<ClipboardIcon className="h-3 w-3 text-icon mr-2 group-hover:text-primary" />
<ClipboardIcon className="h-3 w-3 text-text-icon mr-2 group-hover:text-text-primary" />
</button>
)}
<span className="py-0.5 px-1.5 text-secondary font-mono bg-tertiary rounded text-[10px]">
<span className="py-0.5 px-1.5 text-text-secondary font-mono bg-bg-tertiary rounded text-[10px]">
{comments_count}
</span>
<button
className="p-1 ml-2 group focus-visible:ring-1 focus-visible:ring-blue-500"
onClick={() => setCollapsed(false)}
>
<ChevronDownIcon className="h-3 w-3 text-icon group-hover:text-primary" />
<ChevronDownIcon className="h-3 w-3 text-text-icon group-hover:text-text-primary" />
</button>
</div>
</div>
Expand All @@ -87,17 +86,16 @@ const Comment: React.FC<Props> = (props: Props) => {

return (
<Fragment>
{/* Indent the children based on the level */}
<div style={{ display: "flex" }} ref={hoverRef}>
<section
className={`pt-0 pr-2 pb-1 pl-3 flex flex-col my-2 relative w-full border-l-2 border-primary`}
className={`pt-0 pr-2 pb-1 pl-3 flex flex-col my-2 relative w-full border-l-2 border-border-primary`}
style={{ marginLeft: `calc(${margin}px * ${level})` }}
>
{!deleted && (
<div className="flex justify-between mb-2">
<span
className={`text-xs text-secondary font-mono py-1 px-2 rounded flex items-center ${
isCommenterOP ? "bg-op" : "bg-secondary"
className={`text-xs text-text-secondary font-mono py-1 px-2 rounded flex items-center ${
isCommenterOP ? "bg-bg-op" : "bg-bg-secondary"
}`}
>
{user}
Expand All @@ -108,34 +106,33 @@ const Comment: React.FC<Props> = (props: Props) => {
className="p-1 ml-2 group focus-visible:ring-1 focus-visible:ring-blue-500"
onClick={() => {
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_VERCEL_URL}/stories/${id}`
`${window.location.origin}/stories/${id}`
);
}}
>
<ClipboardIcon className="h-3 w-3 text-icon mr-2 group-hover:text-primary" />
<ClipboardIcon className="h-3 w-3 text-text-icon mr-2 group-hover:text-text-primary" />
</button>
)}
<span className="text-secondary font-mono text-[10px]">
<span className="text-text-secondary font-mono text-[10px]">
{prettyTime(time)}
</span>
<button
className="p-1 ml-2 group focus-visible:ring-1 focus-visible:ring-blue-500"
onClick={() => setCollapsed(true)}
>
<ChevronUpIcon className="h-3 w-3 text-icon group-hover:text-primary" />
<ChevronUpIcon className="h-3 w-3 text-text-icon group-hover:text-text-primary" />
</button>
</div>
</div>
)}
{deleted ? (
<p className="font-mono text-secondary text-sm">
<p className="font-mono text-text-secondary text-sm">
Comment was deleted :(
</p>
) : (
<InnerHTMLText content={content} />
)}
</section>
{/* // Recursively call the same component for children comments */}
</div>
{comments?.map((comment) => (
<Comment key={comment.id} comment={comment} op={op} />
Expand Down
5 changes: 2 additions & 3 deletions src/components/Comments/CommentList.tsx → app/components/Comments/CommentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Fragment } from "react";
import { TComment } from "~/types/story";
import { CenteredText } from "../Common/Fragments";
import Comment from "./Comment";
Expand All @@ -13,11 +12,11 @@ const CommentList: React.FC<Props> = (props: Props) => {
return (
<div className="mt-4">
{comments.length > 0 ? (
<Fragment>
<>
{comments.map((comment) => (
<Comment key={comment.id} comment={comment} op={op} />
))}
</Fragment>
</>
) : (
<CenteredText>No comments posted yet!</CenteredText>
)}
Expand Down
13 changes: 6 additions & 7 deletions src/components/Common/Dropdown.tsx → app/components/Common/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
// @ts-ignore
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

interface IDropdown {
Expand All @@ -23,30 +22,30 @@ const Dropdown = ({
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button className="py-1 px-2 border max-w-[156px] focus-visible:ring-1 focus-visible:ring-blue-500 outline-none rounded border-primary bg-secondary hover:bg-tertiary duration-150 font-sans cursor-default text-sm">
<button className="py-1 px-2 border max-w-[156px] focus-visible:ring-1 focus-visible:ring-blue-500 outline-none rounded border-border-primary bg-bg-secondary hover:bg-bg-tertiary duration-150 font-sans cursor-default text-sm">
{triggerLabel}
</button>
</DropdownMenu.Trigger>

<DropdownMenu.Portal>
<DropdownMenu.Content
className="shadow-sm bg-primary border border-primary rounded-md p-0.5 w-32"
className="shadow-sm bg-bg-primary border border-border-primary rounded-md p-0.5 w-32"
sideOffset={4}
align="end"
>
{items?.map((item) => (
<DropdownMenu.Item
key={item.id}
className={`px-2 hover:bg-secondary flex items-center cursor-default py-1.5 mb-0.5 outline-none rounded group ring-0 text-sm hover:text-primary ${
className={`px-2 hover:bg-bg-secondary flex items-center cursor-default py-1.5 mb-0.5 outline-none rounded group ring-0 text-sm hover:text-text-primary ${
selectedId === item.id
? "text-primary bg-secondary"
: "text-secondary bg-transparent"
? "text-text-primary bg-bg-secondary"
: "text-text-secondary bg-transparent"
}`}
onClick={() => handleOnClick(item.id)}
>
{item.icon}
{item.label}{" "}
<span className="text-xs text-tertiary font-normal ml-auto">
<span className="text-xs text-text-tertiary font-normal ml-auto">
{item.kbd}
</span>
</DropdownMenu.Item>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Common/Fragments.tsx → app/components/Common/Fragments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ interface IProps {

export const CenteredText = ({ children }: IProps) => {
return (
<p className="font-sans text-base text-primary font-normal text-center">
<p className="font-sans text-base text-text-primary font-normal text-center">
{children}
</p>
);
Expand All @@ -13,13 +13,13 @@ export const CenteredText = ({ children }: IProps) => {
export const CraftedBy = () => {
return (
<div className="mt-auto flex justify-between items-center flex-none">
<p className="text-xs text-secondary">
<p className="text-xs text-text-secondary">
Crafted by{" "}
<a
href="https://rajatkulkarni.dev/"
target="_blank"
rel="noreferrer noopener"
className="hover:text-primary"
className="hover:text-text-primary"
>
Rajat
</a>
Expand All @@ -28,7 +28,7 @@ export const CraftedBy = () => {
href="https://github.com/rajatkulkarni95/hckrnws"
target="_blank"
rel="noreferrer noopener"
className="text-xs text-secondary hover:text-primary"
className="text-xs text-text-secondary hover:text-text-primary"
>
Source Code
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Common/InnerHTMLText.tsx → app/components/Common/InnerHTMLText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const InnerHTMLText = ({ content, isDescription = false }: IProps) => {
return (
<div
dangerouslySetInnerHTML={{ __html: content }}
className={`text-base font-sans [&>p]:mb-1 [&>p]:whitespace-pre-line [&>p>a]:whitespace-pre-line [&>p>a]:underline [&>p>a]:text-link [&>pre]:whitespace-pre-line [&>pre]:p-2 [&>pre]:bg-code [&>pre]:rounded [&>pre]:my-2 [&>pre]:overflow-x-auto [&>pre]:border [&>pre]:border-primary [&>pre>code]:font-mono [&>pre>code]:text-xs md:[&>pre>code]:text-sm ${
isDescription ? "text-secondary mt-3" : "text-primary"
className={`text-base font-sans [&>p]:mb-1 [&>p]:whitespace-pre-line [&>p>a]:whitespace-pre-line [&>p>a]:underline [&>p>a]:text-text-link [&>pre]:whitespace-pre-line [&>pre]:p-2 [&>pre]:bg-bg-code [&>pre]:rounded [&>pre]:my-2 [&>pre]:overflow-x-auto [&>pre]:border [&>pre]:border-border-primary [&>pre>code]:font-mono [&>pre>code]:text-xs md:[&>pre>code]:text-sm ${
isDescription ? "text-text-secondary mt-3" : "text-text-primary"
}`}
/>
);
Expand Down
16 changes: 6 additions & 10 deletions src/components/Common/Meta.tsx → app/components/Common/Meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { prettyTime } from "~/helpers/time";

import { ClockIcon, CommentIcon, UpvoteIcon } from "~/icons";

type Props = {
Expand All @@ -16,9 +15,6 @@ const Meta: React.FC<Props> = ({
points,
comments,
time,
id,
user,
url,
isDetailedView = false,
}) => {
return (
Expand All @@ -29,20 +25,20 @@ const Meta: React.FC<Props> = ({
>
<div className="flex items-center">
<div className="flex items-center mr-2 p-1 pl-0">
<UpvoteIcon className="h-3 w-3 text-icon" />
<span className="text-xs ml-1 text-secondary font-sans">
<UpvoteIcon className="h-3 w-3 text-text-icon" />
<span className="text-xs ml-1 text-text-secondary font-sans">
{points}
</span>
</div>
<div className="flex items-center mr-2 p-1 pl-0">
<CommentIcon className="h-3 w-3 text-icon" />
<span className="text-xs ml-1 text-secondary font-sans">
<CommentIcon className="h-3 w-3 text-text-icon" />
<span className="text-xs ml-1 text-text-secondary font-sans">
{comments}
</span>
</div>
<div className="flex items-center mr-2 p-1 pl-0">
<ClockIcon className="h-3 w-3 text-icon" />
<span className="text-xs ml-1 text-secondary font-sans">
<ClockIcon className="h-3 w-3 text-text-icon" />
<span className="text-xs ml-1 text-text-secondary font-sans">
{prettyTime(time)}
</span>
</div>
Expand Down
27 changes: 13 additions & 14 deletions src/components/Common/Pagination.tsx → app/components/Common/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Fragment } from "react";
import { ArrowLeftIcon, ArrowRightIcon } from "~/icons";

type PaginationProps = {
Expand All @@ -15,49 +14,49 @@ const Pagination = ({
const isPrevDisabled = currentPage === 1;
const isNextDisabled = currentPage === totalPages;
return (
<Fragment>
<>
<div className="flex justify-center items-center mt-8 mb-1 rounded-full">
<button
className="px-4 py-2 rounded-l-full flex items-center border-r border-primary justify-start bg-tertiary group enabled:hover:bg-btn w-20 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-1 focus-visible:ring-blue-500"
className="px-4 py-2 rounded-l-full flex items-center border-r border-border-primary justify-start bg-bg-tertiary group enabled:hover:bg-bg-btn w-20 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-1 focus-visible:ring-blue-500"
disabled={isPrevDisabled}
onClick={() => onChangePage(currentPage - 1)}
>
<ArrowLeftIcon
className={`h-4 w-4 text-icon ${
!isPrevDisabled ? "group-hover:text-btn" : ""
className={`h-4 w-4 text-text-icon ${
!isPrevDisabled ? "group-hover:text-text-btn" : ""
}`}
/>
<span
className={`text-sm font-normal font-sans text-secondary ${
!isPrevDisabled ? "group-hover:text-btn" : ""
className={`text-sm font-normal font-sans text-text-secondary ${
!isPrevDisabled ? "group-hover:text-text-btn" : ""
} ml-1`}
>
Prev
</span>
</button>
<button
className="px-4 py-2 rounded-r-full flex items-center justify-end bg-tertiary group enabled:hover:bg-btn w-20 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-1 focus-visible:ring-blue-500"
className="px-4 py-2 rounded-r-full flex items-center justify-end bg-bg-tertiary group enabled:hover:bg-bg-btn w-20 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-1 focus-visible:ring-blue-500"
disabled={isNextDisabled}
onClick={() => onChangePage(currentPage + 1)}
>
<span
className={`text-sm font-normal font-sans text-secondary ${
!isNextDisabled ? "group-hover:text-btn" : ""
className={`text-sm font-normal font-sans text-text-secondary ${
!isNextDisabled ? "group-hover:text-text-btn" : ""
} mr-1`}
>
Next
</span>
<ArrowRightIcon
className={`h-4 w-4 text-icon ${
!isNextDisabled ? "group-hover:text-btn" : ""
className={`h-4 w-4 text-text-icon ${
!isNextDisabled ? "group-hover:text-text-btn" : ""
}`}
/>
</button>
</div>
<p className="text-center text-secondary text-sm mb-3 font-sans">
<p className="text-center text-text-secondary text-sm mb-3 font-sans">
Page {currentPage} of {totalPages}
</p>
</Fragment>
</>
);
};

Expand Down
Loading