+ `value` is used for the tabs unique value and label.
+ language is used for syntax highlighting.
+ */
+
+function CodeSnippets({ paths, groupId, queryString }: { paths: string[]; groupId?: string; queryString?: string }) {
+ const snippetPaths = paths.map((path) => path.trim());
+ const [snippets, setSnippets] = useState([]);
+
+ useEffect(() => {
+ async function fetchSnippets() {
+ const fetchedSnippets = await Promise.all(
+ snippetPaths.map(async (path) => {
+ const [_, value, language] = path.split('.');
+ try {
+ const code = (await import(`!!raw-loader!@site/../docs/snippets/${path}`)).default;
+
+ return {
+ language,
+ value,
+ label: value.toUpperCase(),
+ code,
+ };
+ } catch (error) {
+ console.log(`CodeSnippets failed to load: docs/snippets/${path}`, error);
+ return null;
+ }
+ })
+ );
+ setSnippets(fetchedSnippets.filter((snippet) => snippet != null));
+ }
+
+ fetchSnippets();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ if (snippets.length === 0) {
+ return null;
+ }
+
+ if (snippets.length === 1) {
+ return {snippets[0].code};
+ }
+
+ return (
+ // @ts-ignore - Tabs types appear to be broken.
+
+ {snippets.map((snippet) => (
+ // @ts-ignore - TabItem types appear to be broken.
+
+ {snippet.code}
+
+ ))}
+
+ );
+}
+
+export default CodeSnippets;
diff --git a/docusaurus/website/src/components/HomepageGettingStarted/index.tsx b/docusaurus/website/src/components/HomepageGettingStarted/index.tsx
index 328cbf79b..271428d71 100644
--- a/docusaurus/website/src/components/HomepageGettingStarted/index.tsx
+++ b/docusaurus/website/src/components/HomepageGettingStarted/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import CodeBlock from '@theme/CodeBlock';
+import CodeSnippets from '../CodeSnippets/CodeSnippets';
import styles from './styles.module.css';
@@ -19,7 +19,7 @@ function HomepageGettingStarted() {
To create a plugin run this command:
- npx @grafana/create-plugin
+
@@ -44,7 +44,7 @@ function HomepageGettingStarted() {
Updating your build tooling can be a daunting and time-consuming task. When new versions of Create
Plugin are released, you can upgrade using a single command:
- npx @grafana/create-plugin update
+
diff --git a/docusaurus/website/src/components/SyncCommand/SyncCommand.tsx b/docusaurus/website/src/components/SyncCommand/SyncCommand.tsx
new file mode 100644
index 000000000..34807d588
--- /dev/null
+++ b/docusaurus/website/src/components/SyncCommand/SyncCommand.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useLocation } from '@docusaurus/router';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+interface SyncCommandProps {
+ cmd: string;
+}
+
+function SyncCommand({ cmd }: SyncCommandProps) {
+ let currentPackageManager = window.localStorage['docusaurus.tab.package-manager'];
+ const location = useLocation();
+
+ if (!currentPackageManager) {
+ if (location && location.search && location.search.includes('current-package-manager')) {
+ const searchParams = new URLSearchParams(location.search);
+ currentPackageManager = searchParams.get('current-package-manager');
+ } else {
+ currentPackageManager = 'npm';
+ }
+ }
+ const cmdString = `${currentPackageManager} ${cmd}`;
+
+ return {cmdString};
+}
+
+function BrowserOnlySyncCommand({ cmd }: SyncCommandProps) {
+ return {() => };
+}
+
+export default BrowserOnlySyncCommand;
diff --git a/docusaurus/website/src/pages/markdown-page.md b/docusaurus/website/src/pages/markdown-page.md
deleted file mode 100644
index 9756c5b66..000000000
--- a/docusaurus/website/src/pages/markdown-page.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.
diff --git a/docusaurus/website/src/theme/MDXComponents.tsx b/docusaurus/website/src/theme/MDXComponents.tsx
new file mode 100644
index 000000000..db15cd0a6
--- /dev/null
+++ b/docusaurus/website/src/theme/MDXComponents.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+import CodeSnippets from '@site/src/components/CodeSnippets/CodeSnippets';
+import SyncCommand from '@site/src/components/SyncCommand/SyncCommand';
+
+export default {
+ // Re-use the default mapping
+ ...MDXComponents,
+ // Map the "" tag to our CodeSnippets component
+ // `CodeSnippets` will receive all props that were passed to `` in MDX
+ CodeSnippets,
+ SyncCommand,
+};
diff --git a/yarn.lock b/yarn.lock
index dc0fc704d..745faa59a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12850,6 +12850,14 @@ raw-body@2.5.1:
iconv-lite "0.4.24"
unpipe "1.0.0"
+raw-loader@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+ integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+ dependencies:
+ loader-utils "^2.0.0"
+ schema-utils "^3.0.0"
+
rc@1.2.8, rc@^1.2.8, rc@~1.2.7:
version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"