Skip to content

Commit

Permalink
Update overview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvdongen
gvdongen committed Apr 4, 2024
1 parent bf4d264 commit 2d8c7d6
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 40 deletions.
79 changes: 47 additions & 32 deletions docs/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import NavigationCards from "../src/components/NavigationCards";

Restate is the simplest way to write resilient workflows, event-driven applications, and async tasks.

## First time here?
### First time here?

<NavigationCards features={[
{
Expand All @@ -21,16 +21,16 @@ Restate is the simplest way to write resilient workflows, event-driven applicati
stepLabel: '1',
description: (
<>
<p class="font-size-90">
Get up and running.
<p className="font-size-90">
<i>Get up and running.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg firstTimeButton"
href="/get_started/quickstart?sdk=java"
role="button"><img class="sdkicon" src="/img/java.svg" width="28"
role="button"><img className="buttonIcon" src="/img/java.svg" width="28"
alt="Java SDK Documentation"></img></a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg firstTimeButton"
href="/get_started/quickstart?sdk=ts"
role="button"><img class="sdkicon" src="/img/typescript.svg" width="26"
role="button"><img className="buttonIcon" src="/img/typescript.svg" width="26"
alt="TypeScript Documentation"></img></a></div>
</>
),
Expand All @@ -41,16 +41,16 @@ Restate is the simplest way to write resilient workflows, event-driven applicati
stepLabel: '2',
description: (
<>
<p class="font-size-90">
Get a feeling for the Restate SDKs.
<p className="font-size-90">
<i>Get a feeling for the Restate SDKs.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg firstTimeButton"
href="/get_started/tour?sdk=java"
role="button"><img class="sdkicon" src="/img/java.svg" width="28"
role="button"><img className="buttonIcon" src="/img/java.svg" width="28"
alt="Java SDK Documentation"></img></a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg firstTimeButton"
href="/get_started/tour?sdk=ts"
role="button"><img class="sdkicon" src="/img/typescript.svg" width="26"
role="button"><img className="buttonIcon" src="/img/typescript.svg" width="26"
alt="TypeScript Documentation"></img></a></div>
</>
),
Expand All @@ -61,69 +61,84 @@ Restate is the simplest way to write resilient workflows, event-driven applicati
stepLabel: '3',
description: (
<>
<p class="font-size-90">
Get up and running.
<p className="font-size-90">
<i>Get up and running.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg firstTimeButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/right-arrow.png" width="26"
href="/concepts/durable_building_blocks"
role="button"><img className="buttonIcon" src="/img/right-arrow.png" width="26"
alt="TypeScript Documentation"></img></a></div>
</>
),
},
]}/>

## A regular here?
### A regular here?

<NavigationCards features={[
{
title: 'Develop',
category: 'familiar',
stepLabel: <img class="sdkicon" src="/img/code-icon-white.svg" width="26" color="white" alt="Development documentation"></img>,
stepLabel: <img className="buttonIcon" src="/img/code-icon-white.svg" width="26" color="white" alt="Development documentation"></img>,
description: (
<>
<p className="font-size-90">
<i>Implement your handlers.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/java.svg" width="28"
href="/category/java-sdk"
role="button"><img className="buttonIcon" src="/img/java.svg" width="30"
alt="Java SDK Documentation"></img></a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/typescript.svg" width="26"
href="/category/typescript-sdk"
role="button"><img className="buttonIcon" src="/img/typescript.svg" width="26"
alt="TypeScript Documentation"></img></a></div>
</>
),
},
{
title: 'Deploy',
category: 'familiar',
stepLabel: <img class="sdkicon" src="/img/box-white.svg" width="26" color="white" alt="Development documentation"></img>,
stepLabel: <img className="buttonIcon" src="/img/box-white.svg" width="26" color="white" alt="Development documentation"></img>,
description: (
<>
<p className="font-size-90">
<i>Deploy Restate and your handlers.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/java.svg" width="28"
alt="Java SDK Documentation"></img></a></div>
href="/deploy/kubernetes"
role="button"><img className="buttonIcon" src="/img/kubernetes-logo.svg" width="28"
alt="Java SDK Documentation"></img> K8s</a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/typescript.svg" width="26"
href="/category/aws--aws-lambda"
role="button"><img className="buttonIcon" src="/img/aws-logo.svg" width="26"
alt="TypeScript Documentation"></img> <strong>+</strong> <img className="buttonIcon" src="/img/aws-lambda-logo.svg" width="20"
alt="TypeScript Documentation"></img></a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton text--primary"
href="/deploy/restate_cloud"
role="button"><img className="buttonIcon" src="/img/logo_only.png" width="20"
alt="TypeScript Documentation"></img> Cloud</a></div>
</>
),
},
{
title: 'Operate',
category: 'familiar',
stepLabel: <img class="sdkicon" src="/img/gear.svg" width="26" color="white" alt="Development documentation"></img>,
stepLabel: <img className="buttonIcon" src="/img/gear.svg" width="26" color="white" alt="Development documentation"></img>,
description: (
<>
<p className="font-size-90">
<i>Observe and upgrade your handlers.</i>
</p>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/java.svg" width="28"
alt="Java SDK Documentation"></img></a></div>
href="/operate/cli"
role="button">CLI</a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/get_started/quickstart"
role="button"><img class="sdkicon" src="/img/typescript.svg" width="26"
alt="TypeScript Documentation"></img></a></div>
href="/operate/versioning"
role="button">Versioning</a></div>
<div id="overviewButtonDiv"><a className="overviewButton btn btn-primary btn-lg familiarButton"
href="/category/monitoring"
role="button">Monitoring</a></div>
</>
),
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/NavigationCards/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ type FeatureItem = {
function NavigationCard({title, category, stepLabel, description}: FeatureItem) {
return (
<div className={clsx('col col--4')}>
<div className={styles.feature}>
<div className={(category === "first_time") ? styles.featureFirstTime : styles.featureFamiliar}>
<div className={(category === "first_time") ? styles.circleFirstTime : styles.circleFamiliar}>{stepLabel}</div>
<h4 className="margin--xs">{title}</h4>
<p className={styles.description}><i>{description}</i></p>
<p className={styles.description}>{description}</p>
</div>
</div>
);
}

export default function NavigationCards({ features }): JSX.Element {
return (
<section className={styles.features}>
<section>
<div className="container">
<div className="row">
{features.map((props, idx) => (
Expand Down
33 changes: 29 additions & 4 deletions src/components/NavigationCards/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,39 @@
.feature {
.featureFirstTime {
text-align: center;
position: relative;
padding-top: 1.5rem !important;
z-index: 1;
border-radius: var(--ifm-card-border-radius);
border: #f2f0fa 1px solid;
box-shadow: 0 12px 28px 0 #f2f0fa;
border: var(--ifm-color-secondary) 1px solid;
box-shadow: 0 12px 28px 0 var(--ifm-color-secondary);
display: flex;
flex-direction: column;
margin-top: 1.25rem;
}

.featureFirstTime:hover {
border: var(--ifm-color-secondary-darkest) 1px solid;
box-shadow: 0 12px 28px 0 var(--ifm-color-secondary-darker);
}

.featureFamiliar {
text-align: center;
position: relative;
padding-top: 1.5rem !important;
z-index: 1;
border-radius: var(--ifm-card-border-radius);
border: #e7f4ff 1px solid;
box-shadow: 0 12px 28px 0 #e7f4ff;
display: flex;
flex-direction: column;
margin-top: 1.25rem;
}

.featureFamiliar:hover {
border: #c8f3ff 1px solid;
box-shadow: 0 12px 28px 0 #C8F3FFFF;
}

.circleFirstTime {
width: 2.5rem;
height: 2.5rem;
Expand Down Expand Up @@ -51,4 +74,6 @@

.description{
color: var(--ifm-menu-color);
}
}


11 changes: 10 additions & 1 deletion src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,25 +124,34 @@ h6 {
a.overviewButton {
font-size: 1rem;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

a.firstTimeButton {
background-color: var(--ifm-color-secondary);
color: #1e2023;
}

a.firstTimeButton:hover {
background-color: var(--ifm-color-secondary-darker);
color: #1e2023;
text-decoration: none;
}

a.familiarButton {
background-color: #e7f4ff;
color: #1e2023;
}

a.familiarButton:hover {
background-color: #bae7ff;
color: #1e2023;
text-decoration: none;
}

.buttonIcon {
vertical-align: middle;
}

#container {
text-align: center;
Expand Down
2 changes: 2 additions & 0 deletions static/img/aws-lambda-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions static/img/aws-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2d8c7d6

Please sign in to comment.