add versioning tutorial to help users find it in-place

docs/go/versioning.md

@@ -8,6 +8,14 @@ to reconstruct the Workflow state by replaying the saved history event data on t
 definition code. This means that any incompatible update to the Workflow definition code could cause
 a non-deterministic issue if not handled correctly.
 
+## Introduction to Versioning
+
+Because we design for potentially long running workflows at scale, versioning with Temporal works differently than with other workflow systems. We explain more in this optional 30 minute introduction:
+
+import { ResponsivePlayer } from '../../src/components'
+
+<ResponsivePlayer url='https://www.youtube.com/watch?v=kkP899WxgzY' />
+
 ## workflow.GetVersion()
 
 Consider the following Workflow definition:

docs/java/versioning.md

@@ -9,6 +9,16 @@ this assumption. The solution that allows updating code of already running Workf
 When replaying, use the code version that the events were generated with and when executing a new code path, always take the
 new code.
 
+## Introduction to Versioning
+
+Because we design for potentially long running workflows at scale, versioning with Temporal works differently than with other workflow systems. We explain more in this optional 30 minute introduction:
+
+import { ResponsivePlayer } from '../../src/components'
+
+<ResponsivePlayer url='https://www.youtube.com/watch?v=kkP899WxgzY' />
+
+## Java Versioning API
+
 Use the `Workflow.getVersion` function to return a version of the code that should be executed and then use the returned
 value to pick a correct branch. Let's look at an example.
 

docusaurus.config.js

@@ -44,7 +44,8 @@ module.exports = {
             },
             {
               to: "/application-development",
-              activeBaseRegex: "(/application-development)|(/docs/(go|java|php|node))",
+              activeBaseRegex:
+                "(/application-development)|(/docs/(go|java|php|node))",
               label: "SDKs",
             },
             {

src/theme/DocItem/index.js

@@ -10,13 +10,13 @@ import DocVersionBanner from "@theme/DocVersionBanner";
 import Seo from "@theme/Seo";
 import LastUpdated from "@theme/LastUpdated";
 import TOC from "@theme/TOC";
-import TOCCollapsible from '@theme/TOCCollapsible';
+import TOCCollapsible from "@theme/TOCCollapsible";
 import EditThisPage from "@theme/EditThisPage";
 import {MainHeading} from "@theme/Heading";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import {useActivePlugin, useVersions} from "@theme/hooks/useDocs";
-import useWindowSize from '@theme/hooks/useWindowSize';
+import useWindowSize from "@theme/hooks/useWindowSize";
 
 function DocItem(props) {
   const {content: DocContent, versionMetadata} = props;
@@ -54,12 +54,12 @@ function DocItem(props) {
   const renderTocMobile =
     !hideTableOfContents &&
     DocContent.toc &&
-    (windowSize === 'mobile' || windowSize === 'ssr');
+    (windowSize === "mobile" || windowSize === "ssr");
 
   const renderTocDesktop =
     !hideTableOfContents &&
     DocContent.toc &&
-    (windowSize === 'desktop' || windowSize === 'ssr');
+    (windowSize === "desktop" || windowSize === "ssr");
 
   return (
     <>