[2.5] Web updates

.github/workflows/deploy.yml

@@ -1,27 +1,34 @@
-name: Deploy to GitHub Pages
+name: Deploy to gh-pages
 
 on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
+  # Trigger the workflow if any web/** files are modified
   push:
-    branches: [ main ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
+    branches:
+      - "main"
+      - "2.5"
+    paths:
+      - 'web/**'
   workflow_dispatch:
 
 env:
   site_path: ./web
+  version_path: /
 
 # Allow this job to clone the repo and create a page deployment
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout your repository using git
+      - name: Update version_path for non-main branches
+        if: ${{ github.ref_type == 'branch' && github.ref_name != 'main'}}
+        run: echo version_path=/version/${{ github.ref_name }}/ >> $GITHUB_ENV
+
+      - name: Checkout your repository
         uses: actions/checkout@v4
 
       - name: Setup Node
@@ -31,28 +38,20 @@ jobs:
           cache: npm
           cache-dependency-path: "${{ env.site_path }}/package-lock.json"
 
-      - name: Install
-        shell: "bash"
-        working-directory: ${{ env.site_path }}
+      - name: Install dependencies
         run: npm install
-
-      - name: Build
-        shell: "bash"
         working-directory: ${{ env.site_path }}
+
+      - name: Build project
         run: npm run build
+        env:
+          PUBLIC_GH_BRANCH: ${{ github.ref_name }}
+        working-directory: ${{ env.site_path }}
 
-      - name: Upload Pages Artifact
-        uses: actions/upload-pages-artifact@v3
+      - name: Deploy
+        uses: JamesIves/github-pages-[email protected]
         with:
-          path: "${{ env.site_path }}/dist/"
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+          branch: gh-pages
+          folder: ${{ env.site_path }}/dist
+          target-folder: ${{ env.version_path }}
+          clean-exclude: version

web/astro.config.mjs

@@ -1,8 +1,10 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 
+const branch = process.env.PUBLIC_GH_BRANCH;
+
 export default defineConfig({
   site: "https://nvidia.github.io",
-  base: "/NVFlare",
+  base: branch === 'main' ? '/NVFlare' : `/NVFlare/version/${branch}`,
   integrations: [tailwind()],
 });

web/src/components/code.astro

@@ -15,6 +15,8 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 import GoogleColab from '../images/google_colab.svg.png'
 
+const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
+
 // PyTorch Code Sections --------------------------------------------------
 
 const installCode_pt = `
@@ -625,8 +627,8 @@ python3 fedavg_cifar10_tf_job.py
 const frameworks = [
   {
     id: "pytorch",
-    colab_link: "https://colab.research.google.com/github/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_pt_getting_started.ipynb",
-    github_link: "https://github.com/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_pt_getting_started.ipynb",
+    colab_link: `https://colab.research.google.com/github/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_pt_getting_started.ipynb`,
+    github_link: `https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_pt_getting_started.ipynb`,
     sections: [
       {
         id: "install-pytorch",
@@ -679,8 +681,8 @@ const frameworks = [
   },
   {
     id: "lightning",
-    colab_link: "https://colab.research.google.com/github/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_lightning_getting_started.ipynb",
-    github_link: "https://github.com/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_lightning_getting_started.ipynb",
+    colab_link: `https://colab.research.google.com/github/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_lightning_getting_started.ipynb`,
+    github_link: `https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_lightning_getting_started.ipynb`,
     sections: [
       {
         id: "install-lightning",
@@ -733,8 +735,8 @@ const frameworks = [
   },
   {
     id: "tensorflow",
-    colab_link: "https://colab.research.google.com/github/NVIDIA/NVFlare/blob/main/examples/getting_started/tf/nvflare_tf_getting_started.ipynb",
-    github_link: "https://github.com/NVIDIA/NVFlare/blob/main/examples/getting_started/tf/nvflare_tf_getting_started.ipynb",
+    colab_link: `https://colab.research.google.com/github/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/tf/nvflare_tf_getting_started.ipynb`,
+    github_link: `https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/tf/nvflare_tf_getting_started.ipynb`,
     sections: [
       {
         id: "install-tensorflow",
@@ -838,7 +840,7 @@ const frameworks = [
       </div>
 
       <!-- Google Colab Button -->
-      <a id="colab-button" href="https://colab.research.google.com/github/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_pt_getting_started.ipynb" target="_blank" rel="noopener noreferrer" class="text-xs font-semibold text-gray-900 dark:text-gray-400 m-0.5 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+      <a id="colab-button" href=`https://colab.research.google.com/github/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_pt_getting_started.ipynb` target="_blank" rel="noopener noreferrer" class="text-xs font-semibold text-gray-900 dark:text-gray-400 m-0.5 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
         <span id="default-message" class="inline-flex items-center">
           <svg class="w-0 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
               <img class="w-6 me-1.5" src={GoogleColab.src} alt="NVIDIA logo">
@@ -848,7 +850,7 @@ const frameworks = [
       </a>
 
       <!-- View on Github Button -->
-      <a id="github-button" href="https://github.com/NVIDIA/NVFlare/blob/7055e1ad2adc97c114678f65f36b189f8641ef3e/examples/getting_started/pt/nvflare_pt_getting_started.ipynb" target="_blank" rel="noopener noreferrer" class="text-xs font-semibold text-gray-900 dark:text-gray-400 m-0.5 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+      <a id="github-button" href=`https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_pt_getting_started.ipynb` target="_blank" rel="noopener noreferrer" class="text-xs font-semibold text-gray-900 dark:text-gray-400 m-0.5 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
         <span id="default-message" class="inline-flex items-center">
           <svg class="w-4 h-4 text-black dark:text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
             <path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
@@ -908,17 +910,6 @@ const frameworks = [
     <!-- Run wrapper -->
     <div id="run-wrapper" class="mx-auto max-w-5xl py-4 text-left"></div>
 
-    <!-- Tutorial Catalog Button -->
-    <div class="mt-32 text-center">
-      <p class="text-lg mt-4 mb-8 text-slate-600 w-3/4 m-auto">
-        To dive deeper into what NVIDIA FLARE has to offer, explore our catalog of various tutorials and examples showcasing everything from the core features to advanced applications.
-      </p>
-      <a
-        href="/NVFlare/catalog"
-        class="rounded-md bg-nvidia px-3.5 py-2.5 text-mg font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
-        >Tutorial Catalog -></a
-      >
-    </div>
   </div>
 </div>
 

web/src/components/footer.astro

@@ -1,11 +1,14 @@
 ---
 import NvidiaLogo from '../images/nvidia_eye.png';
+
+const base_url = import.meta.env.BASE_URL;
+
 ---
 <footer class="bg-gray-100 dark:bg-gray-900">
   <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
       <div class="md:flex md:justify-between">
         <div class="mb-6 md:mb-0">
-            <a href="/NVFlare" class="flex items-center">
+            <a href={base_url} class="flex items-center">
                 <img class="flex items-center h-8 me-3" src={NvidiaLogo.src} alt="NVIDIA logo">
                 <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">NVIDIA FLARE</span>
             </a>

web/src/components/gettingStarted.astro

@@ -1,4 +1,6 @@
 ---
+const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
+
 const walkthrough = [
   {
     id: "step1",
@@ -17,7 +19,7 @@ const walkthrough = [
     description:
       "Use the ModelController API to write a federated control flow for FedAvg.",
     button_text: "View Source",
-    link: "https://github.com/NVIDIA/NVFlare/blob/main/nvflare/app_common/workflows/fedavg.py",
+    link: `https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/nvflare/app_common/workflows/fedavg.py`,
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20Getting%20Started%20-%20Part%202%20-%20Server.mp4",
   },
   {
@@ -27,7 +29,7 @@ const walkthrough = [
     description:
       "Use the Client API to write local training code for a PyTorch CIFAR-10 trainer.",
     button_text: "View Source",
-    link: "https://github.com/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/src/cifar10_fl.py",
+    link: `https://github.com/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/src/cifar10_fl.py`,
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20Getting%20Started%20-%20Part%203%20-%20Client.mp4",
   },
   {
@@ -37,7 +39,7 @@ const walkthrough = [
     description:
       "Formulate the NVIDIA FLARE job and simulate a federated run with the multi-process simulator.",
     button_text: "View Notebook",
-    link: "https://colab.research.google.com/github/NVIDIA/NVFlare/blob/main/examples/getting_started/pt/nvflare_pt_getting_started.ipynb",
+    link: `https://colab.research.google.com/github/NVIDIA/NVFlare/blob/${gh_branch}/examples/getting_started/pt/nvflare_pt_getting_started.ipynb`,
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20Getting%20Started%20-%20Part%204%20-%20Job.mp4",
   },
   {
@@ -47,7 +49,7 @@ const walkthrough = [
     description:
       "Learn more about NVIDIA FLARE and taking federated learning from simulation to the real world.",
     button_text: "Tutorial Catalog",
-    link: "/NVFlare/catalog",
+    link: "catalog",
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20Getting%20Started%20-%20Part%205%20-%20Next%20Steps.mp4",
   },
 ];
@@ -70,7 +72,7 @@ const km = [
     description:
       "What is Kaplan-Meier Analysis and how can we adapt it to a federated setting?",
     button_text: "View Source",
-    link: "https://github.com/NVIDIA/NVFlare/tree/main/examples/advanced/kaplan-meier-he",
+    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/kaplan-meier-he`,
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20KM%20-%20Part%202%20-%20Kaplan%20Meier.mp4",
   },
   {
@@ -80,7 +82,7 @@ const km = [
     description:
       "Dive into an end-to-end implementation of federated Kaplan-Meier.",
     button_text: "View Source",
-    link: "https://github.com/NVIDIA/NVFlare/tree/main/examples/advanced/kaplan-meier-he/src",
+    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/kaplan-meier-he/src`,
     video: "https://developer.download.nvidia.com/assets/Clara/flare/Flare%202.5.0%20KM%20-%20Part%203%20-%20Implementation.mp4",
   },
 ];
@@ -108,7 +110,7 @@ const series = [
     <div class="mt-5 mb-2 border-b border-gray-200 dark:border-gray-700">
       <ul class="flex flex-wrap -mb-px text-xl font-medium text-center place-content-center space-x-24" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-nvidia hover:text-nvidia dark:text-nvidia-light dark:hover:text-nvidia-light border-nvidia dark:border-nvidia-light" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-transparent hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
           <li class="me-2" role="presentation">
-            <button class="inline-block p-4 border-b-2 rounded-t-lg font-bold hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="walkthrough-tab" data-tabs-target="#series0" type="button" role="tab" aria-controls="settings" aria-selected="false">NVIDIA FLARE Walkthrough: CIFAR-10</button>
+            <button class="inline-block p-4 border-b-2 rounded-t-lg font-bold hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="walkthrough-tab" data-tabs-target="#series0" type="button" role="tab" aria-controls="settings" aria-selected="false">Walkthrough: CIFAR-10</button>
           </li>
           <li class="me-2" role="presentation">
               <button class="inline-block p-4 border-b-2 rounded-t-lg font-bold" id="km-tab" data-tabs-target="#series1" type="button" role="tab" aria-controls="profile" aria-selected="false">End-to-End: Kaplan-Meier</button>