docs(core): remove @nrwl/ rescope message from codeblocks (#22184)
This commit is contained in:
parent
9d5bdbe884
commit
8030bd7291
@ -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
|
||||
@ -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} />
|
||||
);
|
||||
}
|
||||
|
||||
@ -138,6 +126,7 @@ export function Fence({
|
||||
position: 'absolute',
|
||||
};
|
||||
}
|
||||
|
||||
const highlightOptions = Object.keys(lineGroups).map((lineNumberKey) => ({
|
||||
label: lineNumberKey,
|
||||
value: lineNumberKey,
|
||||
@ -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>
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user