Skip to content

Commit

Permalink
docs(core): remove @nrwl/ rescope message from codeblocks (#22184)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaysoo authored Mar 6, 2024
1 parent 9d5bdbe commit 8030bd7
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 53 deletions.
37 changes: 6 additions & 31 deletions nx-dev/ui-fence/src/lib/fence.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import {
ClipboardDocumentCheckIcon,
ClipboardDocumentIcon,
InformationCircleIcon,
SparklesIcon,
} from '@heroicons/react/24/outline';
import { ReactNode, JSX, useEffect, useState } from 'react';
import { JSX, ReactNode, useEffect, useState } from 'react';
// @ts-ignore
import { CopyToClipboard } from 'react-copy-to-clipboard';
// @ts-ignore
Expand All @@ -29,31 +28,20 @@ function CodeWrapper(options: {
fileName: string;
command: string;
path: string;
isMessageBelow: boolean;
language: string;
children: string; // intentionally typed as such
}): ({ children }: { children: ReactNode }) => JSX.Element {
return ({ children }: { children: ReactNode }) =>
options.language === 'shell' ? (
<TerminalOutput
command={options.children}
path=""
content={null}
isMessageBelow={options.isMessageBelow}
/>
<TerminalOutput command={options.children} path="" content={null} />
) : options.command ? (
<TerminalOutput
content={children}
command={options.command}
path={options.path}
isMessageBelow={options.isMessageBelow}
/>
) : (
<CodeOutput
content={children}
fileName={options.fileName}
isMessageBelow={options.isMessageBelow}
/>
<CodeOutput content={children} fileName={options.fileName} />
);
}

Expand Down Expand Up @@ -138,6 +126,7 @@ export function Fence({
position: 'absolute',
};
}

const highlightOptions = Object.keys(lineGroups).map((lineNumberKey) => ({
label: lineNumberKey,
value: lineNumberKey,
Expand All @@ -163,11 +152,11 @@ export function Fence({
t && clearTimeout(t);
};
}, [copied]);
const showRescopeMessage =
(!skipRescope && children.includes('@nx/')) || command.includes('@nx/');

function highlightChange(item: { label: string; value: string }) {
onLineGroupSelectionChange?.(item.value);
}

return (
<div className="code-block group relative w-full">
<div>
Expand Down Expand Up @@ -217,24 +206,10 @@ export function Fence({
fileName,
command,
path,
isMessageBelow: showRescopeMessage,
language,
children,
})}
/>
{showRescopeMessage && (
<a
className="relative block rounded-b-md border border-slate-200 bg-slate-50 px-4 py-2 text-xs font-medium no-underline hover:underline dark:border-slate-700 dark:bg-slate-800"
href="/recipes/other/rescope"
title="Nx 16 package name changes"
>
<InformationCircleIcon
className="mr-2 inline-block h-5 w-5"
aria-hidden="true"
/>
Nx 15 and lower use @nrwl/ instead of @nx/
</a>
)}
</div>
</div>
);
Expand Down
10 changes: 1 addition & 9 deletions nx-dev/ui-fence/src/lib/fences/code-output.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
import { cx } from '@nx/nx-dev/ui-primitives';
import { JSX, ReactNode } from 'react';

export function CodeOutput({
content,
fileName,
isMessageBelow,
}: {
content: ReactNode;
fileName: string;
isMessageBelow: boolean;
}): JSX.Element {
return (
<div
className={cx(
'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60',
isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg'
)}
>
<div className="hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60 rounded-lg">
{!!fileName && (
<div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">
{fileName}
Expand Down
4 changes: 1 addition & 3 deletions nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@ import { TerminalShellWrapper } from './terminal-shell';
export function TerminalOutput({
content,
command,
isMessageBelow,
path,
}: {
content: ReactNode | null;
command: string;
isMessageBelow: boolean;
path: string;
}): JSX.Element {
const commandLines = command.split('\n').filter(Boolean);
return (
<TerminalShellWrapper isMessageBelow={isMessageBelow}>
<TerminalShellWrapper>
<div className="p-4 pt-2 overflow-x-auto">
<div className="flex flex-col items-left">
{commandLines.map((line, index) => {
Expand Down
10 changes: 1 addition & 9 deletions nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import { cx } from '@nx/nx-dev/ui-primitives';
import { JSX, ReactNode } from 'react';

export function TerminalShellWrapper({
isMessageBelow,
children,
}: {
isMessageBelow: boolean;
children: ReactNode;
}): JSX.Element {
return (
<div
className={cx(
'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60',
isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg'
)}
>
<div className="hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60 rounded-lg">
<div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
<div className="absolute flex items-center gap-2 left-2 top-3">
<span className="w-2 h-2 bg-red-400 rounded-full dark:bg-red-600" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function TerminalVideo({
alt: string;
}): JSX.Element {
return (
<TerminalShellWrapper isMessageBelow={false}>
<TerminalShellWrapper>
<div className="overflow-x-auto">
<VideoLoop src={src} alt={alt}></VideoLoop>
</div>
Expand Down

0 comments on commit 8030bd7

Please sign in to comment.