formatting and fix bugs

.eslintrc.js

@@ -1,38 +1,26 @@
 module.exports = {
-    'env': {
-        'browser': true,
-        'commonjs': true,
-        'es6': true
+    env: {
+        browser: true,
+        commonjs: true,
+        es6: true,
     },
-    'extends': 'eslint:recommended',
-    'globals': {
-        'Atomics': 'readonly',
-        'SharedArrayBuffer': 'readonly'
+    extends: 'eslint:recommended',
+    globals: {
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
     },
-    'parserOptions': {
-        "sourceType": "module",
-        "allowImportExportEverywhere": true
+    parserOptions: {
+        sourceType: 'module',
+        allowImportExportEverywhere: true,
     },
-    'rules': {
-        "no-mixed-spaces-and-tabs": 0,
-        "no-unused-vars": 0,
-        "no-useless-escape": 0,
-        "no-undef": 0,
-        'indent': [
-            'error',
-            4
-        ],
-        'linebreak-style': [
-            'error',
-            'unix'
-        ],
-        'quotes': [
-            'error',
-            'single'
-        ],
-        'semi': [
-            'error',
-            'always'
-        ]
-    }
-};
+    rules: {
+        'no-mixed-spaces-and-tabs': 0,
+        'no-unused-vars': 0,
+        'no-useless-escape': 0,
+        'no-undef': 0,
+        indent: ['error', 4],
+        'linebreak-style': ['error', 'unix'],
+        quotes: ['error', 'single'],
+        semi: ['error', 'always'],
+    },
+};

.prettierignore

@@ -0,0 +1,16 @@
+.cache
+package.json
+package-lock.json
+yarn.lock
+LICENSE
+README.md
+public/build
+static
+yarn.lock
+out
+build
+node_modules
+.next
+.github
+.vercel
+dist

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "arrowParens": "avoid",
+    "semi": true,
+    "singleQuote": true
+}

README.md

@@ -1,17 +1,74 @@
 # Quotes image Generator
 
+⚡ Rollupjs | ✨ Tailwind CSS | 📸 HTML Canvas  | 🎩 Alpine.js | 🌩 Cloudflare Pages  
+
 Free Quotes image Generator - Easy to use Just like Writing in Paper.
 
+> Quotes image Maker - Quotes Application  
+
 ## Methods Used ⚙
 
 - HTML/CSS and Javascript
-- HTML Canvas
-- Alpine.js
-- tailwindcss - Front-end Styling
-- rollup - Minify the Bundled JS
+- HTML Canvas - Create Wish image
+- Alpine.js - Javascript Magic
+- Tailwindcss - Front-end Styling
+- rollup - Minify and Bundled the JS file
 - Node `http-server` - Test the Site Locally
-- Eslint
-- Cloudflar Pages for Hosting - `npx wrangler pages publish public`
+- Eslint - Fix the Lint Error
+- Prettier - Beautify the Code files
+- Slugify - Slugify the User input and Convert to URL
+- Cloudflare Pages for Hosting - `npx wrangler pages publish public`
+
+## Installation 📦
+
+- Add funtions, logic's and Modules - `/lib/app.js`
+- Edit Home page - `index.html`
+- CSS Styling - `/styles/tailwind.css`
+- Build file - `main.js`
+
+- Clone this repo or Download
+
+```sh
+git clone https://github.com/mskian/quotes-image-generator
+quotes-image-generator
+yarn install
+```
+
+- Test the site
+
+```sh
+yarn dev
+```
+
+- Build the site
+
+```sh
+yarn build
+```
+
+- Test the production Build on Localhost
+
+```sh
+yarn start
+```
+
+- Build CSS
+
+```sh
+yarn css
+```
+
+- Eslint Fix
+
+```sh
+yarn lintfix
+```
+
+- Format the Code
+
+```sh
+yarn Format
+```
 
 ## LICENSE ☑
 

index.js

@@ -5,6 +5,14 @@ import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 Alpine.start();
 
+const link = document.querySelector('link[rel="canonical"]')
+    ? document.querySelector('link[rel="canonical"]')
+    : document.createElement('link');
+const pathname = typeof window !== 'undefined' ? window.location.href : '';
+link.setAttribute('rel', 'canonical');
+link.setAttribute('href', pathname);
+document.head.appendChild(link);
+
 var el = document.querySelector('#postData');
 if (el) {
     el.addEventListener('submit', postData);
@@ -33,15 +41,10 @@ function postData(event) {
         },
     }).showToast();
 
-    const link = document.querySelector('link[rel=\'canonical\']')
-        ? document.querySelector('link[rel=\'canonical\']')
-        : document.createElement('link');
-    const pathname = typeof window !== 'undefined' ? window.location.href : '';
-    link.setAttribute('rel', 'canonical');
-    link.setAttribute('href', pathname);
-    document.head.appendChild(link);
     document.getElementById('notice').style.display = 'block';
-    document.getElementById('notice').innerHTML = `<div class="container mx-md"> 
+    document.getElementById(
+        'notice'
+    ).innerHTML = `<div class="container mx-md"> 
             <div class="flex items-center justify-center">
             <div id="copy-wish">
             <div class="h-96 w-96 p-16 py-16" style="background-color: ${quotesColor}">
@@ -78,7 +81,7 @@ function postData(event) {
             </div>`;
                 document.getElementById('notice').style.display = 'none';
             })
-            .catch((e) => {
+            .catch(e => {
                 console.log(e);
             });
     }

package.json

@@ -9,8 +9,9 @@
     "dev": "rollup -c -w",
     "start": "http-server ./public -c-1 --p 3001",
     "lint": "eslint . --ext .js --cache",
-    "lintfix": "eslint --fix index.js",
-    "css": "tailwindcss -m -i ./styles/tailwind.css -o public/build/app.css"
+    "lintfix": "eslint . --ext .js --fix",
+    "css": "tailwindcss -m -i ./styles/tailwind.css -o public/build/app.css",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,html}\""
   },
   "repository": {
     "type": "git",
@@ -35,6 +36,7 @@
     "eslint": "^8.19.0",
     "http-server": "^14.1.1",
     "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
     "rollup": "^2.76.0",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-terser": "^7.0.2",

postcss.config.js

@@ -1,4 +1,4 @@
 export const plugins = {
     tailwindcss: {},
     autoprefixer: {},
-};
+};

public/_headers

@@ -0,0 +1,6 @@
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: no-referrer
+  Strict-Transport-Security: max-age=31536000
+  X-Xss-Protection: 1; mode=block