Skip to content

Commit d1ec634

Browse files
jsundaidavidcarlsonberg
jsundai
and
davidcarlsonberg
authored
docs homepage and components (#4083)
* docs standalone landing page * consistency with rest of site * Design edits. Cleanup. New icons. First pass at final pass for new homepage. * Grid updates. SVG updates. * Transitions for cards. * Remove card as link and just link the text. * QA edits. --------- Co-authored-by: David Carlson Berg <[email protected]> Co-authored-by: David Carlson Berg <[email protected]>
1 parent b2a577e commit d1ec634

26 files changed

+666
-115
lines changed

‎docs/index.mdx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
---
22
id: index
3-
title: Temporal Platform Documentation
4-
sidebar_label: Documentation Home
5-
description: Explore Temporal's comprehensive documentation to build, scale, and manage reliable, fault-tolerant workflows with Workflow-as-Code solutions.
3+
title: Temporal Docs
4+
sidebar_label: Home
5+
hide_table_of_contents: true
6+
hide_title: true
67
---
78

8-
<head>
9-
<title>Temporal Platform Documentation</title>
10-
</head>
9+
import HomePageHero from '@site/src/components/elements/HomePageHero';
1110

12-
import { Intro } from '@site/src/components';
13-
14-
<Intro />
11+
<HomePageHero />

‎src/components/elements/HomePageHero.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import React from 'react';
2+
import useBaseUrl from '@docusaurus/useBaseUrl';
3+
import { SdkLogosAsBlocks } from './SdkLogosAsBlocks';
4+
import '../../css/homepage-hero.css';
5+
6+
const Icon = ({ src, alt, className, width, height }) => {
7+
const darkSrc = src;
8+
const lightSrc = src.replace('.svg', '-dark.svg');
9+
10+
return (
11+
<>
12+
<img
13+
src={useBaseUrl(darkSrc)}
14+
alt={alt}
15+
className={`icon-dark-mode ${className || ''}`}
16+
width={width}
17+
height={height}
18+
/>
19+
<img
20+
src={useBaseUrl(lightSrc)}
21+
alt={alt}
22+
className={`icon-light-mode ${className || ''}`}
23+
width={width}
24+
height={height}
25+
/>
26+
</>
27+
);
28+
};
29+
30+
const HomePageHero = () => {
31+
const quickstartLinks = [
32+
{
33+
path: '/develop/go/set-up-your-local-go',
34+
name: 'Go Quickstart',
35+
},
36+
{
37+
path: '/develop/java/set-up-your-local-java',
38+
name: 'Java Quickstart',
39+
},
40+
{
41+
path: '/develop/python/set-up-your-local-python',
42+
name: 'Python Quickstart',
43+
},
44+
{
45+
path: '/develop/typescript/set-up-your-local-typescript',
46+
name: 'TypeScript Quickstart',
47+
},
48+
{
49+
path: '/develop/dotnet/set-up-your-local-dotnet',
50+
name: '.NET Quickstart',
51+
},
52+
{
53+
path: '/develop/ruby/set-up-local-ruby',
54+
name: 'Ruby Quickstart',
55+
},
56+
];
57+
58+
const actionCards = [
59+
{
60+
href: '/quickstarts',
61+
icon: <Icon src="/img/icons/Lightning.svg" alt="Lightning icon" />,
62+
title: 'Quickstart',
63+
description: 'Setup your local and run a Hello World workflow.',
64+
},
65+
{
66+
href: '/develop',
67+
icon: <Icon src="/img/icons/Code.svg" alt="Code icon" />,
68+
title: 'Developer Guide',
69+
description: 'Dive into everything you need to know about building Temporal workflows.',
70+
},
71+
{
72+
href: '/production-deployment',
73+
icon: <Icon src="/img/icons/Rocket.svg" alt="Rocket icon" />,
74+
title: 'Deploy your Workflows',
75+
description:
76+
'Deploy your Temporal Application to your environment. Self-Host the Temporal Service or use Temporal Cloud.',
77+
},
78+
{
79+
href: 'https://temporal.io/cloud',
80+
icon: <Icon src="/img/icons/Cloud.svg" alt="Cloud icon" />,
81+
title: 'Get started for free with $1000 in credits',
82+
description:
83+
'<span class="linkify">Sign up for Temporal Cloud</span> and let us host the Temporal Service for you.',
84+
},
85+
];
86+
87+
const communityCards = [
88+
{
89+
href: 'https://temporal.io/slack',
90+
icon: <Icon src="/img/icons/Slack.svg" alt="Slack" />,
91+
title: 'Slack Community',
92+
description:
93+
'Join us on <a href="https://temporal.io/slack">temporal.io/slack</a> and say hi or ask us a question.',
94+
},
95+
{
96+
href: 'https://community.temporal.io',
97+
icon: <Icon src="/img/icons/Message.svg" alt="Message" />,
98+
title: 'Developer Forum',
99+
description: '<a href="https://community.temporal.io">Find out</a> if your question has already been asked.',
100+
},
101+
{
102+
href: 'https://learn.temporal.io/courses/',
103+
icon: <Icon src="/img/icons/Education.svg" alt="Education" />,
104+
title: 'Learn it all',
105+
description: '<a href="https://learn.temporal.io/courses/">Master Temporal</a> with our courses and tutorials.',
106+
},
107+
];
108+
109+
return (
110+
<div className="homepage-hero-wrapper">
111+
<div className="hero-main-title-container">
112+
<header className="hero-main-title">Temporal Docs</header>
113+
114+
<div className="quickstart-links">{SdkLogosAsBlocks()}</div>
115+
</div>
116+
117+
<div className="hero-section">
118+
<div className="hero-content">
119+
<h1>Build applications that never fail</h1>
120+
<p>
121+
Temporal is an open-source platform for building reliable applications. Temporal delivers crash-proof
122+
execution by guaranteeing that applications resume exactly where they left off after crashes, network
123+
failures, or infrastructure outages, whether that happens seconds, days, or even years later.
124+
</p>
125+
<p>
126+
Temporal enables developers to focus on building features that drive the business while ensuring that
127+
mission-critical processes such as order fulfillment, customer onboarding, and payment processing never fail
128+
or disappear, regardless of what goes wrong.
129+
</p>
130+
<a href="/quickstarts" className="hero-cta">
131+
Quickstart
132+
<svg fill="none" height="18" viewBox="0 0 21 18" width="21" xmlns="http://www.w3.org/2000/svg">
133+
<path d="m20.1094 9.5625-7.1719 7.2187-.7969.7969-1.5937-1.5937.7969-.7969 5.25-5.29688h-15.4688-1.125v-2.25h1.125 15.4688l-5.25-5.25-.7969-.79687 1.5937-1.59375.7969.796875 7.1719 7.171875.7968.79687z" />
134+
</svg>
135+
</a>
136+
</div>
137+
138+
<div className="hero-actions">
139+
{actionCards.map((card, index) => (
140+
<div key={index} className="border-container">
141+
<a href={card.href} className="action-card">
142+
<div className="action-icon">{card.icon}</div>
143+
<div className="action-content">
144+
<h3>{card.title}</h3>
145+
<p dangerouslySetInnerHTML={{ __html: card.description }}></p>
146+
</div>
147+
</a>
148+
</div>
149+
))}
150+
</div>
151+
</div>
152+
153+
<div className="community-cards">
154+
{communityCards.map((card, index) => (
155+
<div key={index} className="community-card">
156+
<div className="community-icon">{card.icon}</div>
157+
<h3>{card.title}</h3>
158+
<p dangerouslySetInnerHTML={{ __html: card.description }}></p>
159+
</div>
160+
))}
161+
</div>
162+
</div>
163+
);
164+
};
165+
166+
export default HomePageHero;

‎src/components/elements/SdkLogos.js‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
1-
import React from "react";
1+
import React from 'react';
22

33
const supportedTech = [
44
{
5-
link: "/develop/go",
6-
image: "/img/sdks/svgs/golang.svg",
7-
alt: "Go lang logo",
8-
class: "w-10 h-8",
5+
link: '/develop/go',
6+
image: '/img/sdks/svgs/golang-block.svg',
7+
alt: 'Go lang logo',
8+
class: 'w-10 h-8',
99
},
1010
{
11-
link: "/develop/java",
12-
image: "/img/sdks/svgs/java.svg",
13-
alt: "Java logo",
14-
class: "w-7 h-7",
11+
link: '/develop/java',
12+
image: '/img/sdks/svgs/java.svg',
13+
alt: 'Java logo',
14+
class: 'w-7 h-7',
1515
},
1616
{
17-
link: "/develop/python",
18-
image: "/img/sdks/svgs/python.svg",
19-
alt: "Python logo",
20-
class: "w-7 h-7",
17+
link: '/develop/python',
18+
image: '/img/sdks/svgs/python.svg',
19+
alt: 'Python logo',
20+
class: 'w-7 h-7',
2121
},
2222
{
23-
link: "/develop/typescript",
24-
image: "/img/sdks/svgs/typescript.svg",
25-
alt: "TypeScript logo",
26-
class: "w-7 h-7",
23+
link: '/develop/typescript',
24+
image: '/img/sdks/svgs/typescript.svg',
25+
alt: 'TypeScript logo',
26+
class: 'w-7 h-7',
2727
},
2828
{
29-
link: "/develop/php",
30-
image: "/img/sdks/svgs/php.svg",
31-
alt: "php logo",
32-
class: "w-10",
29+
link: '/develop/php',
30+
image: '/img/sdks/svgs/php.svg',
31+
alt: 'php logo',
32+
class: 'w-10',
3333
},
3434
{
35-
link: "/develop/dotnet",
36-
image: "/img/sdks/svgs/dotnet.svg",
37-
alt: ".Net logo",
38-
class: "w-10",
35+
link: '/develop/dotnet',
36+
image: '/img/sdks/svgs/dotnet.svg',
37+
alt: '.Net logo',
38+
class: 'w-10',
3939
},
4040
{
41-
link: "/develop/ruby",
42-
image: "/img/sdks/svgs/ruby.svg",
43-
alt: "Ruby logo",
44-
class: "w-10",
41+
link: '/develop/ruby',
42+
image: '/img/sdks/svgs/ruby.svg',
43+
alt: 'Ruby logo',
44+
class: 'w-10',
4545
},
4646
];
4747

‎src/components/elements/SdkLogosAsBlocks.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
3+
const supportedTech = [
4+
{
5+
link: '/develop/go',
6+
image: '/img/sdks/svgs/golang-block.svg',
7+
alt: 'Go lang logo',
8+
},
9+
{
10+
link: '/develop/java',
11+
image: '/img/sdks/svgs/java-block.svg',
12+
alt: 'Java logo',
13+
},
14+
{
15+
link: '/develop/python',
16+
image: '/img/sdks/svgs/python-block.svg',
17+
alt: 'Python logo',
18+
},
19+
{
20+
link: '/develop/typescript',
21+
image: '/img/sdks/svgs/typescript-block.svg',
22+
alt: 'TypeScript logo',
23+
},
24+
{
25+
link: '/develop/php',
26+
image: '/img/sdks/svgs/php-block.svg',
27+
alt: 'php logo',
28+
},
29+
{
30+
link: '/develop/dotnet',
31+
image: '/img/sdks/svgs/dotnet-block.svg',
32+
alt: '.Net logo',
33+
},
34+
{
35+
link: '/develop/ruby',
36+
image: '/img/sdks/svgs/ruby-block.svg',
37+
alt: 'Ruby logo',
38+
},
39+
];
40+
41+
const displayTechListItems = () => {
42+
return supportedTech.map((tech) => {
43+
return (
44+
<li className="sdk-logo" key={tech.alt}>
45+
<a href={tech.link}>
46+
<img src={tech.image} alt={tech.alt} />
47+
</a>
48+
</li>
49+
);
50+
});
51+
};
52+
53+
export const SdkLogosAsBlocks = () => {
54+
return (
55+
<div className="supported-tech">
56+
<ul className="sdk-logos-list">{displayTechListItems()}</ul>
57+
</div>
58+
);
59+
};

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Website components
22
export { default as RetrySimulator } from "./elements/RetrySimulator";
33
export { Intro } from "./elements/Intro";
4+
export { default as HomePageHero } from "./elements/HomePageHero";
45
export { SdkLogos } from "./elements/SdkLogos";
56
export { default as PhotoCarousel } from "./elements/PhotoCarousel";
67
export { default as SdkTabs } from './elements/SdkTabs';

0 commit comments

Comments
 (0)