@redocly/theme 0.43.0 → 0.44.0

package/src/components/Search/SearchDialog.tsx

@@ -110,9 +110,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
           <SearchInput
             value={query}
             onChange={setQuery}
-            placeholder={translate('theme.search.label', 'Search docs...')}
+            placeholder={translate('search.label', 'Search docs...')}
             isLoading={isSearchLoading}
-            data-translation-key="theme.search.label"
+            data-translation-key="search.label"
           />
           {advancedSearch && (
             <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
@@ -135,12 +135,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                       {items[key]?.map(mapItem)}
                       {showLoadMore(key, items[key]?.length || 0) && (
                         <SearchGroupFooter
-                          data-translation-key="theme.search.showMore"
+                          data-translation-key="search.showMore"
                           onClick={() =>
                             setLoadMore({ groupKey: key, offset: items[key]?.length || 0 })
                           }
                         >
-                          {translate('theme.search.showMore', 'Show more')}
+                          {translate('search.showMore', 'Show more')}
                         </SearchGroupFooter>
                       )}
                     </Fragment>
@@ -149,15 +149,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               ) : isSearchLoading ? (
                 <SearchMessage>
                   <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
-                  {translate('theme.search.loading', 'Loading...')}
+                  {translate('search.loading', 'Loading...')}
                 </SearchMessage>
               ) : (
-                <SearchMessage data-translation-key="theme.search.noResults">
-                  <b>{translate('theme.search.noResults.title', 'No results')}</b>
-                  {translate(
-                    'theme.search.noResults.description',
-                    'Prease, try with a different query.',
-                  )}
+                <SearchMessage data-translation-key="search.noResults">
+                  <b>{translate('search.noResults.title', 'No results')}</b>
+                  {translate('search.noResults.description', 'Prease, try with a different query.')}
                 </SearchMessage>
               )
             ) : (
@@ -183,34 +180,34 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
         <SearchDialogFooter>
           <SearchShortcuts>
             <SearchShortcut
-              data-translation-key="theme.search.keys.navigate"
+              data-translation-key="search.keys.navigate"
               combination="Tab"
-              text={translate('theme.search.keys.navigate', 'to navigate')}
+              text={translate('search.keys.navigate', 'to navigate')}
             />
             <SearchShortcut
-              data-translation-key="theme.search.keys.select"
+              data-translation-key="search.keys.select"
               combination="⏎"
-              text={translate('theme.search.keys.select', 'to select')}
+              text={translate('search.keys.select', 'to select')}
             />
             <SearchShortcut
-              data-translation-key="theme.search.keys.exit"
+              data-translation-key="search.keys.exit"
               combination="Esc"
-              text={translate('theme.search.keys.exit', 'to exit')}
+              text={translate('search.keys.exit', 'to exit')}
             />
           </SearchShortcuts>
           {isSearchLoading && (
             <SearchLoading>
               <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-              {translate('theme.search.loading', 'Loading...')}
+              {translate('search.loading', 'Loading...')}
             </SearchLoading>
           )}
           <SearchCancelButton
-            data-translation-key="theme.search.cancel"
+            data-translation-key="search.cancel"
             variant="secondary"
             size="small"
             onClick={onClose}
           >
-            {translate('theme.search.cancel', 'Cancel')}
+            {translate('search.cancel', 'Cancel')}
           </SearchCancelButton>
         </SearchDialogFooter>
       </SearchDialogWrapper>

package/src/components/Search/SearchFilter.tsx

@@ -32,16 +32,16 @@ export function SearchFilter({
   return (
     <SearchFilterWrapper data-component-name="Search/SearchFilter" className={className}>
       <SearchFilterHeader>
-        <span data-translation-key="theme.search.filter.title">
-          {translate('theme.search.filter.title', 'Advanced filter')}
+        <span data-translation-key="search.filter.title">
+          {translate('search.filter.title', 'Advanced filter')}
         </span>
         <Button
-          data-translation-key="theme.search.filter.reset"
+          data-translation-key="search.filter.reset"
           onClick={onFilterReset}
           variant="ghost"
           icon={<CleanIcon />}
         >
-          {translate('theme.search.filter.reset', 'Reset filters')}
+          {translate('search.filter.reset', 'Reset filters')}
         </Button>
       </SearchFilterHeader>
 

package/src/components/Search/SearchFilterField.tsx

@@ -44,13 +44,13 @@ export function SearchFilterField({
         {facet.name}
         {selectedValues.length > 0 && (
           <Button
-            data-translation-key="theme.search.filter.field.reset"
+            data-translation-key="search.filter.field.reset"
             icon={<ResetIcon />}
             variant="ghost"
             size="small"
             onClick={onReset}
           >
-            {translate('theme.search.filter.field.reset', 'Reset')}
+            {translate('search.filter.field.reset', 'Reset')}
           </Button>
         )}
       </FilterFieldLabel>

package/src/components/Search/SearchRecent.tsx

@@ -34,8 +34,8 @@ export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.El
 
   return (
     <SearchRecentWrapper data-component-name="Search/SearchRecent" className={className}>
-      <SearchRecentTitle data-translation-key="theme.search.recent">
-        {translate('theme.search.recent', 'Recent searches')}
+      <SearchRecentTitle data-translation-key="search.recent">
+        {translate('search.recent', 'Recent searches')}
       </SearchRecentTitle>
       <SearchRecentItems>
         {items.map((item) => (

package/src/components/Search/SearchSuggestedPages.tsx

@@ -17,8 +17,8 @@ export function SearchSuggestedPages({ className }: SearchSuggestedPagesProps):
 
   return (
     <SearchSuggestedWrapper data-component-name="Search/SearchSuggestedPages" className={className}>
-      <SearchSuggestedTitle data-translation-key="theme.search.suggested">
-        {translate('theme.search.suggested', 'Suggested pages')}
+      <SearchSuggestedTitle data-translation-key="search.suggested">
+        {translate('search.suggested', 'Suggested pages')}
       </SearchSuggestedTitle>
       <SearchSuggestedItems>
         {pages.map((page) =>

package/src/components/Search/SearchTrigger.tsx

@@ -43,10 +43,10 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
       />
       <SearchTriggerInput
         data-testid="search-trigger-input"
-        data-translation-key="theme.search.navbar.label"
+        data-translation-key="search.navbar.label"
       >
         <SearchIcon />
-        {translate('theme.search.navbar.label', 'Search')}
+        {translate('search.navbar.label', 'Search')}
         {mainShortcutKey && <span>{mainShortcutKey}</span>}
       </SearchTriggerInput>
     </SearchTriggerWrapper>

package/src/components/SidebarActions/ChangeViewButton.tsx

@@ -25,7 +25,7 @@ export const ChangeViewButton = ({
 
   return (
     <StyledChangeViewButton
-      title={translate('theme.sidebar.actions.changeLayout', 'Change layout')}
+      title={translate('sidebar.actions.changeLayout', 'Change layout')}
       onClick={onClick}
       collapsedSidebar={collapsedSidebar}
     >

package/src/components/SidebarActions/SidebarActions.tsx

@@ -53,8 +53,8 @@ export const SidebarActions = ({
           }}
           title={
             collapsedSidebar
-              ? translate('theme.sidebar.actions.show', 'Show sidebar')
-              : translate('theme.sidebar.actions.hide', 'Hide sidebar')
+              ? translate('sidebar.actions.show', 'Show sidebar')
+              : translate('sidebar.actions.hide', 'Hide sidebar')
           }
           size="small"
           variant="outlined"

package/src/components/TableOfContent/TableOfContent.tsx

@@ -48,8 +48,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
-            <TableOfContentHeader data-translation-key="theme.toc.header">
-              {translate('theme.toc.header', toc.header || 'On this page')}
+            <TableOfContentHeader data-translation-key="toc.header">
+              {translate('toc.header', toc.header || 'On this page')}
             </TableOfContentHeader>
           ) : null}
           {displayedHeadings.map((heading: MdHeading | null, idx: number) => {

package/src/components/UserMenu/LoginButton.tsx

@@ -16,7 +16,7 @@ export function LoginButton({ href, className }: LoginButtonProps): JSX.Element
   return (
     <div data-component-name="UserMenu/LoginButton" className={className}>
       <Button
-        data-translation-key="theme.userMenu.login"
+        data-translation-key="userMenu.login"
         to={href}
         onClick={() => telemetry.send('login_button_clicked', {})}
         data-testid="login-btn"
@@ -24,7 +24,7 @@ export function LoginButton({ href, className }: LoginButtonProps): JSX.Element
         variant="primary"
         size="medium"
       >
-        {translate('theme.userMenu.login', 'Login')}
+        {translate('userMenu.login', 'Login')}
       </Button>
     </div>
   );

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -27,11 +27,11 @@ export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JS
       dangerous
       data-component-name="UserMenu/LogoutMenuItem"
       onAction={handleClick}
-      data-translation-key="theme.userMenu.logout"
+      data-translation-key="userMenu.logout"
       prefix={<LogoutIcon />}
       style={{ width: iconOnly ? 'fit-content' : '100%' }}
     >
-      {iconOnly ? null : translate('theme.userMenu.logout', 'Log out')}
+      {iconOnly ? null : translate('userMenu.logout', 'Log out')}
     </DropdownMenuItem>
   );
 }

package/src/components/UserMenu/UserMenu.tsx

@@ -45,10 +45,10 @@ export function UserMenu({ className }: UserMenuProps) {
         <DropdownMenuItem
           key="my-apps"
           to="/apps"
-          data-translation-key="theme.userMenu.devOnboardingLabel"
+          data-translation-key="userMenu.devOnboardingLabel"
           prefix={<GridIcon />}
         >
-          {translate('theme.userMenu.devOnboardingLabel')}
+          {translate('userMenu.devOnboardingLabel')}
         </DropdownMenuItem>,
       ]
     : [];

package/src/components/VersionPicker/VersionPicker.tsx

@@ -36,11 +36,11 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
 
   return (
     <VersionsPickerWrapper data-component-name="VersionPicker/VersionPicker">
-      <VersionPickerLabel data-translation-key="theme.versionPicker.label">
-        {translate('theme.versionPicker.label', 'Version:')}
+      <VersionPickerLabel data-translation-key="versionPicker.label">
+        {translate('versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
-        placeholder={translate('theme.versionPicker.unversioned', 'All versions')}
+        placeholder={translate('versionPicker.unversioned', 'All versions')}
         disabled={!options.length}
         options={options}
         value={value}

package/src/core/hooks/feedback/use-report-dialog.ts

@@ -36,13 +36,13 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
-    tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+    buttonText: buttonText || translate('codeSnippet.report.buttonText', 'Report'),
+    tooltip: tooltipText || translate('codeSnippet.report.tooltipText', 'Report a problem'),
     hide: report?.hide === true,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+      label: label || translate('codeSnippet.report.label', 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
     onCancel: closeReportDialog,

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -76,7 +76,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
     if (productMenuItems.length) {
       menuItems.push({
         type: 'separator',
-        label: translate('theme.mobileMenu.products', 'Products'),
+        label: translate('mobileMenu.products', 'Products'),
       });
 
       menuItems.push(...productMenuItems);

package/src/core/hooks/menu/use-mobile-menu-levels.ts

@@ -24,7 +24,7 @@ export const useMobileMenuLevels = () => {
   const menuLevels = useMemo(() => {
     const menuLevels = [
       {
-        label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
+        label: translate('mobileMenu.mainMenu', 'Main Menu'),
         type: MobileMenuType.MAIN_MENU,
       },
     ];
@@ -38,7 +38,7 @@ export const useMobileMenuLevels = () => {
 
     if (sidebarItems.length || activeVersion) {
       menuLevels.push({
-        label: translate('theme.mobileMenu.previous', 'Previous'),
+        label: translate('mobileMenu.previous', 'Previous'),
         type: MobileMenuType.PAGE,
       });
     }

package/src/core/types/l10n.ts

@@ -69,73 +69,73 @@ export type TranslationKey =
   | 'dev.app.overview.created'
   | 'dev.app.overview.visibilityToggle.hide'
   | 'dev.app.overview.visibilityToggle.show'
-  | 'theme.search.loading'
-  | 'theme.search.noResults.title'
-  | 'theme.search.noResults.description'
-  | 'theme.search.keys.navigate'
-  | 'theme.search.keys.select'
-  | 'theme.search.keys.exit'
-  | 'theme.search.label'
-  | 'theme.search.cancel'
-  | 'theme.search.recent'
-  | 'theme.search.navbar.label'
-  | 'theme.search.suggested'
-  | 'theme.search.showMore'
-  | 'theme.search.filter.title'
-  | 'theme.search.filter.reset'
-  | 'theme.search.filter.field.reset'
-  | 'theme.toc.header'
-  | 'theme.footer.copyrightText'
-  | 'theme.page.homeButton'
-  | 'theme.page.forbidden.title'
-  | 'theme.page.notFound.title'
-  | 'theme.page.notFound.description'
-  | 'theme.page.lastUpdated.timeago'
-  | 'theme.page.lastUpdated.on'
-  | 'theme.catalog.filters.placeholder'
-  | 'theme.catalog.filters.title'
-  | 'theme.catalog.filters.clearAll'
-  | 'theme.catalog.filters.select.addFilter'
-  | 'theme.catalog.filters.select.all'
-  | 'theme.catalog.filters.done'
-  | 'theme.sidebar.menu.backLabel'
-  | 'theme.sidebar.actions.show'
-  | 'theme.sidebar.actions.hide'
-  | 'theme.sidebar.actions.changeLayout'
-  | 'theme.versionPicker.label'
-  | 'theme.versionPicker.unversioned'
-  | 'theme.codeSnippet.copy.buttonText'
-  | 'theme.codeSnippet.copy.tooltipText'
-  | 'theme.codeSnippet.copy.toasterText'
-  | 'theme.markdown.editPage.text'
-  | 'theme.feedback.settings.comment.submitText'
-  | 'theme.feedback.settings.comment.label'
-  | 'theme.feedback.settings.comment.send'
-  | 'theme.feedback.settings.comment.cancel'
-  | 'theme.feedback.settings.comment.satisfiedLabel'
-  | 'theme.feedback.settings.comment.neutralLabel'
-  | 'theme.feedback.settings.comment.dissatisfiedLabel'
-  | 'theme.feedback.settings.submitText'
-  | 'theme.feedback.settings.label'
-  | 'theme.feedback.settings.reasons.label'
-  | 'theme.feedback.settings.reasons.send'
-  | 'theme.feedback.settings.comment.likeLabel'
-  | 'theme.feedback.settings.comment.dislikeLabel'
-  | 'theme.feedback.sentiment.thumbUp'
-  | 'theme.feedback.sentiment.thumbDown'
-  | 'theme.feedback.settings.leftScaleLabel'
-  | 'theme.feedback.settings.rightScaleLabel'
-  | 'theme.codeSnippet.report.buttonText'
-  | 'theme.codeSnippet.report.tooltipText'
-  | 'theme.codeSnippet.report.label'
-  | 'theme.userMenu.login'
-  | 'theme.userMenu.logout'
-  | 'theme.userMenu.devOnboardingLabel'
-  | 'theme.mobileMenu.mainMenu'
-  | 'theme.mobileMenu.previous'
-  | 'theme.mobileMenu.products'
-  | 'theme.page.nextButton'
-  | 'theme.page.previousButton'
+  | 'search.loading'
+  | 'search.noResults.title'
+  | 'search.noResults.description'
+  | 'search.keys.navigate'
+  | 'search.keys.select'
+  | 'search.keys.exit'
+  | 'search.label'
+  | 'search.cancel'
+  | 'search.recent'
+  | 'search.navbar.label'
+  | 'search.suggested'
+  | 'search.showMore'
+  | 'search.filter.title'
+  | 'search.filter.reset'
+  | 'search.filter.field.reset'
+  | 'toc.header'
+  | 'footer.copyrightText'
+  | 'page.homeButton'
+  | 'page.forbidden.title'
+  | 'page.notFound.title'
+  | 'page.notFound.description'
+  | 'page.lastUpdated.timeago'
+  | 'page.lastUpdated.on'
+  | 'catalog.filters.placeholder'
+  | 'catalog.filters.title'
+  | 'catalog.filters.clearAll'
+  | 'catalog.filters.select.addFilter'
+  | 'catalog.filters.select.all'
+  | 'catalog.filters.done'
+  | 'sidebar.menu.backLabel'
+  | 'sidebar.actions.show'
+  | 'sidebar.actions.hide'
+  | 'sidebar.actions.changeLayout'
+  | 'versionPicker.label'
+  | 'versionPicker.unversioned'
+  | 'codeSnippet.copy.buttonText'
+  | 'codeSnippet.copy.tooltipText'
+  | 'codeSnippet.copy.toasterText'
+  | 'markdown.editPage.text'
+  | 'feedback.settings.comment.submitText'
+  | 'feedback.settings.comment.label'
+  | 'feedback.settings.comment.send'
+  | 'feedback.settings.comment.cancel'
+  | 'feedback.settings.comment.satisfiedLabel'
+  | 'feedback.settings.comment.neutralLabel'
+  | 'feedback.settings.comment.dissatisfiedLabel'
+  | 'feedback.settings.submitText'
+  | 'feedback.settings.label'
+  | 'feedback.settings.reasons.label'
+  | 'feedback.settings.reasons.send'
+  | 'feedback.settings.comment.likeLabel'
+  | 'feedback.settings.comment.dislikeLabel'
+  | 'feedback.sentiment.thumbUp'
+  | 'feedback.sentiment.thumbDown'
+  | 'feedback.settings.leftScaleLabel'
+  | 'feedback.settings.rightScaleLabel'
+  | 'codeSnippet.report.buttonText'
+  | 'codeSnippet.report.tooltipText'
+  | 'codeSnippet.report.label'
+  | 'userMenu.login'
+  | 'userMenu.logout'
+  | 'userMenu.devOnboardingLabel'
+  | 'mobileMenu.mainMenu'
+  | 'mobileMenu.previous'
+  | 'mobileMenu.products'
+  | 'page.nextButton'
+  | 'page.previousButton'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'

package/src/core/utils/menu.ts

@@ -7,7 +7,7 @@ import { type Locale, type TFunction, type ItemState } from '@redocly/theme/core
 import { MenuItemType } from '@redocly/theme/core/constants';
 
 const TRANSLATION_KEYS = {
-  version: 'theme.mobileMenu.version',
+  version: 'mobileMenu.version',
 };
 
 export const mapNavbarItems = (

package/src/layouts/Forbidden.tsx

@@ -11,16 +11,11 @@ export function Forbidden(): JSX.Element {
   return (
     <Wrapper data-component-name="Pages/Forbidden">
       <Header>403</Header>
-      <Description data-translation-key="theme.page.forbidden.title">
-        {translate('theme.page.forbidden.title', 'Access forbidden')}
+      <Description data-translation-key="page.forbidden.title">
+        {translate('page.forbidden.title', 'Access forbidden')}
       </Description>
-      <HomeButton
-        variant="primary"
-        size="large"
-        to="/"
-        data-translation-key="theme.page.homeButton"
-      >
-        {translate('theme.page.homeButton', 'Go home')}
+      <HomeButton variant="primary" size="large" to="/" data-translation-key="page.homeButton">
+        {translate('page.homeButton', 'Go home')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/NotFound.tsx

@@ -12,12 +12,12 @@ export function NotFound(): JSX.Element {
   return (
     <NotFoundWrapper data-component-name="layouts/NotFound">
       <StatusText>404</StatusText>
-      <Title data-translation-key="theme.page.notFound.title">
-        {translate('theme.page.notFound.title', 'Something went missing...')}
+      <Title data-translation-key="page.notFound.title">
+        {translate('page.notFound.title', 'Something went missing...')}
       </Title>
-      <Description data-translation-key="theme.page.notFound.description">
+      <Description data-translation-key="page.notFound.description">
         {translate(
-          'theme.page.notFound.description',
+          'page.notFound.description',
           "The page you were trying to reach doesn't exist or may have been moved. You can go back to the previous page, return to the homepage, or use the search bar to find what you're looking for.",
         )}
       </Description>
@@ -25,10 +25,10 @@ export function NotFound(): JSX.Element {
         variant="primary"
         size="large"
         to="/"
-        data-translation-key="theme.page.homeButton"
+        data-translation-key="page.homeButton"
         icon={<ArrowLeftIcon />}
       >
-        {translate('theme.page.homeButton', 'Go home')}
+        {translate('page.homeButton', 'Go home')}
       </Button>
     </NotFoundWrapper>
   );

package/src/layouts/OIDCForbidden.tsx

@@ -35,8 +35,8 @@ export function OIDCForbidden(): JSX.Element {
   return (
     <Wrapper data-component-name="Pages/OIDCForbidden">
       <Header>403</Header>
-      <Description data-translation-key="theme.page.forbidden.title">
-        {translate('theme.page.forbidden.title', 'Access forbidden')}
+      <Description data-translation-key="page.forbidden.title">
+        {translate('page.forbidden.title', 'Access forbidden')}
       </Description>
       {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
     </Wrapper>

package/src/markdoc/tags/partial.ts

@@ -20,7 +20,7 @@ export const partial: MarkdocSchemaWrapper = {
         return [
           {
             id: '',
-            message: `Could not resolve partial ${node.attributes.file}. theme.markdown.partialsFolders is empty.`,
+            message: `Could not resolve partial ${node.attributes.file}. markdown.partialsFolders is empty.`,
             level: 'error',
           },
         ];