Skip to content

Commit 21b0a13

Browse files
hcourdenthcourdent
committed
Integrations page and style
1 parent 4c46aa8 commit 21b0a13

33 files changed

+503
-653
lines changed

‎docs/compared_to/airplane.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ Anyone can create an integration with just a few clicks.
211211
<div class="text-xl mb-2 font-semibold"></div>
212212
<div class="grid grid-cols-2 gap-6 mb-4">
213213
<DocCard
214-
title="Creating integrations on Windmill"
214+
title="Integrations on Windmill"
215215
description="Windmill provides a framework to easily add integrations."
216216
href="/docs/integrations/integrations_on_windmill"
217217
/>

‎docs/compared_to/retool.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Anyone can create an integration with just a few clicks.
5959
<div class="text-xl mb-2 font-semibold"></div>
6060
<div class="grid grid-cols-2 gap-6 mb-4">
6161
<DocCard
62-
title="Creating integrations on Windmill"
62+
title="Integrations on Windmill"
6363
description="Windmill provides a framework to easily add integrations."
6464
href="/docs/integrations/integrations_on_windmill"
6565
/>

‎docs/core_concepts/11_persistent_storage/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ More tutorials on Supabase:
236236

237237
1. Sign-up to Neon's <a href="https://console.neon.tech/sign_in" rel="nofollow" >Cloud App</a> or [Self-Host](https://community.neon.tech/t/can-neon-be-self-hosted/51) it.
238238

239-
2. [Set up a project and add data](https://neon.tech/docs/tutorial/project-setup).
239+
2. [Set up a project and add data](https://neon.tech/docs/manage/projects).
240240

241241
3. Get a [Connection string](https://neon.tech/docs/connect/query-with-psql-editor). You can obtain it connection string from the Connection Details widget on the Neon Dashboard: select a branch, a role, and the database you want to connect to and a connection string will be constructed for you.
242242

‎docs/integrations/0_integrations_on_windmill.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import DocCard from '@site/src/components/DocCard';
22

3-
# Creating Integrations on Windmill
3+
# Integrations on Windmill
44

55
Integrations are key on Windmill as they allow databases (internal & external) and service providers to interact.
66

‎docs/integrations/neon.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ As a Postgres database service provider, Neon.tech follows the regular Postgres
1515

1616
1. Sign-up to Neon's <a href="https://console.neon.tech/sign_in" rel="nofollow" >Cloud App</a> or [Self-Host](https://community.neon.tech/t/can-neon-be-self-hosted/51) it.
1717

18-
2. [Set up a project and add data](https://neon.tech/docs/tutorial/project-setup).
18+
2. [Set up a project and add data](https://neon.tech/docs/manage/projects).
1919

2020
3. Get a [Connection string](https://neon.tech/docs/connect/query-with-psql-editor). You can obtain it connection string from the Connection Details widget on the Neon Dashboard: select a branch, a role, and the database you want to connect to and a connection string will be constructed for you.
2121

‎docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const config = {
1212
onBrokenLinks: 'throw',
1313
onBrokenMarkdownLinks: 'throw',
1414
trailingSlash: false,
15-
favicon: 'img/logo.svg',
15+
favicon: 'img/docs_logo.svg',
1616
organizationName: 'windmill', // Usually your GitHub org/user name.
1717
projectName: 'windmill',
1818

‎src/components/SolutionSVG.svg

Lines changed: 0 additions & 566 deletions
This file was deleted.

‎src/components/Solutions.tsx

Lines changed: 108 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,97 @@ import { ArrowRight } from 'lucide-react';
66
import LayoutProvider from '@theme/Layout/Provider';
77
import { Helmet } from 'react-helmet-async';
88
import { useColorMode } from '@docusaurus/theme-common';
9-
import SolutionSVG from './SolutionSVG.svg';
9+
import Head from '@docusaurus/Head';
1010

1111

12-
function Screenshot({ darkScreenshot, lightScreenshot }) {
12+
const InteractiveImage = ({ id, src, style, url }) => {
1313
const { colorMode } = useColorMode();
14-
const screenshot = colorMode === 'dark' ? darkScreenshot : lightScreenshot;
14+
const darkSrc = src.replace(/\.(png|jpg|jpeg|svg)$/, '_dark.$1');
15+
16+
const handleImageError = (e) => {
17+
e.target.src = src;
18+
};
19+
20+
const imageSrc = colorMode === 'dark' ? darkSrc : src;
21+
22+
return (
23+
<img
24+
key={id}
25+
src={imageSrc}
26+
style={{ ...style, position: 'absolute' }}
27+
className={`interactive-image ${src.endsWith('.svg') ? 'svg-image' : ''}`}
28+
onClick={() => window.open(url, '_blank')}
29+
alt={id}
30+
onError={handleImageError}
31+
/>
32+
);
33+
};
34+
35+
36+
const interactiveImages = [
37+
{
38+
id: 'Flows',
39+
src: '/integrations/visual_elements/flow.png',
40+
url: '/docs/flows/flow_editor',
41+
style: { top: '124px', left: '67px', width: '234px', height: '292px' }
42+
},
43+
{
44+
id: 'Apps',
45+
src: '/integrations/visual_elements/app.png',
46+
url: '/docs/apps/app_editor',
47+
style: { top: '67px', left: '246px', width: '393px', height: '180px' }
48+
},
49+
{
50+
id: 'Runs',
51+
src: '/integrations/visual_elements/runs.png',
52+
url: '/docs/core_concepts/monitor_past_and_future_runs',
53+
style: { top: '362px', left: '293px', width: '260px', height: '160px' }
54+
},
55+
{
56+
id: 'Schedules',
57+
src: '/integrations/visual_elements/schedule.png',
58+
url: '/docs/core_concepts/scheduling',
59+
style: { top: '224px', left: '314px', width: '160px', height: '92px' }
60+
},
61+
{
62+
id: 'Webhooks',
63+
src: '/integrations/visual_elements/webhook.png',
64+
url: '/docs/core_concepts/webhooks',
65+
style: { top: '284px', left: '426px', width: '176px', height: '73px' }
66+
},
67+
{
68+
id: 'GitHub',
69+
src: '/third_party_logos/github.svg',
70+
url: '/docs/advanced/git_sync',
71+
style: { top: '455px', left: '95px', width: '42px', height: '42px' }
72+
},
73+
{
74+
id: 'GitLab',
75+
src: '/third_party_logos/gitlab.svg',
76+
url: '/docs/advanced/git_sync',
77+
style: { top: '447px', left: '148px', width: '65px', height: '65px' }
78+
},
79+
{
80+
id: 'VSCode',
81+
src: '/third_party_logos/vscode.svg',
82+
url: '/docs/cli_local_dev/vscode-extension',
83+
style: { top: '455px', left: '220px', width: '42px', height: '42px' }
84+
}
85+
];
1586

16-
return <img src={screenshot} className="w-full rounded-lg" />;
17-
}
1887

1988
export default function Solution({
2089
data,
2190
name,
2291
color,
23-
extraBlock
92+
extraBlock,
93+
website,
2494
}: {
2595
data: any;
2696
name: string;
2797
color: string;
2898
extraBlock?: React.ReactNode;
99+
website: string;
29100
}) {
30101
return (
31102
<LayoutProvider>
@@ -40,17 +111,23 @@ export default function Solution({
40111
<LandingSection bgClass="relative">
41112
<div className="max-w-6xl mx-auto px-4 sm:px-6">
42113
<div className="py-12 md:py-20">
43-
<div className=" pb-12 md:pb-20">
44-
<h1
45-
className="leading-10 mb-2 !text-4xl text-gray-900 dark:text-white"
46-
style={{
47-
color: color
48-
}}
49-
>
50-
{data.title}
51-
</h1>
52-
<p className="text-md text-gray-600 dark:text-gray-400">{data.subtitle}</p>
114+
<div className=" pb-12 md:pb-20">
115+
<div className="flex items-center mt-2" style={{ alignItems: 'flex-start' }}>
116+
<div className="flex items-center bg-gray-50 dark:bg-slate-800 rounded p-2">
117+
<a href={website} target="_blank" rel="noopener noreferrer">
118+
<img src={data.logo} alt={data.title} style={{ height: '50px', width: 'auto' }}/>
119+
</a>
120+
<span className="mx-2"> </span>
121+
<a href="/" target="_blank" rel="noopener noreferrer">
122+
<img src='/img/logo.svg' alt="Windmill" style={{ height: '50px', width: 'auto' }} />
123+
</a>
124+
</div>
53125
</div>
126+
<h1 className="leading-10 mb-2 !text-4xl text-gray-900 dark:text-white mt-3" style={{ color: color }}>
127+
{data.title}
128+
</h1>
129+
<p className="text-md text-gray-600 dark:text-gray-400">{data.subtitle}</p>
130+
</div>
54131
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
55132
<div className="flex items-start flex-col justify-center gap-6">
56133
<div className="text-lg font-normal text-gray-800 dark:text-gray-200">
@@ -79,11 +156,18 @@ export default function Solution({
79156
</div>
80157
</div>
81158
<div className="w-full">
82-
<Screenshot
83-
lightScreenshot={data.lightScreenshot}
84-
darkScreenshot={data.darkScreenshot}
85-
/>
86-
</div>
159+
<div className="interactive-image-container" style={{ position: 'relative', width: '663px', height: '551px' }}>
160+
{interactiveImages.map(image => (
161+
<InteractiveImage
162+
key={image.id}
163+
id={image.id}
164+
src={image.src}
165+
style={image.style}
166+
url={image.url}
167+
/>
168+
))}
169+
</div>
170+
</div>
87171
</div>
88172
</div>
89173

@@ -127,15 +211,14 @@ export default function Solution({
127211
))}
128212
</dl>
129213
</div>
130-
131214
{extraBlock}
132215
</div>
133216
</div>
134217
</LandingSection>
135-
<div className="svg-container">
136-
<SolutionSVG className="scaled-svg" style={{ width: '60%', height: '60%' }} />
137-
</div>
138218
<Footer />
219+
<Head>
220+
<link rel="icon" href="/img/logo.svg" />
221+
</Head>
139222
</main>
140223
</LayoutProvider>
141224
);

‎src/css/custom.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,4 +420,29 @@ div.testimonials a:hover .wm-name {
420420

421421
.image-hover-change-color:hover {
422422
filter: brightness(80%);
423+
}
424+
425+
.interactive-image {
426+
cursor: pointer;
427+
transition: filter 0.3s;
428+
border-radius: 2px;
429+
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);
430+
}
431+
432+
.interactive-image:hover {
433+
filter: brightness(90%);
434+
}
435+
436+
.svg-image {
437+
box-shadow: none;
438+
}
439+
440+
.group:hover .banner {
441+
display: block;
442+
}
443+
444+
.banner {
445+
transition: all 0.3s ease;
446+
border-bottom-left-radius: 0.5rem; /* Adjust the radius as needed */
447+
border-bottom-right-radius: 0.5rem; /* Adjust the radius as needed */
423448
}

‎src/landing/Footer.jsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ const navigation = {
66
support: [
77
{ name: 'Pricing', href: '/pricing' },
88
{ name: 'Documentation', href: '/docs/intro' },
9-
{ name: 'Github', href: 'https://github.com/windmill-labs/windmill' },
10-
{ name: 'OpenAPI', href: 'https://app.windmill.dev/openapi.html#/' },
11-
{ name: 'Discord', href: 'https://discord.gg/aT3NhuxSK4' }
9+
{ name: 'GitHub', href: 'https://github.com/windmill-labs/windmill' },
10+
{ name: 'Discord', href: 'https://discord.gg/aT3NhuxSK4' },
11+
{ name: 'OpenAPI', href: 'https://app.windmill.dev/openapi.html#/' }
1212
],
1313
company: [
1414
{ name: 'Team', href: '/team' },
@@ -37,9 +37,9 @@ const navigation = {
3737
],
3838
solutions: [
3939
{ name: 'Windmill AI', href: '/windmill_ai' },
40-
{ name: 'Supabase', href: '/solutions/supabase' },
41-
{ name: 'Hubspot', href: '/solutions/hubspot' },
42-
{ name: 'Airtable', href: '/solutions/airtable' }
40+
{ name: 'Supabase', href: '/integrations/supabase' },
41+
{ name: 'Slack', href: '/integrations/slack' },
42+
{ name: 'Hubspot', href: '/integrations/hubspot' },
4343
]
4444
};
4545

@@ -73,7 +73,9 @@ export default function Footer() {
7373
</div>
7474
<div className="">
7575
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
76-
Solutions
76+
<a href="/integrations" className="text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-200 hover:underline">
77+
Integrations
78+
</a>
7779
</h3>
7880
<ul role="list" className="mt-6 space-y-4">
7981
{navigation.solutions.map((item) => (

0 commit comments

Comments
 (0)