Github/movies-for-hackers
1
0
Fork 0
mirror of https://github.com/k4m4/movies-for-hackers.git synced 2024-11-23 14:34:55 +00:00
Code Issues Releases Wiki Activity

Tidying up after upstream fetch ready for PR

Browse Source
This commit is contained in:
Michael Cook 2017-08-29 12:24:03 +01:00
parent d273c032f1
commit 057d71f2c9
6 changed files with 6313 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,6 +1,6 @@
![Movies_For_Hackers_Logo](http://nikolaskama.me/content/images/2017/02/movies-for-hackers.png) ![Movies_For_Hackers_Logo](http://nikolaskama.me/content/images/2017/02/movies-for-hackers.png)
# Movies For Hackers # Movies For Hackers
> A curated list of movies every hacker & cyberpunk must watch. > A curated list of movies every hacker & cyberpunk must watch.
@ -12,7 +12,7 @@ Check out my [blog](https://nikolaskama.me/) and follow me on [Twitter](https://
## Contents ## Contents
## [View the sortable version](https://entozoon.github.io/movies-for-hackers/) ## [View the sortable version](https://k4m4.github.io/movies-for-hackers/)
- [Movies For Hackers](#movies-for-hackers) - [Movies For Hackers](#movies-for-hackers)
- [Thrillers/Drama](#thrillers--drama) - [Thrillers/Drama](#thrillers--drama)
@ -72,7 +72,7 @@ Check out my [blog](https://nikolaskama.me/) and follow me on [Twitter](https://
| [World on a Wire](http://www.imdb.com/title/tt0070904/) | Science fiction/Thriller | 1973 | 7.9/10 | | [World on a Wire](http://www.imdb.com/title/tt0070904/) | Science fiction/Thriller | 1973 | 7.9/10 |
## Action ## Action
| MOVIE | GENRE | YEAR | RATING | | MOVIE | GENRE | YEAR | RATING |

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Movies for Hackers</title> <title>Movies for Hackers</title>
<meta name="description" content="movies-for-hackers - 🎬 A curated list of movies every hacker &amp; cyberpunk must watch."> <meta name="description" content="movies-for-hackers - 🎬 A curated list of movies every hacker &amp; cyberpunk must watch.">
<meta name="viewport" content="initial-scale=0.75"/> <meta name="viewport" content="initial-scale=0.75"/>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

6136
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

197
src/js/app.js
View File

@ -2,66 +2,63 @@
* Vars * Vars
*/ */
var client = new XMLHttpRequest(), var client = new XMLHttpRequest(),
objectifyMarkdownNotWomen = new marked.Renderer(), objectifyMarkdownNotWomen = new marked.Renderer(),
moviesCollection, moviesCollection,
movies, movies,
cellCounter = 0, cellCounter = 0,
lastHeading = '', lastHeading = '',
headers = ['movie', 'genre', 'year', 'rating']; headers = ['movie', 'genre', 'year', 'rating'];
/** /**
* React Table Component * React Table Component
* Using https://github.com/AllenFang/react-bootstrap-table * Using https://github.com/AllenFang/react-bootstrap-table
*/ */
const parseNowt = (cell, row) => { const parseNowt = (cell, row) => {
return cell; return cell;
} };
const parseTheImdb = (cell, row) => { const parseTheImdb = (cell, row) => {
// Make it like 7.1 rather than 7.1/10, we all know what it's out of. // Make it like 7.1 rather than 7.1/10, we all know what it's out of.
if (cell != null) { if (cell != null) {
return cell.replace('/10', ''); return cell.replace('/10', '');
} }
} };
class Table extends React.Component { class Table extends React.Component {
// Runs on init // Runs on init
constructor(props) { constructor(props) {
// pass props to the base constructor: // pass props to the base constructor:
super(props); super(props);
this.movies = props.movies; this.movies = props.movies;
this.columns = []; this.columns = [];
// Create table headers (the rest is all handled by the plugin) // Create table headers (the rest is all handled by the plugin)
headers.map((header, i) => { headers.map((header, i) => {
let isFirstItem = (i == 0), let isFirstItem = i == 0,
parseImdb = (header == 'rating') parseImdb = header == 'rating';
this.columns.push( this.columns.push(
<TableHeaderColumn <TableHeaderColumn
key={i} key={i}
isKey={isFirstItem} isKey={isFirstItem}
dataFormat={parseImdb ? parseTheImdb : parseNowt} dataFormat={parseImdb ? parseTheImdb : parseNowt}
dataField={header} dataField={header}
dataSort={true} dataSort={true}
> >
{header} {header}
</TableHeaderColumn> </TableHeaderColumn>
); );
}); });
} }
// Runs on render // Runs on render
render() { render() {
return ( return (
<BootstrapTable <BootstrapTable data={this.movies} hover={true}>
data={this.movies} {this.columns}
hover={true} </BootstrapTable>
> );
{this.columns} }
</BootstrapTable>
);
}
} }
/** /**
@ -69,75 +66,81 @@ class Table extends React.Component {
* Turning the parsed markdown into an array of objects * Turning the parsed markdown into an array of objects
*/ */
objectifyMarkdownNotWomen.heading = function(heading, level) { objectifyMarkdownNotWomen.heading = function(heading, level) {
lastHeading = heading; lastHeading = heading;
}; };
objectifyMarkdownNotWomen.tablerow = function(content) { objectifyMarkdownNotWomen.tablerow = function(content) {
cellCounter = 0; cellCounter = 0;
movies.push({}); movies.push({});
}; };
objectifyMarkdownNotWomen.tablecell = function(content, flags) { objectifyMarkdownNotWomen.tablecell = function(content, flags) {
movies[movies.length - 1][headers[cellCounter]] = content; movies[movies.length - 1][headers[cellCounter]] = content;
cellCounter++; cellCounter++;
}; };
objectifyMarkdownNotWomen.table = function(header, body) { objectifyMarkdownNotWomen.table = function(header, body) {
// Test if the first movie object is actually just the headers (which it will be) // Test if the first movie object is actually just the headers (which it will be)
if (movies[0][headers[0]].toLowerCase() == headers[0]) { if (movies[0][headers[0]].toLowerCase() == headers[0]) {
movies.splice(0, 1); movies.splice(0, 1);
} }
// Similarly, test if the very last movie object is empty and pop it // Similarly, test if the very last movie object is empty and pop it
if (movies[movies.length - 1][headers[0]] == null) { if (movies[movies.length - 1][headers[0]] == null) {
movies.pop(); movies.pop();
} }
// Add movies to collection // Add movies to collection
moviesCollection.push({ moviesCollection.push({
heading: lastHeading, heading: lastHeading,
movies: movies movies: movies
}); });
movies = [{}]; movies = [{}];
}; };
// Ajax the markdown file with all movie data // Ajax the markdown file with all movie data
client.open('GET', window.location.href + 'README.md'); client.open('GET', window.location.href + 'README.md');
client.onreadystatechange = function(e) { client.onreadystatechange = function(e) {
// Wipe movies, collections and content as this'll run a bunch of times // Wipe movies, collections and content as this'll run a bunch of times
document.getElementById("root").innerHTML = ''; document.getElementById('root').innerHTML = '';
moviesCollection = []; moviesCollection = [];
movies = [{}]; movies = [{}];
/* /*
// Test markdown: // Test markdown:
marked("## Thrillers / Drama\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [WarGames: The Dead Code](http://www.imdb.com/title/tt0865957/) | Thriller/Drama | 2008 | 4.5/10 |\n| [WarGames](http://www.imdb.com/title/tt0086567/) | Thriller/Drama | 1983 | 7.1/10 |\n| [Hackers](http://www.imdb.com/title/tt0113243/) | Crime/Drama | 1995 | 6.2/10 |\n\n## Science Fiction / Fantasy\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [The Matrix](http://www.imdb.com/title/tt0133093/) | Fantasy/Action | 1999 | 8.7/10 |\n| [The Lawnmower Man](http://www.imdb.com/title/tt0104692/) | Fantasy/Action | 1992 | 5.4/10 |", { marked("## Thrillers / Drama\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [WarGames: The Dead Code](http://www.imdb.com/title/tt0865957/) | Thriller/Drama | 2008 | 4.5/10 |\n| [WarGames](http://www.imdb.com/title/tt0086567/) | Thriller/Drama | 1983 | 7.1/10 |\n| [Hackers](http://www.imdb.com/title/tt0113243/) | Crime/Drama | 1995 | 6.2/10 |\n\n## Science Fiction / Fantasy\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [The Matrix](http://www.imdb.com/title/tt0133093/) | Fantasy/Action | 1999 | 8.7/10 |\n| [The Lawnmower Man](http://www.imdb.com/title/tt0104692/) | Fantasy/Action | 1992 | 5.4/10 |", {
*/ */
marked(client.responseText, { marked(
renderer: objectifyMarkdownNotWomen client.responseText,
}, function() { {
if (moviesCollection[0] == null) { renderer: objectifyMarkdownNotWomen
return; },
} function() {
console.log(moviesCollection); if (moviesCollection[0] == null) {
//document.body.innerHTML = JSON.stringify(moviesCollection); return;
}
console.log(moviesCollection);
//document.body.innerHTML = JSON.stringify(moviesCollection);
// Create JSX for tables of each set of movies in moviesCollection // Create JSX for tables of each set of movies in moviesCollection
var moviesCollectionJSX = []; var moviesCollectionJSX = [];
moviesCollection.map((movies, i) => { moviesCollection.map((movies, i) => {
moviesCollectionJSX.push( moviesCollectionJSX.push(
<div key={i}> <div key={i}>
<h2>{movies.heading}</h2> <h2>
<Table movies={movies.movies} /> {movies.heading}
</div> </h2>
) <Table movies={movies.movies} />
}); </div>
);
});
ReactDOM.render( ReactDOM.render(
<div> <div>
{moviesCollectionJSX} {moviesCollectionJSX}
</div>, </div>,
document.getElementById("root") document.getElementById('root')
); );
}); }
);
}; };
client.send(); client.send();

154
src/scss/app.scss
View File

@ -1,108 +1,100 @@
// Realistically, this would bring in bootstrap as a package and use it properly but this is a quick project. $brand-primary: #ba4ee4;
$brand-primary: #ba4ee4;
$brand-secondary: #47c101; $brand-secondary: #47c101;
$brand-tertiary: #15afd9; $brand-tertiary: #15afd9;
$headings-color: $brand-primary; $headings-color: $brand-primary;
$link-color: #df3968; $link-color: #df3968;
$border-color: adjust-color( $border-color: adjust-color($brand-tertiary, $lightness: -35%);
$brand-tertiary,
$lightness: -35%
);
body { body {
font-size: calc(10px + .5vw); font-size: calc(10px + .5vw);
padding: 0 0 30px; padding: 0 0 30px;
font-family: 'Play', sans-serif; font-family: 'Play', sans-serif;
background: black; background: black;
color: $brand-secondary; color: $brand-secondary;
} }
.container-fluid { .container-fluid {
max-width: 1440px; max-width: 1440px;
overflow: auto; overflow: auto;
} }
h1, h1,
h2, h2,
h3 { h3 {
color: $headings-color; color: $headings-color;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
} }
a { a {
color: $link-color; color: $link-color;
&:hover { &:hover {
color: white; color: white;
} }
} }
th { th {
position: relative; position: relative;
text-transform: capitalize; text-transform: capitalize;
background: $border-color; background: $border-color;
color: $brand-tertiary; color: $brand-tertiary;
} }
.react-bs-table { .react-bs-table {
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 2px; border-radius: 2px;
margin: 0; margin: 0;
&, &,
& table { & table {
// We can't do this because, unbelievably, the <th> elements are in a separate table :( // We can't do this because, unbelievably, the <th> elements are in a separate table :( // table-layout: auto;
//table-layout: auto; }
} table {
table { td,
td, th {
th { // Override some bananas styles
// Override some bananas styles // Why did they think nowrap was a smart idea? Fuck mobiles, right?
// Why did they think nowrap was a smart idea? Fuck mobiles, right? white-space: normal;
white-space: normal; word-break: break-word;
word-break: break-word; }
} }
}
} }
.table { .table {
// Cells // Cells
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
border-color: $border-color; border-color: $border-color;
padding: 1px calc(0px + 1vw); padding: 1px calc(0px + 1vw);
} }
> th { > th {
padding-right: 20px; padding-right: 20px;
} }
} }
} }
} }
.table-hover { .table-hover {
> tbody { > tbody {
> tr:hover { > tr:hover {
background: adjust-color( background: adjust-color($brand-secondary, $lightness: -35%);
$brand-secondary, }
$lightness: -35% }
);
}
}
} }
// Quick solution to the forced table-layout: fixed // Quick solution to the forced table-layout: fixed
th, th,
td { td {
&:nth-child(1) { &:nth-child(1) {
width: 50%; width: 50%;
} }
&:nth-child(2) { &:nth-child(2) {
width: 22%; width: 22%;
} }
&:nth-child(3) { &:nth-child(3) {
width: 14%; width: 14%;
} }
&:nth-child(4) { &:nth-child(4) {
width: 14%; width: 14%;
} }
} }
.order { .order {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 3px; right: 3px;
} }

8
update-movies.bat
View File

@ -1,8 +0,0 @@
@echo off
echo.
echo Pull from master - as it has the remote set by git remote add upstream https://github.com/k4m4/movies-for-hackers.git
echo.
git pull upstream master
git pull
git push
pause