Added Frontend build process to CI workflow (#17)

* Remove compiled JS files * Added initial frontend code * Added variable retry time * npm audit fix * remove lint call * Using now Vite to build frontend * Using now Vite to build frontend * Build a local dev proxy based on ofetch * Added cleanup mechanic for broken images in store Simplified fetch to download endpoint * Query status before attempting to download * Fix images being deleted from storage * Change try/catch order * Make "Select all" a toggle * Make whole item clickable for selection * Slight style improvements * Slight style improvements * Slight style improvements * Fix average error message for non-selected items * Added connection indicator * Strogner indication for selected items
untoxa · Jan 18, 2025 · 18c6ad7 · 18c6ad7
1 parent 184b40f
commit 18c6ad7
Show file tree

Hide file tree

Showing 45 changed files with 1,926 additions and 435 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.svg]
+insert_final_newline = false
diff --git a/.github/workflows/cmake-single-platform.yml b/.github/workflows/cmake-single-platform.yml
@@ -16,6 +16,22 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v4
 
+    - name: Setup node.js
+      uses: actions/[email protected]
+      with:
+        node-version: '20.x'
+
+    - name: Install npm dependencies
+      run: |
+        cd frontend
+        npm cache clear -f
+        npm install
+
+    - name: Build frontend
+      run: |
+        cd frontend
+        npm run build
+
     - name: Install dependencies
       run: |
         sudo apt-get update
@@ -43,4 +59,4 @@ jobs:
       uses: actions/upload-artifact@v4
       with:
         name: pico-gb-printer-firmware
-        path: build/pico_gb_printer.uf2
+        path: build/pico_gb_printer.uf2
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,7 @@
 .vscode
+.idea
 build
 unused
 gen_build.bat
+fs/
+frontend/node_modules
diff --git a/fs/index.html → frontend/index.html b/fs/index.html → frontend/index.html
@@ -1,11 +1,12 @@
-
+<!doctype html>
 <html lang="en">
 <head>
   <title>Pico Game Boy Printer</title>
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/site.webmanifest">
+  <link rel="stylesheet" href="./src/style.css">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cc3366">
   <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/iPhone_14_Pro_Max__iPhone_14_Max__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png">
   <link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/iPhone_14_Pro__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png">
@@ -17,24 +18,16 @@
   <meta name="msapplication-TileColor" content="#ece6e6">
   <meta name="theme-color" content="#ece6e6">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; text-align: center; }
-    button { padding: 5px 10px; margin: 1px; font-size: 1rem; }
-    h1 { font-size: 2rem; }
-    .gallery-image { padding: 0 5px 10px 5px; }
-    .marked-for-action { background-color: #ddd; }
-  </style>
 </head>
 <body>
-<div id="header">
+<header>
   <h1>Pico Game Boy Printer</h1>
+  <span class="indicator"></span>
   <button id="select_all_btn" disabled>Select All</button>
   <button id="delete_selected_btn" disabled>Delete</button>
   <button id="average_selected_btn" disabled>Average</button>
-  <br>
-  <br>
-</div>
-<div id="gallery" style="display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;"></div>
-<script type="module" src="./index.js"></script>
+</header>
+<div id="gallery" class="gallery"></div>
+<script type="module" src="./src/index.ts"></script>
 </body>
 </html>