add CI/CD

Lenni009 · Lenni009 · commit 68e530d98936 · 2023-09-10T12:32:23.000+02:00
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -0,0 +1,40 @@
+name: Build
+
+run-name: Build Code
+
+on:
+  push:
+    branches: ['main']
+
+permissions:
+  contents: write
+
+concurrency:
+  group: "build"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+          cd dist
+          touch .nojekyll
+
+      - name: Minify Code
+        uses: Lenni009/minify-js@main
+        with:
+          directory: dist
+          overwrite: true
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist # The folder the action should deploy.
diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
@@ -0,0 +1,25 @@
+name: Test Build
+run-name: Test Build
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+concurrency:
+  group: "testbuild"
+  cancel-in-progress: true
+
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      pull-requests: write
+      contents: write
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Test Build
+        uses: Lenni009/test-build-vite-action@main
diff --git a/index.html b/index.html
@@ -4,18 +4,30 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
+	<title>Image Compressor</title>
 	<script type="module" src="src/main.ts"></script>
+	<style>
+		h1 {
+			text-align: center;
+		}
+
+		.container {
+			margin-block-start: 1rem;
+		}
+	</style>
 </head>
 
 <body>
-	<h1>Image Compressor</h1>
-	<h2>Input</h2>
-	<input type="file">
+	<div class="container">
+		<h1>Image Compressor</h1>
+		<p>Compresses Images to below 10MB</p>
+		<h2>Input</h2>
+		<input type="file">
 
-	<h2>Output</h2>
-	<a href="" id="download" download style="display: none;">Download</a>
-	<p id="status" style="display: none;">Compressing...</p>
+		<h2>Output</h2>
+		<a href="" id="download" download style="display: none;">Download</a>
+		<p id="status" style="display: none;">Compressing...</p>
+	</div>
 </body>
 
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -1,3 +1,4 @@
+import '@picocss/pico';
 import { compress, EImageType } from 'image-conversion';
 
 const input = document.querySelector('input');
@@ -30,10 +31,10 @@ async function compressFile(file: File): Promise<Blob> {
 	if (file.size < maxSize) return file; // if below 10 MB, don't do anything
 	const name = file.name;
 	const res = await compress(file, {
-		quality, //The compressed image size is 9000kb
+		quality,
 		type: EImageType.JPEG,
 		scale: 1,
-	}); // NoSonar compress to 9MB
+	});
 	quality -= 0.01;	// NoSonar reduce quality by 1%;
 	if (res.size > maxSize) return await compressFile(new File([res], name, { type: 'image/jpeg' }));
 	quality = 1;	// reset quality
