Migrate to Docusaurus (#4)

Author: maxy-shpfy

.github/workflows/deploy.yaml

@@ -0,0 +1,37 @@
+name: gh_deploy
+on:
+  push:
+    branches:
+      - master
+permissions:
+  contents: write
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # 👇 Build steps
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 24.x
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      # 👆 Build steps
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # 👇 Build output path
+          path: build
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/mkdocs_gh_deploy.yaml

@@ -0,0 +1,25 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Shopify
+.dev
+
+/docs-backup

.gitignore

@@ -0,0 +1,9 @@
+export const APP_URL = "https://tangleml.com/tangle-ui";
+export const GITHUB_REPO_URL = "https://github.com/tangleml/tangle";
+export const GITHUB_ISSUES_URL = `${GITHUB_REPO_URL}/issues`;
+export const DEMO_URL = "https://tangleml.com/tangle-ui/quick-start";
+export const DOCS_URL = "/docs";
+
+export const SLACK_CHANNEL = "#tangle";
+export const SUPPORT_EMAIL = "n/a";
+export const WEBSITE_URL = "https://tangleml.com/";

constants.ts

@@ -0,0 +1,109 @@
+---
+id: adding-components
+title: Adding Components to Pipelines
+description: How to add components to your pipeline workspace
+---
+
+import { ImageAnnotation } from "@site/src/components/ImageAnnotation";
+
+# Adding Components to Pipelines
+
+Components are the building blocks of your ML pipelines in TangleML. This guide covers the different methods to add components to your pipeline workspace.
+
+
+### 1. Upload Component File
+
+Upload a YAML component file directly from your computer to add it to your user components library.
+
+:::tip
+Uploaded components are immediately available in your User Components library and can be reused across different pipelines.
+:::
+
+
+<ImageAnnotation src={require("./assets/AddingComponents_File.png").default} alt="Import from URL screenshot">
+
+1. Click on the **File** option in the component panel
+2. Select a YAML component file from your computer
+3. The component will automatically be added to your **User Components** folder
+
+</ImageAnnotation>
+
+
+### 2. Import from URL
+
+Import components from publicly accessible URLs, particularly useful for GitHub-hosted components.
+
+:::tip
+This method works great with raw GitHub URLs, allowing you to import components directly from repositories.
+:::
+
+<ImageAnnotation src={require("./assets/AddingComponents_URL.png").default} alt="Import from URL screenshot">
+
+
+1. Select the **URL** option
+2. Enter the publicly accessible URL to the YAML file
+3. The browser will automatically download and validate the component
+4. If valid, it will be added to your User Components library
+
+</ImageAnnotation>
+
+
+
+### 3. In-App Component Editor
+
+Create and edit components directly in your browser using the built-in editor.
+
+:::info
+Learn more about the [In-App Component Editor](/docs/component-development/in-app-editor).
+:::
+
+<ImageAnnotation src={require("./assets/AddingComponents_New.png").default} alt="In-App Component Editor screenshot">
+
+1. Click on the **New** button in the "Add component" dialog
+2. Select the component template you want to use
+3. The editor will open and you can start editing the component
+4. Once you're done, click the **Save** button to save the component. The component will be added to your User Components library.
+
+</ImageAnnotation>
+
+
+
+### 4. Drag and Drop YAML Files
+
+Simply drag a YAML component file from your file system and drop it directly onto the canvas.
+
+<video src={require("./assets/AddingComponents_Drop.mov").default} autoPlay loop muted playsInline style={{ width: "100%" }}>
+  Your browser does not support the video tag.
+</video>
+
+### 5. Import from Other Pipelines
+
+Reuse components from your existing pipelines by importing them into your User Components library.
+
+<video src={require("./assets/AddingComponents_AddFromPipeline.mov").default} autoPlay loop muted playsInline style={{ width: "100%" }}>
+  Your browser does not support the video tag.
+</video>
+
+### 6. Using Standard Library Components
+
+Access components from the Standard Library for tasks shared within the TangleML instance.
+
+:::tip
+All components in the Standard Library are well documented with implementation details you can inspect by clicking the component info dialog and checking the **Implementation** tab.
+:::
+
+<ImageAnnotation src={require("./assets/AddingComponents_StandardLibrary.png").default} alt="Import from Standard Library screenshot">
+
+1. Expand the **Standard Library** folder in the left panel, Components section.
+2. Select the component you want to add.
+3. Drag the component onto the canvas.
+
+</ImageAnnotation>
+
+### 7. Shared Components Library
+
+Access components from the Shared Components Library for tasks shared within the TangleML instance.
+
+:::info
+Learn more about the [Shared Components Library](/docs/component-development/published-components-library).
+:::