simplyfing the docusaurus configs and adding new dev build command be…

…cause turbo can not pass arguments to single targets

.github/workflows/deploy-to-dev-portal-dev.yml

@@ -25,18 +25,13 @@ jobs:
 
       - name: Install dependencies
         uses: ./.github/actions/yarn-nm-install
-
-      - name: Make docs the homepage of this subsite
-        run: |
-          rm -f ./docusaurus/website/src/pages/index.tsx
-          sed -i 's/title: Set up Scenes/title: Set up Scenes\nslug:\ \//g' ./docusaurus/docs/getting-started.md
 
       - name: Build documentation website
         env:
           GTAG_CONTAINER_ID: ${{ secrets.GTAG_CONTAINER_ID }}
         run: |
           cd ./docusaurus/website
-          yarn docs:build -- --config docusaurus.config.devportal.js
+          yarn docs:build:dev
         
       - id: 'auth'
         uses: 'google-github-actions/auth@v2'

.github/workflows/deploy-to-dev-portal-prod.yml

@@ -25,12 +25,7 @@ jobs:
 
       - name: Install dependencies
         uses: ./.github/actions/yarn-nm-install
-
-      - name: Make docs the homepage of this subsite
-        run: |
-          rm -f ./docusaurus/website/src/pages/index.tsx
-          sed -i 's/title: Set up Scenes/title: Set up Scenes\nslug:\ \//g' ./docusaurus/docs/getting-started.md
-          
+
       - name: Build documentation website
         env:
           GTAG_CONTAINER_ID: ${{ secrets.GTAG_CONTAINER_ID }}

docusaurus/docs/getting-started.md

@@ -1,6 +1,7 @@
 ---
 id: getting-started
 title: Set up Scenes
+slug: /
 ---
 
 This topic describes how to install Scenes and create your first "Hello World" scene.

docusaurus/website/docusaurus.config.base.js

@@ -0,0 +1,157 @@
+const path = require('path');
+const prism = require('prism-react-renderer');
+
+const {
+  themes: { oneDark },
+} = prism;
+
+// Replace background and color to better match Grafana theme.
+const grafanaPrismTheme = {
+  ...oneDark,
+  plain: {
+    color: 'rgb(204, 204, 220)',
+    backgroundColor: '#181b1f',
+  },
+};
+
+const customFields = {
+  nodeEnv: process.env.NODE_ENV,
+};
+
+/** @type {import('@docusaurus/types').Config} */
+const generalConfig = {
+  title: 'Grafana Scenes',
+  tagline: 'Build highly interactive Grafana apps with ease.',
+  baseUrl: 'scenes/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.png',
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'grafana', // Usually your GitHub org/user name.
+  projectName: 'scenes', // Usually your repo name.
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+};
+
+const plugins = [
+  [
+    './plugins/docusaurus-custom-webpack-plugin',
+    {
+      resolve: {
+        alias: {
+          '@snippets': path.resolve(__dirname, '..', 'docs', 'snippets'),
+          '@shared': path.resolve(__dirname, '..', 'docs', 'shared'),
+        },
+      },
+    },
+  ],
+  [
+    'docusaurus-lunr-search',
+    {
+      disableVersioning: true,
+    },
+  ],
+];
+
+const presetsDocs = {
+  path: '../docs',
+  sidebarPath: require.resolve('./sidebars.js'),
+  // Please change this to your repo.
+  // Remove this to remove the "edit this page" links.
+  editUrl: 'https://github.com/grafana/scenes/edit/main/docusaurus/website',
+};
+
+const presetsTheme = {
+  customCss: require.resolve('./src/css/custom.css'),
+};
+
+const themeConfigNavbar = {
+  title: 'Grafana Scenes',
+  logo: {
+    alt: 'Grafana Logo',
+    src: 'img/logo.svg',
+  },
+  items: [
+    { href: 'https://community.grafana.com/c/support/scenes/85', label: 'Help', position: 'right' },
+    {
+      href: 'https://www.github.com/grafana/scenes',
+      label: 'GitHub',
+      position: 'right',
+    },
+  ],
+};
+
+const themeConfigFooter = {
+  style: 'dark',
+  links: [
+    {
+      title: 'Docs',
+      items: [
+        {
+          label: 'Get Started',
+          to: '/',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      items: [
+        {
+          label: 'Github Issues',
+          href: 'https://www.github.com/grafana/scenes/issues',
+        },
+        {
+          label: 'Grafana Community Forums',
+          href: 'https://community.grafana.com/c/support/scenes/85',
+        },
+      ],
+    },
+    {
+      title: 'Social',
+      items: [
+        {
+          label: 'GitHub',
+          href: 'https://www.github.com/grafana/scenes',
+        },
+      ],
+    },
+  ],
+  copyright: `Copyright © ${new Date().getFullYear()} Grafana Labs. Built with Docusaurus.`,
+};
+
+const themeConfigPrism = {
+  theme: grafanaPrismTheme,
+  additionalLanguages: ['bash', 'diff', 'json'],
+  magicComments: [
+    {
+      className: 'code-block-addition-highlighted-line',
+      line: 'addition-highlight-next-line',
+      block: { start: 'addition-highlight-start', end: 'addition-highlight-end' },
+    },
+  ],
+};
+
+const themeConfigColorMode = {
+  defaultMode: 'dark',
+  disableSwitch: true,
+  respectPrefersColorScheme: false,
+};
+
+module.exports = {
+  customFields,
+  generalConfig,
+  plugins,
+  presetsDocs,
+  presetsTheme,
+  themeConfigNavbar,
+  themeConfigFooter,
+  themeConfigPrism,
+  themeConfigColorMode,
+};

docusaurus/website/docusaurus.config.dev.js

@@ -0,0 +1,72 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const {
+  customFields,
+  generalConfig,
+  plugins,
+  presetsDocs,
+  presetsTheme,
+  themeConfigNavbar,
+  themeConfigFooter,
+  themeConfigPrism,
+  themeConfigColorMode,
+} = require('./docusaurus.config.base');
+
+const devPortalHome = 'https://grafana-dev.com/developers';
+const [docsFooterLinks, ...otherFooterLinks] = themeConfigFooter.links;
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  ...generalConfig,
+  url: 'https://grafana-dev.com/',
+  baseUrl: 'developers/scenes/',
+  plugins: [],
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          ...presetsDocs,
+          routeBasePath: '/',
+        },
+        theme: presetsTheme,
+        blog: false,
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        ...themeConfigNavbar,
+        items: [
+          { href: devPortalHome, label: 'Portal Home', position: 'right', target: '_self' },
+          ...themeConfigNavbar.items,
+        ],
+      },
+      footer: {
+        ...themeConfigFooter,
+        links: [
+          {
+            ...docsFooterLinks,
+            items: [
+              ...docsFooterLinks.items,
+              {
+                label: 'Portal Home',
+                href: devPortalHome,
+                target: '_self',
+              },
+            ],
+          },
+          ...otherFooterLinks,
+        ],
+      },
+      prism: themeConfigPrism,
+      colorMode: themeConfigColorMode,
+    }),
+};
+
+module.exports = config;