Skip to content

Commit

Permalink
Added service worker & ready for deploy
Browse files Browse the repository at this point in the history
  • Loading branch information
dinoosauro committed Jun 10, 2024
1 parent 6c47a86 commit 41b60f8
Show file tree
Hide file tree
Showing 15 changed files with 237 additions and 12 deletions.
46 changes: 46 additions & 0 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Install dependencies
run: npm i
- name: Build website
run: npx vite build --base=image-converter
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: 'dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
17 changes: 17 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="manifest" href="./manifest.json" />
<link rel="apple-touch-icon" href="./assets/icon.png" />
<meta name="apple-mobile-web-app-status-bar" content="#151515" />
<meta name="theme-color" content="#138375" />
<title>image-converter</title>
<style>
.index {
Expand All @@ -18,6 +23,18 @@
<label class="index">Convert and compress images saved on your device or from your clipboard. With image-converter,
you can convert image from various formats, and compress or convert them directly on your device.</label>
<script type="module" src="/src/main.ts"></script>
<script>
if ('serviceWorker' in navigator) {
let registration;
const registerServiceWorker = async () => {
registration = await navigator.serviceWorker.register('./service-worker.js', { scope: window.location.href.substring(0, window.location.href.lastIndexOf("/") + 1) });
};
registerServiceWorker();
}
const appVersion = "2.0.0";
fetch("./updatecode.txt", { cache: "no-store" }).then((res) => res.text().then((text) => { if (text.replace("\n", "") !== appVersion) if (confirm(`There's a new version of image-converter. Do you want to update? [${appVersion} --> ${text.replace("\n", "")}]`)) { caches.delete("imageconverter-cache"); location.reload(true); } }).catch((e) => { console.error(e) })).catch((e) => console.error(e));
</script>

</body>

</html>
File renamed without changes
72 changes: 72 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{
"name": "image-converter",
"short_name": "image-converter",
"start_url": "index.html",
"display": "standalone",
"background_color": "#151515",
"theme_color": "#138375",
"orientation": "any",
"icons": [
{
"src": "./icon.png",
"type": "image/png",
"sizes": "512x512"
}
],
"file_handlers": [
{
"action": "./",
"accept": {
"image/jpeg": [
".jpg",
".jpeg",
".jfif",
".pjpeg",
".pjp",
".heic",
".heif",
".heifs",
".heics"
],
"image/png": [
".png"
],
"image/gif": [
".gif"
],
"image/webp": [
".webp"
],
"image/avif": [
".avif"
],
"image/apng": [
".apng"
],
"image/bmp": [
".bmp"
],
"image/x-icon": [
".ico",
".cur"
],
"image/tiff": [
".tiff",
".tif"
],
"image/heic": [
".heif",
".heifs",
".heic",
".heics"
],
"image/heif": [
".heif",
".heifs",
".heic",
".heics"
]
}
}
]
}
37 changes: 37 additions & 0 deletions public/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const cacheName = 'imageconverter-cache';
const filestoCache = [
'./',
'./index.html',
'./icon.png',
'./assets/icon.svg',
'./assets/heic2any.js',
'./assets/index.css',
'./assets/index.js',
'./assets/index2.js',
'./assets/UTIF.js',
'https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap'
];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(filestoCache))
);
});
self.addEventListener('activate', e => self.clients.claim());
self.addEventListener('fetch', event => {
const req = event.request;
if (req.url.indexOf("updatecode") !== -1) return fetch(req); else event.respondWith(networkFirst(req));
});

async function networkFirst(req) {
try {
const networkResponse = await fetch(req);
const cache = await caches.open('imageconverter-cache');
await cache.delete(req);
await cache.put(req, networkResponse.clone());
return networkResponse;
} catch (error) {
const cachedResponse = await caches.match(req);
return cachedResponse;
}
}
1 change: 1 addition & 0 deletions public/updatecode.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
2.0.0
16 changes: 12 additions & 4 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import Picker from "./lib/Picker.svelte";
import Resize from "./lib/ImageEditing/Resize.svelte";
import Filter from "./lib/ImageEditing/Filter.svelte";
import PWAPrompt from "./lib/PWAPrompt.svelte";
import CanvasRender from "./lib/ImageEditing/CanvasRender.svelte";
import ImagePicker from "./lib/ImageEditing/ImagePicker.svelte";
import ExportDialog from "./lib/ExportDialog.svelte";
Expand Down Expand Up @@ -117,7 +118,12 @@
</svelte:head>
<Header></Header><br />
{#if $conversionStatus === 0}
<Picker></Picker>
<div class="flex multiPage">
<Picker></Picker>
{#if !window.matchMedia("(display-mode: standalone)").matches}
<PWAPrompt></PWAPrompt>
{/if}
</div>
{:else if $conversionStatus === 1}
<ImagePicker></ImagePicker><br />
<div class="flex multiPage">
Expand All @@ -131,7 +137,10 @@
{/if}
<ExportDialog></ExportDialog>
<br /><br /><br />
<span style="position: absolute; right: 15px; top: 15px; transform: scale(0.9)">
<span
style="position: absolute; right: 15px; top: 15px; transform: scale(0.9)"
class="pointer"
>
<Assets imgKey="settings" click={() => (dialogShow = 1)}></Assets>
</span>
{#if dialogShow === 1}
Expand Down Expand Up @@ -189,12 +198,11 @@
>GitHub</a
>
</p>
<br />
<p>
image-converter also uses some third-party libraries to work. You can
see their licenses below, by selecting their name.
</p>
<br /><br />
<br />
<div class="card">
<select bind:value={selectedLicense}>
{#each availableLicenses as { name }}
Expand Down
4 changes: 3 additions & 1 deletion src/Scripts/ImageContentHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ export function ImageRes(key: AssetsType) {
image: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z"/></svg>`,
color: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M3.839 5.858c2.94-3.916 9.03-5.055 13.364-2.36 4.28 2.66 5.854 7.777 4.1 12.577-1.655 4.533-6.016 6.328-9.159 4.048-1.177-.854-1.634-1.925-1.854-3.664l-.106-.987-.045-.398c-.123-.934-.311-1.352-.705-1.572-.535-.298-.892-.305-1.595-.033l-.351.146-.179.078c-1.014.44-1.688.595-2.541.416l-.2-.047-.164-.047c-2.789-.864-3.202-4.647-.565-8.157Zm.984 6.716.123.037.134.03c.439.087.814.015 1.437-.242l.602-.257c1.202-.493 1.985-.54 3.046.05.917.512 1.275 1.298 1.457 2.66l.053.459.055.532.047.422c.172 1.361.485 2.09 1.248 2.644 2.275 1.65 5.534.309 6.87-3.349 1.516-4.152.174-8.514-3.484-10.789-3.675-2.284-8.899-1.306-11.373 1.987-2.075 2.763-1.82 5.28-.215 5.816Zm11.225-1.994a1.25 1.25 0 1 1 2.414-.647 1.25 1.25 0 0 1-2.414.647Zm.494 3.488a1.25 1.25 0 1 1 2.415-.647 1.25 1.25 0 0 1-2.415.647ZM14.07 7.577a1.25 1.25 0 1 1 2.415-.647 1.25 1.25 0 0 1-2.415.647Zm-.028 8.998a1.25 1.25 0 1 1 2.414-.647 1.25 1.25 0 0 1-2.414.647Zm-3.497-9.97a1.25 1.25 0 1 1 2.415-.646 1.25 1.25 0 0 1-2.415.646Z"/></svg>`,
folder: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M3.5 6.25V8h4.629a.75.75 0 0 0 .53-.22l1.53-1.53-1.53-1.53a.75.75 0 0 0-.53-.22H5.25A1.75 1.75 0 0 0 3.5 6.25Zm-1.5 0A3.25 3.25 0 0 1 5.25 3h2.879a2.25 2.25 0 0 1 1.59.659L11.562 5.5h7.189A3.25 3.25 0 0 1 22 8.75v9A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75V6.25ZM3.5 9.5v8.25c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75v-9A1.75 1.75 0 0 0 18.75 7h-7.19L9.72 8.841a2.25 2.25 0 0 1-1.591.659H3.5Z"/></svg>`,
paragraph: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M16.5 8a4.25 4.25 0 0 0 0 8.5h.5v4.75a.75.75 0 0 0 1.5 0V9.5h1v11.75a.75.75 0 0 0 1.5 0V9.5h.25a.75.75 0 0 0 0-1.5H16.5Zm0 1.5h.5V15h-.5a2.75 2.75 0 1 1 0-5.5ZM2.75 5a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 0-1.5H2.75Zm0 5a.75.75 0 0 0 0 1.5h8.553c.076-.53.23-1.034.452-1.5H2.75Zm9.277 5H2.75a.75.75 0 0 0 0 1.5h10.667a5.278 5.278 0 0 1-1.39-1.5Z"/></svg>`
paragraph: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M16.5 8a4.25 4.25 0 0 0 0 8.5h.5v4.75a.75.75 0 0 0 1.5 0V9.5h1v11.75a.75.75 0 0 0 1.5 0V9.5h.25a.75.75 0 0 0 0-1.5H16.5Zm0 1.5h.5V15h-.5a2.75 2.75 0 1 1 0-5.5ZM2.75 5a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 0-1.5H2.75Zm0 5a.75.75 0 0 0 0 1.5h8.553c.076-.53.23-1.034.452-1.5H2.75Zm9.277 5H2.75a.75.75 0 0 0 0 1.5h10.667a5.278 5.278 0 0 1-1.39-1.5Z"/></svg>`,
apps: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="m18.492 2.33 3.179 3.18a2.25 2.25 0 0 1 0 3.182l-2.584 2.584A2.25 2.25 0 0 1 21 13.5v5.25A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25A2.25 2.25 0 0 1 5.25 3h5.25a2.25 2.25 0 0 1 2.225 1.915l2.585-2.585a2.25 2.25 0 0 1 3.182 0ZM4.5 18.75c0 .415.336.75.75.75h5.999l.001-6.75H4.5v6Zm8.249.75h6.001a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75h-6.001v6.75ZM10.5 4.5H5.25a.75.75 0 0 0-.75.75v6h6.75v-6a.75.75 0 0 0-.75-.75Zm2.25 4.81v1.94h1.94l-1.94-1.94Zm3.62-5.918L13.193 6.57a.75.75 0 0 0 0 1.061l3.179 3.179a.75.75 0 0 0 1.06 0l3.18-3.179a.75.75 0 0 0 0-1.06l-3.18-3.18a.75.75 0 0 0-1.06 0Z"/></svg>`,
imgmultiple: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="${color}" d="M13.748 8.996a1.248 1.248 0 1 0 0-2.496 1.248 1.248 0 0 0 0 2.496ZM6.25 3A3.25 3.25 0 0 0 3 6.25v9a3.25 3.25 0 0 0 3.25 3.25h9a3.25 3.25 0 0 0 3.25-3.25v-9A3.25 3.25 0 0 0 15.25 3h-9ZM4.5 6.25c0-.966.784-1.75 1.75-1.75h9c.966 0 1.75.784 1.75 1.75v9c0 .231-.045.452-.126.654l-4.587-4.291a2.25 2.25 0 0 0-3.074 0l-4.587 4.29a1.745 1.745 0 0 1-.126-.653v-9Zm6.762 6.458 4.505 4.214c-.163.05-.337.078-.517.078h-9c-.18 0-.354-.027-.517-.078l4.504-4.214a.75.75 0 0 1 1.025 0ZM8.75 21a3.247 3.247 0 0 1-2.74-1.5h9.74a3.75 3.75 0 0 0 3.75-3.75V6.011a3.248 3.248 0 0 1 1.5 2.74v7C21 18.65 18.65 21 15.75 21h-7Z"/></svg>`
}[key]
}
export function setAccentImage(img: HTMLImageElement, str: AssetsType) {
Expand Down
2 changes: 1 addition & 1 deletion src/Scripts/Storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface FileConversion {
quality?: number,
mimeType?: string
}
export type AssetsType = "settings" | "documentadd" | "resizeimage" | "imagesparkle" | "image" | "color" | "folder" | "paragraph";
export type AssetsType = "settings" | "documentadd" | "resizeimage" | "imagesparkle" | "image" | "color" | "folder" | "paragraph" | "apps" | "imgmultiple";
import { writable } from "svelte/store";

export let conversionStatus = writable(0);
Expand Down
8 changes: 5 additions & 3 deletions src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,21 +39,23 @@ body {

input[type=checkbox] {
width: 65px;
min-width: 65px;
height: 20px;
border-radius: 12px;
background-color: var(--struct);
appearance: none;
transition: background-color 0.2s ease-in-out;
margin-right: 10px;
position: relative;
}

input[type=checkbox]::before {
width: 16px;
height: 16px;
content: "";
position: absolute;
top: 5px;
left: 6px;
top: 2px;
left: 3px;
border-radius: 50%;
background-color: var(--text);
transition: transform 0.2s ease-in-out;
Expand All @@ -79,7 +81,7 @@ input:not([type=range]):not([type=checkbox]) {
}

input[type=checkbox]:checked::before {
transform: translateX(45px);
transform: translateX(43px);
}

input[type=checkbox]:checked {
Expand Down
5 changes: 3 additions & 2 deletions src/lib/ExportDialog.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@
<div class="flex hcenter">
<div class="spinner" style="margin-right: 10px"></div>
<label
>Converting image {$conversionProgress ??
"operation completed"}</label
>Converting image {$conversionProgress !== undefined
? $conversionProgress + 1
: "operation completed"}</label
>
<label
style="margin-left: 10px; text-decoration: underline"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/ImageEditing/CanvasRender.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
} from "../../Scripts/Storage";
import { ExportFile, getZip, restoreZip } from "../../Scripts/ExportFile";
import FileSystemHandle from "../../Scripts/FileSystemHandle";
import { get } from "svelte/store";
import TitleIcon from "../Styles/TitleIcon.svelte";
import createSpinner from "../../Scripts/CreateSpinner";
let exportAsZip = localStorage.getItem("ImageConverter-SaveZip") === "a";
Expand All @@ -30,6 +29,7 @@
resolve();
};
img.onerror = () => reject();
document.title = `[${$currentImageEditing + 1}/${$convertFiles.length}] ${$convertFiles[$currentImageEditing].fileName} | image-converter`;
});
}
function getProportions() {
Expand Down
16 changes: 16 additions & 0 deletions src/lib/PWAPrompt.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script>
import TitleIcon from "./Styles/TitleIcon.svelte";
</script>

<div class="card">
<TitleIcon asset="apps">Install as a PWA:</TitleIcon>
<p>
Install image-rerender as a Progressive Web App to use it offline and to
open images directly from File Explorer / Finder
</p>
<i>
Install it by clicking on the "Install" button at the right of the
address (Chromium) or by adding this website to the home from the Share
menu (Safari)
</i>
</div>
14 changes: 14 additions & 0 deletions src/lib/Picker.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<script lang="ts">
import { onMount } from "svelte";
import FilePicker from "../Scripts/FilePicker";
import {
conversionStatus,
convertFiles,
type FileConversion,
} from "../Scripts/Storage";
import TitleIcon from "./Styles/TitleIcon.svelte";
import FileArrayHandler from "../Scripts/FileArrayHandler";
const file = FilePicker;
$: folderPickerName = file.webkitdirectory ? "a folder" : "files";
const inputId = `CheckBox-${Math.random().toString().substring(2)}`;
Expand Down Expand Up @@ -39,6 +41,18 @@
conversionStatus.set(1);
}
}
onMount(() => {
if ("launchQueue" in window) {
(window.launchQueue as any).setConsumer(
async (launchParams: any) => {
const arr = [];
for (let item of launchParams.files)
arr.push(await item.getFile());
FileArrayHandler(arr);
},
);
}
});
</script>

<div class="card">
Expand Down
9 changes: 9 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})

0 comments on commit 41b60f8

Please sign in to comment.