Merge pull request #16 from MikeRatcliffe/add-prettier

.husky/pre-commit

@@ -0,0 +1 @@
+npm run prettier:check

package.json

@@ -34,10 +34,16 @@
     "dist-win": "electron-builder -w",
     "dist-mac": "electron-builder -m",
     "dist-linux": "electron-builder -l",
+    "prettier:check": "prettier --check \"**/*.{css,js,json,md,twig,yml}\"",
+    "prettier:format": "prettier --write \"**/*.{css,js,json,md,twig,yml}\"",
     "postdist": "npm run pack-win && npm run pack-mac",
     "postinstall": "electron-builder install-app-deps",
     "pack-win": "cd out/win-unpacked && cp ../windows-install.bat ./ && 7za a sidenoder-$npm_package_version-win.zip  ./* && mv sidenoder-$npm_package_version-win.zip ../",
-    "pack-mac": "cd out/mac && tar -czf sidenoder-$npm_package_version-mac.tar.gz  ./* && mv sidenoder-$npm_package_version-mac.tar.gz ../"
+    "pack-mac": "cd out/mac && tar -czf sidenoder-$npm_package_version-mac.tar.gz  ./* && mv sidenoder-$npm_package_version-mac.tar.gz ../",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "{**/*,*}.{css,js,json,md,twig,yml}": "prettier --write"
   },
   "build": {
     "appId": "com.sidenoder.app",

tools.js

@@ -2830,4 +2830,3 @@ async function changeConfig(key, value) {
 
   return value;
 }
-

views/browse_include.twig

@@ -91,7 +91,8 @@
     <div class="card-text">
       <div
         id="browseCardBody"
-        class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5"></div>
+        class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5"
+      ></div>
       <table class="table table-striped-rookie table-hover">
         <tbody id="listTable"></tbody>
       </table>

views/js/browse.js

@@ -290,8 +290,8 @@ function loadDir(list) {
       <div class="card bg-primary text-center bg-dark">
 
       <div><small><b class="card-simple-name">${item.simpleName} ${
-      item.note || ""
-    }</b></small></div>
+        item.note || ""
+      }</b></small></div>
       <div class="ribbon-img-container">
         ${newribbon}
         <img src="${item.imagePath}" class="bg-secondary" style="width: 100%">

views/js/search.js

@@ -204,7 +204,7 @@ class FindDialog {
       this.#debounce(() => {
         const text = $findInput.val();
         this._handler(text);
-      })
+      }),
     );
 
     const $findDelete = $("<i>", {
@@ -358,4 +358,3 @@ function sortElements($element, key, asc = true) {
   items.sort(sortBy(key, asc));
   $element.html(items);
 }
-

views/layout.twig

@@ -8,25 +8,36 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     >
 
-  <script>window.$ = window.jQuery = require('jquery');</script>
+    <script>
+      window.$ = window.jQuery = require('jquery');
+    </script>
 
-  <!-- A simple hack that makes it possible to use jQueryUI with Electron -->
-  <script src="../node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
+    <!-- A simple hack that makes it possible to use jQueryUI with Electron -->
+    <script src="../node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
 
-  <!-- <script src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous"></script> -->
-  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script> -->
-  <script src="js/bootstrap.min.js"></script>
-  <script src="js/main.js"></script>
+    <!--
+      <script src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous"></script>
+    -->
+    <!--
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+    -->
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
 
     <!-- Bootstrap CSS -->
     <!--
       <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
     -->
 
-  <link rel="stylesheet" href="css/bootstrap-slate.min.css">
-  <!-- <link rel="stylesheet" href="https://bootswatch.com/4/sandstone/bootstrap.min.css"> -->
-  <link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
-  <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/bootstrap-slate.min.css">
+    <!--
+      <link rel="stylesheet" href="https://bootswatch.com/4/sandstone/bootstrap.min.css">
+    -->
+    <link
+      rel="stylesheet"
+      href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+    >
+    <link rel="stylesheet" href="css/main.css">
 
     <title>Quest-Sideloader</title>
 
@@ -37,18 +48,17 @@
       const { ipcRenderer, /*remote, */ shell } = electron;
       const { dialog } = remote;
 
-    function loadInclude(template, id = null, complete = null) {
-      $(document).trigger("newTemplate" );
+      function loadInclude(template, id = null, complete = null) {
+        $(document).trigger('newTemplate');
 
-      if (!id) {
-        $id('mainbody')
-          // .html('')
-          .load(template, complete);
-      }
-      else {
-        $(`#${id}`).load(template, complete);
+        if (!id) {
+          $id('mainbody')
+            // .html('')
+            .load(template, complete);
+        } else {
+          $(`#${id}`).load(template, complete);
+        }
       }
-    }
 
       function formatEta(seconds) {
         if (seconds == null) {
@@ -251,27 +261,34 @@
     ipcRenderer.send('sideload_read_queue', '');
   });*/
 
-  document.addEventListener('dragover', (ev) => ev.preventDefault());
-  document.addEventListener('drop', (ev) => ev.preventDefault());
+      document.addEventListener('dragover', (ev) => ev.preventDefault());
+      document.addEventListener('drop', (ev) => ev.preventDefault());
 
-  document.body.addEventListener('drop', (ev) => {
-    ev.preventDefault();
-    if (!ev.dataTransfer.files || !ev.dataTransfer.files.length) return;
-
-    if (ev.dataTransfer.files[0].path.endsWith('.apk')) {
-      ipcRenderer.send('filedrop', ev.dataTransfer.files[0].path.replace(/\\/g, '/'));
-    }
-  }, false);
+      document.body.addEventListener(
+        'drop',
+        (ev) => {
+          ev.preventDefault();
+          if (!ev.dataTransfer.files || !ev.dataTransfer.files.length) return;
 
-  window.addEventListener("resize", () => {
-    const navPanel = document.querySelector("#nav-panel");
-    if (!navPanel) {
-      return;
-    }
+          if (ev.dataTransfer.files[0].path.endsWith('.apk')) {
+            ipcRenderer.send(
+              'filedrop',
+              ev.dataTransfer.files[0].path.replace(/\\/g, '/'),
+            );
+          }
+        },
+        false,
+      );
+
+      window.addEventListener('resize', () => {
+        const navPanel = document.querySelector('#nav-panel');
+        if (!navPanel) {
+          return;
+        }
 
-    // fix navbar position
-    navPanel.style.top = $("#topbar").height() + "px";
-  });
+        // fix navbar position
+        navPanel.style.top = $('#topbar').height() + 'px';
+      });
 
       // actions
 

views/modals/installed.twig

@@ -62,8 +62,7 @@
       </div>
       <div class="modal-body">
         <table class="table table-striped-rookie table-condensed text-white">
-          <tbody id="intalledTable">
-          </tbody>
+          <tbody id="intalledTable"></tbody>
         </table>
       </div>
       <div class="modal-footer">

views/settings_include.twig

@@ -154,7 +154,8 @@
           <div class="form-check mb-0">
             <label for="proxySteam" class="form-check-label">
               <input class="form-check-input" type="checkbox" id="proxySteam">
-              <i class="fa-brands fa-square-steam"></i> Enable proxy for fetch Steam information
+              <i class="fa-brands fa-square-steam"></i> Enable proxy for fetch
+              Steam information
             </label>
           </div>
           <div class="form-check mb-0">