Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-10 16:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

added support for specifying target in x-logo href

Browse Source
This commit is contained in:
Ramakrishna 2025-05-28 13:37:15 +00:00
parent 3ae251b7e4
commit b2538b281f
No known key found for this signature in database
GPG Key ID: 96AE9D08CE2E3951
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/redoc-vendor-extensions.md
View File

@ -120,12 +120,13 @@ Extends the OpenAPI [Info Object](https://redocly.com/docs/openapi-visual-refere
The information about API logo The information about API logo
#### Fixed fields #### Fixed fields
| Field Name | Type | Description | | Field Name | Type | Description |
| :-------------- | :------: | :---------- | | :-------------- | :------: |:---------------------------------------------------------------------------------------------------------------------------------------------------|
| url | string | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location | | url | string | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location |
| backgroundColor | string | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) | | backgroundColor | string | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) |
| altText | string | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided. | | altText | string | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided. |
| href | string | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS. | | href | string | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS. |
| hrefTarget | string | The target of the generated anchor tag. |
#### x-logo example #### x-logo example

3
src/components/ApiLogo/ApiLogo.tsx
View File

@ -13,6 +13,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
} }
const logoHref = logoInfo.href || (info.contact && info.contact.url); const logoHref = logoInfo.href || (info.contact && info.contact.url);
const logoHrefTarget = logoInfo.hrefTarget;
// Use the english word logo if no alt text is provided // Use the english word logo if no alt text is provided
const altText = logoInfo.altText ? logoInfo.altText : 'logo'; const altText = logoInfo.altText ? logoInfo.altText : 'logo';
@ -20,7 +21,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />; const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
return ( return (
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}> <LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
{logoHref ? LinkWrap(logoHref)(logo) : logo} {logoHref ? LinkWrap({ url: logoHref, target: logoHrefTarget })(logo) : logo}
</LogoWrap> </LogoWrap>
); );
} }

11
src/components/ApiLogo/styled.elements.tsx
View File

@ -17,5 +17,12 @@ const Link = styled.a`
display: inline-block; display: inline-block;
`; `;
// eslint-disable-next-line react/display-name export const LinkWrap =
export const LinkWrap = url => Component => <Link href={url}>{Component}</Link>; ({ url, target }) =>
// eslint-disable-next-line react/display-name
Component =>
(
<Link href={url} target={target}>
{Component}
</Link>
);