DRAFT - Tutorials for DataHub

.github/workflows/sync-tutorial-styles.yml

@@ -0,0 +1,98 @@
+name: Sync Tutorial Component Styles
+
+on:
+  # Run when DataHub web-react styles are updated
+  push:
+    paths:
+      - "datahub-web-react/src/alchemy-components/theme/**"
+      - "datahub-web-react/src/alchemy-components/theme/foundations/colors.ts"
+      - "datahub-web-react/src/alchemy-components/theme/semantic-tokens.ts"
+
+  # Allow manual triggering
+  workflow_dispatch:
+
+  # Run weekly to catch any missed updates
+  schedule:
+    - cron: "0 2 * * 1" # Every Monday at 2 AM UTC
+
+jobs:
+  sync-styles:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: docs-website/yarn.lock
+
+      - name: Install dependencies
+        working-directory: docs-website
+        run: yarn install --frozen-lockfile
+
+      - name: Sync DataHub styles
+        working-directory: docs-website
+        run: yarn sync-datahub-styles
+
+      - name: Check for changes
+        id: changes
+        run: |
+          if git diff --quiet; then
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Commit and push changes
+        if: steps.changes.outputs.changed == 'true'
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git add docs-website/src/components/*/styles.module.css
+          git commit -m "🎨 Auto-sync tutorial component styles with DataHub UI
+
+          - Updated design tokens from DataHub web-react
+          - Synced colors, spacing, and styling
+          - Ensures tutorial components match actual DataHub UI"
+          git push
+
+      - name: Create PR comment (if applicable)
+        if: steps.changes.outputs.changed == 'true' && github.event_name == 'push'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const sha = context.sha;
+
+            // Find associated PR
+            const prs = await github.rest.pulls.list({
+              owner,
+              repo,
+              state: 'open',
+              head: `${owner}:${context.ref.replace('refs/heads/', '')}`
+            });
+
+            if (prs.data.length > 0) {
+              const pr = prs.data[0];
+              await github.rest.issues.createComment({
+                owner,
+                repo,
+                issue_number: pr.number,
+                body: `🎨 **Tutorial styles auto-updated!**
+
+                The tutorial components have been automatically updated to match the latest DataHub UI styling changes.
+
+                **What changed:**
+                - Design tokens synced from \`datahub-web-react\`
+                - Component colors and styling updated
+                - Tutorial components now match production DataHub UI
+
+                This ensures users see consistent styling between tutorials and the actual DataHub interface.`
+              });
+            }

docs-website/README.md

@@ -177,7 +177,7 @@ You can format all files by running:
 
 or by allowing pre-commit hooks to run when you commit your changes.
 
-Warning: When using [admonitions](https://docusaurus.io/docs/markdown-features/admonitions#usage-with-prettier) (e.g. `:::note`), 
+Warning: When using [admonitions](https://docusaurus.io/docs/markdown-features/admonitions#usage-with-prettier) (e.g. `:::note`),
 you may need to add newlines around the inner text to avoid formatting issues. See the link for details.
 
 ## Docs site generation process

docs-website/build.gradle

@@ -110,7 +110,38 @@ task yarnInstall(type: YarnTask) {
   outputs.dir('node_modules')
 }
 
-task yarnGenerate(type: YarnTask, dependsOn: [yarnInstall,
+// Sync tutorial component styles with DataHub UI at build time
+task syncDataHubStyles(type: YarnTask, dependsOn: [yarnInstall]) {
+  description = 'Sync tutorial component styles with actual DataHub UI design tokens'
+
+  // Input: DataHub design token files
+  inputs.files(
+    file('../datahub-web-react/src/alchemy-components/theme/foundations/colors.ts'),
+    file('../datahub-web-react/src/alchemy-components/theme/semantic-tokens.ts'),
+    file('scripts/sync-datahub-styles.js')
+  )
+
+  // Output: Component style files
+  outputs.files(
+    file('src/components/DataHubEntityCard/styles.module.css'),
+    file('src/components/DataHubLineageNode/styles.module.css')
+  )
+
+  // Cache the sync result for performance
+  outputs.cacheIf { true }
+
+  args = ['run', 'sync-datahub-styles']
+
+  doFirst {
+    logger.info('🎨 Syncing tutorial component styles with DataHub UI...')
+  }
+
+  doLast {
+    logger.info('✅ Tutorial component styles synced successfully')
+  }
+}
+
+task yarnGenerate(type: YarnTask, dependsOn: [yarnInstall, syncDataHubStyles,
     generateGraphQLSchema, generateJsonSchema,
     ':metadata-ingestion:modelDocGen', ':metadata-ingestion:docGen',
     ]) {
@@ -142,8 +173,9 @@ task yarnLintFix(type: YarnTask, dependsOn: [yarnInstall]) {
   args = ['run', 'lint-fix']
 }
 
-task serve(type: YarnTask, dependsOn: [yarnInstall] ) {
-  args = ['run', 'serve']
+// Development server with hot reloads (recommended for development)
+task dev(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate, downloadHistoricalVersions]) {
+  args = ['run', 'start']
 }
 
 
@@ -167,6 +199,12 @@ task yarnBuild(type: YarnTask, dependsOn: [yarnLint, yarnGenerate, downloadHisto
   args = ['run', 'build']
 
 }
+
+// Serve built site (requires build first)
+task serve(type: YarnTask, dependsOn: [yarnBuild] ) {
+  args = ['run', 'serve']
+}
+
 task yarnClear(type: YarnTask) {
   args = ['run','clear']
 }

docs-website/docusaurus.config.js

@@ -12,14 +12,17 @@ module.exports = {
   organizationName: "datahub-project", // Usually your GitHub org/user name.
   projectName: "datahub", // Usually your repo name.
   staticDirectories: ["static"],
-  stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"],
+  stylesheets: [
+    "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap",
+  ],
   headTags: [
     {
-      tagName: 'meta',
+      tagName: "meta",
       attributes: {
-        httpEquiv: 'Content-Security-Policy',
-        content: "frame-ancestors 'self' https://*.acryl.io https://acryldata.io http://localhost:*"
-      }
+        httpEquiv: "Content-Security-Policy",
+        content:
+          "frame-ancestors 'self' https://*.acryl.io https://acryldata.io http://localhost:*",
+      },
     },
   ],
   scripts: [
@@ -34,11 +37,11 @@ module.exports = {
       defer: true,
     },
     {
-      src: "https://app.revenuehero.io/scheduler.min.js"
+      src: "https://app.revenuehero.io/scheduler.min.js",
     },
     {
       src: "https://tag.clearbitscripts.com/v1/pk_2e321cabe30432a5c44c0424781aa35f/tags.js",
-      referrerPolicy: "strict-origin-when-cross-origin"
+      referrerPolicy: "strict-origin-when-cross-origin",
     },
     {
       src: "/scripts/reo.js",
@@ -54,7 +57,8 @@ module.exports = {
       "runllm-keyboard-shortcut": "Mod+j",
       "runllm-preset": "docusaurus",
       "runllm-theme-color": "#1890FF",
-      "runllm-brand-logo": "https://docs.datahub.com/img/datahub-logo-color-mark.svg",
+      "runllm-brand-logo":
+        "https://docs.datahub.com/img/datahub-logo-color-mark.svg",
       "runllm-community-url": "https://datahub.com/slack",
       "runllm-community-type": "slack",
       "runllm-disable-ask-a-person": "true",
@@ -107,7 +111,7 @@ module.exports = {
     },
     colorMode: {
       // Only support light mode.
-      defaultMode: 'light',
+      defaultMode: "light",
       disableSwitch: true,
       respectPrefersColorScheme: false,
     },
@@ -138,12 +142,13 @@ module.exports = {
           dropdownActiveClassDisabled: true,
           dropdownItemsAfter: [
             {
-              type: 'html',
+              type: "html",
               value: '<hr class="dropdown-separator" style="margin: 0.4rem;">',
             },
             {
-              type: 'html',
-              value: '<div class="dropdown__link"><b>Archived versions</b></div>',
+              type: "html",
+              value:
+                '<div class="dropdown__link"><b>Archived versions</b></div>',
             },
             {
               value: `
@@ -339,7 +344,7 @@ module.exports = {
           versions: {
             current: {
               label: "Next",
-              banner: 'none',
+              banner: "none",
             },
           },
           path: "genDocs",
@@ -355,15 +360,18 @@ module.exports = {
         blog: {
           blogTitle: "DataHub Learn",
           blogSidebarTitle: "DataHub Learn",
-          blogDescription: "Learn about the hot topics in the data ecosystem and how DataHub can help you with your data journey.",
+          blogDescription:
+            "Learn about the hot topics in the data ecosystem and how DataHub can help you with your data journey.",
           path: "src/learn",
           routeBasePath: "learn",
           postsPerPage: "ALL",
           blogListComponent: "../src/learn/_components/LearnListPage",
         },
         theme: {
           customCss: [
-            isSaas ? require.resolve("./src/styles/acryl.scss") : require.resolve("./src/styles/datahub.scss"),
+            isSaas
+              ? require.resolve("./src/styles/acryl.scss")
+              : require.resolve("./src/styles/datahub.scss"),
             require.resolve("./src/styles/global.scss"),
             require.resolve("./src/styles/sphinx.scss"),
             require.resolve("./src/styles/config-table.scss"),
@@ -374,7 +382,7 @@ module.exports = {
           mdxPageComponent: "@theme/MDXPage",
         },
         googleTagManager: {
-          containerId: 'GTM-5M8T9HNN',
+          containerId: "GTM-5M8T9HNN",
         },
         gtag: {
           trackingID: "G-PKGVLETT4C",
@@ -384,29 +392,32 @@ module.exports = {
   ],
   plugins: [
     [
-      '@docusaurus/plugin-client-redirects',
+      "@docusaurus/plugin-client-redirects",
       {
         createRedirects(existingPath) {
-          if (existingPath.includes('/docs')) {
+          if (existingPath.includes("/docs")) {
             return [
-              existingPath.replace('/docs', '/docs/next'),
-              existingPath.replace('/docs', '/docs/0.13.0'),
-              existingPath.replace('/docs', '/docs/0.12.1'),
-              existingPath.replace('/docs', '/docs/0.11.0'),
-              existingPath.replace('/docs', '/docs/0.10.5'),
+              existingPath.replace("/docs", "/docs/next"),
+              existingPath.replace("/docs", "/docs/0.13.0"),
+              existingPath.replace("/docs", "/docs/0.12.1"),
+              existingPath.replace("/docs", "/docs/0.11.0"),
+              existingPath.replace("/docs", "/docs/0.10.5"),
             ];
           }
           return undefined; // Return a falsy value: no redirect created
         },
         redirects: [
           {
-            from: '/docs/managed-datahub/operator-guide/setting-up-remote-ingestion-executor',
-            to: '/docs/managed-datahub/remote-executor/about',
+            from: "/docs/managed-datahub/operator-guide/setting-up-remote-ingestion-executor",
+            to: "/docs/managed-datahub/remote-executor/about",
           },
         ],
       },
     ],
-    ["@docusaurus/plugin-ideal-image", { quality: 100, sizes: [320, 640, 1280, 1440, 1600] }],
+    [
+      "@docusaurus/plugin-ideal-image",
+      { quality: 100, sizes: [320, 640, 1280, 1440, 1600] },
+    ],
     "docusaurus-plugin-sass",
     [
       "docusaurus-graphql-plugin",

docs-website/generateDocsDir.ts

@@ -199,6 +199,7 @@ const allowed_broken_links = [
   "docs/how/graph-onboarding.md",
   "docs/how/search-onboarding.md",
   "docs/how/build-metadata-service.md",
+  "docs/learn-datahub/overview.md",
 ];
 
 function markdown_guess_title(

docs-website/package.json

@@ -20,7 +20,8 @@
     "lint-check": "prettier -l generateDocsDir.ts sidebars.js src/pages/index.js",
     "lint-fix": "prettier --write generateDocsDir.ts sidebars.js src/pages/index.js",
     "_list-link-check-files": "find ./genDocs -name '*.md' -not \\( -path './genDocs/python-sdk/*' -o -path './genDocs/releases.md' \\)",
-    "check-links": "yarn run -s _list-link-check-files -print0 | xargs -0 -n1 -t markdown-link-check -q -c markdown-link-check-config.json"
+    "check-links": "yarn run -s _list-link-check-files -print0 | xargs -0 -n1 -t markdown-link-check -q -c markdown-link-check-config.json",
+    "sync-datahub-styles": "node scripts/sync-datahub-styles.js"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
@@ -48,6 +49,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-use-draggable-scroll": "^0.4.7",
+    "reactflow": "^11.11.4",
     "sass": "^1.43.2",
     "swc-loader": "^0.2.6",
     "swiper": "^11.1.4",