Skip to content

feat: conditional exports, numerous bug fixes and ux improvements #8618

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
ovflowd wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: conditional exports, numerous bug fixes and ux improvements #8618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c5428cc
feat: conditional exports, numerous bug fixes and ux improvements
ovflowd Feb 11, 2026
a9f360c
fix: remove last dangling \n when present
ovflowd Feb 11, 2026
66bb0d7
chore: removed motion from flashable elements, css-only tooltip
ovflowd Feb 11, 2026
d5a2467
chore: drop ui-components publishing changes
ovflowd Feb 11, 2026
d22dc9c
chore: code review
ovflowd Feb 11, 2026
a48ff2c
chore: code review
ovflowd Feb 12, 2026
d6008d7
chore: tiny ux changes
ovflowd Feb 12, 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
6 changes: 0 additions & 6 deletions apps/site/components/Common/Partners/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,3 @@
grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
gap-4;
}

.tooltip {
@apply p-2
text-neutral-900
dark:text-neutral-200;
}
15 changes: 7 additions & 8 deletions apps/site/components/Common/Partners/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Tooltip from '@node-core/ui-components/Common/Tooltip';
import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';

import providePartners from '#site/next-data/providers/partners';
Expand Down Expand Up @@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
const Logo = PartnerLogos[partner.id];

return (
<Tooltip
<PartnerButton
aria-label={partner.name}
key={partner.id}
asChild
content={<div className={style.tooltip}>{partner.name}</div>}
size="small"
href={partner.href}
data-tooltip={partner.name}
>
<PartnerButton aria-label={partner.name} size="small" href={partner.href}>
<Logo.Favicon />
</PartnerButton>
</Tooltip>
<Logo.Favicon />
</PartnerButton>
Copy link
Member

@avivkeller avivkeller Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this method of tooltip shows a help cursor:
Image

Copy link
Member Author

@ovflowd ovflowd Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, is that not OK?

Copy link
Member

@avivkeller avivkeller Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's fine, just making sure it's an intentional change

Copy link
Member Author

@ovflowd ovflowd Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think it does look odd indeed, for buttons. Wdyt, I think I should revert the cursor style...

);
};

Expand Down
8 changes: 2 additions & 6 deletions apps/site/components/withMetaBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
// Since we cannot show the same number of avatars in Mobile / Tablet
// resolution as we do on desktop and there is overflow, we are adjusting
// the number of avatars manually for the resolutions below
const isMobileResolution = useMediaQuery('(max-width: 890px)');

const isTabletResolution = useMediaQuery(
'(min-width: 890px) and (max-width: 1280px)'
);
const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');

return (
<MetaBar
Expand All @@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
)]: (
<WithAvatarGroup
usernames={usernames}
limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
limit={isSmallerThanDesktop ? 5 : 8}
/>
),
}),
Expand Down
11 changes: 5 additions & 6 deletions apps/site/layouts/layouts.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@reference "../styles/index.css";

.baseLayout {
@apply grid
@apply ml:grid
ml:grid-cols-[1fr]
ml:grid-rows-[auto_1fr_auto]
h-max
min-h-full
w-full
grid-cols-[1fr]
grid-rows-[auto_1fr_auto];
w-full;
}

.centeredLayout {
Expand Down Expand Up @@ -164,8 +164,7 @@
dark:border-l-neutral-900;

main {
@apply max-w-[660px]
gap-4
@apply gap-4
wrap-anywhere;
}
}
Expand Down
2 changes: 1 addition & 1 deletion apps/site/next.fetch.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const fetchWithRetry = async (
const backoff = Math.max(0, Number(delay) || 0);

const attemptFetch = attempt =>
fetch(url, options).catch(e => {
fetch(url, { ...options, signal: AbortSignal.timeout(30000) }).catch(e => {
if (attempt === retries || !isTimeoutError(e)) {
throw e;
}
Expand Down
9 changes: 7 additions & 2 deletions packages/rehype-shiki/src/plugin.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,11 @@ export default async function rehypeShikiji(options) {
const meta = parseMeta(preElement.data?.meta);

// Retrieve the whole <pre> contents as a parsed DOM string
const preElementContents = toString(preElement);
const preElementContents = toString(preElement).replace(/\n$/, '');

// Since we removed the trailing newline, we can easily count the
// amount of lines without worrying about an extra empty line at the end of the code block
const lineCount = preElementContents.split('\n').length;

// Grabs the relevant alias/name of the language
const languageId = codeLanguage.slice(languagePrefix.length);
Expand All @@ -178,7 +182,8 @@ export default async function rehypeShikiji(options) {
// Adds the original language back to the <pre> element
children[0].properties.class = classNames(
children[0].properties.class,
codeLanguage
codeLanguage,
{ 'no-line-numbers': lineCount < 5, 'no-footer': lineCount === 1 }
);

// Replaces the <pre> element with the updated one
Expand Down
5 changes: 2 additions & 3 deletions packages/ui-components/src/Common/BaseButton/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
px-4.5
py-2.5
text-center
font-semibold
motion-safe:transition-colors;
font-semibold;

svg {
@apply size-5;
Expand Down Expand Up @@ -124,7 +123,7 @@
after:mx-auto
after:h-px
after:w-2/5
after:bg-gradient-to-r
after:bg-linear-to-r
after:from-green-600/0
after:via-green-600
after:to-green-600/0
Expand Down
27 changes: 23 additions & 4 deletions packages/ui-components/src/Common/BaseCodeBox/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,19 @@
[counter-increment:line];
}
}

&[class*='plain-text'] {
@apply font-mono;
}
}

&[class*='no-line-numbers'] > code > [class='line'] {
@apply pl-0;

&:not(:empty:last-child)::after {
@apply content-none
[counter-reset:none];
}
}
}
Comment on lines +62 to 70
Copy link
Member

@avivkeller avivkeller Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to override the CSS here, can't we just exclude no-line-numbers from the line number styles above, rather than set them and then override them here?

Copy link
Member Author

@ovflowd ovflowd Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I follow.

Copy link
Member

@avivkeller avivkeller Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On line 32, we have an & > [class='line'] { ... CSS opener.

Why don't we change that to &:not([class='no-line-number']) > [class='line']? I think it's additional work for the browser to set the line styles, then apply content:none, when we can just not set the styles in the first place

Copy link
Member Author

@ovflowd ovflowd Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you give a full example? Im failing to understand what the issue is.


Expand All @@ -62,8 +75,8 @@
justify-between
border-t
border-t-neutral-900
px-4
py-3
px-3
py-2
text-sm
font-medium;

Expand All @@ -72,9 +85,15 @@
}

& > .action {
@apply px-3
py-1.5
@apply px-2.5
py-1
text-xs
font-medium;

> svg {
@apply h-4
w-4;
}
}
}
}
49 changes: 25 additions & 24 deletions packages/ui-components/src/Common/BaseCodeBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,31 +39,27 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
// being an empty string, so we need to remove it
const lines = content.split('\n');

const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
const extraClasses = classNames({ 'plain-text': language.length === 0 });

return (
<code style={extraStyle}>
{lines
.flatMap((line, lineIndex) => {
const columns = line.split(' ');

return [
<span key={lineIndex} className="line">
{columns.map((column, columnIndex) => (
<Fragment key={columnIndex}>
<span>{column}</span>
{columnIndex < columns.length - 1 && <span> </span>}
</Fragment>
))}
</span>,
// Add a break line so the text content is formatted correctly
// when copying to clipboard
'\n',
];
})
// Here we remove that empty line from before and
// the last flatMap entry which is an `\n`
.slice(0, -2)}
<code className={extraClasses}>
{lines.flatMap((line, lineIndex) => {
const columns = line.split(' ');

return [
<span key={lineIndex} className="line">
{columns.map((column, columnIndex) => (
<Fragment key={columnIndex}>
<span>{column}</span>
{columnIndex < columns.length - 1 && <span> </span>}
</Fragment>
))}
</span>,
// Add a break line so the text content is formatted correctly
// when copying to clipboard
'\n',
];
})}
</code>
);
};
Expand All @@ -89,8 +85,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
const containerRef = useRef<HTMLPreElement>(null);

const handleCopy = () => copy(containerRef.current?.textContent);

const ButtonIcon = copied ? DocumentDuplicateIcon : CodeBracketIcon;

const hideFooter = className?.includes('no-footer');

return (
<div className={styles.root}>
<pre
Expand All @@ -100,9 +99,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
>
{transformCode(children as ReactElement<PropsWithChildren>, language)}
</pre>
{language && (

{!language || hideFooter || (
<div className={styles.footer}>
<span className={styles.language}>{language}</span>

<BaseButton
as={as}
className={styles.action}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-components/src/Common/CodeTabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
border-neutral-900
bg-neutral-950
px-2
pt-3
pt-2
md:px-4;

.trigger {
Expand Down
18 changes: 17 additions & 1 deletion packages/ui-components/src/Common/DataTag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,24 @@ const symbolMap = {
ctor: 'C',
} as const;

const labelMap = {
event: 'Event',
method: 'Method',
property: 'Property',
class: 'Class',
module: 'Module',
classMethod: 'Class method',
global: 'Global',
ctor: 'Constructor',
} as const;

const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
<div className={classNames(styles.dataTag, styles[size], styles[kind])}>
<div
className={classNames(styles.dataTag, styles[size], styles[kind])}
data-tooltip={labelMap[kind]}
aria-label={labelMap[kind]}
tabIndex={0}
>
<span>{symbolMap[kind]}</span>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions packages/ui-components/src/Common/Search/Modal/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,12 @@
p-1.5
text-neutral-900
hover:bg-neutral-100
motion-safe:transition-colors
dark:border-neutral-900
dark:bg-neutral-950
dark:text-neutral-200;

&:hover {
@apply bg-neutral-100
motion-safe:transition-colors
motion-safe:duration-300
dark:bg-neutral-900;

Expand Down
7 changes: 6 additions & 1 deletion packages/ui-components/src/Common/TableOfContents/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
block
rounded-md
bg-neutral-200
lg:hidden
xl:hidden
dark:bg-neutral-900;

&[open] {
Expand Down Expand Up @@ -49,6 +49,11 @@
dark:hover:text-neutral-500;
}

.codeLink {
@apply font-ibm-plex-mono
font-medium;
}

.depthThree {
@apply pl-2;
}
Expand Down
7 changes: 5 additions & 2 deletions packages/ui-components/src/Common/TableOfContents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import classNames from 'classnames';

import { LinkLike } from '#ui/types';
import { CODE_LIKE_TYPES } from '#ui/constants';

import type { LinkLike } from '#ui/types';
import type { Heading } from '@vcarl/remark-headings';
import type { ComponentProps, FC } from 'react';

Expand Down Expand Up @@ -44,7 +45,9 @@ const TableOfContents: FC<TableOfContentsProps> = ({
<li key={head.data?.id ?? index}>
<Component
href={head.data?.id && `#${head.data.id}`}
className={classNames(styles.link, depthClasses[head.depth])}
className={classNames(styles.link, depthClasses[head.depth], {
[styles.codeLink]: CODE_LIKE_TYPES.has(head.data?.type ?? ''),
})}
>
{head.value}
</Component>
Expand Down
5 changes: 3 additions & 2 deletions packages/ui-components/src/Common/Tabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
@apply border-b-2
border-b-transparent
px-1
pb-[11px]
pt-0
pb-2
text-sm
font-semibold
whitespace-nowrap
Expand All @@ -28,7 +29,7 @@
border
border-neutral-200
px-1
py-0.5
py-0
text-xs
font-normal
text-neutral-200;
Expand Down
1 change: 0 additions & 1 deletion packages/ui-components/src/Common/ThemeToggle/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
rounded-md
p-2
text-neutral-700
motion-safe:transition-colors
dark:text-neutral-300;

&:hover {
Expand Down
Loading
Loading