Skip to content

Commit f9a5a01

Browse files
lukasz-hycommichnowakmarcinkrasowski
authored
docs: integrations page update (#386)
* refactor(docs): replace anchor tags with Docusaurus Link component * docs: add links to integration descriptions * refactor(docs): replace anchor tags with Docusaurus Link * fix(docs): add scroll margin to starter sections for improved layout * chore: updated package-lock.json * chore: updated package-lock.json --------- Co-authored-by: Michal Nowak <michal.nowak@hycom.pl> Co-authored-by: Marcin Krasowski <marcin.krasowski@hycom.pl>
1 parent 246a450 commit f9a5a01

File tree

12 files changed

+111
-51
lines changed

12 files changed

+111
-51
lines changed

‎apps/docs/docs/integrations/overview.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ slug: '/integrations'
88
This sections provides a list of all integrations that are a part of the open-source project.
99

1010
For each integration we have prepared a description about:
11+
1112
- all the requirements that are needed to run it,
1213
- a list of base modules that it supports,
1314
- what data sources and libraries are used,
@@ -18,26 +19,26 @@ import DocLinkTiles from '@site/src/components/DocLinkTiles';
1819
## Available integrations
1920

2021
<DocLinkTiles
21-
items={[
22-
{ title: 'Strapi CMS', description: 'Headless CMS integration for content & page management.', href: '/docs/integrations/cms/strapi/overview' },
23-
{ title: 'Redis Cache', description: 'High-performance caching with Redis to be used with our API Harmonization server.', href: '/docs/integrations/cache/redis' },
24-
{ title: 'Medusa Commerce', description: 'Initial integration, currently provides basic product data.', href: '/docs/integrations/commerce/medusa-js' },
25-
{ title: 'Algolia Search', description: 'The AI search platform, used for knowledge base search.', href: '/docs/integrations/search/algolia' },
26-
{ title: 'SurveyJS Forms', description: 'Dynamic form creation and ticket submission. Used as a default engine for our ticket submission handling.', href: '/docs/integrations/forms/surveyjs' },
27-
{ title: 'Mocked Data', description: 'Development and testing with mocked integrations - use it to quickly start developing without any external API.', href: '/docs/integrations/mocked' },
28-
]}
22+
items={[
23+
{ title: 'Strapi CMS', description: 'Headless CMS integration for content & page management.', href: '/docs/integrations/cms/strapi/overview' },
24+
{ title: 'Redis Cache', description: 'High-performance caching with Redis to be used with our API Harmonization server.', href: '/docs/integrations/cache/redis' },
25+
{ title: 'Medusa Commerce', description: 'Initial integration, currently provides basic product data.', href: '/docs/integrations/commerce/medusa-js' },
26+
{ title: 'Algolia Search', description: 'The AI search platform, used for knowledge base search.', href: '/docs/integrations/search/algolia' },
27+
{ title: 'SurveyJS Forms', description: 'Dynamic form creation and ticket submission. Used as a default engine for our ticket submission handling.', href: '/docs/integrations/forms/surveyjs' },
28+
{ title: 'Mocked Data', description: 'Development and testing with mocked integrations - use it to quickly start developing without any external API.', href: '/docs/integrations/mocked' },
29+
]}
2930
/>
3031

3132
## Enterprise integrations (Contact us)
3233

3334
The following integrations are available as enterprise solutions and not part of the open-source project:
3435

3536
<DocLinkTiles
36-
items={[
37-
{ title: 'Keycloak IAM', description: 'Enterprise identity and access management. Powers our advanced user login and registration flows.', href: 'mailto:contact@openselfservice.com' },
38-
{ title: 'SAP S/4HANA ERP', description: 'Enterprise integration, provides product, order & billing related data.', href: 'mailto:contact@openselfservice.com' },
39-
{ title: 'Contentful CMS', description: 'Content & page management with Contentful.', href: 'mailto:contact@openselfservice.com' },
40-
]}
37+
items={[
38+
{ title: 'Keycloak IAM', description: 'Enterprise identity and access management. Powers our advanced user login and registration flows.', href: '/contact' },
39+
{ title: 'SAP S/4HANA ERP', description: 'Enterprise integration, provides product, order & billing related data.', href: '/contact' },
40+
{ title: 'Contentful CMS', description: 'Content & page management with Contentful.', href: '/contact' },
41+
]}
4142
/>
4243

4344
---

‎apps/docs/src/components/DXPIntegrationsSection/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
4+
35
import { H3 } from '../Typography';
46

57
interface IntegrationBadgeProps {
@@ -10,7 +12,7 @@ interface IntegrationBadgeProps {
1012
const IntegrationBadge: React.FC<IntegrationBadgeProps> = ({ icon, name }) => {
1113
return (
1214
<div className="flex gap-2.5 items-center justify-center px-0 py-0.5 rounded-full">
13-
<div className="relative w-5 h-5 flex-shrink-0">
15+
<div className="relative w-5 h-5 shrink-0">
1416
<img alt={`${name} logo`} className="block max-w-none w-full h-full" src={icon} />
1517
</div>
1618
<div className="font-normal leading-[1.4] text-sm text-white whitespace-nowrap">{name}</div>
@@ -59,12 +61,12 @@ export function DXPIntegrationsSection() {
5961
<div className="flex flex-col gap-8 items-start justify-start w-full">
6062
{/* Header */}
6163
<div className="flex flex-col sm:flex-row items-start justify-between w-full gap-4">
62-
<H3 className="font-semibold leading-[1.5] text-2xl text-white w-full">
64+
<H3 className="font-semibold leading-normal text-2xl text-white w-full">
6365
Extend with existing Open Self Service features
6466
</H3>
65-
<a href="/docs/integrations" className="button flex-shrink-0">
67+
<Link href="/docs/integrations" className="button shrink-0">
6668
See all integrations
67-
</a>
69+
</Link>
6870
</div>
6971

7072
{/* Integration Badges */}

‎apps/docs/src/components/FooterSection/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
4+
35
import { Body, H2 } from '../Typography';
46

57
export interface FooterSectionProps {
@@ -34,14 +36,14 @@ export const FooterSection: React.FC<FooterSectionProps> = ({ title, description
3436
{(primaryButton || secondaryButton) && (
3537
<div className="flex flex-col md:flex-row gap-2 justify-center">
3638
{primaryButton && (
37-
<a href={primaryButton.url} className="button" target={primaryButton.target} rel="noopener">
39+
<Link href={primaryButton.url} className="button" target={primaryButton.target} rel="noopener">
3840
{primaryButton.iconLeft}
3941
{primaryButton.text}
4042
{primaryButton.iconRight}
41-
</a>
43+
</Link>
4244
)}
4345
{secondaryButton && (
44-
<a
46+
<Link
4547
href={secondaryButton.url}
4648
className="button button-ultra"
4749
target={secondaryButton.target}
@@ -52,7 +54,7 @@ export const FooterSection: React.FC<FooterSectionProps> = ({ title, description
5254
{secondaryButton.text}
5355
{secondaryButton.iconRight}
5456
</span>
55-
</a>
57+
</Link>
5658
)}
5759
</div>
5860
)}

‎apps/docs/src/components/HeroBannerSection/index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import clsx from 'clsx';
22
import React, { type ReactNode } from 'react';
33

4+
import Link from '@docusaurus/Link';
5+
46
import CircleCheckIcon from '@site/src/assets/icons/circle-check.svg';
57

68
import { CopyCommandButton } from '../CopyCommandButton';
@@ -96,18 +98,18 @@ export function HeroBannerSection({
9698
{mainLink && (
9799
<>
98100
<div className={clsx('sm:flex gap-2 space-y-4 w-full', !heroImage && 'justify-center')}>
99-
<a
101+
<Link
100102
className={clsx('button', cliCommand && 'w-1/2')}
101103
href={mainLink.url}
102104
target={mainLink.target}
103105
>
104106
{mainLink.iconLeft}
105107
{mainLink.text}
106108
{mainLink.iconRight}
107-
</a>
109+
</Link>
108110

109111
{secondaryLink && (
110-
<a
112+
<Link
111113
href={secondaryLink.url}
112114
className={clsx('button button-ultra', cliCommand && 'w-1/2')}
113115
target={secondaryLink.target}
@@ -118,11 +120,11 @@ export function HeroBannerSection({
118120
{secondaryLink.text}
119121
{secondaryLink.iconRight}
120122
</span>
121-
</a>
123+
</Link>
122124
)}
123125

124126
{tertiaryLink && (
125-
<a
127+
<Link
126128
href={tertiaryLink.url}
127129
className={clsx('button button-special', cliCommand && 'w-1/2')}
128130
target={tertiaryLink.target}
@@ -133,7 +135,7 @@ export function HeroBannerSection({
133135
{tertiaryLink.text}
134136
{tertiaryLink.iconRight}
135137
</span>
136-
</a>
138+
</Link>
137139
)}
138140
</div>
139141
</>

‎apps/docs/src/components/HomepageArchitectureSection/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
34
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
45

56
import { Body, H2 } from '../Typography';
@@ -21,9 +22,9 @@ export function HomepageArchitectureSection() {
2122
for building modern customer-facing platforms. Each layer is designed to be independently
2223
developed, extended or replaced — giving full control over how the frontend evolves.
2324
</Body>
24-
<a href={'/docs/overview/architecture'} className="button w-fit" rel="noopener">
25-
<span className="label flex items-center justify-center gap-2">Learn more</span>
26-
</a>
25+
<Link href={'/docs/overview/architecture'} className="button w-fit" rel="noopener">
26+
Learn more
27+
</Link>
2728
</div>
2829
</div>
2930
<div className="mt-14 w-full flex justify-center">

‎apps/docs/src/components/HomepageFeaturesSection/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
4+
35
import BlocksIcon from '@site/src/assets/icons/Blocks.svg';
46
import UserIcon from '@site/src/assets/icons/CircleUser.svg';
57
import FileSearchIcon from '@site/src/assets/icons/FileSearch.svg';
@@ -123,9 +125,9 @@ export function HomepageFeaturesSection() {
123125
{/* </div>*/}
124126
{/*</div>*/}
125127

126-
<a href="/product/features" className="button">
128+
<Link href="/product/features" className="button">
127129
Explore full feature set
128-
</a>
130+
</Link>
129131
</section>
130132
);
131133
}

‎apps/docs/src/components/HomepageStartersSection/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
4+
35
import { HoverCard, HoverCardProps } from '../HoverCard';
46
import { Body, H2 } from '../Typography';
57

@@ -57,9 +59,9 @@ export const HomepageStartersSection: React.FC = () => {
5759
))}
5860
</div>
5961

60-
<a href="/product/starters" className="button">
62+
<Link href="/product/starters" className="button">
6163
View all starters
62-
</a>
64+
</Link>
6365
</section>
6466
);
6567
};

‎apps/docs/src/components/HoverCard/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import Link from '@docusaurus/Link';
4+
35
import ArrowRight from '@site/src/assets/icons/ArrowRight.svg';
46

57
import { Body, H3 } from '../Typography';
@@ -69,15 +71,15 @@ export const HoverCard: React.FC<HoverCardProps> = ({
6971
};
7072

7173
return href ? (
72-
<a
74+
<Link
7375
href={href}
7476
className={
7577
cardWrapperClasses +
7678
' no-underline! hover:no-underline! focus:no-underline! focus-visible:outline-2 focus-visible:outline-(--ifm-color-primary) focus-visible:outline-offset-2'
7779
}
7880
>
7981
{cardContent()}
80-
</a>
82+
</Link>
8183
) : (
8284
<div className={cardWrapperClasses}>{cardContent()}</div>
8385
);

‎apps/docs/src/components/IntegrationsBlocks/index.tsx‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import clsx from 'clsx';
22
import React from 'react';
33

4+
import Link from '@docusaurus/Link';
5+
6+
import ArrowRightIcon from '@site/src/assets/icons/ArrowRight.svg';
47
import RefreshCwIcon from '@site/src/assets/icons/RefreshCw.svg';
58
import CircleCheckIcon from '@site/src/assets/icons/circle-check.svg';
69
import Badge from '@site/src/components/Badge';
@@ -14,6 +17,7 @@ export interface IntegrationsBlocksProps {
1417
description: string;
1518
status: 'available' | 'planned' | 'internal';
1619
icon?: React.ReactNode;
20+
link?: string;
1721
}[];
1822
}
1923

@@ -58,25 +62,52 @@ export function IntegrationsBlocks({ title, description, integrations }: Integra
5862
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
5963
{integrations.map((integration, integrationIndex) => {
6064
const statusConfig = getStatusConfig(integration.status);
61-
return (
62-
<div
63-
key={integrationIndex}
64-
className={clsx('card-base p-6! flex flex-col gap-[30px] h-full', statusConfig.cardBgClass)}
65-
>
66-
<div className="flex gap-6">
65+
const isLinkable = !!integration.link;
66+
67+
const cardContent = (
68+
<>
69+
<div className="flex gap-6 relative z-10">
6770
<div>{integration.icon}</div>
6871
<div className="flex flex-col gap-2.5">
6972
<H3 className="mb-0!">{integration.name}</H3>
7073
<BodySmall className="mb-0!">{integration.description}</BodySmall>
7174
</div>
7275
</div>
73-
<div className="w-fit mt-auto">
76+
<div className="w-full mt-auto flex items-center justify-between relative z-10">
7477
<Badge
7578
title={statusConfig.title}
7679
variant={statusConfig.variant}
7780
icon={statusConfig.icon}
7881
/>
82+
{isLinkable && <ArrowRightIcon className="w-4 h-4 *:stroke-white shrink-0" />}
7983
</div>
84+
</>
85+
);
86+
87+
const cardClassName = clsx(
88+
'card-base p-6! flex flex-col gap-[30px] h-full relative text-white!',
89+
statusConfig.cardBgClass,
90+
isLinkable &&
91+
'before:content-[""] before:absolute before:inset-0 before:rounded-md before:bg-black/20 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200 before:pointer-events-none',
92+
);
93+
94+
const linkClassName = clsx(
95+
cardClassName,
96+
'no-underline! hover:no-underline! focus:no-underline!',
97+
'focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 focus-visible:outline',
98+
);
99+
100+
if (isLinkable && integration.link) {
101+
return (
102+
<Link key={integrationIndex} to={integration.link} className={linkClassName}>
103+
{cardContent}
104+
</Link>
105+
);
106+
}
107+
108+
return (
109+
<div key={integrationIndex} className={cardClassName}>
110+
{cardContent}
80111
</div>
81112
);
82113
})}

‎apps/docs/src/pages/product/features.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import clsx from 'clsx';
22
import React from 'react';
33

4+
import Link from '@docusaurus/Link';
5+
46
import ArrowLeftRightGreenTileIcon from '@site/src/assets/icons/ArrowLeftRightGreenTile.svg';
57
import BanGreenTileIcon from '@site/src/assets/icons/BanGreenTile.svg';
68
import BlocksPurpleTileIcon from '@site/src/assets/icons/BlocksPurpleTile.svg';
@@ -345,15 +347,15 @@ export default function ProductFeatures() {
345347
Use built-in functional blocks to speed up development and add essential
346348
customer-support features.
347349
</Body>
348-
<a
349-
href={'/docs/main-components/blocks'}
350+
<Link
351+
href="/docs/main-components/blocks"
350352
className="button w-fit"
351353
rel="noopener"
352354
>
353355
<span className="label flex items-center justify-center gap-2">
354356
Learn more about Blocks
355357
</span>
356-
</a>
358+
</Link>
357359
</div>
358360
</div>
359361
{functionalBlocks.map((block, blockIndex) => (
@@ -374,8 +376,8 @@ export default function ProductFeatures() {
374376
title="Want to connect your own APIs?"
375377
description={
376378
<>
377-
Go to the <a href="/product/integrations">Integrations</a> page to learn more
378-
about supported services and how to add your own.
379+
Go to the <Link href="/product/integrations">Integrations</Link> page to learn
380+
more about supported services and how to add your own.
379381
</>
380382
}
381383
primaryButton={{

0 commit comments

Comments
 (0)