Skip to content

Commit 83fd1ad

Browse files
afk-marioafk-mario
committed
Add sorting options, and express workflow for easier debugging
1 parent 7f8905f commit 83fd1ad

32 files changed

+2162
-1422
lines changed

‎.env-template

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
WEB_EXT_API_KEY=""
22
WEB_EXT_API_SECRET=""
3+
PORT=3000

‎.prettierrc

-3
This file was deleted.

‎index.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const path = require('path');
2+
const dotenv = require('dotenv');
3+
const express = require('express');
4+
const webpack = require('webpack');
5+
const middleware = require('webpack-dev-middleware');
6+
const webpackConfig = require('./webpack.config.js');
7+
8+
const compiler = webpack({ ...webpackConfig, mode: 'development' });
9+
10+
dotenv.config();
11+
12+
const DEV = process.env.NODE_ENV !== 'production';
13+
const PORT = process.env.PORT || 3000;
14+
const app = express();
15+
16+
app.use(
17+
middleware(compiler, {
18+
noInfo: true,
19+
writeToDisk: true,
20+
})
21+
);
22+
23+
app.get('*', (req, res) => {
24+
res.sendFile(path.join(__dirname, 'dist', 'popup.html'));
25+
});
26+
27+
app.listen(PORT, err => {
28+
const info = `==> Listening on port ${PORT} Open up http://127.0.0.1:${PORT} dev:${DEV}`;
29+
if (err) {
30+
console.error(err);
31+
}
32+
console.info(info);
33+
});

‎nodemon.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"ignore": ["*.test.js", "src/*", "dist/*"]
3+
}

‎package.json

+22-17
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "busca.afk",
3-
"version": "1.2.1",
3+
"version": "1.3.0",
44
"description": "busca.afk extension to search links on reddit or more",
55
"main": "js/script.js",
66
"scripts": {
7+
"serve": "nodemon index.js",
78
"start": "web-ext run",
89
"start:macos": "web-ext run -p default --firefox=/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox-bin",
910
"lint": "eslint src/**/*.js",
@@ -36,17 +37,21 @@
3637
]
3738
},
3839
"devDependencies": {
39-
"crx": "^3.2.1",
40-
"eslint": "^4.12.1",
41-
"eslint-config-airbnb": "^16.1.0",
40+
"crx": "^4.0.1",
41+
"eslint": "^5.14.1",
42+
"eslint-config-airbnb": "^17.1.0",
4243
"eslint-import-resolver-webpack": "^0.11.0",
4344
"eslint-plugin-import": "^2.2.0",
4445
"eslint-plugin-jsx-a11y": "^6.0.2",
4546
"eslint-plugin-react": "^7.5.1",
46-
"husky": "^0.14.3",
47+
"express": "^4.16.4",
48+
"husky": "^1.3.1",
4749
"is": "^3.2.1",
48-
"lint-staged": "^6.0.0",
49-
"prettier": "1.9.1"
50+
"lint-staged": "^8.1.4",
51+
"nodemon": "^1.18.10",
52+
"prettier": "1.16.4",
53+
"webpack-cli": "^3.2.3",
54+
"webpack-dev-middleware": "^3.6.0"
5055
},
5156
"dependencies": {
5257
"@babel/cli": "^7.2.3",
@@ -56,24 +61,24 @@
5661
"@babel/plugin-syntax-export-default-from": "^7.2.0",
5762
"@babel/preset-env": "^7.3.1",
5863
"@babel/preset-react": "^7.0.0",
59-
"archiver": "^2.1.0",
60-
"autoprefixer": "^7.2.1",
64+
"archiver": "^3.0.0",
65+
"autoprefixer": "^9.4.7",
6166
"babel-loader": "^8.0.5",
6267
"babel-plugin-transform-export-extensions": "^6.22.0",
6368
"choo": "^6.6.0",
6469
"choo-devtools": "^2.2.0",
6570
"clean-webpack-plugin": "^1.0.1",
6671
"copy-webpack-plugin": "^4.6.0",
67-
"css-loader": "^0.28.4",
68-
"dotenv": "^4.0.0",
69-
"env-cmd": "^7.0.0",
70-
"eslint-config-prettier": "^2.9.0",
71-
"postcss-loader": "^2.0.9",
72-
"precss": "^2.0.0",
73-
"style-loader": "^0.19.0",
72+
"css-loader": "^2.1.0",
73+
"dotenv": "^6.2.0",
74+
"env-cmd": "^8.0.2",
75+
"eslint-config-prettier": "^4.0.0",
76+
"postcss-loader": "^3.0.0",
77+
"precss": "^4.0.0",
78+
"style-loader": "^0.23.1",
7479
"urijs": "^1.19.0",
7580
"web-ext": "^2.9.3",
76-
"webpack": "^3.4.1"
81+
"webpack": "^4.29.5"
7782
},
7883
"peerDependencies": {}
7984
}

‎prettier.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
singleQuote: true,
3+
trailingComma: 'es5',
4+
};

‎src/components/footer/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import html from 'choo/html';
2+
3+
import github from '~components/github';
4+
import './style.css';
5+
6+
export default () => html`
7+
<footer id="footer">
8+
<div class="wrapper">
9+
<h1>busca</h1>
10+
<a
11+
class="github"
12+
href="https://github.com/afk-mcz/busca"
13+
target="_blank"
14+
rel="noopener"
15+
>
16+
${github()}
17+
</a>
18+
</div>
19+
</footer>
20+
`;

‎src/components/footer/style.css

+41
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1+
#footer {
2+
color: var(--white);
3+
position: fixed;
4+
bottom: 0;
5+
left: 0;
6+
right: 0;
17

8+
height: var(--footer-height);
9+
background: var(--dark-gray);
10+
border-top: 2px solid var(--medium-gray);
11+
padding: var(--half-margin);
12+
13+
max-width: var(--popup-width);
14+
15+
display: flex;
16+
flex-flow: row;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
#footer .wrapper {
22+
display: flex;
23+
flex-flow: row nowrap;
24+
align-items: center;
25+
justify-content: space-between;
26+
}
27+
28+
#footer a {
29+
color: currentcolor;
30+
transition: color 0.2s ease;
31+
width: 20px;
32+
}
33+
34+
#footer a:hover {
35+
color: var(--light-blue);
36+
}
37+
38+
#footer svg {
39+
width: 100%;
40+
height: auto;
41+
display: block;
42+
}

‎src/components/github/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import html from 'choo/html';
2+
3+
export default () => html`
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width="43.438"
7+
height="42.366"
8+
viewBox="0 0 11.493 11.209"
9+
>
10+
<path
11+
d="M5.746 0A5.747 5.747 0 0 0 3.93 11.2c.287.052.392-.125.392-.278 0-.136-.005-.497-.008-.977-1.598.347-1.935-.77-1.935-.77-.262-.664-.639-.841-.639-.841-.521-.356.04-.35.04-.35.577.041.88.593.88.593.513.878 1.345.625 1.673.477.052-.37.2-.624.364-.768-1.276-.145-2.617-.638-2.617-2.84 0-.627.224-1.14.591-1.542-.059-.145-.256-.73.057-1.52 0 0 .482-.155 1.58.588.458-.127.95-.19 1.438-.193.489.002.98.066 1.44.193 1.096-.743 1.578-.589 1.578-.589.313.792.116 1.376.057 1.521.369.402.59.915.59 1.542 0 2.208-1.343 2.694-2.623 2.836.206.177.39.528.39 1.064 0 .768-.007 1.388-.007 1.576 0 .154.104.333.395.277A5.749 5.749 0 0 0 5.746 0"
12+
fill="currentcolor"
13+
fill-rule="evenodd"
14+
/>
15+
</svg>
16+
`;

‎src/components/header/index.js

-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +0,0 @@
1-
import html from 'choo/html';
2-
import materialicon from '../material-button';
3-
4-
import './style.css';
5-
6-
export default () => html`
7-
<header id="header">
8-
<div class="wrapper">
9-
<h1>busca</h1>
10-
</div>
11-
</header>
12-
`;

‎src/components/header/style.css

-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +0,0 @@
1-
#header {
2-
background: var(--dark-gray);
3-
border-top: 2px solid var(--medium-gray);
4-
padding: var(--half-margin);
5-
}
6-
7-
#header .wrapper {
8-
display: flex;
9-
flex-flow: row nowrap;
10-
align-items: center;
11-
justify-content: space-between;
12-
}

‎src/components/icon-button/index.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@ import html from 'choo/html';
22

33
import './style.css';
44

5-
export default ({ icon, value, label, onclick }) => html`
6-
<button onclick=${() => {
7-
onclick(value);
8-
}}>
9-
<i class="material-icons" alt=${label}>${icon}</i>
10-
</button>
5+
export default ({ active, icon, value, className, onclick }) => html`
6+
<button
7+
class="icon-button ${className} ${active && '-active'}"
8+
onclick=${() => {
9+
onclick(value);
10+
}}
11+
>
12+
<i class="material-icons">${icon}</i>
13+
</button>
1114
`;

‎src/components/icon-button/style.css

+22
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
1+
.icon-button {
2+
color: currentcolor;
3+
transition: color 0.2s ease;
4+
cursor: pointer;
5+
padding: 5px;
6+
padding-left: var(--margin);
7+
padding-right: var(--margin);
8+
}
19

10+
.icon-button.-active.votes,
11+
.icon-button.votes:hover {
12+
color: var(--red);
13+
}
14+
15+
.icon-button.-active.comments,
16+
.icon-button.comments:hover {
17+
color: var(--yellow);
18+
}
19+
20+
.icon-button.-active.date,
21+
.icon-button.date:hover {
22+
color: var(--light-blue);
23+
}

‎src/components/list/style.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
.list {
2-
width: var(--popup-width);
2+
width: 100%;
33
padding: 0;
44
margin: 0;
55
list-style: none;
66
overflow-x: hidden;
77
overflow-y: auto;
8-
max-height: 500px;
98
}

‎src/components/row/index.js

+21-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@ import html from 'choo/html';
33
import Arrow from '../arrow';
44
import './style.css';
55

6+
const dateFormat = {
7+
year: '2-digit',
8+
month: '2-digit',
9+
day: '2-digit',
10+
};
11+
612
export default ({
713
link,
814
fullname,
915
title,
1016
score,
1117
age,
18+
date,
1219
comments,
1320
subreddit,
1421
likes,
@@ -20,15 +27,27 @@ export default ({
2027
<span class="score">${score}</span>
2128
${Arrow('down')}
2229
</div>
23-
<a class="info-container" href="${link}" target="_blank" rel="noopener noreferrer">
30+
<a
31+
class="info-container"
32+
href="${link}"
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
>
2436
<div class="main-info-container">
2537
<p class="title">${title}</p>
2638
</div>
2739
<div class="additional-info-container">
28-
<span class="comments">
40+
<span class="comments -w-icon">
2941
<i class="material-icons">mode_comment</i>
3042
${comments}
3143
</span>
44+
45+
<span class="date -w-icon">
46+
<i class="material-icons">date_range</i>
47+
<span>
48+
${date.toLocaleDateString(undefined, dateFormat)}
49+
</span>
50+
</span>
3251
<span class="subreddit">r/${subreddit}</span>
3352
<span class="user">u/${user}</span>
3453
</div>

0 commit comments

Comments
 (0)