feat(nx-dev): add markdoc title card component (#16098)

docs/README.md

@@ -36,7 +36,7 @@ Your content goes here.
 
 #### Cards
 
-Cards allow to show content in a grid system with a title, a description, a type and an url (internal/external).
+Cards allow showing content in a grid system with a title, a description, a type and an url (internal/external).
 
 ```markdown
 {% cards %}
@@ -46,6 +46,17 @@ Cards allow to show content in a grid system with a title, a description, a type
 {% /cards %}
 ```
 
+Title cards allow to only show a title in a card with a title and an url.
+
+```markdown
+{% cards cols="4" %}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% title-card title="string" href="string" /%}
+{% /cards %}
+```
+
 #### Code
 
 You can add specific languages and a filename on the code snippet displayed.

nx-dev/ui-markdoc/src/index.ts

@@ -17,8 +17,8 @@ import { CustomLink } from './lib/nodes/link.component';
 import { link } from './lib/nodes/link.schema';
 import { Callout } from './lib/tags/callout.component';
 import { callout } from './lib/tags/callout.schema';
-import { Card, Cards } from './lib/tags/cards.component';
+import { Card, Cards, TitleCard } from './lib/tags/cards.component';
-import { card, cards } from './lib/tags/cards.schema';
+import { card, cards, titleCard } from './lib/tags/cards.schema';
 import { GithubRepository } from './lib/tags/github-repository.component';
 import { githubRepository } from './lib/tags/github-repository.schema';
 import { Graph } from './lib/tags/graph.component';
@@ -62,6 +62,7 @@ export const getMarkdocCustomConfig = (
       'side-by-side': sideBySide,
       tab,
       tabs,
+      'title-card': titleCard,
       youtube,
     },
   },
@@ -82,6 +83,7 @@ export const getMarkdocCustomConfig = (
     SideBySide,
     Tab,
     Tabs,
+    TitleCard,
     YouTube,
   },
 });

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

@@ -12,7 +12,7 @@ export function Cards({
 }: {
   cols: number;
   children: ReactNode;
-}) {
+}): JSX.Element {
   const gridColums: { [key: number]: string } = {
     1: 'lg:grid-cols-1',
     2: 'lg:grid-cols-2',
@@ -37,7 +37,7 @@ export function Card({
   description: string;
   type: 'documentation' | 'external' | 'video';
   url: string;
-}) {
+}): JSX.Element {
   const iconMap = {
     documentation: <DocumentIcon className="mr-3 h-5 w-5 shrink-0" />,
     external: <ArrowTopRightOnSquareIcon className="mr-3 h-5 w-5 shrink-0" />,
@@ -79,3 +79,23 @@ export function Card({
     </div>
   );
 }
+
+export function TitleCard({
+  title,
+  url,
+}: {
+  title: string;
+  url: string;
+}): JSX.Element {
+  return (
+    <a
+      key={title}
+      href={url}
+      className="relative col-span-1 flex items-center rounded-md border border-slate-200 bg-slate-50/40 p-4 text-left text-lg font-semibold 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 lg:justify-center lg:text-center"
+      style={{ textDecorationLine: 'none' }}
+    >
+      <span className="absolute inset-0" />
+      {title}
+    </a>
+  );
+}

nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts

@@ -31,3 +31,16 @@ export const card: Schema = {
     },
   },
 };
+export const titleCard: Schema = {
+  render: 'TitleCard',
+  attributes: {
+    title: {
+      type: 'String',
+      required: true,
+    },
+    url: {
+      type: 'String',
+      required: true,
+    },
+  },
+};