docs(misc): fix styling for custom tags (#32297)

Fix up styling for markdoc custom tags for Astro docs.

Author: jaysoo

astro-docs/src/components/markdoc/ProjectDetails.astro

@@ -3,6 +3,16 @@ import { type ProjectDetailsProps, ProjectDetails as Default } from '@nx/nx-dev-
 type Props = ProjectDetailsProps;
 ---
 
-<Default client:visible {...Astro.props} isAstro={true}>
-  <slot />
-</Default>
+<div class="pdv">
+  <Default client:visible {...Astro.props} isAstro={true}>
+    <slot />
+  </Default>
+</div>
+
+
+<style>
+ .pdv :global(ul) {
+    list-style: none;
+    padding: 0;
+ }
+</style>

astro-docs/src/styles/global.css

@@ -60,6 +60,15 @@
   --sl-color-gray-6: var(--color-slate-200);
 }
 
+/* Adaptive icons, like GitHub logo, etc. */
+[data-theme='dark'] .adaptive-icon {
+  filter: invert(1);
+}
+
+[data-theme='light'] .adaptive-icon {
+  fill: black;
+}
+
 /* Custom font for code blocks */
 @font-face {
   font-family: 'Input Mono';
@@ -109,3 +118,7 @@ h6:hover .anchor-link {
 .content-panel + .content-panel {
   border-top: 0;
 }
+
+iframe[src*='youtube'] {
+  aspect-ratio: 16 / 9;
+}

nx-dev/ui-common/src/lib/button.tsx

@@ -42,7 +42,7 @@ const sizes: Record<AllowedSizes, string> = {
  */
 function getLayoutClassName(className = ''): string {
   return cx(
-    'group relative inline-flex opacity-100 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed transition',
+    'group relative inline-flex opacity-100 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed transition no-underline',
     className
   );
 }

nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx

@@ -75,7 +75,7 @@ export function CallToAction({
         iconClasses.width,
         colorClasses.container,
         colorClasses.hoverText,
-        'not-prose group relative mx-auto my-12 flex w-full items-center gap-3 overflow-hidden rounded-lg shadow-md transition'
+        'not-content not-prose group relative mx-auto my-12 flex w-full items-center gap-3 overflow-hidden rounded-lg shadow-md transition'
       )}
     >
       <div
@@ -99,7 +99,7 @@ export function CallToAction({
               href={url}
               target="_blank"
               rel="noreferrer"
-              className="block text-sm font-medium opacity-80"
+              className="block text-sm font-medium text-white no-underline opacity-80"
             >
               <span className="absolute inset-0" aria-hidden="true"></span>
               {description || ''}

nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx

@@ -131,7 +131,7 @@ export function Callout({
   return (
     <div
       className={cx(
-        'my-6 overflow-hidden rounded-md border',
+        'not-content my-6 overflow-hidden rounded-md border',
         ui.borderColor,
         ui.backgroundColor
       )}

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -74,7 +74,7 @@ export function Cards({
   return (
     <div
       className={cx(
-        'mt-8 grid gap-4',
+        'not-content mt-8 grid gap-4',
         colsClasses[cols] || '',
         smColsClasses[smCols] || '',
         mdColsClasses[mdCols] || '',
@@ -136,7 +136,7 @@ export function LinkCard({
       {icon && (
         <div
           className={cx(
-            'mb-2 flex h-24 w-24 items-center justify-center rounded-lg',
+            'mb-2 flex h-24 w-24 items-center justify-center rounded-lg text-black dark:text-white',
             {
               'h-12 w-12': appearance === 'small',
             }
@@ -208,7 +208,7 @@ export function Card({
       key={title}
       href={url}
       title={title}
-      className="group flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm no-underline shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+      className="not-content group flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm no-underline shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
       prefetch={false}
     >
       {!!hasYoutubeId && (

nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx

@@ -10,7 +10,7 @@ export function GithubRepository({
   title,
 }: GithubRepositoryProps): JSX.Element {
   return (
-    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-content not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 
@@ -33,7 +33,7 @@ export function GithubRepository({
               href={url}
               target="_blank"
               rel="noreferrer"
-              className="block text-sm font-medium opacity-80"
+              className="block text-sm font-medium text-white no-underline opacity-80"
             >
               <span className="absolute inset-0" aria-hidden="true"></span>
               {url.replace(/^.*\/\/[^\/]+/, '')}

nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx

@@ -112,7 +112,7 @@ export function Graph({
   }
 
   return parsedProps ? (
-    <div className="w-full place-content-center overflow-hidden rounded-md ring-1 ring-slate-200 dark:ring-slate-700">
+    <div className="not-content w-full place-content-center overflow-hidden rounded-md ring-1 ring-slate-200 dark:ring-slate-700">
       <div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 font-bold dark:border-slate-700 dark:bg-slate-700/50">
         {title}
       </div>

nx-dev/ui-markdoc/src/lib/tags/iframe.component.tsx

@@ -10,7 +10,7 @@ export function Iframe(props: IframeProps) {
       {...props}
       title={props.title}
       frameBorder="0"
-      className="rounded-lg border border-slate-200 shadow-lg shadow-lg dark:border-slate-700"
+      className="not-content rounded-lg border border-slate-200 shadow-lg shadow-lg dark:border-slate-700"
     />
   );
 }

nx-dev/ui-markdoc/src/lib/tags/install-nx-console.component.tsx

@@ -1,7 +1,7 @@
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
 export const InstallNxConsole = () => (
-  <div className="my-12 grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-16">
+  <div className="not-content my-12 grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-16">
     {/* VSCode */}
     <div className="not-prose group relative mx-auto flex w-full max-w-md items-center gap-4 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500" />
@@ -26,7 +26,7 @@ export const InstallNxConsole = () => (
               href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console"
               target="_blank"
               rel="noreferrer"
-              className="block text-xs font-medium opacity-80"
+              className="block text-xs font-medium text-black no-underline opacity-80 dark:text-white"
             >
               <span className="absolute inset-0" aria-hidden="true"></span>
               The official VSCode extension for Nx.
@@ -60,7 +60,7 @@ export const InstallNxConsole = () => (
               href="https://plugins.jetbrains.com/plugin/21060-nx-console"
               target="_blank"
               rel="noreferrer"
-              className="block text-xs font-medium opacity-80"
+              className="block text-xs font-medium text-black no-underline opacity-80 dark:text-white"
             >
               <span className="absolute inset-0" aria-hidden="true"></span>
               Available for WebStorm, IntelliJ IDEA Ultimate and more!