@redocly/theme 0.6.0 → 0.6.2-beta.3

package/lib/config.js

@@ -13,22 +13,67 @@ const LogoConfig = zod_1.z
 const HideConfig = zod_1.z.object({
     hide: zod_1.z.boolean().optional(),
 });
+const ScriptConfig = zod_1.z
+    .object({
+    src: zod_1.z.string(),
+    async: zod_1.z.boolean().optional(),
+    crossorigin: zod_1.z.string().optional(),
+    defer: zod_1.z.boolean().optional(),
+    fetchpriority: zod_1.z.string().optional(),
+    integrity: zod_1.z.string().optional(),
+    module: zod_1.z.boolean().optional(),
+    nomodule: zod_1.z.boolean().optional(),
+    nonce: zod_1.z.string().optional(),
+    referrerpolicy: zod_1.z.string().optional(),
+    type: zod_1.z.string().optional(),
+})
+    .passthrough();
+const LinksConfig = zod_1.z
+    .object({
+    href: zod_1.z.string(),
+    as: zod_1.z.string().optional(),
+    crossorigin: zod_1.z.string().optional(),
+    fetchpriority: zod_1.z.string().optional(),
+    hreflang: zod_1.z.string().optional(),
+    imagesizes: zod_1.z.string().optional(),
+    imagesrcset: zod_1.z.string().optional(),
+    integrity: zod_1.z.string().optional(),
+    media: zod_1.z.string().optional(),
+    prefetch: zod_1.z.string().optional(),
+    referrerpolicy: zod_1.z.string().optional(),
+    rel: zod_1.z.string().optional(),
+    sizes: zod_1.z.string().optional(),
+    title: zod_1.z.string().optional(),
+    type: zod_1.z.string().optional(),
+})
+    .passthrough();
 exports.ThemeConfig = zod_1.z
     .object({
     imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
     logo: LogoConfig.optional(),
-    navbar: HideConfig.strict().optional(),
-    footer: HideConfig.strict().optional(),
+    navbar: zod_1.z
+        .object({
+        items: zod_1.z.array(zod_1.z.any()).optional(), // todo: think about validation here
+    })
+        .extend(HideConfig.shape)
+        .strict()
+        .optional(),
+    footer: zod_1.z
+        .object({
+        items: zod_1.z.array(zod_1.z.any()).optional(),
+        copyrightText: zod_1.z.string().optional(),
+    })
+        .extend(HideConfig.shape)
+        .strict()
+        .optional(),
     sidebar: HideConfig.strict().optional(),
-    navbarItems: zod_1.z.any().optional(),
-    footerItems: zod_1.z.any().optional(),
     scripts: zod_1.z
-        .array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
-        .optional(),
-    postBodyScripts: zod_1.z
-        .array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
+        .object({
+        head: zod_1.z.array(ScriptConfig).optional(),
+        body: zod_1.z.array(ScriptConfig).optional(),
+    })
         .optional(),
-    styles: zod_1.z.array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))])).optional(),
+    links: zod_1.z.array(LinksConfig).optional(),
     search: zod_1.z
         .object({
         placement: zod_1.z.string().default('navbar').optional(),
@@ -39,8 +84,7 @@ exports.ThemeConfig = zod_1.z
         .optional(),
     colorMode: zod_1.z
         .object({
-        disableDetect: zod_1.z.boolean().optional(),
-        default: zod_1.z.string().optional(),
+        ignoreDetection: zod_1.z.boolean().optional(),
         modes: zod_1.z.array(zod_1.z.string()).default(['light', 'dark']).optional(),
     })
         .extend(HideConfig.shape)
@@ -49,13 +93,13 @@ exports.ThemeConfig = zod_1.z
         .default({}),
     navigation: zod_1.z
         .object({
-        nextPageLink: zod_1.z
-            .object({ label: zod_1.z.string().default('Next to {label}') })
+        nextButton: zod_1.z
+            .object({ text: zod_1.z.string().default('Next to {label}') })
             .extend(HideConfig.shape)
             .optional()
             .default({}),
-        prevPageLink: zod_1.z
-            .object({ label: zod_1.z.string().default('Back to {label}') })
+        previousButton: zod_1.z
+            .object({ text: zod_1.z.string().default('Back to {label}') })
             .extend(HideConfig.shape)
             .optional()
             .default({}),
@@ -65,7 +109,7 @@ exports.ThemeConfig = zod_1.z
         .default({}),
     markdown: zod_1.z
         .object({
-        frontmatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
+        frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
         lastUpdatedBlock: zod_1.z
             .object({
             format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
@@ -77,7 +121,7 @@ exports.ThemeConfig = zod_1.z
         toc: zod_1.z
             .object({
             header: zod_1.z.string().default('On this page').optional(),
-            maxDepth: zod_1.z.number().default(3).optional(),
+            depth: zod_1.z.number().default(3).optional(),
         })
             .extend(HideConfig.shape)
             .optional()

package/lib/globalStyle.js

@@ -512,7 +512,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;

package/lib/mocks/hooks/index.js

@@ -5,7 +5,7 @@ function useThemeConfig() {
     return {
         search: { hide: false, placement: 'navbar' },
         markdown: {
-            toc: { maxDepth: 3, header: 'Table of contents', hide: false },
+            toc: { depth: 3, header: 'Table of contents', hide: false },
             lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
             copyCodeSnippet: {
                 hide: false,
@@ -18,15 +18,14 @@ function useThemeConfig() {
                 baseUrl: '',
                 text: 'Edit this page',
             },
-            frontmatterKeysToResolve: ['image', 'links'],
+            frontMatterKeysToResolve: ['image', 'links'],
         },
         navigation: {
-            nextPageLink: { label: 'next page theme config label' },
-            prevPageLink: { label: 'prev page theme config label' },
+            nextButton: { text: 'next page theme config label' },
+            previousButton: { text: 'prev page theme config label' },
         },
         colorMode: {
             modes: ['light', 'dark'],
-            default: 'light',
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.0",
+  "version": "0.6.2-beta.3",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -56,7 +56,7 @@
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/node-logger": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.11",
+    "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.4",
@@ -70,7 +70,7 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -9,7 +9,7 @@ export function ColorModeSwitcher(): JSX.Element | null {
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
   const modes = colorMode?.modes || ['light', 'dark'];
-  const defaultColor = colorMode?.default || modes[0] || 'light';
+  const defaultColor = modes[0] || 'light';
 
   useMount(() => {
     setActiveColorMode(document.documentElement.className || defaultColor);

package/src/Footer/Footer.tsx

@@ -5,22 +5,25 @@ import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
 import { useThemeConfig } from '@theme/hooks';
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+import type { NavGroup, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
-  data: NavGroupRecord;
+  data: {
+    items?: NavGroup;
+    copyrightText?: string;
+  };
 }
 
-export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
+export function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null {
   const { footer } = useThemeConfig();
 
-  if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
+  if (isEmptyArray(items) || !copyrightText || footer?.hide) {
     return null;
   }
 
   return (
     <FooterContainer data-component-name="Footer/Footer">
-      <FooterColumns columns={columns as ResolvedNavItem[]} />
+      <FooterColumns columns={items as ResolvedNavItem[]} />
       <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>
   );

package/src/PageNavigation/{NextPageLink.tsx → NextButton.tsx}

@@ -10,15 +10,15 @@ interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
 }
 
-export function NextPageLink(): JSX.Element {
+export function NextButton(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeConfig();
 
-  if (!nextPage || navigation?.nextPageLink?.hide) {
+  if (!nextPage || navigation?.nextButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = (navigation?.nextPageLink?.label || 'Next to {label}').replace(
+  const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
     '{label}',
     nextPage.label || nextPage.routeSlug || '',
   );
@@ -30,7 +30,7 @@ export function NextPageLink(): JSX.Element {
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
     >
-      {label}
+      {text}
     </StyledButton>
   );
 }

package/src/PageNavigation/PageNavigation.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
-import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
+import { PreviousButton } from '@theme/PageNavigation/PreviousButton';
+import { NextButton } from '@theme/PageNavigation/NextButton';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export function PageNavigation(): JSX.Element | null {
   const { navigation } = useThemeConfig();
 
-  if (navigation?.prevPageLink?.hide && navigation?.nextPageLink?.hide) {
+  if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
     return null;
   }
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousPageLink />
-      <NextPageLink />
+      <PreviousButton />
+      <NextButton />
     </PageNavigationWrapper>
   );
 }

package/src/PageNavigation/{PreviousPageLink.tsx → PreviousButton.tsx}

@@ -10,15 +10,15 @@ interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;
 }
 
-export function PreviousPageLink(): JSX.Element {
+export function PreviousButton(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeConfig();
 
-  if (!prevPage || navigation?.prevPageLink?.hide) {
+  if (!prevPage || navigation?.previousButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = (navigation?.prevPageLink?.label || 'Back to {label}').replace(
+  const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
     '{label}',
     prevPage.label || prevPage.routeSlug || '',
   );
@@ -30,7 +30,7 @@ export function PreviousPageLink(): JSX.Element {
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
     >
-      {label}
+      {text}
     </StyledButton>
   );
 }

package/src/PageNavigation/index.ts

@@ -1,3 +1,3 @@
-export * from '@theme/PageNavigation/NextPageLink';
+export * from '@theme/PageNavigation/NextButton';
 export * from '@theme/PageNavigation/PageNavigation';
-export * from '@theme/PageNavigation/PreviousPageLink';
+export * from '@theme/PageNavigation/PreviousButton';

package/src/Sidebar/ArrowBack.tsx

@@ -7,7 +7,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 10"
-      width="12px"
+      width="10px"
       height="10px"
       className={className}
     >
@@ -19,7 +19,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/Sidebar/SidebarLayout.tsx

@@ -7,13 +7,23 @@ import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { ArrowBack } from '@theme/Sidebar/ArrowBack';
+import { Link } from '@portal/Link';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
   menu: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({
+  versions,
+  menu,
+  backLink,
+}: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -28,6 +38,15 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
+        {(backLink && (
+          <BackLinkWrapper>
+            <Link to={backLink.slug}>
+              <ArrowBack />
+              Back to {backLink.label}
+            </Link>
+          </BackLinkWrapper>
+        )) ||
+          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -35,4 +54,22 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
   );
 }
 
+const BackLinkWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
+
 const Wrapper = styled.div``;

package/src/Sidebar/types/NavItem.ts

@@ -19,7 +19,7 @@ export interface NavItem {
   target?: string;
   external?: boolean;
   items?: NavItem[];
-  permission?: string;
+  requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
   version?: string;

package/src/TableOfContent/TableOfContent.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
@@ -16,11 +16,11 @@ interface TableOfContentProps {
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const { headings, contentWrapper } = props;
 
-  const sidebar = useRef<HTMLDivElement | null>(null);
+  const sidebar = React.useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
   const { markdown: { toc = {} } = {} } = useThemeConfig();
 
-  const displayedHeadings = getDisplayedHeadings(headings, toc.maxDepth || 3);
+  const displayedHeadings = getDisplayedHeadings(headings, toc.depth || 3);
   const leastDepth = getLeastDepth(displayedHeadings);
 
   const activeHeadingId = useActiveHeading(
@@ -31,38 +31,30 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   if (toc?.hide) {
     return null;
   }
-  if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
-    return null;
-  }
-  if (!headings?.length) {
-    return null;
-  }
 
   return (
     <>
-      {headings && (
-        <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
-          <TableOfContentItems ref={sidebar}>
-            <TocHeader>{toc.header || 'On this page'}</TocHeader>
-            {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
-              if (!heading) {
-                return null;
-              }
-              const href = '#' + heading.id;
-              return (
-                <MenuItem
-                  key={href + idx}
-                  href={href}
-                  depth={heading.depth - leastDepth + 1 || 0}
-                  className={activeHeadingId === heading.id ? 'active' : ''}
-                  dangerouslySetInnerHTML={{ __html: heading.value || '' }}
-                  data-cy={`toc-${heading.value}`}
-                />
-              );
-            })}
-          </TableOfContentItems>
-        </TableOfContentMenu>
-      )}
+      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+        <TableOfContentItems ref={sidebar}>
+          {displayedHeadings.length ? <TocHeader>{toc.header || 'On this page'}</TocHeader> : null}
+          {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
+            if (!heading) {
+              return null;
+            }
+            const href = '#' + heading.id;
+            return (
+              <MenuItem
+                key={href + idx}
+                href={href}
+                depth={heading.depth - leastDepth + 1 || 0}
+                className={activeHeadingId === heading.id ? 'active' : ''}
+                dangerouslySetInnerHTML={{ __html: heading.value || '' }}
+                data-cy={`toc-${heading.value}`}
+              />
+            );
+          })}
+        </TableOfContentItems>
+      </TableOfContentMenu>
     </>
   );
 }

package/src/TableOfContent/utils.ts

@@ -2,7 +2,7 @@ import type { MdHeading } from '@theme/types/portal';
 
 export function getDisplayedHeadings(
   headings: Array<MdHeading | null> | null | undefined,
-  tocMaxDepth: number,
+  tocDepth: number,
 ): Array<MdHeading | null> {
   if (!headings) {
     return [];
@@ -14,7 +14,7 @@ export function getDisplayedHeadings(
     if (idx === 0 && heading.depth === 1) {
       return false;
     }
-    return !(heading.depth && heading.depth > tocMaxDepth);
+    return !(heading.depth && heading.depth > tocDepth);
   });
 }
 

package/src/config.ts

@@ -13,24 +13,73 @@ const HideConfig = z.object({
   hide: z.boolean().optional(),
 });
 
+const ScriptConfig = z
+  .object({
+    src: z.string(),
+    async: z.boolean().optional(),
+    crossorigin: z.string().optional(),
+    defer: z.boolean().optional(),
+    fetchpriority: z.string().optional(),
+    integrity: z.string().optional(),
+    module: z.boolean().optional(),
+    nomodule: z.boolean().optional(),
+    nonce: z.string().optional(),
+    referrerpolicy: z.string().optional(),
+    type: z.string().optional(),
+  })
+  .passthrough();
+
+const LinksConfig = z
+  .object({
+    href: z.string(),
+
+    as: z.string().optional(),
+    crossorigin: z.string().optional(),
+    fetchpriority: z.string().optional(),
+    hreflang: z.string().optional(),
+    imagesizes: z.string().optional(),
+    imagesrcset: z.string().optional(),
+    integrity: z.string().optional(),
+    media: z.string().optional(),
+    prefetch: z.string().optional(),
+    referrerpolicy: z.string().optional(),
+    rel: z.string().optional(),
+    sizes: z.string().optional(),
+    title: z.string().optional(),
+    type: z.string().optional(),
+  })
+  .passthrough();
+
 export const ThemeConfig = z
   .object({
     imports: z.array(z.string()).default([]).optional(),
 
     logo: LogoConfig.optional(),
-    navbar: HideConfig.strict().optional(),
-    footer: HideConfig.strict().optional(),
+    navbar: z
+      .object({
+        items: z.array(z.any()).optional(), // todo: think about validation here
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .optional(),
+
+    footer: z
+      .object({
+        items: z.array(z.any()).optional(), // todo: think about validation here
+        copyrightText: z.string().optional(),
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .optional(),
     sidebar: HideConfig.strict().optional(),
-    navbarItems: z.any().optional(), // todo: think about validation here
-    footerItems: z.any().optional(), // todo: think about validation here
 
     scripts: z
-      .array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
-      .optional(),
-    postBodyScripts: z
-      .array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
+      .object({
+        head: z.array(ScriptConfig).optional(),
+        body: z.array(ScriptConfig).optional(),
+      })
       .optional(),
-    styles: z.array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))])).optional(),
+    links: z.array(LinksConfig).optional(),
 
     search: z
       .object({
@@ -43,8 +92,7 @@ export const ThemeConfig = z
 
     colorMode: z
       .object({
-        disableDetect: z.boolean().optional(),
-        default: z.string().optional(),
+        ignoreDetection: z.boolean().optional(),
         modes: z.array(z.string()).default(['light', 'dark']).optional(),
       })
       .extend(HideConfig.shape)
@@ -53,13 +101,13 @@ export const ThemeConfig = z
       .default({}),
     navigation: z
       .object({
-        nextPageLink: z
-          .object({ label: z.string().default('Next to {label}') })
+        nextButton: z
+          .object({ text: z.string().default('Next to {label}') })
           .extend(HideConfig.shape)
           .optional()
           .default({}),
-        prevPageLink: z
-          .object({ label: z.string().default('Back to {label}') })
+        previousButton: z
+          .object({ text: z.string().default('Back to {label}') })
           .extend(HideConfig.shape)
           .optional()
           .default({}),
@@ -69,7 +117,7 @@ export const ThemeConfig = z
       .default({}),
     markdown: z
       .object({
-        frontmatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
+        frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
         lastUpdatedBlock: z
           .object({
             format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
@@ -81,7 +129,7 @@ export const ThemeConfig = z
         toc: z
           .object({
             header: z.string().default('On this page').optional(),
-            maxDepth: z.number().default(3).optional(),
+            depth: z.number().default(3).optional(),
           })
           .extend(HideConfig.shape)
           .optional()
@@ -116,15 +164,16 @@ export const ThemeConfig = z
   .default({});
 
 export type ThemeConfig = z.infer<typeof ThemeConfig>;
-export type ThemeUIConfig = Omit<
-  ThemeConfig,
-  'navbarItems' | 'footerItems' | 'styles' | 'scripts' | 'postBodyScripts'
-> & {
-  navbarItems?: any; // TODO
-  footerItems?: any; // TODO
+export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+  navbar?: any; // TODO
+  footer?: any; // TODO
   auth?: {
     // used by portal dev login emulator
-    idpIds?: string[];
+    idpsInfo?: {
+      idpId: string;
+      type: string; // AuthProviderType
+      title: string | undefined;
+    }[];
     devLogin?: boolean;
   };
 };