general cleanup and stuff

manifest/chrome.json

@@ -2,6 +2,7 @@
     "manifest_version": 2,
     "offline_enabled": true,
     "name": "Mue",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
     "version": "0.6",
     "browser_action": {
         "default_icon": "./android-chrome-512x512.png"

manifest/firefox.json

@@ -1,6 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Mue",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
     "version": "0.6",
     "browser_action": {
         "default_icon": "./android-chrome-512x512.png"

manifest/opera.json

@@ -1,12 +1,15 @@
 {
     "manifest_version": 2,
     "name": "Mue",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
     "version": "0.6",
     "browser_action": {
         "default_icon": "./android-chrome-512x512.png"
     },
     "background": {
-        "scripts": ["./background-opera.js"]
+        "scripts": [
+            "./background-opera.js"
+        ]
     },
     "permissions": [
         "tabs"

package.json

@@ -13,7 +13,7 @@
     "unfetch": "^4.1.0"
   },
   "devDependencies": {
-    "eslint": "^6.5.0",
+    "eslint": "^6.5.1",
     "npm-run-all": "^4.1.5",
     "sass": "^1.23.0"
   },

src/components/Background.jsx

@@ -1,24 +1,23 @@
+//* Imports
 import React from 'react';
 import Fetch from 'unfetch';
 
+// Pick random number
 const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
   
 export default class Background extends React.Component {
-  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
   async getAndSetBackground() {    
-    const root = document.getElementById('root');
+    try { // First we try and get an image from the API...
-    
-    try {
       let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data     = await data.json(); 
+      data = await data.json(); 
 
-      root.style.backgroundImage = `url(${data.file})`;
+      document.getElementById('root').style.backgroundImage = `url(${data.file})`;
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
       document.getElementById('location').innerText = `${data.location}`;   
-    } catch (e) {
+    } catch (e) { // ..and if that fails we load one locally
       document.getElementById('backgroundCredits').style.display = 'none';
       document.getElementById('photographer').innerText = 'Photo from Pexels';
-      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
+      document.getElementById('root').style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
     }
   }
 
@@ -27,6 +26,6 @@ export default class Background extends React.Component {
   }
 
   render() {
-    return null;
+    return null; // React gets annoyed if I don't put anything here or use "return;"
   }
 }

src/components/Clock.jsx

@@ -1,3 +1,4 @@
+//* Imports
 import React from 'react';
 
 export default class Clock extends React.Component {
@@ -32,9 +33,9 @@ export default class Clock extends React.Component {
   }
 
   render() {
-    return <h1 className='App-clock'>
+    return <h1 className='clock'>
       {this.state.date}
-      <span className='App-ampm-specifier'>
+      <span className='ampm'>
         {this.state.ampm}  
       </span>
     </h1>;

src/components/Credit.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable */
+//* Imports
 import RoomIcon from '@material-ui/icons/Room';
 import React from 'react';
 

src/components/Greeting.jsx

@@ -1,3 +1,4 @@
+//* Imports
 import React from 'react';
 
 export default class Greeting extends React.Component {
@@ -21,6 +22,6 @@ export default class Greeting extends React.Component {
   }
   
   render() {
-    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
+    return <h1 className='greeting'>{this.state.greeting}</h1>;
   }
 }

src/components/Quote.jsx

@@ -1,7 +1,11 @@
+//* Imports
 import React from 'react';
 import Fetch from 'unfetch';
 import quotes from '../quotes.json';
 
+// Pick randon number
+const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+
 export default class Quote extends React.Component {
   constructor(...args) {
     super(...args);
@@ -12,12 +16,11 @@ export default class Quote extends React.Component {
   }
 
   async getQuote() {
-    try {
+    try { // First we try and get a quote from the API...
       let data = await Fetch('https://api.muetab.xyz/getQuote');
       data = await data.json();
       this.setState({ quote: data.quote, author: data.author });
-    } catch (e) {
+    } catch (e) { // ..and if that fails we load one locally
-      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
       const num = randomInt(1, 20);
       this.setState({ quote: quotes[num].quote, author: quotes[num].author });
     }
@@ -29,9 +32,9 @@ export default class Quote extends React.Component {
 
   render() {
     return [
-    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
+      <h1 className='quote'>{`"${this.state.quote}"`}</h1>,
-    // <i class="material-icons">perm_identity</i>,
+      // <i class="material-icons">perm_identity</i>,
-    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
+      <h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
     ];
   }
 }

src/components/Search.jsx

@@ -1,11 +1,13 @@
+//* Imports
 import React from 'react';
 
+// TODO: Add option to change search engine
 export default class Search extends React.Component {
   render() {
     return (
-      <div id='searchBar' className='search-bar'>
+      <div id='searchBar' className='searchbar'>
         <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}> 
-            <input type='text' placeholder='Search' name='q' id='searchText' className='searchText'/>
+            <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>
       </div>

src/css/index.css

@@ -1 +1 @@
-.App-clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-ampm-specifier{font-size:.5em}.App-greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.App-quote{margin-left:30%;margin-right:30%}}.App-quote-author{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.App-quote-author{display:inline}.search-bar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.search-bar button{cursor:pointer;outline:none;display:inline}.search-bar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.search-bar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchText{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location{margin-bottom:-10px}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.tooltip{position:absolute;bottom:15px;left:10px}.personicon,.locationicon{font-size:calc(10px + 1.2vmin)}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}:-ms-input-placeholder{color:#fff}#root{background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}.App-link{color:#61dafb}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */
+.clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.ampm{font-size:.5em}.greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.quote{margin-left:30%;margin-right:30%}}.quoteauthor{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.quoteauthor{display:inline}.searchbar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.searchbar button{cursor:pointer;outline:none;display:inline}.searchbar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.searchbar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchtext{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#location{margin-bottom:-10px}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.locationicon{font-size:calc(10px + 1.2vmin);cursor:pointer}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000;bottom:15px;left:10px}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}#root{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */

src/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss","../scss/index.scss"],"names":[],"mappings":"AAAA,WACE,cACA,SACA,oCAGF,oBACE,eCPF,cACI,SACA,gBACA,oCCHJ,WACE,eACA,oCAGF,qCACE,WACE,gBACA,kBAIJ,kBACE,eACA,oBACA,SACA,oCAGF,qCAEE,eCrBF,YACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,mBACI,eACA,aAMA,eAJA,oCACI,oCAMR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,UACE,oBAGF,wBAEE,+BACA,oCACA,uBAGF,cACE,kBACA,YACA,UACA,aAGF,SACE,kBACA,YACA,UAGF,0BAEE,+BAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCzEF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAIF,uBAEE,WCXF,MACI,sBACA,4BACA,kCACA,4BACA,iBACA,aACA,WAGJ,UACI,cAGJ,KACI,mBACA,SACA,mCACA,kCACA,0BACA,gBAGJ,WACI,0BACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss"],"names":[],"mappings":"AAAA,OACE,cACA,SACA,oCAGF,MACE,eCPF,UACI,SACA,gBACA,oCCHJ,OACE,eACA,oCAGF,qCACE,OACE,gBACA,kBAIJ,aACE,eACA,oBACA,SACA,oCAGF,gCAEE,eCrBF,WACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,kBACI,eACA,aAMA,eAJA,mCACI,oCAMR,4BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,wBAEE,+BACA,oCACA,uBAGF,UACE,oBAGF,cACE,kBACA,YACA,UACA,aAGF,cACE,+BACA,eAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BACA,YACA,UAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCrEF,KACE,mBACA,SACA,mCACA,kCACA,0BACA,gBAGF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAGF,MACE,sBACA,4BACA,2BACA,4BACA,iBACA,aACA,WAGF,WACE,0BACA","file":"index.css"}

src/index.js

@@ -1,7 +1,9 @@
+//* Imports
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App.jsx';
+import App from './App';
 
+//* Render 
 ReactDOM.render(
     <App/>,
     document.getElementById('root')

src/scss/index.scss

@@ -1,34 +1,7 @@
+/* Imports */
 @import 'modules/clock';
 @import 'modules/greeting';
 @import 'modules/quote';
 @import 'modules/search';
 @import 'modules/credit';
 @import 'modules/miscellaneous';
-
-#root {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-attachment: fixed;
-    min-height: 100vh;
-    display: grid;
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-body {
-    background: #2f3640;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: 'Lexend Deca';
-    overflow: hidden;
-}
-
-@font-face {
-    font-family: 'Lexend Deca';
-    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
-}

src/scss/modules/_clock.scss

@@ -1,9 +1,9 @@
-.App-clock {
+.clock {
   font-size: 4em;
   margin: 0;
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
-.App-ampm-specifier {
+.ampm {
   font-size: 0.5em;
 }

src/scss/modules/_credit.scss

@@ -1,7 +1,3 @@
-#location {
-  margin-bottom: -10px;
-}
-
 #location,
 #photographer {
   font-size: calc(10px + 1.2vmin);
@@ -9,6 +5,10 @@
   text-overflow: ellipsis;
 }
 
+#location {
+  margin-bottom: -10px;
+}
+
 #photographer {
   position: absolute;
   bottom: 10px;
@@ -16,15 +16,9 @@
   width: 1000px;
 }
 
-.tooltip {
-  position: absolute;
-  bottom: 15px;
-  left: 10px;
-}
-
-.personicon,
 .locationicon {
   font-size: calc(10px + 1.2vmin);
+  cursor: pointer;
 }
 
 .MuiSvgIcon-root {
@@ -49,6 +43,8 @@
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
+  bottom: 15px;
+  left: 10px;
 
   .tooltiptext {
     visibility: hidden;

src/scss/modules/_greeting.scss

@@ -1,4 +1,4 @@
-.App-greeting {
+.greeting {
     margin: 0;
     font-size: 1.6em;
     text-shadow: 0 0 25px rgba(0,0,0,0.3);

src/scss/modules/_miscellaneous.scss

@@ -1,3 +1,12 @@
+body {
+  background: #2f3640;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: 'Lexend Deca';
+  overflow: hidden;
+}
+
 #center {
   margin-left: 2vw;
   margin-right: 2vw;
@@ -11,10 +20,19 @@
 ::placeholder {
   color: #ffffff;
   opacity: 1;
-  /* Firefox */
 }
 
-:-ms-input-placeholder {
+#root {
-  /* Internet Explorer 10-11 */
+  background-size: cover;
-  color: #ffffff;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  min-height: 100vh;
+  display: grid;
+  color: white;
+}
+
+@font-face {
+  font-family: 'Lexend Deca';
+  src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
 }

src/scss/modules/_quote.scss

@@ -1,16 +1,16 @@
-.App-quote {
+.quote {
   font-size: 0.8em;
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 @media screen and (min-width: 600px) {
-  .App-quote {
+  .quote {
     margin-left: 30%;
     margin-right: 30%;
   }
 }
 
-.App-quote-author {
+.quoteauthor {
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
@@ -18,6 +18,6 @@
 }
 
 i.material-icons,
-h1.App-quote-author {
+h1.quoteauthor {
   display: inline;
 }

src/scss/modules/_search.scss

@@ -1,4 +1,4 @@
-.search-bar {
+.searchbar {
     position: absolute;
     left: 20px;
     top: 20px;
@@ -31,7 +31,7 @@
     }
 }
 
-.input.searchText {
+.input.searchtext {
     border: none;
 }