webpack: added sitemap plugin

.github/workflows/eslint.yml

@@ -0,0 +1,50 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '33 14 * * 2'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.10.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.yml
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

README.md

@@ -11,3 +11,31 @@ Currently, the following algorithms are implemented:
 
 	This uses PBKDF2 to convert a password to a key, then uses AES
 	to encrypt a given message.
+
+## Installation
+
+Clone the repo:
+
+```
+git clone https://github.com/dogeystamp/encryptme
+```
+
+Install packages:
+
+```
+npm install
+```
+
+## Running
+
+Start development server:
+	
+```
+npm run start
+```
+
+Or, compile to `dist/`:
+
+```
+npm run build
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "encryptme",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Simple online cryptography app.",
   "private": true,
   "scripts": {
@@ -38,6 +38,7 @@
     "eslint": "^8.33.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.7.2",
+    "sitemap-webpack-plugin": "^1.1.1",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

src/aes.js

@@ -155,6 +155,8 @@ let decManualKey = decForm.createCheckBox({
 let decButton = decForm.createButton({label: "Decrypt"});
 let decOut = decForm.createOutput({label: "Output"});
 
+tabs.mountForms();
+
 function getKeyMaterial(password) {
 	let enc = new TextEncoder();
 	return window.crypto.subtle.importKey(

src/interface.js

@@ -58,10 +58,20 @@ class InterfaceElement {
 		return this.#hidden;
 	}
 	set hidden(x) {
+		if (this.#hidden === x) return;
+
 		this.#hidden = x;
 
 		for (const node of this.rootNodes) {
-			node.hidden = this.hidden;
+			if (this.hidden) {
+				node.classList.add("visualhidden");
+				node.classList.add("hidden");
+			} else {
+				node.classList.remove("hidden");
+				setTimeout(function() {
+					node.classList.remove("visualhidden");
+				}, 20);
+			}
 		}
 
 		if (this.hidden === true) this.clearAlerts();
@@ -87,7 +97,7 @@ function dataTypeSupports(params, validTypes) {
 }
 
 class Form extends InterfaceElement {
-	constructor({tag, par=document.body, label}) {
+	constructor({tag, par=document.body, label, mounted=false}) {
 		super({});
 
 		if (tag === undefined) {
@@ -111,7 +121,9 @@ class Form extends InterfaceElement {
 			this.advanced = advancedToggle.value;
 		}.bind(this));
 
-		par.appendChild(this.fragment);
+		if (mounted) {
+			this.mount(par);
+		}
 	}
 
 	#hidden = false;
@@ -478,7 +490,8 @@ class TabList extends InterfaceElement {
 			this.handle = tag;
 		}
 		this.fragment.appendChild(this.handle);
-		par.appendChild(this.fragment);
+
+		this.mount(par);
 	}
 
 	tabs = [];
@@ -522,6 +535,12 @@ class TabList extends InterfaceElement {
 
 		return form;
 	}
+
+	mountForms() {
+		for (const tab of this.tabs) {
+			tab.form.mount(this.par);
+		}
+	}
 }
 
 export { TabList, FormElement, Form };

src/pages/aes.html

@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>encryptme: Simple AES encryption/decryption</title>
-	<meta name="description" content="Easy to use and simple online tool for AES encryption and decryption.
-	Advanced settings allow control over the IV, AES mode, and PBKDF2 parameters.">
+	  <meta charset="UTF-8">
+	  <title>encryptme: AES encryption/decryption</title>
   </head>
   <body>
 	<h1>AES</h1>

src/pages/index.html

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>encryptme</title>
-	<meta name="description" content="Easy to use and simple online tools for encryption and decryption.">
+	  <meta charset="UTF-8">
+	  <title>encryptme</title>
   </head>
   <body>
 	<h2>Tools</h2>

src/style.css

@@ -4,11 +4,7 @@ body {
 	padding: 0 10px;
 	color: #444444;
 	background: #eeeeee;
-	animation: fadeIn 0.5s;
-}
-@keyframes fadeIn {
-	0% {opacity: 0;}
-	100% {opacity: 1;}
+	transition: all 0.5s;
 }
 
 body, button {
@@ -160,24 +156,16 @@ button:active {
 	}
 }
 
-[hidden] {
-	animation: fadeOut 0.2s, disappear 0.3s;
+@media only screen and (max-width: 1000px) {
+  body {
+	max-width: 80%;
+	margin: 40px auto;
+  }
+}
+
+.visualhidden {
 	opacity: 0;
-	visibility: hidden;
-	max-height: 0 !important;
-	margin: 0 !important;
-	padding: 0 !important;
 }
-@keyframes fadeOut {
-	0% {opacity: 1; visibility: visible;}
-	100% {opacity: 0; visibility: hidden;}
-}
-@keyframes disappear {
-	0% {
-		max-height: 100em;
-	}
-	100% {
-		max-height: 0;
-		margin: 0;
-	}
+.hidden {
+	display: none;
 }

webpack.common.js

@@ -1,12 +1,26 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const SitemapPlugin = require("sitemap-webpack-plugin").default;
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const pages = ["index", "aes"];
+const pages = [
+	{
+		id: "index",
+		desc: "Easy to use and simple online tools for encryption and decryption.",
+		changefreq: "weekly",
+		priority: 1.0,
+	},
+	{
+		id: "aes",
+		desc: "Secure and simple tool for AES, with control over all advanced options like key size, salt, AES mode, and others.",
+		changefreq: "weekly",
+		priority: 0.7,
+	},
+];
 
 module.exports = {
 	entry: pages.reduce((config, page) => {
-		config[page] = `./src/${page}.js`;
+		config[page.id] = `./src/${page.id}.js`;
 		return config;
 	}, {}),
 	output: {
@@ -24,14 +38,32 @@ module.exports = {
 			filename: "[contenthash].css",
 			chunkFilename: "[id].[contenthash].css",
 		}),
+		new SitemapPlugin({
+			base: "https://encryptme.net",
+			paths: pages.map(
+				(page) => ({
+					path: `/${page.id}.html`,
+					changefreq: page.changefreq,
+					priority: page.priority,
+				})
+			),
+			options: {
+				lastmod: true,
+			},
+		})
 	].concat(
 		pages.map(
 			(page) =>
 				new HtmlWebpackPlugin({
-					inject: true,
-					template: `./src/pages/${page}.html`,
-					filename: `${page}.html`,
-					chunks: [page],
+					inject: "body",
+					title: `encryptme: ${page.title}`,
+					meta: {
+						viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
+						description: page.desc
+					},
+					filename: `${page.id}.html`,
+					template: `./src/pages/${page.id}.html`,
+					chunks: [page.id],
 				})
 		)
 	),