@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.1

package/src/markdoc/components/Heading/Heading.tsx

@@ -0,0 +1,51 @@
+import React, { createElement } from 'react';
+
+import type { PropsWithChildren } from 'react';
+
+import { concatClassNames } from '@redocly/theme/core/utils';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+
+/**
+ * Class name for all MD tags
+ */
+const mdClassName = 'md';
+
+export function Heading({
+  level,
+  id,
+  children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+}: PropsWithChildren<{
+  level: number;
+  id: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+}>): JSX.Element {
+  const linkEl = (
+    <a
+      aria-label={`link  to ${id}`}
+      href={`#${id}`}
+      className={concatClassNames('anchor', 'before')}
+    >
+      <LinkIcon size="14px" color="--heading-anchor-color" />
+    </a>
+  );
+
+  return createElement(
+    `h${level}`,
+    {
+      id,
+      className: concatClassNames('heading-anchor', mdClassName, className),
+      'data-component-name': 'Markdoc/Heading/Heading',
+      'data-source': dataSource,
+      'data-hash': dataHash,
+    },
+    <>
+      {linkEl}
+      {children}
+    </>,
+  );
+}

package/src/markdoc/components/HtmlBlock/HtmlBlock.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export function HtmlBlock({ rawHtml }: { rawHtml: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: rawHtml }} />;
+}

package/src/markdoc/components/InlineSvg/InlineSvg.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export function InlineSvg({ fileRawContent }: { fileRawContent: string }) {
+  return (
+    <span
+      data-component-name="Markdoc/InlineSvg/InlineSvg"
+      dangerouslySetInnerHTML={{ __html: fileRawContent }}
+    />
+  );
+}

package/src/markdoc/components/MarkdocExample/MarkdocExample.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
+
+export interface MarkdocExampleProps {
+  language: string;
+  rawContent: string;
+  renderDemo?: boolean;
+  demoContent: React.Component<React.PropsWithChildren>[];
+  withLabels?: boolean;
+  codeLabel?: string;
+  resultLabel?: string;
+}
+export function MarkdocExample(props: MarkdocExampleProps) {
+  const { language, rawContent, renderDemo, demoContent, withLabels, codeLabel, resultLabel } =
+    props;
+
+  const renderLabels = renderDemo ? (withLabels === undefined ? true : withLabels) : false;
+  return (
+    <div data-component-name="Markdoc/MarkdocExample/MarkdocExample">
+      {renderLabels ? <Label>{codeLabel ? codeLabel : 'Code:'}</Label> : null}
+      <CodeBlock lang={language} source={rawContent} header={{ controls: { copy: {} } }} />
+      {renderDemo ? (
+        <>
+          {renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}
+          {demoContent}
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+const Label = styled.div`
+  margin: 10px 0;
+`;

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { concatClassNames } from '@redocly/theme/core/utils';
+
+type MermaidProps = {
+  diagramHtml: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+};
+
+export function Mermaid({
+  diagramHtml,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+}: MermaidProps): JSX.Element {
+  return (
+    <Wrapper
+      className={concatClassNames('mermaid-wrapper', className)}
+      dangerouslySetInnerHTML={{ __html: diagramHtml }}
+      data-component-name="Markdoc/Mermaid/Mermaid"
+      data-source={dataSource}
+      data-hash={dataHash}
+    />
+  );
+}
+
+const Wrapper = styled.div`
+  background-color: var(--mermaid-bg-color);
+  border-radius: var(--mermaid-border-radius);
+
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    max-width: 100%;
+  }
+`;

package/src/markdoc/components/Mermaid/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+
+export const mermaidDarkMode = css`
+  --mermaid-bg-color: var(--color-warm-grey-8); // @presenter Color
+`;

package/src/markdoc/components/Mermaid/variables.ts

@@ -0,0 +1,13 @@
+import { css } from "styled-components";
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid
+  */
+
+  --mermaid-bg-color: var(--bg-color-raised); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --mermaid-font-family: var(--font-family-base); // @presenter FontFamily
+
+  // @tokens End
+`;

package/src/markdoc/components/Tabs/Tab.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+type TabProps = {
+  label: string;
+  isActive: boolean;
+  tabId: string;
+  setRef: (element: HTMLButtonElement | null) => void;
+  onClick: () => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+export function TabComponent(props: TabProps): JSX.Element {
+  const { label, isActive, setRef, onClick, onKeyDown, tabId } = props;
+
+  return (
+    <TabItem data-component-name="Markdoc/Tabs/Tab">
+      <TabButtonLink
+        $active={isActive}
+        id={`tab-${tabId}`}
+        role="tab"
+        aria-controls={`panel-${tabId}`}
+        aria-selected={isActive ? 'true' : 'false'}
+        tabIndex={isActive ? 0 : -1}
+        data-label={label}
+        ref={setRef}
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+      >
+        {label}
+      </TabButtonLink>
+    </TabItem>
+  );
+}
+
+export const Tab = styled(TabComponent)``;
+
+const TabItem = styled.li`
+  display: inline-flex;
+  list-style: none;
+  cursor: pointer;
+  align-items: center;
+
+  &:first-child {
+    margin-bottom: 0px;
+  }
+  *:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+`;
+
+const TabButtonLink = styled.button<{ $active: boolean }>`
+  all: unset;
+  flex-grow: 1;
+  cursor: pointer;
+  width: 100%;
+  text-align: center;
+
+  color: var(--md-tabs-tab-text-color);
+  padding: var(--md-tabs-tab-padding);
+  font-size: var(--md-tabs-tab-font-size);
+  font-family: var(--md-tabs-tab-font-family);
+  font-style: var(--md-tabs-tab-font-style);
+  font-weight: var(--md-tabs-tab-font-weight);
+  background-color: var(--md-tabs-tab-bg-color);
+  border-radius: var(--md-tabs-tab-border-radius);
+  border: var(--md-tabs-tab-border);
+  border-width: var(--md-tabs-tab-border-width);
+
+  ${({ $active }) =>
+    $active
+      ? css`
+          color: var(--md-tabs-active-tab-text-color);
+          font-size: var(--md-tabs-active-tab-font-size);
+          font-family: var(--md-tabs-active-tab-font-family);
+          font-style: var(--md-tabs-active-tab-font-style);
+          font-weight: var(--md-tabs-active-tab-font-weight);
+          background-color: var(--md-tabs-active-tab-bg-color);
+          border-radius: var(--md-tabs-active-tab-border-radius);
+          padding: var(--md-tabs-active-tab-padding);
+          border: solid var(--md-tabs-active-tab-border-color);
+          border-width: var(--md-tabs-active-tab-border-width);
+        `
+      : css`
+          &:hover {
+            color: var(--md-tabs-hover-tab-text-color);
+            font-size: var(--md-tabs-hover-tab-font-size);
+            font-family: var(--md-tabs-hover-tab-font-family);
+            font-style: var(--md-tabs-hover-tab-font-style);
+            font-weight: var(--md-tabs-hover-tab-font-weight);
+            background-color: var(--md-tabs-hover-tab-bg-color);
+            border-radius: var(--md-tabs-hover-tab-border-radius);
+            padding: var(--md-tabs-hover-tab-padding);
+            border: solid var(--md-tabs-hover-tab-border-color);
+            border-width: var(--md-tabs-hover-tab-border-width);
+          }
+        `}
+`;

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tab } from '@redocly/theme/markdoc/components/Tabs/Tab';
+import { useTabs } from '@redocly/theme/core/hooks';
+
+type Child = { props: { label: string } & TabsProps };
+type TabsProps = React.PropsWithChildren<{ children: Child[]; className?: string }>;
+
+export function Tabs({ children, className }: TabsProps): JSX.Element {
+  const childrenArray = React.Children.toArray(children) as React.ReactElement[];
+
+  const initialTab = children[0]?.props.label ?? '';
+  const { activeTab, setTabRef, onTabClick, handleKeyboard, getTabId } = useTabs({
+    initialTab,
+    totalTabs: childrenArray.length,
+  });
+
+  return (
+    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className}>
+      <TabList role="tablist">
+        {childrenArray.map((child, index) => {
+          const { label, onClick } = child.props;
+          const tabId = getTabId(label, index);
+          return (
+            <Tab
+              key={`key-${tabId}`}
+              tabId={tabId}
+              label={label}
+              isActive={activeTab === label}
+              setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
+              onKeyDown={(event) => handleKeyboard(event, index)}
+              onClick={() => {
+                onTabClick(label);
+                onClick?.();
+              }}
+            />
+          );
+        })}
+      </TabList>
+      {childrenArray.map((child, index) => {
+        const { label } = child.props;
+        const tabId = getTabId(label, index);
+        return label === activeTab ? (
+          <TabContent
+            key={`content-${tabId}`}
+            id={`panel-${tabId}`}
+            aria-labelledby={`tab-${tabId}`}
+            tabIndex={0}
+            role="tabpanel"
+          >
+            {child.props.children}
+          </TabContent>
+        ) : null;
+      })}
+    </TabsContainer>
+  );
+}
+
+const TabsContainer = styled.div`
+  color: var(--md-tabs-container-text-color);
+  font-size: var(--md-tabs-container-font-size);
+  font-family: var(--md-tabs-container-font-family);
+  font-style: var(--md-tabs-container-font-style);
+  font-weight: var(--md-tabs-container-font-weight);
+  background-color: var(--md-tabs-container-bg-color);
+  margin: var(--md-tabs-container-margin);
+  padding: var(--md-tabs-container-padding);
+  border: var(--md-tabs-container-border);
+
+  ol[class^='Tabs__TabList'] {
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+export const TabList = styled.ul`
+  && {
+    padding: var(--md-tabs-padding);
+    margin-block-end: 0;
+    border: var(--md-tabs-border);
+    border-width: var(--md-tabs-border-width);
+    margin: 0;
+
+    & > li:first-child {
+      margin-bottom: 0px;
+    }
+
+    li[class^='Tab__TabItem'] {
+      margin: var(--md-tabs-tab-margin);
+    }
+  }
+`;
+
+export const TabContent = styled.div`
+  color: var(--md-tabs-content-text-color);
+  font-size: var(--md-tabs-content-font-size);
+  font-family: var(--md-tabs-content-font-family);
+  font-style: var(--md-tabs-content-font-style);
+  font-weight: var(--md-tabs-content-font-weight);
+  background-color: var(--md-tabs-content-bg-color);
+  margin: var(--md-tabs-content-margin);
+  padding: var(--md-tabs-content-padding);
+  border: var(--md-tabs-content-border);
+`;

package/src/markdoc/components/Tabs/variables.ts

@@ -0,0 +1,67 @@
+import { css } from "styled-components";
+
+  export const markdownTabs = css`
+  /**
+  *  @tokens Markdown Tabs
+  */
+
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-bg-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-color-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-bg-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
+
+  --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --md-tabs-tab-bg-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-bg-color: var(--bg-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-active-tab-border-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-bg-color: var(--md-tabs-tab-bg-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-hover-tab-border-color: var(--border-color-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/markdoc/components/default.ts

@@ -0,0 +1,9 @@
+export * from '@redocly/theme/markdoc/components/Admonition/Admonition';
+export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
+export * from '@redocly/theme/markdoc/components/Heading/Heading';
+export * from '@redocly/theme/markdoc/components/Mermaid/Mermaid';
+export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
+export * from '@redocly/theme/markdoc/components/Tabs/Tab';
+export * from '@redocly/theme/markdoc/components/Tabs/Tabs';
+export * from '@redocly/theme/markdoc/components/CodeBlock/CodeBlock';

package/src/markdoc/default.ts

@@ -0,0 +1,30 @@
+/* Attributes */
+export * from '@redocly/theme/markdoc/attributes/code-snippet-file';
+export * from '@redocly/theme/markdoc/attributes/img-src';
+export * from '@redocly/theme/markdoc/attributes/img-srcset';
+export * from '@redocly/theme/markdoc/attributes/relative-path';
+export * from '@redocly/theme/markdoc/attributes/svg-content';
+/* Components */
+export * as components from '@redocly/theme/markdoc/components/default';
+/* Tags */
+import { admonition } from '@redocly/theme/markdoc/tags/admonition';
+import { html } from '@redocly/theme/markdoc/tags/html';
+import { markdocExample } from '@redocly/theme/markdoc/tags/markdoc-example';
+import { partial } from '@redocly/theme/markdoc/tags/partial';
+import { tab } from '@redocly/theme/markdoc/tags/tab';
+import { tabs } from '@redocly/theme/markdoc/tags/tabs';
+import { debug } from '@redocly/theme/markdoc/tags/debug';
+import { codeSnippet } from '@redocly/theme/markdoc/tags/code-snippet';
+import { inlineSvg } from '@redocly/theme/markdoc/tags/inline-svg';
+
+export const tags = {
+  [admonition.tagName]: admonition.schema,
+  [debug.tagName]: debug.schema,
+  [html.tagName]: html.schema,
+  [markdocExample.tagName]: markdocExample.schema,
+  [partial.tagName]: partial.schema,
+  [tab.tagName]: tab.schema,
+  [tabs.tagName]: tabs.schema,
+  [codeSnippet.tagName]: codeSnippet.schema,
+  [inlineSvg.tagName]: inlineSvg.schema,
+};

package/src/markdoc/tags/admonition.ts

@@ -0,0 +1,12 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const admonition: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      type: { type: String, required: true, default: 'info' },
+      name: { type: String },
+    },
+    render: 'Admonition',
+  },
+  tagName: 'admonition',
+};

package/src/markdoc/tags/code-snippet.ts

@@ -0,0 +1,66 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { CodeSnippetFile } from '@redocly/theme/markdoc/attributes/code-snippet-file';
+
+export const codeSnippet: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      file: { type: CodeSnippetFile, render: false, required: true },
+      language: { type: String, render: true },
+      title: { type: String, render: true },
+      to: { type: [String, Number], render: false },
+      from: { type: [String, Number], render: false },
+      after: { type: [String, Number], render: false },
+      before: { type: [String, Number], render: false },
+      prefix: { type: String, render: false },
+      wrap: { type: Boolean, render: false },
+      rawContent: { type: String, render: false }, // internal
+    },
+    render: 'CodeBlock',
+    selfClosing: true,
+    transform: (node, config) => {
+      const attributes = node.transformAttributes(config);
+      const rawContent = node.attributes.rawContent;
+      const header = {
+        title: node.attributes.title,
+        controls: { copy: {} },
+      };
+      if (typeof rawContent === 'string') {
+        return new markdoc.Tag(
+          'CodeBlock',
+          {
+            ...attributes,
+            header,
+            lang: attributes.language,
+            source: rawContent,
+            wrapContents: node.attributes.wrap,
+          },
+          [],
+        );
+      } else {
+        return new markdoc.Tag(node.tag, attributes, []);
+      }
+    },
+    validate(node) {
+      const errors = [];
+      if (node.attributes.from && node.attributes.after) {
+        errors.push({
+          id: 'from-and-after-attributes-are-mutually-exclusive',
+          level: 'error' as const,
+          message: 'attributes "from" and "after" are mutually exclusive',
+        });
+      }
+      if (node.attributes.to && node.attributes.before) {
+        errors.push({
+          id: 'to-and-before-attributes-are-mutually-exclusive',
+          level: 'error' as const,
+          message: 'attributes "to" and "before" are mutually exclusive',
+        });
+      }
+      return errors;
+    },
+  },
+  tagName: 'code-snippet',
+};

package/src/markdoc/tags/debug.ts

@@ -0,0 +1,17 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const debug: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      value: {},
+    },
+    transform(node, config) {
+      const attributes = node.transformAttributes(config);
+
+      return new markdoc.Tag('pre', {}, [JSON.stringify(attributes.value, null, 2)]);
+    },
+  },
+  tagName: 'debug',
+};

package/src/markdoc/tags/html.ts

@@ -0,0 +1,22 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+const mapHtmlTags: Record<string, string> = {
+  script: 'HtmlScript',
+};
+
+export const html: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      name: { type: String, required: true },
+      attrs: { type: Object },
+    },
+    transform(node: any, config: any) {
+      const { name, attrs } = node.attributes;
+      const children = node.transformChildren(config);
+      return new markdoc.Tag(mapHtmlTags[name] || name, attrs, children);
+    },
+  },
+  tagName: 'html',
+};

package/src/markdoc/tags/inline-svg.ts

@@ -0,0 +1,15 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { SvgContent } from '@redocly/theme/markdoc/attributes/svg-content';
+
+export const inlineSvg: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      file: { type: SvgContent, required: true },
+      fileRawContent: { type: String, render: true }, // inserted by RawContent
+    },
+    render: 'InlineSvg',
+    selfClosing: true,
+  },
+  tagName: 'inline-svg',
+};

package/src/markdoc/tags/markdoc-example.ts

@@ -0,0 +1,38 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { Config, Node } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+// This custom tag prevents evaluating any children markdoc tags (no children) so we can
+// have markdoc examples in code fences
+// approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
+export const markdocExample: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      renderDemo: { type: Boolean, default: false },
+      withLabels: { type: Boolean, required: false },
+      codeLabel: { type: String, required: false },
+      resultLabel: { type: String, required: false },
+    },
+    children: ['fence'],
+    transform(node: Node, config: Config) {
+      const attributes = node.transformAttributes(config);
+      const { content } = node.children[0]?.attributes || {};
+      if (!content) return null;
+
+      const language = 'markdoc';
+
+      return new markdoc.Tag(
+        'MarkdocExample',
+        {
+          ...attributes,
+          language,
+          demoContent: node.children[0].transformChildren(config),
+          rawContent: content,
+        },
+        [],
+      );
+    },
+  },
+  tagName: 'markdoc-example',
+};