Merge pull request #12864 from CesiumGS/sandcastle-v2

Merge Sandcastle v2

Author: ggetz

.github/actions/verify-package/script.sh

@@ -15,7 +15,9 @@ cp cesium*.tgz ../test
 cp Specs/test.*js ../test
 cd ../test
 
-npm install cesium*.tgz
+npm install cesium-engine*.tgz
+npm install cesium-widgets*.tgz
+npm install cesium-1.*.tgz
 NODE_ENV=development node test.cjs
 NODE_ENV=production node test.cjs
-node test.mjs
+node test.mjs

.github/workflows/deploy.yml

@@ -22,6 +22,8 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GITHUB_REPO: ${{ github.repository }}
       GITHUB_SHA: ${{ github.sha }}
+      BASE_URL: /cesium/${{ github.ref_name }}/
+      DEPLOYED_URL: https://ci-builds.cesium.com/cesium/${{ github.ref_name }}/
     steps:
       - uses: actions/checkout@v5
       - name: install node 22
@@ -40,6 +42,8 @@ jobs:
         run: npm pack --workspaces &> /dev/null
       - name: build apps
         run: npm run build-apps
+      - name: build sandcastle v2
+        run: npm run build-ci -w packages/sandcastle -- -l warn
       - uses: ./.github/actions/verify-package
       - name: deploy to s3
         if: ${{ env.AWS_ACCESS_KEY_ID != '' }}

.github/workflows/sandcastle-dev.yml

@@ -0,0 +1,35 @@
+name: sandcastle-dev
+on:
+  push:
+    branches:
+      - 'cesium.com'
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    env:
+      PROD: true
+      AWS_ACCESS_KEY_ID: ${{ secrets.PROD_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.PROD_AWS_SECRET_ACCESS_KEY }}
+      AWS_REGION: us-east-1
+      BRANCH: ${{ github.ref_name }}
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      GITHUB_REPO: ${{ github.repository }}
+      GITHUB_SHA: ${{ github.sha }}
+    steps:
+      - uses: actions/checkout@v5
+      - name: install node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: npm install
+        run: npm install
+      - name: build website release
+        run: npm run website-release
+      - name: build types
+        run: npm run build-ts
+      - name: build prod sandcastle
+        run: npm run build-prod -w packages/sandcastle -- -l warn
+      - name: deploy to dev-sandcastle.cesium.com
+        if: ${{ env.AWS_ACCESS_KEY_ID != '' }}
+        run: |
+          aws s3 sync Build/Sandcastle2/ s3://cesium-dev-sandcastle-website/ --cache-control "public, max-age=1800" --delete

.markdownlintignore

@@ -1,4 +1,5 @@
 /node_modules
+packages/sandcastle/node_modules
 /ThirdParty
 /Tools/**
 

.prettierignore

@@ -18,6 +18,7 @@
 !**/*.html
 !**/*.md
 !**/*.ts
+!**/*.tsx
 
 # Re-ignore a few things caught above
 
@@ -33,6 +34,9 @@ packages/widgets/Build/**
 packages/widgets/index.js
 packages/widgets/Source/ThirdParty/**
 
+packages/sandcastle/node_modules/**
+Apps/Sandcastle2/**
+
 Specs/jasmine/**
 
 Apps/Sandcastle/ThirdParty

Apps/Sandcastle/CesiumSandcastle.css

@@ -49,6 +49,15 @@ body {
   float: right;
 }
 
+#banner {
+  text-align: center;
+  background: #daf6ff;
+
+  a {
+    color: blue;
+  }
+}
+
 #codeContainer {
   width: 40%;
 }
@@ -186,25 +195,6 @@ a.linkButton:hover {
   overflow: auto !important;
 }
 
-.feedback {
-  width: 250px;
-
-  .future-banner {
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-    text-align: center;
-    flex-direction: column;
-
-    h3 {
-      margin: 0 1em;
-    }
-    p {
-      margin: 1em 1.5em;
-    }
-  }
-}
-
 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
   background-position: 0 -103px;
 }

Apps/Sandcastle/index.html

@@ -76,6 +76,15 @@
       data-dojo-type="dijit.layout.BorderContainer"
       data-dojo-props="design: 'headline', gutters: true, liveSplitters: true"
     >
+      <div
+        id="banner"
+        data-dojo-type="dijit.layout.ContentPane"
+        data-dojo-props="region: 'top'"
+      >
+        <a href="https://dev-sandcastle.cesium.com"
+          >Try the new version of Sandcastle today!</a
+        >
+      </div>
       <div
         id="toolbar"
         data-dojo-type="dijit.Toolbar"
@@ -341,36 +350,8 @@
             </div>
           </div>
         </div>
-        <div
-          class="feedback"
-          data-dojo-type="dijit.layout.TabContainer"
-          data-dojo-props="region: 'right'"
-        >
-          <div
-            class="future-banner"
-            data-dojo-type="dijit.layout.ContentPane"
-            data-dojo-props="title: 'Feedback'"
-          >
-            <h3>Help needed</h3>
-            <p>
-              We're currently gathering user feedback to make Sandcastle even
-              better.
-            </p>
-            <button data-dojo-type="dijit/form/Button" type="button">
-              Please share your thoughts!
-              <script
-                type="dojo/on"
-                data-dojo-event="click"
-                data-dojo-args="evt"
-              >
-                window.open("https://community.cesium.com/t/upgrading-sandcastle-we-need-your-input/39715/", "_blank")
-              </script>
-            </button>
-          </div>
-        </div>
       </div>
     </div>
-
     <div class="dijitTooltip dijitTooltipBelow" id="docPopup">
       <div
         class="dijitTooltipContainer dijitTooltipContents"

eslint.config.js

@@ -1,6 +1,9 @@
 import globals from "globals";
 import html from "eslint-plugin-html";
 import configCesium from "@cesium/eslint-config";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default [
   {
@@ -15,6 +18,11 @@ export default [
       "Apps/HelloWorld.html",
       "Apps/Sandcastle/jsHintOptions.js",
       "Apps/Sandcastle/gallery/gallery-index.js",
+      "Apps/Sandcastle2/",
+      "packages/sandcastle/public/",
+      "packages/sandcastle/templates/Sandcastle.d.ts",
+      "packages/sandcastle/templates/Sandcastle.js",
+      "packages/sandcastle/gallery/pagefind/",
       "packages/engine/Source/Scene/GltfPipeline/**/*",
       "packages/engine/Source/Shaders/**/*",
       "Specs/jasmine/*",
@@ -32,7 +40,13 @@ export default [
     ...configCesium.configs.node,
   },
   {
-    files: [".github/**/*.js", "scripts/**/*.js", "gulpfile.js", "server.js"],
+    files: [
+      ".github/**/*.js",
+      "scripts/**/*.js",
+      "packages/sandcastle/scripts/**/*.js",
+      "gulpfile.js",
+      "server.js",
+    ],
     ...configCesium.configs.node,
     languageOptions: {
       ...configCesium.configs.node.languageOptions,
@@ -41,6 +55,7 @@ export default [
   },
   {
     files: ["packages/**/*.js", "Apps/**/*.js", "Specs/**/*.js", "**/*.html"],
+    ignores: ["packages/sandcastle/scripts/**/*.js"],
     ...configCesium.configs.browser,
     plugins: { html },
     rules: {
@@ -86,6 +101,48 @@ export default [
       sourceType: "module",
     },
   },
+  ...[...tseslint.configs.recommended].map((config) => ({
+    // This is needed to restrict to a specific path unless using the tseslint.config function
+    // https://typescript-eslint.io/packages/typescript-eslint#config
+    ...config,
+    files: ["packages/sandcastle/**/*.{ts,tsx}"],
+  })),
+  {
+    // This config came from the vite project generation
+    files: ["packages/sandcastle/**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  {
+    files: ["packages/sandcastle/gallery/**/*.js"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+    },
+    rules: {
+      "no-alert": "off",
+    },
+  },
+  {
+    files: ["packages/sandcastle/gallery/hello-world/main.js"],
+    rules: {
+      // ignore this rule here to avoid the excessive eslint-disable comment in our bare minimum example
+      "no-unused-vars": "off",
+    },
+  },
   {
     files: ["Specs/**/*", "packages/**/Specs/**/*"],
     languageOptions: {

gulpfile.js

@@ -43,8 +43,18 @@ if (/\.0$/.test(version)) {
   version = version.substring(0, version.length - 2);
 }
 const karmaConfigFile = resolve("./Specs/karma.conf.cjs");
+function getWorkspaces(onlyDependencies = false) {
+  const dependencies = Object.keys(packageJson.dependencies);
+  return onlyDependencies
+    ? packageJson.workspaces.filter((workspace) => {
+        return dependencies.includes(
+          workspace.replace("packages", `@${scope}`),
+        );
+      })
+    : packageJson.workspaces;
+}
 
-const devDeployUrl = "https://ci-builds.cesium.com/cesium/";
+const devDeployUrl = process.env.DEPLOYED_URL;
 const isProduction = process.env.PROD;
 
 //Gulp doesn't seem to have a way to get the currently running tasks for setting
@@ -247,7 +257,7 @@ export async function buildTs() {
   } else if (argv.workspace) {
     workspaces = argv.workspace;
   } else {
-    workspaces = packageJson.workspaces;
+    workspaces = getWorkspaces(true);
   }
 
   // Generate types for passed packages in order.
@@ -400,7 +410,7 @@ export async function buildDocs() {
       stdio: "inherit",
       env: Object.assign({}, process.env, {
         CESIUM_VERSION: version,
-        CESIUM_PACKAGES: packageJson.workspaces,
+        CESIUM_PACKAGES: getWorkspaces(true),
       }),
     },
   );
@@ -698,12 +708,10 @@ export async function deployStatus() {
   const status = argv.status;
   const message = argv.message;
 
-  const deployUrl = `${devDeployUrl + process.env.BRANCH}/`;
+  const deployUrl = `${devDeployUrl}`;
   const zipUrl = `${deployUrl}Cesium-${version}.zip`;
   const npmUrl = `${deployUrl}cesium-${version}.tgz`;
-  const coverageUrl = `${
-    devDeployUrl + process.env.BRANCH
-  }/Build/Coverage/index.html`;
+  const coverageUrl = `${devDeployUrl}Build/Coverage/index.html`;
 
   return Promise.all([
     setStatus(status, deployUrl, message, "deployment"),
@@ -1490,8 +1498,8 @@ async function getLicenseDataFromThirdPartyExtra(path, discoveredDependencies) {
           return result;
         }
 
-        // Resursively check the workspaces
-        for (const workspace of packageJson.workspaces) {
+        // Recursively check the workspaces
+        for (const workspace of getWorkspaces(true)) {
           const workspacePackageJson = require(`./${workspace}/package.json`);
           result = await getLicenseDataFromPackage(
             workspacePackageJson,

index.html

@@ -33,7 +33,12 @@
           </li>
           <li>
             <a href="Apps/Sandcastle/index.html">Sandcastle</a>
-            (<a href="Build/Apps/Sandcastle/index.html">built version</a>)
+            <ul>
+              <li>
+                <a href="Build/Apps/Sandcastle/index.html">Built Sandcastle</a>
+              </li>
+              <li><a href="Apps/Sandcastle2/index.html">Sandcastle v2</a></li>
+            </ul>
           </li>
           <li>
             <a href="Apps/CesiumViewer/index.html?inspector=true"