Skip to content

Commit 3b595ab

Browse files
authored
Merge pull request #1472 from datopian/feat/purview-integration
Purview and Datahub integration pages
2 parents 5c44e61 + 503a860 commit 3b595ab

File tree

7 files changed

+261
-25
lines changed

7 files changed

+261
-25
lines changed

site/components/openmetadata/CommonUseCases.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,31 @@ import { Player } from '@lottiefiles/react-lottie-player'
22
import { H2, H3 } from '../custom/header'
33
import { useTheme } from 'next-themes'
44

5-
export const CommonUseCases = () => {
5+
type CommonUseCasesProps = {
6+
productName: string
7+
}
8+
9+
export const CommonUseCases = ({ productName }: CommonUseCasesProps) => {
610
const { theme } = useTheme()
711
const features = [
812
{
913
title: 'Business-Friendly Data Catalogs',
1014
description:
11-
'Transform OpenMetadata\'s technical interface into intuitive experiences for non-technical users. Create simplified views of complex metadata that business teams can easily navigate and understand.',
15+
`Transform ${productName}'s technical interface into intuitive experiences for non-technical users. Create simplified views of complex metadata that business teams can easily navigate and understand.`,
1216
icon: `/static/icons/${theme}/data-portal.json`,
1317
style: 'dark:-rotate-[4deg]',
1418
},
1519
{
1620
title: 'Multi-Audience Portals',
1721
description:
18-
'Deploy separate interfaces for different user groups—detailed technical portals for data engineers, simplified asset browsers for analysts, and executive dashboards for leadership—all from a single OpenMetadata instance.',
22+
`Deploy separate interfaces for different user groups—detailed technical portals for data engineers, simplified asset browsers for analysts, and executive dashboards for leadership—all from a single ${productName} instance.`,
1923
icon: `/static/icons/${theme}/diagram.json`,
2024
style: 'dark:-rotate-[4deg]',
2125
},
2226
{
2327
title: 'Custom Data Experiences',
2428
description:
25-
'Overcome OpenMetadata\'s UI customization limitations by building completely bespoke interfaces with your branding, terminology, and user flows while leveraging all the powerful metadata management capabilities in the background.',
29+
`Overcome ${productName}'s UI customization limitations by building completely bespoke interfaces with your branding, terminology, and user flows while leveraging all the powerful metadata management capabilities in the background.`,
2630
icon: `/static/icons/${theme}/seminar.json`,
2731
style: 'dark:-rotate-[4deg]',
2832
},

site/components/openmetadata/Hero.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import React from 'react';
2-
import ButtonLink from '../ButtonLink';
3-
import { useTheme } from 'next-themes';
1+
import React from 'react'
2+
import ButtonLink from '../ButtonLink'
43

5-
export default function Hero() {
6-
const { theme } = useTheme();
4+
type HeroProps = {
5+
productName: string
6+
description?: string
7+
}
8+
9+
export default function Hero({ productName, description }: HeroProps) {
10+
const heroDescription =
11+
description ??
12+
`Transform ${productName}'s technical interface into user-friendly, customized data catalogs for business users.`
713

814
return (
915
<div
@@ -14,11 +20,10 @@ export default function Hero() {
1420
<div className="mx-auto max-w-2xl px-4 lg:max-w-8xl lg:px-8 xl:px-12">
1521
<div className="relative mb-10 lg:mb-0 text-center">
1622
<h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
17-
OpenMetadata & PortalJS
23+
{productName} & PortalJS
1824
</h1>
1925
<p className="mt-8 text-xl tracking-tight text-slate-400">
20-
Transform OpenMetadata's technical interface into user-friendly,
21-
customized data catalogs for business users.
26+
{heroDescription}
2227
</p>
2328

2429
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
@@ -64,7 +69,7 @@ export default function Hero() {
6469
Without PortalJS
6570
</div>
6671
<h3 className="text-white text-lg mb-4">
67-
Technical OpenMetadata UI
72+
Technical {productName} UI
6873
</h3>
6974
<ul className="text-left text-slate-300 text-sm space-y-2">
7075
<li className="flex items-start">

site/components/openmetadata/KeyFeatures.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import { Player } from '@lottiefiles/react-lottie-player'
22
import { H2, H3 } from '../custom/header'
33
import { useTheme } from 'next-themes'
44

5-
const features = [
5+
type KeyFeaturesProps = {
6+
productName: string
7+
}
8+
9+
const createFeatures = (productName: string) => [
610
{
711
title: 'Business-Friendly Interfaces',
8-
description: 'Create simplified interfaces that hide OpenMetadata\'s technical complexity, making data assets accessible to non-technical users.',
12+
description: `Create simplified interfaces that hide ${productName}'s technical complexity, making data assets accessible to non-technical users.`,
913
icon: 'data-catalog',
1014
iconStyle: 'dark:-rotate-[4deg]',
1115
style: 'max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem] w-full',
@@ -21,7 +25,7 @@ const features = [
2125
},
2226
{
2327
title: 'Complete UI Freedom',
24-
description: 'Overcome OpenMetadata\'s frontend customization limitations with unlimited design flexibility and branding options.',
28+
description: `Overcome ${productName}'s frontend customization limitations with unlimited design flexibility and branding options.`,
2529
icon: 'browser',
2630
iconStyle: 'dark:-rotate-[4deg]',
2731
style: '',
@@ -45,25 +49,26 @@ const features = [
4549
},
4650
{
4751
title: 'Integration Hub',
48-
description: 'Connect OpenMetadata with documentation, BI dashboards, and business glossaries in one unified experience.',
52+
description: `Connect ${productName} with documentation, BI dashboards, and business glossaries in one unified experience.`,
4953
icon: 'data-lake',
5054
iconStyle: 'dark:-rotate-[2deg]',
5155
style: '',
5256
colSpan: 'lg:col-span-2',
5357
},
5458
{
5559
title: 'No-Code Implementation',
56-
description: 'Deploy custom data catalog frontends without deep OpenMetadata technical expertise using pre-built components.',
60+
description: `Deploy custom data catalog frontends without deep ${productName} technical expertise using pre-built components.`,
5761
icon: 'click',
5862
iconStyle: 'dark:-rotate-[4deg]',
5963
style: 'max-lg:rounded-b-[2rem] lg:rounded-br-[2rem] w-full',
6064
colSpan: 'lg:col-span-2',
6165
},
6266
]
6367

64-
export const KeyFeatures = () => {
65-
68+
export const KeyFeatures = ({ productName }: KeyFeaturesProps) => {
6669
const { theme } = useTheme()
70+
const features = createFeatures(productName)
71+
6772
return (
6873
<div className="py-24">
6974
<div className="mx-auto">
@@ -72,7 +77,7 @@ export const KeyFeatures = () => {
7277
Key Features
7378
</H2>
7479
<H3 className="text-lg leading-8 opacity-75 text-center">
75-
Solve OpenMetadata's user experience challenges with PortalJS—transform technical interfaces into business-friendly data portals
80+
Solve {productName}'s user experience challenges with PortalJS—transform technical interfaces into business-friendly data portals
7681
</H3>
7782
</div>
7883
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">

site/content/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ const config = {
3737
name: 'OpenMetadata',
3838
href: '/openmetadata',
3939
},
40+
{
41+
name: 'Microsoft Purview',
42+
href: '/purview',
43+
},
44+
{
45+
name: 'Datahub',
46+
href: '/datahub',
47+
},
4048
{
4149
name: 'Git',
4250
href: '/git',

site/pages/datahub.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import Hero from '@/components/openmetadata/Hero'
2+
import { KeyFeatures } from '@/components/openmetadata/KeyFeatures'
3+
import Schedule from '@/components/home/Schedule'
4+
import { LogoJsonLd, NextSeo, WebPageJsonLd, BreadcrumbJsonLd, FAQPageJsonLd } from 'next-seo'
5+
import Layout from '@/components/Layout'
6+
import { CommonUseCases } from '@/components/openmetadata/CommonUseCases'
7+
import { FAQ } from '@/components/FAQ'
8+
9+
export default function DataHub() {
10+
const faqItems = [
11+
{
12+
question: 'What is PortalJS?',
13+
answer: 'PortalJS is a modern frontend framework (Next.js-based) for building fast, customizable data portals — compatible with DataHub, Microsoft Purview, OpenMetadata, CKAN, and other backends.'
14+
},
15+
{
16+
question: 'Does PortalJS replace DataHub?',
17+
answer: 'No. It works with your DataHub backend — just replaces the frontend for better UX.'
18+
},
19+
{
20+
question: 'Can I use PortalJS without modifying DataHub\'s backend?',
21+
answer: 'Yes. PortalJS works as a decoupled frontend — no need to touch your metadata engine.'
22+
},
23+
{
24+
question: 'Is this open source or commercial?',
25+
answer: 'PortalJS is open source. PortalJS Cloud offers a fully managed SaaS version with support and custom features.'
26+
},
27+
];
28+
29+
return (
30+
<Layout isHomePage={true}>
31+
<FAQPageJsonLd
32+
mainEntity={faqItems.map(item => ({
33+
questionName: item.question,
34+
acceptedAnswerText: item.answer
35+
}))}
36+
/>
37+
<div className="flex justify-center">
38+
<div className="max-w-8xl px-4 sm:px-8 xl:px-12">
39+
<LogoJsonLd
40+
url="https://portaljs.com"
41+
logo="https://portaljs.com/icon.png"
42+
/>
43+
<NextSeo
44+
title="Turn DataHub into a Business-Friendly Data Catalog"
45+
description="Transform DataHub's technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance."
46+
canonical="https://portaljs.com/datahub"
47+
openGraph={{
48+
url: 'https://portaljs.com/datahub',
49+
title: 'Turn DataHub into a Business-Friendly Data Catalog',
50+
description: 'Transform DataHub\'s technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance.',
51+
site_name: 'PortalJS',
52+
}}
53+
/>
54+
<WebPageJsonLd
55+
id="https://portaljs.com/datahub#webpage"
56+
url="https://portaljs.com/datahub"
57+
title="Turn DataHub into a Business-Friendly Data Catalog"
58+
description="Transform DataHub's technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance."
59+
/>
60+
<BreadcrumbJsonLd
61+
itemListElements={[
62+
{
63+
position: 1,
64+
name: 'Home',
65+
item: 'https://portaljs.com',
66+
},
67+
{
68+
position: 2,
69+
name: 'DataHub',
70+
item: 'https://portaljs.com/datahub',
71+
},
72+
]}
73+
/>
74+
<Hero productName="DataHub" />
75+
</div>
76+
</div>
77+
<div className="relative max-w-none w-full flex justify-center py-16 bg-slate-50 dark:bg-slate-900">
78+
<div className="max-w-4xl px-4 sm:px-8 xl:px-12 text-center">
79+
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mb-6">
80+
Why Pair PortalJS with DataHub?
81+
</h2>
82+
<p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
83+
DataHub is a powerful metadata platform, but its default UI can feel overwhelming for business users. PortalJS lets you craft tailored, branded experiences on top of DataHub so every audience gets the context and navigation they need without changing your backend.
84+
</p>
85+
</div>
86+
</div>
87+
<div className="flex justify-center">
88+
<div className="max-w-8xl px-4 sm:px-8 xl:px-12">
89+
<KeyFeatures productName="DataHub" />
90+
</div>
91+
</div>
92+
<div className="flex justify-center">
93+
<div className="max-w-8xl px-4 sm:px-8 xl:px-12">
94+
<CommonUseCases productName="DataHub" />
95+
</div>
96+
</div>
97+
<div className="relative max-w-none w-full flex justify-center bg-slate-50 dark:bg-slate-900">
98+
<div className="max-w-8xl px-4 sm:px-8 xl:px-12 w-full">
99+
<FAQ faqItems={faqItems} />
100+
</div>
101+
</div>
102+
<Schedule calendar="https://calendar.app.google/iQkon85iKURfdBtX7" />
103+
</Layout>
104+
)
105+
}

site/pages/openmetadata.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function OpenMetadata() {
7676
},
7777
]}
7878
/>
79-
<Hero />
79+
<Hero productName="OpenMetadata" />
8080
</div>
8181
</div>
8282
<div className="relative max-w-none w-full flex justify-center py-16 bg-slate-50 dark:bg-slate-900">
@@ -91,12 +91,12 @@ export default function OpenMetadata() {
9191
</div>
9292
<div className="flex justify-center">
9393
<div className="max-w-8xl px-4 sm:px-8 xl:px-12">
94-
<KeyFeatures />
94+
<KeyFeatures productName="OpenMetadata" />
9595
</div>
9696
</div>
9797
<div className="flex justify-center">
9898
<div className="max-w-8xl px-4 sm:px-8 xl:px-12">
99-
<CommonUseCases />
99+
<CommonUseCases productName="OpenMetadata" />
100100
</div>
101101
</div>
102102
<div className="relative max-w-none w-full flex justify-center bg-slate-50 dark:bg-slate-900">
@@ -112,4 +112,4 @@ export default function OpenMetadata() {
112112
<Schedule calendar="https://calendar.app.google/iQkon85iKURfdBtX7" />
113113
</Layout>
114114
)
115-
}
115+
}

0 commit comments

Comments
 (0)