Skip to content

Commit ff85be6

Browse files
krutilovkrutilov
authored
Merge pull request #4977 from JetBrains/ktl-2512-server-side-hero
Ktl 2512 server side hero
2 parents 024c38a + f81badc commit ff85be6

File tree

93 files changed

+3481
-20
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+3481
-20
lines changed

‎.github/workflows/e2e-tests.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: E2E Tests
2+
3+
on:
4+
workflow_dispatch:
5+
6+
jobs:
7+
e2e-tests:
8+
runs-on: ubuntu-latest
9+
10+
steps:
11+
- name: Checkout code
12+
uses: actions/checkout@v4
13+
14+
- name: Start test container
15+
run: ./scripts/test/up.sh
16+
17+
- name: Run E2E tests
18+
run: ./scripts/test/run.sh
19+
20+
- name: Stop test container
21+
if: always()
22+
run: ./scripts/test/stop.sh

‎.npmrc

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
save-exact = true
1+
save-exact = true
2+
3+
@webteam:registry=https://packages.jetbrains.team/npm/p/wt/npm/
4+
//packages.jetbrains.team/npm/p/wt/npm/:_authToken=${WEBTEAM_UI_NPM_TOKEN}
5+
//packages.jetbrains.team/npm/p/wt/npm/:always-auth=true
6+
legacy-peer-deps=true

‎README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,19 @@ You can:
138138
[slack-url]: https://slack.kotlinlang.org
139139
140140
## Local development
141+
For the frontend development, you need to connect to the WebTeam registry.
142+
Visit [the registry](https://jetbrains.team/p/wt/packages/npm/npm) page in Space:
143+
- On the top right, click Connect;
144+
- Click Generate personal token;
145+
- Copy your personal token.
146+
- Add your personal token to the environmental variable. This step differs based on your OS.
147+
148+
##### For macOS:
149+
Add your token to the ~/.zshenv file:
150+
- Open the Terminal;
151+
- Use this command to access .zshenv file `nano ~/.zshenv`;
152+
- Replace your_token with your actual Space token and use this command to add an environment variable: `export WEBTEAM_UI_NPM_TOKEN=yourtoken`.
153+
Then install frontend dependencies `npm install`.
141154
142155
#### preliminaries: python3 installed
143156

‎blocks/server-side/additional-materials/additional-materials.module.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.subtitle {
2+
max-width: 740px;
3+
}

‎blocks/server-side/additional-materials/additional-materials.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { FC } from 'react';
2+
3+
import cn from 'classnames';
4+
5+
import styles from './additional-materials.module.css';
6+
import { useTextStyles } from '@rescui/typography';
7+
8+
import YoutubePlaylist from '@webteam/youtube-playlist/lib';
9+
10+
export const AdditionalMaterials: FC = ({}) => {
11+
12+
const textCn = useTextStyles();
13+
14+
return (
15+
<section className="ktl-layout ktl-layout--center">
16+
<div className="ktl-container section-offset">
17+
18+
<h2 className={cn(textCn('rs-h1'))}>
19+
Additional materials
20+
</h2>
21+
22+
<h3 className={cn(textCn('rs-subtitle-2'), styles.subtitle)}>
23+
Build better backends with Kotlin. Check out the Kotlin for Backend playlist for real-world use
24+
cases, expert insights, and performance tips.
25+
</h3>
26+
27+
<div className="ktl-row">
28+
<div className="ktl-col-12">
29+
<YoutubePlaylist
30+
playlistId="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
31+
playlistTitle="Server-Side Development with Kotlin"
32+
/>
33+
</div>
34+
</div>
35+
36+
37+
</div>
38+
</section>
39+
);
40+
};

‎blocks/server-side/card/card.module.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.card {
2+
background: #3F2180;
3+
border-radius: 16px;
4+
backdrop-filter: blur(8px);
5+
padding: 24px;
6+
box-sizing: border-box;
7+
height: 100%;
8+
}
9+
10+
.cardTitle {
11+
padding: 0;
12+
margin: 0 0 16px;
13+
}
14+
15+
.cardDescription {
16+
margin: 0;
17+
padding: 0;
18+
}

‎blocks/server-side/card/card.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { FC } from 'react';
2+
3+
import cn from 'classnames';
4+
5+
import styles from './card.module.css';
6+
import { useTextStyles } from '@rescui/typography';
7+
8+
interface CardProps {
9+
title: string;
10+
description: string;
11+
}
12+
13+
export const Card: FC<CardProps> = ({ title, description }) => {
14+
15+
const textCn = useTextStyles();
16+
17+
return (
18+
<div className={styles.card}>
19+
<h3 className={cn(textCn('rs-h3'), styles.cardTitle)}>{title}</h3>
20+
<p className={cn(textCn('rs-text-2'), styles.cardDescription)}>
21+
{description}
22+
</p>
23+
</div>
24+
);
25+
};

‎blocks/server-side/customer-logo-marquee/customer-logo-marquee-data.ts

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import doordash from './logos/doordash-dark.svg'
2+
import kingfisher from './logos/kingfisher-dark.svg'
3+
import ing from './logos/ING.svg'
4+
import n26 from './logos/N26.svg'
5+
import adobe from './logos/adobe-logo.svg'
6+
import allegro from './logos/allegro.svg'
7+
import atlassian from './logos/atlassian.svg'
8+
import aws from './logos/aws.svg'
9+
import corda from './logos/c-rda.svg'
10+
import expediaGroup from './logos/expedia grour.svg'
11+
import faire from './logos/faire-dark.svg'
12+
import flux from './logos/flux.svg'
13+
import intuit from './logos/intuit.svg'
14+
import ktor from './logos/ktor.svg'
15+
import memobank from './logos/memobank.svg'
16+
import mercedes from './logos/mercedes-io-dark.svg'
17+
import novatec from './logos/novatec-dark.svg'
18+
import olx from './logos/olx.svg'
19+
import shazam from './logos/shazam.svg'
20+
import spring from './logos/spring.svg'
21+
22+
interface LogoItem {
23+
id: ImgSrc;
24+
link: string;
25+
}
26+
27+
const logos: LogoItem[] = [
28+
{
29+
id: doordash,
30+
link: 'https://kotlinlang.org/lp/server-side/case-studies/doordash',
31+
},
32+
{
33+
id: kingfisher,
34+
link: 'https://medium.com/kingfisher-technology/server-side-kotlin-our-new-default-2d15644f8ed0',
35+
},
36+
{
37+
id: ing,
38+
link: 'https://medium.com/ing-blog/introducing-kotlin-at-ing-a-long-but-rewarding-story-1bfcd3dc8da0',
39+
},
40+
{
41+
id: n26,
42+
link: 'https://medium.com/insiden26/5-reasons-why-n26-is-moving-to-kotlin-f920b184ab58',
43+
},
44+
{
45+
id: adobe,
46+
link: 'https://medium.com/adobetech/streamlining-server-side-app-development-with-kotlin-be8cf9d8b61a',
47+
},
48+
{
49+
id: allegro,
50+
link: 'https://open.spotify.com/episode/6gRiIJSWN515tAvZuMAwRR?si=vPsgW2jDShSG2_S8eLfjqA',
51+
},
52+
{
53+
id: atlassian,
54+
link: 'https://www.youtube.com/watch?v=4GkoB4hZUnw',
55+
},
56+
{
57+
id: aws,
58+
link: 'https://www.youtube.com/live/Ar73Axsz2YA?si=E2qlkuznF9B2MXou&t=2766',
59+
},
60+
{
61+
id: corda,
62+
link: 'https://www.corda.net/blog/kotlin/',
63+
},
64+
{
65+
id: expediaGroup,
66+
link: 'https://kotlinlang.org/lp/server-side/case-studies/expedia',
67+
},
68+
{
69+
id: faire,
70+
link: 'https://kotlinlang.org/lp/server-side/case-studies/faire',
71+
},
72+
{
73+
id: flux,
74+
link: 'https://open.spotify.com/episode/3VS5dSUfcsC4fSvzbm2OxV?si=yEcubDoeRAW7zwVdo3XFtw&nd=1&dlsi=5e0e4c8dba104719',
75+
},
76+
{
77+
id: intuit,
78+
link: 'https://medium.com/intuit-engineering/what-the-f-p-is-kotlin-7c55e2643b07',
79+
},
80+
{
81+
id: ktor,
82+
link: 'https://open.spotify.com/episode/7rcwW7gNFIOrDqy6tgA1HU?si=c8QerntfTUqUO9Ks3s3kKw',
83+
},
84+
{
85+
id: memobank,
86+
link: 'https://medium.com/memobank/cuddling-with-kotlin-35f4f96931bb',
87+
},
88+
{
89+
id: mercedes,
90+
link: 'https://www.mercedes-benz.io/blog/2024-11-22-transitioning-from-java-to-kotlin-in-backend-development',
91+
},
92+
{
93+
id: novatec,
94+
link: 'https://kotlinlang.org/lp/server-side/case-studies/novatec',
95+
},
96+
{
97+
id: olx,
98+
link: 'https://open.spotify.com/episode/3XBlKY3x4vVojuay4oSh8g?si=qiiwg8vkSm2OIP6rvrwnkg',
99+
},
100+
{
101+
id: shazam,
102+
link: 'https://open.spotify.com/episode/6oZdJE7XU1GF6Dlir6tP50?si=2h7YKDejSxGrlFaWqZE6Ng',
103+
},
104+
{
105+
id: spring,
106+
link: 'https://youtu.be/QExksqeNWbY?si=KSy63mxDTh07DYPM',
107+
},
108+
];
109+
110+
export default logos;

‎blocks/server-side/customer-logo-marquee/index.module.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.section {
2+
--marquee-gap: 64px;
3+
padding: 48px 0;
4+
}
5+
6+
.list :global(.cmn-ui-marquee__group) {
7+
align-items: center;
8+
}
9+
10+
.logo {
11+
max-height: 64px;
12+
}

‎blocks/server-side/customer-logo-marquee/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { Marquee } from '../marquee';
3+
import styles from './index.module.css';
4+
5+
import logos from './customer-logo-marquee-data';
6+
7+
const CustomerLogoMarqueeSection: React.FC = () => {
8+
return (
9+
<section className={styles.section} data-testid={'customers-block'}>
10+
<Marquee className={styles.list} pauseOnHover hasFadingEdges>
11+
{logos.map((item, index) => (
12+
<a
13+
href={item.link}
14+
key={`logo_${index}`}
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
className={styles.logoLink}
18+
data-testid="customers-link"
19+
>
20+
<img src={item.id.src} alt={item.link} className={styles.logo} />
21+
</a>
22+
))}
23+
</Marquee>
24+
</section>
25+
);
26+
};
27+
28+
export default CustomerLogoMarqueeSection;

0 commit comments

Comments
 (0)