diff --git a/docs/components/Intro.js b/docs/components/Intro.js index 9d458bb42e..9e5838dbc6 100644 --- a/docs/components/Intro.js +++ b/docs/components/Intro.js @@ -1,446 +1,87 @@ -import React, { useState } from "react"; +import React from "react"; import Link from "@docusaurus/Link"; -import useBaseUrl from "@docusaurus/useBaseUrl"; import { SdkLogos } from "./SdkLogos"; - -const coreConcepts = [ - { - path: "https://learn.temporal.io/getting_started#set-up-your-development-environment", - name: "Set up your development environment", - }, - { - path: "https://learn.temporal.io/getting_started/#run-your-first-program", - name: "Run your first program", - }, - { - path: "https://learn.temporal.io/getting_started/#run-your-first-program", - name: "Build an application from scratch", - }, - { - path: "https://learn.temporal.io/courses/", - name: "Enroll in a free course", - }, -]; - -const appDevGuideLinks = [ - { - path: "/develop/go", - name: "Go SDK developer guide", - }, - { - path: "/develop/java", - name: "Java SDK developer guide", - }, - { - path: "/develop/python", - name: "Python SDK developer guide", - }, - { - path: "/develop/typescript", - name: "TypeScript SDK developer guide", - }, - { - path: "/develop/dotnet", - name: ".NET SDK developer guide", - }, - { - path: "/develop/php", - name: "PHP SDK developer guide", - }, -]; - -const troubleshooting = [ - { - path: "/troubleshooting/deadline-exceeded-error", - name: "Deadline exceeded", - }, - { - path: "/troubleshooting/last-connection-error", - name: "Last connection", - }, -]; - -const prodDeployLinks = [ - { - path: "/production-deployment", - name: "Get started deploying to production", - }, -]; - -const devTools = [ - { - path: "/cli", - name: `Temporal CLI`, - }, - { - path: "/web-ui", - name: `Web UI`, - }, -]; - -const references = [ - { - path: "/references/commands", - name: `Commands`, - }, - { - path: "/references/events", - name: "Events", - }, - { - path: "/references/sdk-metrics", - name: "SDK metrics", - }, - { - path: "/references/cluster-metrics", - name: "Temporal Service metrics", - }, - { - path: "/references/errors", - name: `Workflow Task errors`, - }, -]; - -const selfHostedDeploymentGuide = [ - { - path: "/self-hosted-guide/introduction", - name: "Introduction", - }, - { - path: "/self-hosted-guide/defaults", - name: "Defaults", - }, - { - path: "/self-hosted-guide/security", - name: "Security", - }, - { - path: "/self-hosted-guide/production-checklist", - name: "Production checklist", - }, - { - path: "/self-hosted-guide/monitoring", - name: "Monitoring", - }, - { - path: "/self-hosted-guide#visibility", - name: "Visibility", - }, - { - path: "/self-hosted-guide/upgrade-server", - name: "Upgrade server", - }, - { - path: "/self-hosted-guide/multi-cluster-replication", - name: "Multi-Cluster Replication", - }, -]; - -const displayLinks = (links) => { - return links.map((link, i) => { - return ( -
  • -
    - - {link.name} - -
    -
  • - ); - }); +import { BookOpen, Code, Terminal, Rocket, Cloud, ShieldCheck, Activity, MessageSquare, Globe, Calendar } from 'lucide-react'; + +const cardIcons = { + "Get started with Temporal": , + "Start building your next app": , + "Security": , + "Deploy your application to production": , + "Monitoring & Observability": , + "Try Temporal Cloud": , }; -function Card({ title, content, links = [] }) { - return ( -
    -

    {title}

    -

    {content}

    -
      {displayLinks(links)}
    -
    - ); -} - -function SimpleCard({ title, content, links = [] }) { - return ( -
    -

    {title}

    -

    {content}

    -
      {displayLinks(links)}
    -
    - ); -} - -function CloudCard({ links }) { - return ( -
    -
    -
    -

    Deploy your application to production

    -

    Choose a production deployment environment that suits your needs.

    -
      {displayLinks(links)}
    -
    -
    -
    - ); -} - -function ResourceCard({ title, author, role, link, img }) { - return ( -
    - -
    - {author} -
    -

    - {author} -

    -

    {role}

    -
    -
    -
    - ); -} - -function CommunityCard({ title, content, link }) { +const SimpleCard = ({ title, content, links = [] }) => { return ( -
    -

    {title}

    - - {link.name} - +
    + {cardIcons[title]} +

    {title}

    +

    {content}

    +
      + {links.map((link, i) => ( +
    • + {link.name} +
    • + ))} +
    ); -} - -const slides = [ - { - title: "Temporal Service", - description: "Provides reliable and scalable workflow orchestration.", - content1: `A Temporal Service ensures that Workflows are resilient by saving each step the Workflow code takes. It also schedules retries whenever there are errors in your application’s code.`, - content2: `You can run it wherever you’d like and scale from a single laptop to thousands of machines, adding resources when and where you need them. And although you've just set up a lightweight Temporal Service for development, switching your code to point at a production Temporal Service only requires changing your connection parameters.`, - giphy: "eePSFNBFv2W9owZ4Sh", - }, - { - title: "SDKs", - description: "Write code in your programming language of choice.", - content1: - "A Temporal SDK is a library you use in your code. Each SDK has two parts to its API: the Client and the Worker. The Worker is the long-running process that has your Workflow code. The Client is used to communicate with the Temporal Service—for instance, to start and interact with Workflows.", - giphy: "6UFgdU9hirj1pAOJyN", - }, - { - title: "Workflows", - description: "Write your business logic as code in a Temporal Workflow.", - content1: `Temporal applications are built using an abstraction called Workflows. Workflows are functions or methods written in a general-purpose programming language such as Go, Java, TypeScript, or Python.`, - content2: `Temporal ensures that your Workflows execute reliably. They can run—and keep running—for years, even if the underlying infrastructure fails. If the application crashes, Temporal will automatically recreate its pre-failure state so that it can continue right where it left off.`, - giphy: "l0IylOPCNkiqOgMyA ", - }, - { - title: "Determinism", - description: "Writing deterministic Workflows guarantees durability in the case of failure.", - content1: `Temporal's guarantee that your Workflow code can’t fail to continue running requires that the code in your Workflow must be deterministic. Simply put, this means that each execution of a Workflow, given the same input, must follow the same path through the code and produce the same output.`, - content2: `This means that you can’t generate a random number or interact with the outside world, as these actions are inherently non-deterministic. Generating a random number twice will likely produce different results, and if you access files, databases, or network services, you might get a failure or different results at different times.`, - giphy: "5FSanfKqd3rS8", - }, - { - title: "Activities", - description: "Activities have the failure-prone parts of your code and are automatically retried upon failure.", - content1: - "Activities are functions or methods that you can use to run code that is non-deterministic or prone to failure, such as accessing a database, network service, or file system. Activities are called from Workflow code, and they are automatically retried if they fail. Once the Activity succeeds, the Workflow code will continue executing.", - giphy: "kaDAIEecq0YuI", - }, - { - title: "Workers", - description: - "Workers run Workflow and Activity code reliably and consistently. You can increase the scalability and availability of your application by running additional Workers. ", - content1: `One thing that people new to Temporal find surprising is that the Temporal Service does not execute your code.`, - content2: `You deploy your code to containers or machines that are separate from the Temporal Service. Using the Worker API provided by the Temporal SDK, you will run one or more Worker processes that will execute your Workflow and Activity code based on tasks managed by the Temporal Service.`, - content3: `The Temporal Service gives the Workers tasks like “Start running Workflow A,” and the Workers run the corresponding Workflow function or method.`, - giphy: "DhstvI3zZ598Nb1rFf", - }, - { - title: "Temporal CLI", - description: "Communicate directly with the Temporal Service by entering commands in the terminal.", - content1: `The Temporal CLI runs a development version of the Temporal Service. Interact with the Temporal Service - start Workflows, list them, get their status, and more.`, - content2: ` From the command line using the temporal command. From code, using an SDK Client. From your browser, using the Web UI.`, - giphy: "GA2dwDU7owOS4", - }, -]; - -function SlideDots({ activeSlide, handleClick }) { - return slides.map((link, index) => { - return ( -
    handleClick(index)} - /> - ); - }); -} - -function SlideInfo({ activeSlide, handleClick }) { - const slide = slides[activeSlide]; - - const renderTextWithHighlight = (text) => { - const wordToCheck = "temporal"; - const highlightClass = "highlight"; - const parts = text.split(new RegExp(`(${wordToCheck})`, "gi")); - return parts.map((part, index) => - part === wordToCheck ? ( - - {part} - - ) : ( - {part} - ) - ); - }; - - const onPrevious = () => { - if (activeSlide > 0) { - handleClick(activeSlide - 1); - } else { - handleClick(slides.length - 1); - } - }; - - const onNext = () => { - if (activeSlide < slides.length - 1) { - handleClick(activeSlide + 1); - } else { - handleClick(0); - } - }; +}; +const CourseCTA = () => { return ( -
    - -
    -

    Introducing our core concepts

    -

    {slide.title}

    -

    - - {slide.description} -

    -

    {renderTextWithHighlight(slide.content1 || "")}

    -

    {renderTextWithHighlight(slide?.content2 || "")}

    -

    {renderTextWithHighlight(slide?.content3 || "")}

    -
    - -
    +
    + +

    Take a Temporal Course

    +

    Learn Temporal by enrolling in our free introductory courses.

    +
    + + Temporal 101 Course + + + Temporal 102 Course +
    -
    ); -} - -function Explained() { - const [activeSlide, setActiveSlide] = useState(0); - - const handleSlideChange = (index) => { - setActiveSlide(index); - }; +}; +const CommunityCTA = () => { return ( -
    -

    Temporal Platform explanation and usage information.

    -
    {SdkLogos()}
    -
    - - -
    - - -
    -
    - +
    +

    Join our Community

    +
    +
    + + Join us in Slack and say hi!
    - -
    - -
    -

    Helpful resources

    -
    - - - +
    + + Got a Question? Check out the forum
    -
    - -
    -

    Join our Community

    -
    - - - +
    + + Find an upcoming event near you
    ); -} +}; export const Intro = () => { return (
    -
    - +
    + + + + + +
    + +
    ); }; diff --git a/docs/index.mdx b/docs/index.mdx index 388fd844a0..350d163452 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,14 +1,37 @@ --- id: index -title: Temporal Platform Documentation -sidebar_label: Documentation Home +title: Temporal Documentation +sidebar_label: Home description: Explore Temporal's comprehensive documentation to build, scale, and manage reliable, fault-tolerant workflows with Workflow-as-Code solutions. --- - Temporal Platform Documentation + Temporal Documentation + + +SDK Logo Banner + + + + + + import { Intro } from '/docs/components/Intro.js'; diff --git a/src/css/custom.css b/src/css/custom.css index 23314fc399..c2caa92210 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -559,9 +559,20 @@ h1 { display: flex; } +/* .list-logo img { filter: grayscale(1); } +*/ + +.fixed-size-logo { + width: 300px; + height: auto; + display: block; + margin-left: 0; + margin-right: auto; +} + .w-third { width: 1/3; diff --git a/static/homepage/background-101-courses.png b/static/homepage/background-101-courses.png new file mode 100644 index 0000000000..be56475bdd Binary files /dev/null and b/static/homepage/background-101-courses.png differ diff --git a/static/homepage/background-102-courses.png b/static/homepage/background-102-courses.png new file mode 100644 index 0000000000..1ac8843ade Binary files /dev/null and b/static/homepage/background-102-courses.png differ diff --git a/static/homepage/documentation-banner-dark.png b/static/homepage/documentation-banner-dark.png new file mode 100644 index 0000000000..70d9157c78 Binary files /dev/null and b/static/homepage/documentation-banner-dark.png differ diff --git a/static/homepage/documentation-banner.png b/static/homepage/documentation-banner.png new file mode 100644 index 0000000000..1e39f5fbd2 Binary files /dev/null and b/static/homepage/documentation-banner.png differ diff --git a/static/homepage/sdk-logos-with-ruby.png b/static/homepage/sdk-logos-with-ruby.png new file mode 100644 index 0000000000..23aaf40cc7 Binary files /dev/null and b/static/homepage/sdk-logos-with-ruby.png differ