Skip to content

Commit bc499d8

Browse files
pimterrypimterry
committed
Add videos to Ruby/Python/JS integration pages
1 parent d0f10b0 commit bc499d8

File tree

8 files changed

+106
-24
lines changed

8 files changed

+106
-24
lines changed

‎src/app/(integrations)/javascript/page.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IntegrationHttpTookitFeatures } from '@/components/sections/integration
99
import { IntegrationCompatibility } from '@/components/sections/integration/single-page/compatibility';
1010
import { IntegrationSinglePageHero } from '@/components/sections/integration/single-page/hero';
1111
import { IntegrationSteps } from '@/components/sections/integration/single-page/steps';
12-
import { IntegrationTextImage } from '@/components/sections/integration/single-page/text-image';
12+
import { IntegrationTextAppVideo } from '@/components/sections/integration/single-page/text-appvideo';
1313
import { buildMetadata } from '@/lib/utils/build-metadata';
1414

1515
export const metadata: Metadata = buildMetadata({
@@ -28,14 +28,10 @@ export default function JavascriptIntegrationPage() {
2828
breadcrumbText="javascript"
2929
isMultipleIcons
3030
/>
31-
<IntegrationTextImage
31+
<IntegrationTextAppVideo
3232
title="HTTP Toolkit is a beautiful & open-source toolfor debugging, testing and building with HTTP(S)on Windows, Linux & Mac."
3333
subtitle="what is http toolkit?"
34-
image={{
35-
darkSrc: '/images/hero-placeholder-dark.webp',
36-
lightSrc: '/images/hero-placeholder-light.webp',
37-
alt: 'Mockup image',
38-
}}
34+
video={{ id: 'javascript' }}
3935
/>
4036
<IntegrationSteps
4137
title="Getting `*started*`"

‎src/app/(integrations)/python/page.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IntegrationHttpTookitFeatures } from '@/components/sections/integration
99
import { IntegrationCompatibility } from '@/components/sections/integration/single-page/compatibility';
1010
import { IntegrationSinglePageHero } from '@/components/sections/integration/single-page/hero';
1111
import { IntegrationSteps } from '@/components/sections/integration/single-page/steps';
12-
import { IntegrationTextImage } from '@/components/sections/integration/single-page/text-image';
12+
import { IntegrationTextAppVideo } from '@/components/sections/integration/single-page/text-appvideo';
1313
import { buildMetadata } from '@/lib/utils/build-metadata';
1414

1515
export const metadata: Metadata = buildMetadata({
@@ -27,14 +27,10 @@ export default function PythonIntegrationPage() {
2727
icon={PythonLogo}
2828
breadcrumbText="python"
2929
/>
30-
<IntegrationTextImage
30+
<IntegrationTextAppVideo
3131
title="HTTP Toolkit is a beautiful & open-source toolfor debugging, testing and building with HTTP(S)on Windows, Linux & Mac."
3232
subtitle="what is http toolkit?"
33-
image={{
34-
darkSrc: '/images/hero-placeholder-dark.webp',
35-
lightSrc: '/images/hero-placeholder-light.webp',
36-
alt: 'Mockup image',
37-
}}
33+
video={{id: "python"}}
3834
/>
3935
<IntegrationSteps
4036
title="Getting `*started*`"

‎src/app/(integrations)/ruby/page.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IntegrationHttpTookitFeatures } from '@/components/sections/integration
99
import { IntegrationCompatibility } from '@/components/sections/integration/single-page/compatibility';
1010
import { IntegrationSinglePageHero } from '@/components/sections/integration/single-page/hero';
1111
import { IntegrationSteps } from '@/components/sections/integration/single-page/steps';
12-
import { IntegrationTextImage } from '@/components/sections/integration/single-page/text-image';
12+
import { IntegrationTextAppVideo } from '@/components/sections/integration/single-page/text-appvideo';
1313
import { buildMetadata } from '@/lib/utils/build-metadata';
1414

1515
export const metadata: Metadata = buildMetadata({
@@ -27,14 +27,10 @@ export default function RubyIntegrationPage() {
2727
icon={RubyLogo}
2828
breadcrumbText="ruby"
2929
/>
30-
<IntegrationTextImage
30+
<IntegrationTextAppVideo
3131
title="HTTP Toolkit is a beautiful & open-source toolfor debugging, testing and building with HTTP(S)on Windows, Linux & Mac."
3232
subtitle="what is http toolkit?"
33-
image={{
34-
darkSrc: '/images/hero-placeholder-dark.webp',
35-
lightSrc: '/images/hero-placeholder-light.webp',
36-
alt: 'Mockup image',
37-
}}
33+
video={{ id: 'ruby' }}
3834
/>
3935
<IntegrationSteps
4036
title="Getting `*started*`"

‎src/components/elements/app-window/app-window.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const VideoWindowBorder = styled.div`
3232
3333
padding: 0;
3434
35-
max-width: calc(100vw - 40px);
35+
max-width: 100%;
3636
width: 1280px;
3737
3838
position: relative;

‎src/components/sections/cta/cta.styles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,13 +161,13 @@ export const StyledHeroWrapper = styled.section<{
161161

162162
export const StyledContainer = styled(Container)`
163163
&&& {
164-
max-width: 1140px;
164+
max-width: 1280px;
165165
display: flex;
166166
flex-direction: column;
167167
align-items: center;
168168
justify-content: center;
169169
170-
@media (min-width: ${screens['lg']}) {
170+
@media (min-width: ${screens['xl']}) {
171171
padding-left: 0;
172172
padding-right: 0;
173173
}

‎src/components/sections/integration/single-page/text-appvideo/index.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
StyledIntegrationTextVideoGradient,
3+
StyledIntegrationTextVideoGradientWrapper,
4+
StyledIntegrationTextVideoHeading,
5+
StyledIntegrationTextVideoWrapper,
6+
} from './text-video.styles';
7+
8+
import { VideoKey } from '@/content/data/video-dictionary';
9+
10+
import { Container } from '@/components/elements/container';
11+
import { Gradient } from '@/components/elements/gradient';
12+
import { AppWindow } from '@/components/elements/app-window';
13+
import { VideoPlayer } from '@/components/elements/video-player';
14+
import { AltHeadingBlock } from '@/components/modules/alt-heading-block';
15+
16+
/**
17+
* @param title: This string can have highlighted text on the segments that are between \`\*content\*\`
18+
*/
19+
export const IntegrationTextAppVideo = ({ title, subtitle, video }: {
20+
title: string;
21+
subtitle: string;
22+
video: { id: VideoKey };
23+
}) => {
24+
return (
25+
<StyledIntegrationTextVideoGradientWrapper>
26+
<StyledIntegrationTextVideoGradient>
27+
<Gradient />
28+
</StyledIntegrationTextVideoGradient>
29+
<Container>
30+
<StyledIntegrationTextVideoWrapper>
31+
<StyledIntegrationTextVideoHeading>
32+
<AltHeadingBlock title={title} subtitle={subtitle} mediumHeading />
33+
</StyledIntegrationTextVideoHeading>
34+
35+
<AppWindow aspectRatio='16/9'>
36+
<VideoPlayer
37+
videoId={video.id}
38+
aspectRatio='16/9'
39+
/>
40+
</AppWindow>
41+
</StyledIntegrationTextVideoWrapper>
42+
</Container>
43+
</StyledIntegrationTextVideoGradientWrapper>
44+
);
45+
};

‎src/components/sections/integration/single-page/text-appvideo/text-video.styles.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import { styled } from '@/styles';
4+
5+
export const StyledIntegrationTextVideoGradientWrapper = styled.section`
6+
position: relative;
7+
`;
8+
9+
export const StyledIntegrationTextVideoGradient = styled.div`
10+
position: absolute;
11+
width: 80%;
12+
top: -17%;
13+
right: 0;
14+
transform: rotate(180deg);
15+
z-index: -1;
16+
17+
@media (max-width: ${({ theme }) => theme.screens.lg}) {
18+
display: none;
19+
}
20+
`;
21+
22+
export const StyledIntegrationTextVideoWrapper = styled.div`
23+
padding: 64px 16px;
24+
25+
@media (min-width: ${({ theme }) => theme.screens.lg}) {
26+
padding: 96px 150px 48px;
27+
}
28+
`;
29+
30+
export const StyledIntegrationTextVideoHeading = styled.div`
31+
max-width: 656px;
32+
margin: 0 auto 64px;
33+
34+
@media (min-width: ${({ theme }) => theme.screens.lg}) {
35+
margin: 0 auto calc(48px + 96px);
36+
}
37+
`;

‎src/content/data/video-dictionary.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@ export const videoDictionary = {
88
'chrome': {
99
darkId: '77143/de631d3f-c4dd-4bcb-bb16-c5242e815c57',
1010
lightId: '293624/91477e53-40dd-4290-baef-cb9d9be6de8d'
11+
},
12+
'javascript': {
13+
darkId: '77143/7bf7fc19-5fa6-4676-8e2c-cb86feedc1e7',
14+
lightId: '293624/5a49c011-c955-410f-a133-58a6741e9224'
15+
},
16+
'python': {
17+
darkId: '77143/f0af665e-ad3a-4de9-b45a-2362051389a1',
18+
lightId: '293624/cef9a910-c75f-430f-b69e-bf798010c8a4'
19+
},
20+
'ruby': {
21+
darkId: '77143/01483aac-60a5-4611-bc4a-c3cba9310033',
22+
lightId: '293624/7ae7d7f5-9833-416f-aa3a-6c67e524de6e'
1123
}
1224
} as const;
1325

0 commit comments

Comments
 (0)