Release Web App v4.0 (#190)

* compress images

* updated gitignore

* restructure web app in steps to handle more type of privacy policies

* update scripts, js, sass and github actions

* cleanup, compress and update images

* restructure web app

* update docs

* added kofi button to step 1

* Fixes issue #161

* remove comment

* mix a mistake in title

.github/workflows/firebase-hosting-merge.yml

@@ -11,16 +11,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install Pug CLI
-        run: npm install -g @anduh/pug-cli
-
-      - name: Install SASS CLI
-        run: npm install -g sass
-
-      - name: Install JS-YAML CLI
-        run: npm install -g js-yaml
+      - name: Install all CLI tools
+        run: npm install -g @anduh/pug-cli sass js-yaml firebase-tools svgo png-minify uglifycss uglify-js html-minifier purgecss
 
       - name: Render the website from templates
         run: |

.github/workflows/firebase-hosting-pull-request.yml

@@ -9,16 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install Pug CLI
-        run: npm install -g @anduh/pug-cli
-
-      - name: Install SASS CLI
-        run: npm install -g sass
-
-      - name: Install JS-YAML CLI
-        run: npm install -g js-yaml
+      - name: Install all CLI tools
+        run: npm install -g @anduh/pug-cli sass js-yaml firebase-tools svgo png-minify uglifycss uglify-js html-minifier purgecss
 
       - name: Render the website from templates
         run: |

.gitignore

@@ -3,3 +3,4 @@
 *.cache
 node_modules/
 dist/
+.DS_Store

Readme.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="img/banner.png" alt="App Privacy Policy Generator">
+  <img src="img/banner.jpg" alt="App Privacy Policy Generator">
 </div>
 
 <div align="center"><strong>
@@ -31,10 +31,6 @@
 
 [![Deploy to Production](https://github.com/nisrulz/app-privacy-policy-generator/actions/workflows/firebase-hosting-merge.yml/badge.svg)](https://github.com/nisrulz/app-privacy-policy-generator/actions/workflows/firebase-hosting-merge.yml) [![Deploy to Firebase Hosting on PR](https://github.com/nisrulz/app-privacy-policy-generator/actions/workflows/firebase-hosting-pull-request.yml/badge.svg)](https://github.com/nisrulz/app-privacy-policy-generator/actions/workflows/firebase-hosting-pull-request.yml)
 
-## Screenshots
-
-<img src="img/sc_1.png" alt="App Privacy Policy Generator" width=360 /><img src="img/sc_2.png" alt="App Privacy Policy Generator" width=360 /><img src="img/sc_3.png" alt="App Privacy Policy Generator" width=360 />
-
 ## Project Support
 
 - Before contacting me with issues, please visit the [Issue Tracker](https://github.com/nisrulz/app-privacy-policy-generator/issues) and see if issue was already added there. Just in case.

compress_images.sh

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+
+# App Privacy Policy Generator: A simple web app to generate a generic 
+# privacy policy for your Android/iOS apps
+# 
+# Copyright 2017-Present Nishant Srivastava
+# 
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+# 
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+# 
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+echo "Navigate to Images directory"
+cd public/images
+
+#--------------------------------- Compress SVG files ---------------------------------#
+svgo -f app_graphics temp
+mv temp/*.svg app_graphics
+
+svgo -f app_icons temp
+mv temp/*.svg app_icons
+
+svgo -f social_icons temp
+mv temp/*.svg social_icons
+
+# Delete Temp directory
+rm -rf temp
+
+#--------------------------------- Compress PNG files ---------------------------------#
+npx png-minify minify third_party_logos/*.png
+

dev-doc.md

@@ -9,11 +9,24 @@ The web app uses
   - [sass](https://sass-lang.com/documentation/cli) - To convert sass templates to css and merge partials into single [`style.css`](public/css/style.css) file.
   - [js-yaml](https://github.com/nodeca/js-yaml#cli-executable) - To convert yaml templates to json and generate the [`thirdpartyservices.js`](public/js/thirdpartyservices.js) file.
   - [firebase-tools](https://github.com/firebase/firebase-tools) - To interact with Firebase as a service from command line.
-  ---
-  > Install the CLI tools using
-  >
-  > ```npm install -g @anduh/pug-cli sass js-yaml firebase-tools```
+  - [png-minify](https://www.npmjs.com/package/png-minify) - To compress png files.
+  - [svgo](https://www.npmjs.com/package/svgo) - To compress svg files.
+  - [uglifycss](https://www.npmjs.com/package/uglifycss) - To compress css files.
+  - [uglify-js](https://www.npmjs.com/package/uglify-js) - To compress js files.
+  - [html-minifier](https://www.npmjs.com/package/html-minifier) - To compress html files.
+  - [purgecss](https://purgecss.com/CLI.html) - To compress css files.
+
+---
 
+Install the CLI tools using
+
+```sh
+npm install -g @anduh/pug-cli sass js-yaml \
+firebase-tools \
+svgo png-minify \
+uglifycss uglify-js html-minifier \
+purgecss
+```
 
 If you wish to modify the code for the webapp, then look into [`src`](src) directory.
 
@@ -34,10 +47,18 @@ To compile the code under `src` folder, simply execute the helper bash script [`
 ./render.sh
 ```
 
-This will generate the `index.html`, `style.css` and `thirdpartyservices.js` files at their required directory path.
+This will generate the `index.html`, `style.min.css`, `main.min.js`, `utils.min.js` and `thirdpartyservices.min.js` files at their required directory path.
 
 Open `index.html` to view the full web app 🎉
 
+## Compress Images
+
+Run
+
+```sh
+./compress_images.sh
+```
+
 ## Contributing more 3rd Party Service's links
 
 The web app uses a JSON array to populate the list of 3rd party services section. This JSON array is generated from another yaml file.

public/404.html

@@ -1,57 +1,27 @@
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="A simple web app to generate a generic privacy policy for your Android/iOS apps">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-    <meta name='copyright' content='Nishant Srivastava'>
-    <meta name='author' content='Nishant Srivastava, nisrulz@gmail.com'>
-
-    <title>App Privacy Policy Generator</title>
-
-    <!-- Add to homescreen for Chrome on Android -->
-    <meta name="mobile-web-app-capable" content="yes">
-
-    <!-- Add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="App Privacy Policy Generator">
-
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileColor" content="#3372DF">
-
-    <link rel="shortcut icon" href="images/favicon.ico">
-
-    <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css'>
-    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css'>
-    <link rel="stylesheet" href="css/style.css">
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-53824796-8"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-
-        function gtag() {
-            dataLayer.push(arguments);
-        }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-53824796-8');
-    </script>
-</head>
-
-<body class="bg-pattern">
-    <div id="page-404">
-        <div>
-                <img src="images/app_graphics/404.svg" style="height:35%;" class="center-block" />
-            <h1>Page Not Found</h1>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>App Privacy Policy Generator</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="description" content="A simple web app to generate a generic privacy policy for your Android/iOS apps">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name="copyright" content="Nishant Srivastava">
+        <meta name="author" content="Nishant Srivastava, nisrulz@gmail.com">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <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">
+    </head>
+    <body class="bg-pattern">
+        <div class="container m-6" id="app" style="text-align: center;">
+            <img src="images/app_graphics/404.svg" style="height:60vh;" class="center-block" />
+            <h1 style="font-size: 4em;">Page Not Found</h1>
             <p>Sorry, but the page you were trying to view was taken away by pirates</p>
             <br/>
-            <a href="/">Click here to go back to home</a>
+            <a href="https://app-privacy-policy-generator.nisrulz.com/">Click here to go back to home</a>
         </div>
-    </div>
-</body>
-
+    </body>
 </html>