Add README (intro, instructions, faq), improve build, fix error msgs (#9

)

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
           nix_path: nixpkgs=channel:nixos-unstable
 
       - name: Build
-        run: nix develop -c trunk build
+        run: nix develop -c trunk build --release
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 base64 = "0.21.4"
 gloo = "0.10"
-img-parts= "0.3.0"
+img-parts = "0.3.0"
 js-sys = "0.3"
 kamadak-exif = "0.5.5"
 thiserror = "1.0"

README.md

@@ -1,8 +1,119 @@
 # exify
 
+Simple web application to remove [EXIF](https://en.wikipedia.org/wiki/Exif) (Exchangeable Image File Format) data from images. 
 
-## EXIF notes
+<p float="left">
+  <a href="wiki/exify-1.png" target="_blank">
+    <img src="wiki/exify-1.png" width="30%" />
+  </a>
+  <a href="wiki/exify-2.png" target="_blank">
+    <img src="wiki/exify-2.png" width="30%" />
+  </a>
+  <a href="wiki/exify-3.png" target="_blank">
+    <img src="wiki/exify-3.png" width="30%" />
+  </a>
+</p>
 
-ExifTool by Phil Harvey -> Tags https://exiftool.org/TagNames/EXIF.html
 
-Exiv2 -> Standard Exif Tags https://exiv2.org/tags.html
+
+All processing is done in the browser. No server. No data is sent anywhere. It still works offline.
+
+
+## Usage
+
+Open https://sectore.github.io/exify/ in your browser. 
+
+## Development
+
+### Prerequisites
+
+#### Nix (recommended)
+
+Install [Nix](https://zero-to-flakes.com/install)
+
+#### Other
+
+Install [Rust](https://www.rust-lang.org/tools/install) and [Trunk](https://trunkrs.dev/)
+
+
+### Build from source
+
+`cd` into the project directory and run:
+
+### Nix
+
+```bash
+nix develop
+trunk build --release
+```
+
+### Or others
+
+```bash
+trunk build --release
+```
+
+
+### Developing locally
+
+`cd` into the project directory and run:
+
+### Nix
+
+```bash
+nix develop
+trunk serve
+```
+
+### Or others
+
+```bash
+trunk serve
+```
+
+Open browser at http://127.0.0.1:8080/exify
+
+## FAQ
+
+### What does `exify` mean?
+
+The name `exify` is derived from EXIF, the file format used to store metadata in images.
+
+### Do I need an Internet connection?
+
+No. The application works offline.
+
+### What happens to my original images?
+
+Original images will be unchanged. All changes will be saved as a new image prefixed with `exify_`.
+
+### How does exify work?
+
+Technically the application is built with [Yew](https://yew.rs/) / ([Rust](https://www.rust-lang.org/)) and compiled to [WebAssembly](https://webassembly.org/). It uses [kamadak-exif](https://crates.io/crates/kamadak-exif) and [img-parts](https://crates.io/crates/img-parts) crates to parse and remove EXIF data from images.
+
+All code runs in the browser. No server is needed. 
+
+### What browsers are supported?
+
+All modern browsers.
+
+### What image formats are supported?
+
+`jpg`, `png` and `webp` formats are supported.
+
+### What metadata is removed?
+
+All EXIF data recognized by the application will be removed.
+
+### Is this application free?
+
+Yes. The source code is available on GitHub under the MIT license.
+
+### How can I contribute?
+
+You can contribute by reporting bugs, suggesting features or by submitting pull requests.
+
+
+## License
+
+[MIT Lizenz](./LICENSE)

src/components/add.rs

@@ -177,7 +177,7 @@ pub fn Add() -> Html {
             >{"Drop image here"}</p>
           {if let Some(Err(FileError::DragDropFailed(e))) = ctx.file.clone() {
             html!{<p class="my-1 text-lg text-red-500 font-normal">
-            {format!("Error: {:?}", e)}</p>}
+            {format!("ERROR {:?}", e)}</p>}
             } else {
               html!{}
             }

src/components/details.rs

@@ -101,50 +101,65 @@ pub fn Details() -> Html {
 
       { if let Some(fd) = &*file_details {
         html!{
+          <div class="flex flex-col w-full items-center">
             <img
               class="max-w-[10rem] max-h-[10rem] w-auto h-auto border-[1em] border-sky-600 "
               src={img_src(&fd)} />
+            <p class="text-gray-400 text-sm md:text-base mt-2 truncate">
+              { if *is_exified {
+                  exified_file_name(&fd)
+                } else {
+                  fd.name.clone()
+                }
+              }
+            </p>
+          </div>
           }
         } else {
           html!{
-            <BrokenImage class="!w-40 !h-40 text-sky-600 " />
+            <BrokenImage class="!w-56 !h-56 text-gray-300 " />
           }
         }
       }
 
       {
         if *is_exified {
           html!{
-            <button class="btn px-10 lg:px-28 my-8 lg:my-12
+            <button class="btn px-10 lg:px-28 mt-8 lg:mt-12
             w-full lg:w-auto" onclick={on_save}>{"Save"}</button>
           }
-        } else {
+        } else if file_details.is_some() && *has_exif {
           html!{
-            <button class="btn px-10 lg:px-28 my-8 lg:my-12
+            <button class="btn px-10 lg:px-28 mt-8 lg:mt-12
             w-full lg:w-auto"
-              disabled={!*has_exif}
               onclick={on_remove}>{"Remove EXIF"}</button>
           }
+        } else {
+          html!{}
         }
       }
 
           // error message
           { if let Some(err) = &*file_error {
               html!{
-                  <p class="w-full text-xl text-red-500 text-center my-5">{err.to_string()}</p>
+                <div class="w-full h-full flex flex-col items-center justify-center">
+                  <h2 class="text-2xl font-bold text-gray-400 py-2 uppercase">
+                    {"Error"}</h2>
+                  <p class="text-xl text-gray-400">{err.to_string()}</p>
+                </div>
               }
             } else {
               html!{}
             }
           }
 
-          <h2 class="text-xl md:text-2xl font-bold text-gray-400 mb-8 ">
+          <h2 class="text-xl md:text-2xl font-bold text-gray-400 my-8 ">
           {
             if *is_exified {
               "EXIF data removed".to_owned()
             } else if let Some(fd) = &*file_details {
               if fd.exif.is_empty() {
-                "No EXIF data found".to_owned()
+                "EXIF data not found".to_owned()
               } else {
                 format!("{:?} EXIF data found", &fd.exif.len())
               }