miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): change code-fences and code-output styles (#16649)

Browse Source
This commit is contained in:
Benjamin Cabanes 2023-04-28 15:06:38 -04:00 committed by GitHub
parent 38be28814d
commit 0739bbb51e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
View File

@ -1,14 +1,14 @@
import {
CheckCircleIcon,
ClipboardDocumentCheckIcon,
ClipboardDocumentIcon,
InformationCircleIcon,
} from '@heroicons/react/24/outline';
import React, { ReactNode, useEffect, useState } from 'react';
// @ts-ignore
import { CopyToClipboard } from 'react-copy-to-clipboard';
// @ts-ignore
import SyntaxHighlighter from 'react-syntax-highlighter';
import { CodeOutput } from './fences/codeOutput.component';
import { CodeOutput } from './fences/code-output.component';
import { TerminalOutput } from './fences/terminal-output.component';
function resolveLanguage(lang: string) {
@ -74,7 +74,7 @@ export function Fence({
children.includes('@nx/') || command.includes('@nx/');
return (
<div className="my-8 w-full">
<div className="code-block group relative inline-flex w-auto min-w-[50%] max-w-full">
<div className="code-block group relative w-full">
<div>
<CopyToClipboard
text={children}
@ -84,7 +84,7 @@ export function Fence({
>
<button
type="button"
className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800"
className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800/60"
>
{copied ? (
<ClipboardDocumentCheckIcon className="h-5 w-5 text-blue-500 dark:text-sky-500" />
@ -106,12 +106,12 @@ export function Fence({
/>
{showRescopeMessage && (
<a
className="relative block rounded-b-md border border-green-100 bg-green-50 px-4 py-2 text-xs font-medium text-green-600 no-underline hover:underline dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
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"
>
<CheckCircleIcon
className="mr-2 inline-block h-5 w-5 text-green-500 dark:text-green-400"
<InformationCircleIcon
className="mr-2 inline-block h-5 w-5"
aria-hidden="true"
/>
Nx 15 and lower use @nrwl/ instead of @nx/

9
nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx → nx-dev/ui-markdoc/src/lib/nodes/fences/code-output.component.tsx
View File

@ -1,3 +1,4 @@
import { cx } from '@nx/nx-dev/ui-primitives';
import { ReactNode } from 'react';
export function CodeOutput({
@ -11,10 +12,10 @@ export function CodeOutput({
}): JSX.Element {
return (
<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 ' +
(isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg')
}
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'
)}
>
{!!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">

9
nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx
View File

@ -1,3 +1,4 @@
import { cx } from '@nx/nx-dev/ui-primitives';
import { ReactNode } from 'react';
export function TerminalOutput({
@ -13,10 +14,10 @@ export function TerminalOutput({
}): JSX.Element {
return (
<div
className={
'coding not-prose overflow-hidden border border-slate-200 bg-slate-50 font-mono text-sm leading-normal subpixel-antialiased dark:border-slate-700 dark:bg-slate-800 ' +
(isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg')
}
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="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
<div className="absolute left-2 top-3 flex items-center gap-2">