Skip to content

Added visited styles for links #995

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

Merged
merged 3 commits into from
Mar 4, 2025
Merged

Added visited styles for links #995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71eea8f
Added visited styles for links
zahidalidev Feb 24, 2025
f5cd49c
Merge branch 'main' into main
zahidalidev Mar 4, 2025
724be3e
Updated link styles
zahidalidev Mar 4, 2025
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
6 changes: 3 additions & 3 deletions src/components/Prose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@ export function Prose<T extends React.ElementType = 'div'>({
// lead
'prose-lead:text-slate-500 dark:prose-lead:text-dark-text-secondary',
// links
'prose-a:font-semibold dark:prose-a:text-link',
'prose-a:font-semibold prose-a:text-vermilion-00 hover:prose-a-text:[#606060] visited:text-[#4A4A4A] hover:visited:text-[#606060] dark:prose-a:vermilion-11 dark:hover:prose-a:dark-text-secondary dark:visited:text-[#606060] dark:hover:visited:text-[#A9A9A9]',
// link underline
'prose-a:underline prose-a:decoration-link-light hover:prose-a:text-link-light hover:prose-a:underline dark:prose-a:no-underline dark:hover:prose-a:underline',
'prose-a:underline hover:prose-a:text-[#606060] hover:prose-a:underline dark:prose-a:underline dark:hover:prose-a:underline',
// pre
'prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
// hr
'dark:prose-hr:border-slate-800',
//table head alignment
'prose-th:table-cell',
// Strong
'prose-strong:text-dark-bg dark:prose-strong:text-dark-text-primary',
'prose-strong:text-vermilion-08 dark:prose-strong:text-vermilion-08',
// Inline code block
'prose-code:before:content-none prose-code:after:content-none',
// Video
Expand Down
46 changes: 23 additions & 23 deletions src/components/mdx/CustomLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Link from 'next/link';
import React from 'react';
import { BookOpenText } from 'lucide-react';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hoverCard";

interface CustomLinkProps
Expand All @@ -29,7 +29,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
// Handling external links
if (href.startsWith('http')) {
return (
<a href={href} target="_blank" rel="noopener noreferrer" {...rest} className='no-underline text-vermilion-07'>
<a href={href} target="_blank" rel="noopener noreferrer" {...rest} className='underline dark:visited:text-[#606060] dark:hover:visited-text-dark-text-secondary text-vermilion-00 dark:text-vermilion-11 hover:text-[#606060] dark:hover:text-dark-text-secondary visited:text-[#4A4A4A] hover:visited:text-[#606060]'>
{children}
</a>
);
Expand All @@ -38,44 +38,44 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
// Handling anchor links
if (href.startsWith('#')) {
return (
<a href={href} {...rest} className='no-underline hover-underline'>
<a href={href} {...rest} className='underline dark:visited:text-[#606060] dark:hover:visited-text-dark-text-secondary text-vermilion-00 dark:text-vermilion-11 hover:text-[#606060] dark:hover:text-dark-text-secondary visited:text-[#4A4A4A] hover:visited:text-[#606060]'>
{children}
</a>
);
}

const highlightCode = (text: string) => {
return text.split(/(`.+?`)/g).map((part: string, index: number) =>
part.startsWith('`') && part.endsWith('`') ? (
<span key={index} className='border font-medium bg-slate-100 dark:bg-slate-900 mx-1 pl-1 py-0.5 rounded-md border-slate-300 dark:border-slate-700'>
{part.slice(1, -1)}
</span>
) : (
part
)
);
};
return text.split(/(`.+?`)/g).map((part: string, index: number) =>
part.startsWith('`') && part.endsWith('`') ? (
<span key={index} className='border font-medium bg-slate-100 dark:bg-slate-900 mx-1 pl-1 py-0.5 rounded-md border-slate-300 dark:border-slate-700'>
{part.slice(1, -1)}
</span>
) : (
part
)
);
};

// If there's a title, wrap the content in a HoverCard for tooltip
if (rest?.title) {
return (
// If there's a title, wrap the content in a HoverCard for tooltip
if (rest?.title) {
return (
<HoverCard>
<HoverCardTrigger asChild>
<Link href={cleanedHref.replaceAll("'", '')} {...rest} title='' className='inline text-teal-07 hover:text-teal-08 no-underline hover-underline'>
<Link href={cleanedHref.replaceAll("'", '')} {...rest} title='' className='inline underline dark:visited:text-[#606060] dark:hover:visited-text-dark-text-secondary text-vermilion-00 dark:text-vermilion-11 hover:text-[#606060] dark:hover:text-dark-text-secondary visited:text-[#4A4A4A] hover:visited:text-[#606060]'>
{children} <BookOpenText className='inline ml-1 text-current w-3 h-3' />
</Link>
</HoverCardTrigger>
<HoverCardContent className="bg-vermilion-11 dark:bg-vermilion-00">
<div className='mt-0 mb-1 text-vermilion-07 font-medium leading-6'>{children}</div>
<div className='mt-0 mb-1 font-medium leading-6'>{children}</div>
<div className='text-sm leading-6 text-vermilion-08'>{highlightCode(rest.title || '')}</div>
</HoverCardContent>
</HoverCard>
);
}
);
}

// Internal links handled by Next.js Link component
return (
<Link href={cleanedHref} {...rest} className='no-underline hover-underline'>
<Link href={cleanedHref} {...rest} className='underline dark:visited:text-[#606060] dark:hover:visited-text-dark-text-secondary text-vermilion-00 dark:text-vermilion-11 hover:text-[#606060] dark:hover:text-dark-text-secondary visited:text-[#4A4A4A] hover:visited:text-[#606060]'>
{children}
{/* Ensuring <a> is used inside <Link> for custom attributes like 'className' */}
</Link>
Expand Down
3 changes: 2 additions & 1 deletion tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default {
'00': '#030106',
'01': '#120720',
'02': '#291242',
'06': '#914BDC',
'07': '#A96AF3',
'08': '#BE8CFF',
'11': '#FAF4FF',
Expand All @@ -65,7 +66,7 @@ export default {
light: '#F34E3F', // Teal-07
DEFAULT: '#FF7867', // Teal-08
},
'link-underline': '#002533', // Teal-02
'link-underline': '#606060', // Teal-02
'link-underline-light': '#EAFCFF', // Teal-11
// Brand Colors
black: '#060000',
Expand Down