Improve 'VersionedCodeBlock' dev experience

Summary: After this diff we don't need to specify exact relative path to the VersionedCodeBlock.js

Reviewed By: muraziz

Differential Revision: D27266230

fbshipit-source-id: 650b464746f4bc0693e92ea7c26e550625e55f63

docs/devtools/flipper-plugins.mdx

@@ -7,7 +7,7 @@ title: Flipper Plugins
 Moved from old website without any change.
 :::
 
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 When you create or debug standard Android Views, you can use Layout Preview and Layout Inspector tools from Android Studio. But since Litho operates with different UI primitives like Components and Sections those standard tools are not very useful for our  case.
 

docs/getting-started.mdx

@@ -6,7 +6,7 @@ hide_table_of_contents: true
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {VersionedCodeBlock} from './versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 <Tabs
   defaultValue="gradle-java"

docs/testing/espresso-testing.mdx

@@ -8,7 +8,7 @@ Moved from old website without any change.
 :::
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 Litho provides basic support for the
 [Espresso UI Testing](https://developer.android.com/training/testing/ui-testing/espresso-testing.html)

docs/testing/event-handler-testing.mdx

@@ -8,7 +8,7 @@ Moved from old website without any change.
 :::
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 This document provides a quick example of how to write tests for your event
 handlers. You should be familiar with [TestSpecs](subcomponent-testing)

docs/testing/subcomponent-testing.mdx

@@ -3,7 +3,7 @@ id: subcomponent-testing
 title: Sub-Component Testing
 ---
 
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 :::note
 Checkout the [getting started](unit-testing) section to setup the test environment correctly.

docs/testing/testing-treeprops.mdx

@@ -3,7 +3,7 @@ id: testing-treeprops
 title: Matching @TreeProp
 ---
 
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 :::note
 Checkout the [getting started](unit-testing) section to setup the test environment correctly.

docs/testing/unit-testing.mdx

@@ -3,7 +3,7 @@ id: unit-testing
 title: Getting Started
 ---
 
-import {VersionedCodeBlock} from './../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 export const testingDependenciesCode = `testImplementation 'com.facebook.litho:litho-testing:{{site.lithoVersion}}'`;
 
 In order to use any of the testing utilities please include the `litho-testing` package in the

docs/tutorial/project-setup.mdx

@@ -5,7 +5,7 @@ title: Setting up the project
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {VersionedCodeBlock} from '../versionedCodeBlock';
+import VersionedCodeBlock from '@theme/VersionedCodeBlock';
 
 To add Litho to your project you'll need to configure it with correct settings and dependencies.
 

docs/versionedCodeBlock.js → website/src/theme/VersionedCodeBlock.js

@@ -20,13 +20,13 @@ import React from 'react';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
 import dracula from 'prism-react-renderer/themes/dracula';
-import {site} from '../website/versionConfig.js';
+import {site} from '../../versionConfig.js';
 import useThemeContext from '@theme/hooks/useThemeContext';
 
 // VersionedCodeBlock is a wrapper component for the normal codeblock. It replaces
 // placeholders e.g. {{site.lithoVersion}} with current versions stated in ../versionConfig.js
 // When updating versions in documentation, it suffices to update the versions in ../versionConfig.js
-export const VersionedCodeBlock = ({language, code}) => {
+const VersionedCodeBlock = ({language, code}) => {
   // replace all placeholders with actual versions
   const modifiedCode = code
     .replace(/{{site.lithoVersion}}/g, site.lithoVersion)
@@ -65,3 +65,5 @@ function getCodeBlockTheme() {
     return github;
   }
 }
+
+export default VersionedCodeBlock;