Skip to content

Commit 1c3b376

Browse files
prashant1177iammahmadsMarshallOfSound
authored
fixes #181 > Link to release pages from comparison page (#189)
* Now all the version labels from compare page are clikable and they navigate to there respective versions' release pages. edit file > compare.tsx, VersionTimeline.tsx, root.tsx(Minor change in class name as flex was give twice removed that) Signing this file * fix: overflow in pagination component (#175) --------- Co-authored-by: Muhammad Ahmad Shahid <139263516+iammahmads@users.noreply.github.com> Co-authored-by: Samuel Attard <sam@electronjs.org>
1 parent 991cc08 commit 1c3b376

3 files changed

Lines changed: 33 additions & 12 deletions

File tree

‎app/components/VersionTimeline.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Link } from '@remix-run/react';
2+
13
type VersionTimelineProps = {
24
fromVersion: string;
35
toVersion: string;
@@ -15,9 +17,12 @@ export const VersionTimeline = ({
1517
<div className="flex items-center min-w-max px-5 justify-center">
1618
<div className="flex flex-col items-center mr-2">
1719
<div className="w-4 h-4 rounded-full bg-blue-500"></div>
18-
<span className="text-xs font-medium mt-1 text-blue-600 dark:text-blue-400 whitespace-nowrap">
20+
<Link
21+
to={`/release/${fromVersion}`}
22+
className="text-xs font-medium mt-1 text-blue-600 dark:text-blue-400 whitespace-nowrap"
23+
>
1924
{fromVersion}
20-
</span>
25+
</Link>
2126
</div>
2227

2328
<div className="h-0.5 w-4 bg-gray-300 dark:bg-gray-700"></div>
@@ -27,9 +32,12 @@ export const VersionTimeline = ({
2732
<div key={version} className="flex items-center">
2833
<div className="flex flex-col items-center mx-1">
2934
<div className={`w-2 h-2 rounded-full bg-purple-500`}></div>
30-
<span className="text-[10px] font-medium mt-1 text-purple-600 dark:text-purple-400 whitespace-nowrap">
35+
<Link
36+
to={`/release/v${version}`}
37+
className="text-[10px] font-medium mt-1 text-purple-600 dark:text-purple-400 whitespace-nowrap"
38+
>
3139
v{version}
32-
</span>
40+
</Link>
3341
</div>
3442
<div className="h-0.5 w-4 bg-gray-300 dark:bg-gray-700"></div>
3543
</div>
@@ -38,9 +46,12 @@ export const VersionTimeline = ({
3846

3947
<div className="flex flex-col items-center ml-2">
4048
<div className="w-4 h-4 rounded-full bg-green-500"></div>
41-
<span className="text-xs font-medium mt-1 text-green-600 dark:text-green-400 whitespace-nowrap">
49+
<Link
50+
to={`/release/${toVersion}`}
51+
className="text-xs font-medium mt-1 text-green-600 dark:text-green-400 whitespace-nowrap"
52+
>
4253
{toVersion}
43-
</span>
54+
</Link>
4455
</div>
4556
</div>
4657
</div>

‎app/root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
5858
<body>
5959
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 flex flex-col">
6060
<header className="sticky top-0 z-10 bg-white/90 dark:bg-[#2f3241]/90 backdrop-blur-md border-b border-gray-200 dark:border-[#9feaf9]/10">
61-
<div className="container mx-auto px-4 py-4 flex items-center justify-between flex flex-col sm:flex-row gap-4">
61+
<div className="container mx-auto px-4 py-4 items-center justify-between flex flex-col sm:flex-row gap-4">
6262
<div className="flex items-center gap-2">
6363
<Logo className="w-6 h-6 text-[#2f3241] dark:text-[#9feaf9]" />
6464
<Link to="/" prefetch="intent">

‎app/routes/release/compare.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
22
import { parse as semverParse, lt as semverLessThan, gt as semverGreaterThan } from 'semver';
3-
import { redirect, useLoaderData, useNavigate, useNavigation, useParams } from '@remix-run/react';
3+
import {
4+
Link,
5+
redirect,
6+
useLoaderData,
7+
useNavigate,
8+
useNavigation,
9+
useParams,
10+
} from '@remix-run/react';
411
import {
512
SiGooglechrome,
613
SiGooglechromeHex,
@@ -226,8 +233,10 @@ export default function CompareReleases() {
226233

227234
<div className="text-center mt-2">
228235
<span className="text-xs text-gray-500 dark:text-gray-400">
229-
{toVersion} includes changes from {versionsBetween.length + 1} version
230-
{versionsBetween.length ? 's' : ''} since {fromVersion}
236+
<Link to={`/release/${toVersion}`}>{toVersion}</Link> includes changes from{' '}
237+
{versionsBetween.length + 1} version
238+
{versionsBetween.length ? 's' : ''} since{' '}
239+
<Link to={`/release/${fromVersion}`}>{fromVersion}</Link>
231240
</span>
232241
</div>
233242
</div>
@@ -254,11 +263,12 @@ export default function CompareReleases() {
254263
</div>
255264
<div className="text-gray-700 dark:text-gray-300">
256265
<div className="flex items-center gap-2 mb-1">
257-
<span
266+
<Link
267+
to={`/release/v${version}`}
258268
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-${color}-100 text-${color}-800 dark:bg-${color}-900/30 dark:text-${color}-400`}
259269
>
260270
{version}
261-
</span>
271+
</Link>
262272
</div>
263273
<div dangerouslySetInnerHTML={{ __html: content }}></div>
264274
</div>

0 commit comments

Comments
 (0)