@redocly/theme 0.1.13 → 0.1.14

package/Markdown/CodeSample/CodeSample.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type CodeSampleProps = {
+    language: string;
+    highlighted: string;
+    rawContent: string;
+};
+export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
+export {};

package/Markdown/CodeSample/CodeSample.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeSample = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ClipboardService_1 = require("../../utils/ClipboardService");
+var styled_1 = require("../../Markdown/CodeSample/styled");
+function CodeSample(_a) {
+    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
+    var langClassName = language ? "language-".concat(language) : '';
+    var _b = (0, react_1.useState)(false), isCopied = _b[0], setIsCopied = _b[1];
+    var copyCode = function (code) {
+        ClipboardService_1.ClipboardService.copyCustom(code);
+        setIsCopied(true);
+        setTimeout(function () { return setIsCopied(false); }, 1500);
+    };
+    return ((0, jsx_runtime_1.jsxs)(styled_1.Wrapper, __assign({ className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.CodeSampleButtonContainer, __assign({ onClick: function () { return copyCode(rawContent); } }, { children: [!isCopied && (0, jsx_runtime_1.jsx)(styled_1.CopyCodeButton, __assign({ title: "Copy the code snippet" }, { children: "Copy" })), isCopied && (0, jsx_runtime_1.jsx)(styled_1.DoneIndicator, { children: "Copied" })] })), (0, jsx_runtime_1.jsx)("pre", __assign({ className: langClassName }, { children: (0, jsx_runtime_1.jsx)("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }) }))] })));
+}
+exports.CodeSample = CodeSample;

package/Markdown/CodeSample/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../Markdown/CodeSample/CodeSample';
+export * from '../../Markdown/CodeSample/styled';

package/Markdown/CodeSample/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
+__exportStar(require("../../Markdown/CodeSample/styled"), exports);

package/Markdown/CodeSample/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const CodeSampleButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CopyCodeButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DoneIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Markdown/CodeSample/styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var _theme_1 = require("../../index.js");
+exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
+exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: white;\n    outline: 1px solid white;\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata {\n      color: #999988;\n      font-style: italic;\n    }\n    .token.namespace {\n      opacity: 0.7;\n    }\n    .token.string,\n    .token.attr-value {\n      color: #e3116c;\n    }\n    .token.punctuation,\n    .token.operator {\n      color: #393a34; /* no highlight */\n    }\n    .token.entity,\n    .token.url,\n    .token.symbol,\n    .token.number,\n    .token.boolean,\n    .token.variable,\n    .token.constant,\n    .token.property,\n    .token.regex,\n    .token.inserted {\n      color: #36acaa;\n    }\n    .token.atrule,\n    .token.keyword,\n    .token.attr-name,\n    .language-autohotkey .token.selector {\n      color: #00a4db;\n    }\n    .token.function,\n    .token.deleted,\n    .language-autohotkey .token.tag {\n      color: #9a050f;\n    }\n    .token.tag,\n    .token.selector,\n    .language-autohotkey .token.keyword {\n      color: #00009f;\n    }\n\n    ", "\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: white;\n    outline: 1px solid white;\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata {\n      color: #999988;\n      font-style: italic;\n    }\n    .token.namespace {\n      opacity: 0.7;\n    }\n    .token.string,\n    .token.attr-value {\n      color: #e3116c;\n    }\n    .token.punctuation,\n    .token.operator {\n      color: #393a34; /* no highlight */\n    }\n    .token.entity,\n    .token.url,\n    .token.symbol,\n    .token.number,\n    .token.boolean,\n    .token.variable,\n    .token.constant,\n    .token.property,\n    .token.regex,\n    .token.inserted {\n      color: #36acaa;\n    }\n    .token.atrule,\n    .token.keyword,\n    .token.attr-name,\n    .language-autohotkey .token.selector {\n      color: #00a4db;\n    }\n    .token.function,\n    .token.deleted,\n    .language-autohotkey .token.tag {\n      color: #9a050f;\n    }\n    .token.tag,\n    .token.selector,\n    .language-autohotkey .token.keyword {\n      color: #00009f;\n    }\n\n    ", "\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, (0, _theme_1.generateCodeBlockTokens)());
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Markdown/index.d.ts

@@ -1,3 +1,4 @@
+export * from '../Markdown/CodeSample';
 export * from '../Markdown/Tabs';
 export * from '../Markdown/Admonition';
 export * from '../Markdown/ContentWrapper';

package/Markdown/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../Markdown/CodeSample"), exports);
 __exportStar(require("../Markdown/Tabs"), exports);
 __exportStar(require("../Markdown/Admonition"), exports);
 __exportStar(require("../Markdown/ContentWrapper"), exports);

package/PageNavigation/NextPageLink.js

@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var usePageData_1 = require("../mocks/hooks/usePageData");
 var ui_1 = require("../ui");
 function NextPageLink() {
-    var nextPage = (0, usePageData_1.usePageData)().nextPage;
+    var nextPage = ((0, usePageData_1.usePageData)() || {}).nextPage;
     if (!nextPage) {
         return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
     }

package/PageNavigation/PreviousPageLink.js

@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var usePageData_1 = require("../mocks/hooks/usePageData");
 var ui_1 = require("../ui");
 function PreviousPageLink() {
-    var prevPage = (0, usePageData_1.usePageData)().prevPage;
+    var prevPage = ((0, usePageData_1.usePageData)() || {}).prevPage;
     if (!prevPage) {
         return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
     }

package/Search/SearchItem.js

@@ -36,7 +36,7 @@ function SearchItem(_a) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), (0, utils_1.highlight)(item.pathName)] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
+    return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), item.pathName ? (0, utils_1.highlight)(item.pathName) : null] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
 }
 exports.SearchItem = SearchItem;
 var SearchLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"], ["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"])));

package/mocks/hooks/usePageData.d.ts

@@ -2,4 +2,4 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
 export declare function usePageData(): {
     prevPage: ResolvedNavLinkItem | null;
     nextPage: ResolvedNavLinkItem | null;
-};
+} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { ClipboardService } from '@theme/utils/ClipboardService';
+import {
+  Wrapper,
+  DoneIndicator,
+  CopyCodeButton,
+  CodeSampleButtonContainer,
+} from '@theme/Markdown/CodeSample/styled';
+
+type CodeSampleProps = {
+  language: string;
+  highlighted: string;
+  rawContent: string;
+};
+
+export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+  const langClassName = language ? `language-${language}` : '';
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyCode = (code: string) => {
+    ClipboardService.copyCustom(code);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
+        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
+      </CodeSampleButtonContainer>
+      <pre className={langClassName}>
+        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+    </Wrapper>
+  );
+}

package/src/Markdown/CodeSample/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/Markdown/CodeSample/CodeSample';
+export * from '@theme/Markdown/CodeSample/styled';

package/src/Markdown/CodeSample/styled.ts

@@ -0,0 +1,159 @@
+import styled from 'styled-components';
+
+import { generateCodeBlockTokens } from '@theme';
+
+export const CodeSampleButtonContainer = styled.div`
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+
+export const CopyCodeButton = styled.div`
+  padding: 0 5px;
+  border-radius: 4px;
+  display: none;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const DoneIndicator = styled.div`
+  padding: 0 5px;
+  border-radius: 4px;
+  cursor: default;
+`;
+
+export const Wrapper = styled.div`
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: rgba(255, 255, 255, 0.15);
+  }
+  ${CopyCodeButton}:hover {
+    color: white;
+    outline: 1px solid white;
+  }
+
+  &:hover {
+    ${CodeSampleButtonContainer} ${CopyCodeButton} {
+      display: block;
+    }
+  }
+  pre {
+    white-space: var(--code-wrap);
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: 4px;
+    font-family: var(--code-font-family);
+    background-color: var(--code-block-preformatted-background-color);
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      color: white;
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: var(--global-border-radius);
+  }
+  code[class='language-text'] {
+    line-height: 1.2em;
+    display: inline-flex;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+    .token.entity {
+      cursor: help;
+    }
+    .token.punctuation {
+      opacity: 0.7;
+    }
+    .namespace {
+      opacity: 0.7;
+    }
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: #999988;
+      font-style: italic;
+    }
+    .token.namespace {
+      opacity: 0.7;
+    }
+    .token.string,
+    .token.attr-value {
+      color: #e3116c;
+    }
+    .token.punctuation,
+    .token.operator {
+      color: #393a34; /* no highlight */
+    }
+    .token.entity,
+    .token.url,
+    .token.symbol,
+    .token.number,
+    .token.boolean,
+    .token.variable,
+    .token.constant,
+    .token.property,
+    .token.regex,
+    .token.inserted {
+      color: #36acaa;
+    }
+    .token.atrule,
+    .token.keyword,
+    .token.attr-name,
+    .language-autohotkey .token.selector {
+      color: #00a4db;
+    }
+    .token.function,
+    .token.deleted,
+    .language-autohotkey .token.tag {
+      color: #9a050f;
+    }
+    .token.tag,
+    .token.selector,
+    .language-autohotkey .token.keyword {
+      color: #00009f;
+    }
+
+    ${generateCodeBlockTokens()}
+  }
+`;

package/src/Markdown/index.ts

@@ -1,3 +1,4 @@
+export * from '@theme/Markdown/CodeSample';
 export * from '@theme/Markdown/Tabs';
 export * from '@theme/Markdown/Admonition';
 export * from '@theme/Markdown/ContentWrapper';

package/src/PageNavigation/NextPageLink.tsx

@@ -5,11 +5,11 @@ import { usePageData } from '@portal/hooks/usePageData';
 import { Button } from '@theme/ui';
 
 interface NextPageType {
-  nextPage: ResolvedNavLinkItem | null;
+  nextPage?: ResolvedNavLinkItem | null;
 }
 
 export function NextPageLink(): JSX.Element {
-  const { nextPage }: NextPageType = usePageData();
+  const { nextPage }: NextPageType = usePageData() || {};
   if (!nextPage) {
     return <div>&nbsp;</div>;
   }

package/src/PageNavigation/PreviousPageLink.tsx

@@ -5,11 +5,11 @@ import { usePageData } from '@portal/hooks/usePageData';
 import { Button } from '@theme/ui';
 
 interface PreviousPageType {
-  prevPage: ResolvedNavLinkItem | null;
+  prevPage?: ResolvedNavLinkItem | null;
 }
 
 export function PreviousPageLink(): JSX.Element {
-  const { prevPage }: PreviousPageType = usePageData();
+  const { prevPage }: PreviousPageType = usePageData() || {};
   if (!prevPage) {
     return <div>&nbsp;</div>;
   }

package/src/Search/SearchItem.tsx

@@ -25,7 +25,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
       {item.httpVerb ? (
         <Operation>
           <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
-          {highlight(item.pathName)}
+          {item.pathName ? highlight(item.pathName) : null}
         </Operation>
       ) : null}
       <Title>{highlight(item.title)}</Title>

package/src/mocks/hooks/usePageData.ts

@@ -3,7 +3,7 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
 export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
-} {
+} | null {
   return {
     prevPage: { label: 'Intro', type: 'link', link: '#prev' },
     nextPage: { label: 'FAQ', type: 'link', link: '#next' },