Merge pull request #117 from btzr-io/preact

Update build

.prettierrc

@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 80,
   "singleQuote": true,
   "semi": false
 }

README.md

@@ -1,8 +1,8 @@
-http://comic-book-reader.com
-
 > ### :warning: Warning
 > This branch is a port to Preact, and does not work yet!
 
+> :rocket: Preview: https://btzr-io.github.io/comic_book_reader/
+
 # Comic Book Reader
 
 * Can read CBR, CBZ, CBT, and PDF files

package.json

@@ -5,7 +5,9 @@
   "homepage": "https://github.com/workhorsy/comic_book_reader",
   "keywords": ["comics"],
   "author": "Matthew Brennan Jones <[email protected]>",
-  "contributors": ["Baltazar Gomez <[email protected]> (https://github.com/btzr-io)"],
+  "contributors": [
+    "Baltazar Gomez <[email protected]> (https://github.com/btzr-io)"
+  ],
   "license": "AGPL-3.0",
   "main": "index.js",
   "repository": {
@@ -15,7 +17,8 @@
   "scripts": {
     "test": "eslint src && preact test",
     "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
-    "build": "preact build --template src/index.html",
+    "build":
+      "preact build --production --no-prerender --config preact.config.js --template src/static.html",
     "serve": "npm run build && preact serve",
     "dev": "preact watch  --template src/index.html",
     "lint": "eslint src",
@@ -53,6 +56,11 @@
     "pretty-quick": "^1.4.1"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.5",
+    "@fortawesome/fontawesome-free-brands": "^5.0.9",
+    "@fortawesome/fontawesome-free-solid": "^5.0.9",
+    "@fortawesome/react-fontawesome": "^0.0.18",
+    "history": "^4.7.2",
     "preact": "^8.2.7",
     "preact-compat": "^3.18.0",
     "preact-router": "^2.6.0",

preact.config.js

@@ -0,0 +1,7 @@
+export default function(config, env, helpers) {
+  /** you can change config here **/
+  env.ASSETS = '/assets/'
+  if (env.production) {
+    config.output.publicPath = './'
+  }
+}

src/components/app/view.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact'
 import { Router, route } from 'preact-router'
 import { requireBrowserFeatures } from '../../utils/browser'
+import createHashHistory from 'history/createHashHistory';
 
 // Routes
 import Files from '../../routes/files'
@@ -64,7 +65,7 @@ export default class App extends Component {
     return (
       <div id="app" class={`${style.app} ${theme}`}>
         {this.state.compatible && <Menu />}
-        <Router onChange={this.handleRoute}>
+        <Router onChange={this.handleRoute} history={createHashHistory()}>
           <Welcome path="/" default />
           <Files path="/files" />
           <Library path="/library" />

src/components/footer/index.js

@@ -10,10 +10,15 @@ export default class Footer extends Component {
 
   render() {
     const { props, state } = this
-    const year = (new Date()).getFullYear()
+    const year = new Date().getFullYear()
 
     return (
-        <footer>Copyright &copy; 2017 - {year} Comic Book Reader <a href="https://github.com/workhorsy/comic_book_reader#contributors">Developers</a></footer>
+      <footer>
+        Copyright &copy; 2017 - {year} Comic Book Reader{' '}
+        <a href="https://github.com/workhorsy/comic_book_reader/tree/preact#contributors">
+          Developers
+        </a>
+      </footer>
     )
   }
 }

src/components/icon/index.js

@@ -1,6 +1,12 @@
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+
 import style from './style'
 
 console.log(style.icon)
-const Icon = ({ name }) => <i class={`fas fa-${name} fa-fw ${style.icon}`} />
+const Icon = ({ name }) => (
+  <i className={style.icon}>
+    <FontAwesomeIcon icon={name} size="xs" fixedWidth />
+  </i>
+)
 
 export default Icon

src/index.html

@@ -5,16 +5,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<title>Comic Book Reader</title>
 		<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
-	    <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700" rel="stylesheet"> 
-        <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
+	    <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700" rel="stylesheet">
 	</head>
 	<body>
 		<div id=root></div>
         <script defer src="/bundle.js" crossorigin="anonymous"></script>
         <script crossorigin="anonymous">
-		  /* TODO: Move somewhere else! */
-		  // Fontawesome bug
-          FontAwesomeConfig = { autoReplaceSvg: 'nest' }
 		  // Prevent Drag
 		  window.addEventListener("dragover",function(e){
 			  e = e || event;

src/index.js

@@ -4,6 +4,26 @@ import store from './unistore/store'
 import App from './components/app'
 import './style'
 
+import fontawesome from '@fortawesome/fontawesome'
+
+import brands from '@fortawesome/fontawesome-free-brands'
+import faFolder from '@fortawesome/fontawesome-free-solid/faFolder'
+import faCog from '@fortawesome/fontawesome-free-solid/faCog'
+import faBars from '@fortawesome/fontawesome-free-solid/faBars'
+import faBookmark from '@fortawesome/fontawesome-free-solid/faBookmark'
+import faArrowDown from '@fortawesome/fontawesome-free-solid/faArrowDown'
+import faQuestionCircle from '@fortawesome/fontawesome-free-solid/faQuestionCircle'
+
+fontawesome.library.add(
+  brands,
+  faCog,
+  faFolder,
+  faBookmark,
+  faBars,
+  faQuestionCircle,
+  faArrowDown
+)
+
 render(
   <div id="outer">
     <Provider store={store}>

src/routes/files/style.less

@@ -12,27 +12,42 @@
   pointer-events: none;
 }
 
-.actions {
+.actions button {
+  width: auto;
 }
 
-.drag h1 i {
+.view h1 {
+    position: relative;
+}
+
+.view h1 i {
   display: block;
+  margin-bottom: 0;
+  font-size: 2em;
+  color: var(--text-message-color);
+  opacity: 0.5;
   transform: translateY(0px);
-  animation-name: drop;
-  animation-duration: 0.35s;
-  animation-fill-mode: both;
-  animation-timing-function: ease;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
 }
 
+.drag h1 i{
+    opacity: 1;
+    animation-name: drop;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+
+    transition: opacity 0.3s ease;
+}
+
+
+
 @keyframes drop {
   from {
-    opacity: 0.5;
     transform: translateY(0px);
   }
   to {
-    opacity: 1;
     transform: translateY(25px);
   }
 }

src/static.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title><%= htmlWebpackPlugin.options.title %></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="manifest" href=".<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
+		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+		<% } %>
+		<% for (var chunk of webpack.chunks) { %>
+		 <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
+			<% for (var file of chunk.files) { %>
+				<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
+					<link rel="preload" href=".<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
+				<% } else if (file.match(/manifest\.json$/)) { %>
+					<link rel="manifest" href=".<%= htmlWebpackPlugin.files.publicPath + file %>">
+				<% } %>
+			<% } %>
+		<% } %>
+		<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700" rel="stylesheet">
+	</head>
+	<body>
+		<%= htmlWebpackPlugin.options.ssr({
+			url: './'
+		}) %>
+		<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+		<script>window.fetch||document.write('<script src=".<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
+	</body>
+</html>

yarn.lock

@@ -2,6 +2,34 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-common-types@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.3.tgz#8475e0f2d1ad1f858c4ec2e76ed9a2456a09ad83"
+
+"@fortawesome/fontawesome-free-brands@^5.0.9":
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.9.tgz#6023e29636a6d97a67a36b7e3f4af20f3d1526b0"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
+"@fortawesome/fontawesome-free-solid@^5.0.9":
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.9.tgz#456155a1cd82a0342ffe6a869d5a54fdadd78548"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
+"@fortawesome/fontawesome@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.5.tgz#c7cfafdd3364245626293cc670357f9fb8487170"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
+"@fortawesome/react-fontawesome@^0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.18.tgz#4e0eb1cf9797715a67bb7705ae084fa0a410f185"
+  dependencies:
+    humps "^2.0.1"
+
 "@types/configstore@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
@@ -3538,6 +3566,16 @@ [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3672,6 +3710,10 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+
 husky@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/husky/-/husky-0.14.3.tgz#c69ed74e2d2779769a17ba8399b54ce0b63c12c3"
@@ -3824,7 +3866,7 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -4548,7 +4590,7 @@ longest@^1.0.0, longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -6340,6 +6382,10 @@ resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -7524,6 +7570,10 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -7604,6 +7654,12 @@ ware@^1.2.0:
   dependencies:
     wrap-fn "^0.1.0"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.4.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"