Add main Hub/Base site and add the ide to /ide/blocks

[supervoidcoder]

We are planning to expand the site. The current link omniblocks.github.io leads to the block-based IDE powered by scratch/turbowarp. This is shown in the scratch-gui workflow. Since we are planning to expand to a broad school tool platform for students, we can move the ide to omniblocks.github.io/ide/blocks
This will make space for the index to be another react based hub/dashboard where you can choose what to do, like calculator, ide, etc.

[github-actions]

Hi @supervoidcoder!

This is a great proposal for organizing the OmniBlocks website. Moving the block-based IDE to and creating a new hub/dashboard at the main URL sounds like a solid step toward making the platform a more versatile tool for students. A React-based dashboard would provide a user-friendly way to navigate to tools like the calculator, IDE, and other features you might add in the future.

It’s exciting to see OmniBlocks expanding into a broader educational platform. Let me know if I can help clarify or assist with the implementation!

[supervoidcoder]

@coderabbitai how can we start implementing this? i have no clue where to start you should look in .github/workflows/scratch-gui.yml or something like that and also the build-omniblocks.sh to see how we can adapt to making scratch-gui a secondary thing like a file path and not the base site

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find and read the GitHub workflow file for scratch-gui
echo "=== Contents of .github/workflows/scratch-gui.yml ==="
cat .github/workflows/scratch-gui.yml

echo -e "\n\n=== Contents of build-omniblocks.sh ==="
cat build-omniblocks.sh

# Let's also check if there are other relevant files in the repo structure
echo -e "\n\n=== Repository structure (top level) ==="
ls -la

echo -e "\n\n=== GitHub workflows directory ==="
ls -la .github/workflows/

Length of output: 2944

---

@supervoidcoder, I've analyzed the current setup. Here's a comprehensive implementation plan:

Current Setup

• The workflow builds scratch-gui and deploys the scratch-gui/build folder directly to the root
• build-omniblocks.sh clones and builds scratch-gui with its dependencies
• Everything from scratch-gui/build becomes the base site

Implementation Plan

Step 1: Create the New Hub Site Structure

You'll need a new React-based hub/dashboard. Here's what to set up:

# Create a new directory for the hub site
mkdir hub-site
cd hub-site
npx create-react-app . --template minimal

This hub will be your main landing page with links to IDE, calculator, etc.

Step 2: Modify build-omniblocks.sh

Update the build script to create a proper directory structure:

echo "::group::Cloning repositories"
git clone https://github.com/OmniBlocks/scratch-gui --depth=1
git clone https://github.com/OmniBlocks/scratch-vm --depth=1
git clone https://github.com/OmniBlocks/scratch-blocks --depth=1
echo "::endgroup::"

echo "::group::Build scratch-blocks"
cd scratch-blocks
git branch developBuilds
npm ci
cd ..
echo "::endgroup::"

echo "::group::Build scratch-vm"
cd scratch-vm
npm ci
cd ..
echo "::endgroup::"

echo "::group::Build scratch-gui"
cd scratch-gui
npm ci
npm link ../scratch-vm
npm link ../scratch-blocks
npm run build
echo "::endgroup::"

# NEW: Create deployment structure
echo "::group::Create deployment structure"
mkdir -p deploy/ide/blocks
# Copy scratch-gui build to /ide/blocks subdirectory
cp -r scratch-gui/build/* deploy/ide/blocks/
# Build and copy hub site to root
cd hub-site
npm ci
npm run build
cp -r build/* ../deploy/
cd ..
echo "::endgroup::"

Step 3: Update .github/workflows/scratch-gui.yml

Modify the workflow to deploy from the new structure:

# Change the upload artifact step
- name: Upload artifact
  uses: actions/upload-pages-artifact@v3
  with:
    # Upload the new deploy directory instead
    path: 'deploy'

Step 4: Handle the Hub Site Repository

You have two options:

Option A: Store hub site in this repo

• Create a hub-site/ directory in this repository
• Commit the hub React app there
• Update build-omniblocks.sh to build it (as shown above)

Option B: Separate hub site repository

• Create a new OmniBlocks/hub-site repository
• Clone it in build-omniblocks.sh similar to scratch-gui:

git clone https://github.com/OmniBlocks/hub-site --depth=1

Step 5: Handle Routing and Base URLs

Important: Since scratch-gui will now be at /ide/blocks, you need to configure its base URL:

In scratch-gui, you'll need to set the homepage field in package.json:

{
  "homepage": "/ide/blocks"
}

Or update the build process to set PUBLIC_URL:

PUBLIC_URL=/ide/blocks npm run build

Quick Start Approach

If you want to start simple:

1. Create a basic index.html in the root with links to the IDE
2. Modify the build script to create this structure:

mkdir -p deploy/ide/blocks
cp -r scratch-gui/build/* deploy/ide/blocks/
cp index.html deploy/  # Your new landing page

Would you like me to help you create a basic hub site structure, or do you have a specific design in mind for the landing page?