Update docs site and add initial separate components package

.github/workflows/pages.yml

@@ -0,0 +1,70 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes to the main branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install docs dependencies
+        run: |
+          cd docs
+          npm install
+      - name: Install demo dependencies
+        run: |
+          cd strudel-taskflows
+          npm install
+      - name: Build docs
+        run: |
+          cd docs
+          npm run build
+      - name: Build demo
+        run: |
+          cd strudel-taskflows
+          npm run build
+        env:
+          VITE_BASE_URL: /strudel-kit/demo/
+      - name: Deploy docs
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          cd docs
+          npx gh-pages -d build -e docs -u "github-actions-bot <[email protected]>"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Deploy demo
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          cd strudel-taskflows
+          npx gh-pages -d dist -e demo -u "github-actions-bot <[email protected]>"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -18,15 +18,12 @@ build/
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 __pycache__
 
 # distribution files
 dist/
 
+.docusaurus
 # generouted
 router.ts
 

README.md

@@ -10,44 +10,47 @@ This library provides a suite of templates to implement UIs for various differen
 
 ## Quickstart
 
-Install the STRUDEL CLI tool:
+Install strudel-cli from PyPi:
 
-```
+```bash
 pip install strudel-cli
 ```
 
-Create a base app (enter values at the prompts or hit Enter to use the default value):
+Create a strudel base app:
 
-```
+```bash
 strudel create-app my-app
 ```
 
-Go to the root directory of your new app:
+This will generate a base web application in a new directory called `my-app`. Go into the new directory:
 
-```
+```bash
 cd my-app
 ```
 
-Add a new Task Flow to your app using the default configurations (hit Enter at each prompt):
+Install the app dependencies:
 
-```
-strudel add-taskflow my-default-taskflow --template run-computation
+```bash
+npm install
 ```
 
-Or create a config file for your new task flow based on [the config example](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/run-computation/config.md) for the selected Task Flow template.
+Start up your app locally:
 
-```
-strudel add-taskflow --config ../my-taskflow-config.json
+```bash
+npm start
 ```
 
-Install dependencies and start your app.
+Open your app in the browser at http://localhost:5173
 
+Add a Task Flow to your app:
+
+```bash
+strudel add-taskflow my-taskflow --template compare-data
 ```
-npm install
-npm start
-```
 
-For a complete guide to using STRUDEL Kit check out the [Getting Started Tutorial](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/0-introduction.md).
+This generates new template files for your Task Flow in `my-app/src/pages/my-taskflow`. Check out the [First Steps](https://strudel.science/strudel-kit/docs/getting-started/first-steps) and [Configuration](https://strudel.science/strudel-kit/docs/task-flows/overview) page for the template you are using to learn how to customize it.
+
+Navigate to http://localhost:5173/my-taskflow to see your new Task Flow.
 
 ## Packages
 

docs-legacy/README.md

@@ -0,0 +1,46 @@
+# STRUDEL Kit Docs
+
+Welcome to the STRUDEL Kit Docs! STRUDEL Kit is a web development toolkit for building scientific UIs based on the STRUDEL Design System and Task Flows. It consists of a command-line bootstrapping tool and a suite of React-based JavaScript templates. Visit [strudel.science](https://strudel.science) for more information about the STRUDEL project.
+
+## What's here?
+
+### [Getting Started Tutorial](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/0-introduction.md)
+
+A detailed step-by-step guide on how to build and customize a Task Flow using the strudel-cli and the STRUDEL Kit React templates.
+
+- [Setup](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/1-setup.md)
+- [Create a base app](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/2-create-app.md)
+- [Add a Task Flow](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/3-add-taskflow.md)
+- [Customize your task flow](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/4-customize-taskflow.md)
+- [Customize app theme and styles](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/5-customize-app.md)
+- [Customize the Home Page](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/6-customize-home-page.md)
+- [Continue learning](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/7-continue-learning.md)
+
+### How-Tos
+
+One page instructions on different advanced STRUDEL Kit methods.
+
+- [How to combine sections from different task flows](https://github.com/strudel-science/strudel-kit/blob/main/docs/how-to/combine-sections.md)
+- [How to connect task flows together](https://github.com/strudel-science/strudel-kit/blob/main/docs/how-to/connect-task-flows-together.md)
+
+### Task Flow Configuration
+
+Examples and explanations for each Task Flow's configuration file. Also an example of how to connect each Task Flow to the base app's router.
+
+#### Config File Examples
+
+- [Compare Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/compare-data/config.md)
+- [Contribute Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/contribute-data/config.md)
+- [Explore Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/explore-data/config.md)
+- [Monitor Activities Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/monitor-activities/config.md)
+- [Run Computaiton Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/run-computation/config.md)
+- [Search Data Repositories Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/search-data-repositories/config.md)
+
+#### Router Examples
+
+- [Compare Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/compare-data/routes.md)
+- [Contribute Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/contribute-data/routes.md)
+- [Explore Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/explore-data/routes.md)
+- [Monitor Activities Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/monitor-activities/routes.md)
+- [Run Computaiton Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/run-computation/routes.md)
+- [Search Data Repositories Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/search-data-repositories/routes.md)

docs/README.md

@@ -1,46 +1,41 @@
-# STRUDEL Kit Docs
+# Website
 
-Welcome to the STRUDEL Kit Docs! STRUDEL Kit is a web development toolkit for building scientific UIs based on the STRUDEL Design System and Task Flows. It consists of a command-line bootstrapping tool and a suite of React-based JavaScript templates. Visit [strudel.science](https://strudel.science) for more information about the STRUDEL project.
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
-## What's here?
+### Installation
 
-### [Getting Started Tutorial](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/0-introduction.md)
+```
+$ yarn
+```
 
-A detailed step-by-step guide on how to build and customize a Task Flow using the strudel-cli and the STRUDEL Kit React templates.
+### Local Development
 
-- [Setup](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/1-setup.md)
-- [Create a base app](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/2-create-app.md)
-- [Add a Task Flow](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/3-add-taskflow.md)
-- [Customize your task flow](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/4-customize-taskflow.md)
-- [Customize app theme and styles](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/5-customize-app.md)
-- [Customize the Home Page](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/6-customize-home-page.md)
-- [Continue learning](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/7-continue-learning.md)
+```
+$ yarn start
+```
 
-### How-Tos
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-One page instructions on different advanced STRUDEL Kit methods.
+### Build
 
-- [How to combine sections from different task flows](https://github.com/strudel-science/strudel-kit/blob/main/docs/how-to/combine-sections.md)
-- [How to connect task flows together](https://github.com/strudel-science/strudel-kit/blob/main/docs/how-to/connect-task-flows-together.md)
+```
+$ yarn build
+```
 
-### Task Flow Configuration
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-Examples and explanations for each Task Flow's configuration file. Also an example of how to connect each Task Flow to the base app's router.
+### Deployment
 
-#### Config File Examples
+Using SSH:
 
-- [Compare Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/compare-data/config.md)
-- [Contribute Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/contribute-data/config.md)
-- [Explore Data Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/explore-data/config.md)
-- [Monitor Activities Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/monitor-activities/config.md)
-- [Run Computaiton Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/run-computation/config.md)
-- [Search Data Repositories Config](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/search-data-repositories/config.md)
+```
+$ USE_SSH=true yarn deploy
+```
 
-#### Router Examples
+Not using SSH:
 
-- [Compare Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/compare-data/routes.md)
-- [Contribute Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/contribute-data/routes.md)
-- [Explore Data Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/explore-data/routes.md)
-- [Monitor Activities Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/monitor-activities/routes.md)
-- [Run Computaiton Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/run-computation/routes.md)
-- [Search Data Repositories Router](https://github.com/strudel-science/strudel-kit/blob/main/docs/task-flows/search-data-repositories/routes.md)
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

docs/blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.