web: separate build and deploy, incorporate landing page (#2264)

mandiant · Aug 10, 2024 · 8e4c0e3 · 8e4c0e3
1 parent 401a0ee
commit 8e4c0e3
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 21 deletions.
diff --git a/.github/workflows/deploy-webui.yml → .github/workflows/web-deploy.yml b/.github/workflows/deploy-webui.yml → .github/workflows/web-deploy.yml
@@ -1,11 +1,10 @@
-name: deploy Capa Explorer Web to Github Pages
+name: deploy web to GitHub Pages
 
 on:
-  # Runs on pushes targeting the webui branch
   push:
-    branches: [ master ]
+    branches: [ master, "wb/webui-actions-1" ]
     paths:
-      - 'web/explorer/**'
+      - 'web/**'
 
   # Allows to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -22,10 +21,17 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  build-landing-page:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/upload-artifact@v4
+        with:
+          name: landing-page
+          path: './web/public'
+
+  build-explorer:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -43,24 +49,35 @@ jobs:
       - name: Install dependencies
         run: npm ci
         working-directory: ./web/explorer
-      - name: Lint
-        run: npm run lint
-        working-directory: ./web/explorer
-      - name: Format
-        run: npm run format:check
-        working-directory: ./web/explorer
-      - name: Run unit tests
-        run: npm run test
-        working-directory: ./web/explorer
       - name: Build
         run: npm run build
         working-directory: ./web/explorer
+      - uses: actions/upload-artifact@v4
+        with:
+          name: explorer
+          path: './web/explorer/dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: [build-landing-page, build-explorer]
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: landing-page
+          path: './public/'
+      - uses: actions/download-artifact@v4
+        with:
+          name: explorer
+          path: './public/explorer'
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './web/explorer/dist'
+          path: './public'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/.gitmodules b/.gitmodules
@@ -1,6 +1,6 @@
 [submodule "rules"]
 	path = rules
-	url = ../capa-rules.git
+	url = ../../mandiant/capa-rules.git
 [submodule "tests/data"]
 	path = tests/data
-	url = ../capa-testfiles.git
+	url = ../../mandiant/capa-testfiles.git
diff --git a/web/explorer/vite.config.js b/web/explorer/vite.config.js
@@ -7,7 +7,7 @@ export default defineConfig(({ mode }) => {
     const isBundle = mode === "bundle";
 
     return {
-        base: './',
+        base: "./",
         plugins: isBundle ? [vue(), viteSingleFile()] : [vue()],
         resolve: {
             alias: {

diff --git a/web/public/img/icon.ico b/web/public/img/icon.ico
diff --git a/web/public/img/icon.png b/web/public/img/icon.png
diff --git a/web/public/index.html b/web/public/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="img/icon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>capa</title>
+    <style>
+      /*
+        Josh's Custom CSS Reset
+        https://www.joshwcomeau.com/css/custom-css-reset/
+      */
+      *, *::before, *::after {
+        box-sizing: border-box;
+      }
+      * {
+        margin: 0;
+      }
+      body {
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      img, picture, video, canvas, svg {
+        display: block;
+        max-width: 100%;
+      }
+      input, button, textarea, select {
+        font: inherit;
+      }
+      p, h1, h2, h3, h4, h5, h6 {
+        overflow-wrap: break-word;
+      }
+      #root, #__next {
+        isolation: isolate;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
+      <div>
+        <!-- this is centered -->
+        <img src="./img/icon.png" />
+        <br />
+        <a href="./explorer/">capa Explorer Web<a>
+      </div>
+    </div>
+  </body>
+</html>