@redocly/theme 0.46.2 → 0.46.4

package/src/components/UserMenu/UserMenu.tsx

@@ -5,7 +5,6 @@ import type { ResolvedNavLinkItem } from '@redocly/config';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { GridIcon } from '@redocly/theme/icons/GridIcon/GridIcon';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { LoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
 import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
@@ -25,7 +24,7 @@ export function UserMenu({ className }: UserMenuProps) {
     };
   }>();
   const { useTranslate, useUserMenu } = useThemeHooks();
-  const { userData, hasDeveloperOnboarding, loginUrl } = useUserMenu();
+  const { userData, loginUrl } = useUserMenu();
   const { translate } = useTranslate();
 
   if (!userData?.isAuthenticated) {
@@ -40,24 +39,11 @@ export function UserMenu({ className }: UserMenuProps) {
     }
   }
 
-  const devOnboardingMenuItem = hasDeveloperOnboarding
-    ? [
-        <DropdownMenuItem
-          key="my-apps"
-          to="/apps"
-          data-translation-key="userMenu.devOnboardingLabel"
-          prefix={<GridIcon />}
-        >
-          {translate('userMenu.devOnboardingLabel')}
-        </DropdownMenuItem>,
-      ]
-    : [];
-
   const menuItems = userMenu?.['menu'] || [];
 
   const customItems = menuItems.map((item) => (
     <DropdownMenuItem key={item.label} external={item.external} to={item.link || ''}>
-      {item.label}
+      {item.labelTranslationKey ? translate(item.labelTranslationKey) : item.label}
     </DropdownMenuItem>
   ));
 
@@ -69,7 +55,6 @@ export function UserMenu({ className }: UserMenuProps) {
       key="userinfo"
     />,
     <DropdownMenuItem separatorLine={true} separator key="separator" />,
-    ...devOnboardingMenuItem,
     ...customItems,
     <LogoutMenuItem key="logout" />,
   ];

package/src/core/hooks/use-theme-hooks.ts

@@ -13,6 +13,7 @@ const fallbacks = {
   useTelemetry: () => ({ telemetry: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
+  useUserMenu: () => ({}),
 };
 
 export const useThemeHooks = () => {

package/src/core/types/l10n.ts

@@ -129,6 +129,8 @@ export type TranslationKey =
   | 'feedback.sentiment.thumbDown'
   | 'feedback.settings.leftScaleLabel'
   | 'feedback.settings.rightScaleLabel'
+  | 'feedback.settings.anonymousUserEmail.placeholder'
+  | 'feedback.settings.anonymousUserEmail.label'
   | 'codeSnippet.report.buttonText'
   | 'codeSnippet.report.tooltipText'
   | 'codeSnippet.report.label'

package/src/markdoc/components/Cards/Card.tsx

@@ -7,7 +7,7 @@ import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
-  title: string;
+  title?: string;
   image?: string;
   icon?: string;
   iconRawContent?: string;
@@ -22,7 +22,7 @@ export type CardProps = React.PropsWithChildren<{
 }>;
 
 export function Card({
-  title,
+  title = '',
   image,
   icon,
   iconRawContent,
@@ -36,7 +36,7 @@ export function Card({
   to,
   children,
 }: CardProps) {
-  const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+  const titleNoSpaces = title?.replace(/\s+/g, '-').toLowerCase();
   const cardTitleId = `card-title-${titleNoSpaces}`;
   const justifyContent =
     align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';

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

@@ -1,8 +1,30 @@
 import markdoc from '@markdoc/markdoc';
 
-import type { Config, Node } from '@markdoc/markdoc';
+import type { Config, Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
+// Walk through AST and look for raw markdown to parse
+function parseInlineMarkdown(
+  ast: RenderableTreeNode | RenderableTreeNode[],
+  config: Config,
+): RenderableTreeNode | RenderableTreeNode[] {
+  if (Array.isArray(ast)) {
+    return ast.flatMap((child) => parseInlineMarkdown(child, config));
+  }
+
+  if (typeof ast === 'string') {
+    const parsed = markdoc.parse(ast);
+    return markdoc.transform(parsed, config);
+  }
+
+  if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+    const children = parseInlineMarkdown(ast.children, config);
+    return { ...ast, children } as RenderableTreeNode;
+  }
+
+  return ast;
+}
+
 // 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
@@ -29,13 +51,16 @@ export const markdocExample: MarkdocSchemaWrapper = {
         title = fenceWithTitle?.value;
       }
 
+      const demoContent = node.children[0].transformChildren(config);
+      const parsedDemoContent = parseInlineMarkdown(demoContent, config);
+
       return new markdoc.Tag(
         'MarkdocExample',
         {
           ...attributes,
           title,
           language,
-          demoContent: node.children[0].transformChildren(config),
+          demoContent: parsedDemoContent,
           rawContent: content,
         },
         [],