diff --git a/README.md b/README.md
index 92cb112..b971c6c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Movies For Hackers
+# Movies For Hackers
> 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
-## [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)
- [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 |
-
+
## Action
| MOVIE | GENRE | YEAR | RATING |
diff --git a/index.html b/index.html
index 179c903..2713f29 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
Movies for Hackers
-
- {header}
-
- );
- });
- }
+ // Create table headers (the rest is all handled by the plugin)
+ headers.map((header, i) => {
+ let isFirstItem = i == 0,
+ parseImdb = header == 'rating';
+ this.columns.push(
+
+ {header}
+
+ );
+ });
+ }
- // Runs on render
- render() {
- return (
-
- {this.columns}
-
- );
- }
+ // Runs on render
+ render() {
+ return (
+
+ {this.columns}
+
+ );
+ }
}
/**
@@ -69,75 +66,81 @@ class Table extends React.Component {
* Turning the parsed markdown into an array of objects
*/
objectifyMarkdownNotWomen.heading = function(heading, level) {
- lastHeading = heading;
+ lastHeading = heading;
};
objectifyMarkdownNotWomen.tablerow = function(content) {
- cellCounter = 0;
- movies.push({});
+ cellCounter = 0;
+ movies.push({});
};
objectifyMarkdownNotWomen.tablecell = function(content, flags) {
- movies[movies.length - 1][headers[cellCounter]] = content;
- cellCounter++;
+ movies[movies.length - 1][headers[cellCounter]] = content;
+ cellCounter++;
};
objectifyMarkdownNotWomen.table = function(header, body) {
- // Test if the first movie object is actually just the headers (which it will be)
- if (movies[0][headers[0]].toLowerCase() == headers[0]) {
- movies.splice(0, 1);
- }
- // Similarly, test if the very last movie object is empty and pop it
- if (movies[movies.length - 1][headers[0]] == null) {
- movies.pop();
- }
- // Add movies to collection
- moviesCollection.push({
- heading: lastHeading,
- movies: movies
- });
- movies = [{}];
+ // Test if the first movie object is actually just the headers (which it will be)
+ if (movies[0][headers[0]].toLowerCase() == headers[0]) {
+ movies.splice(0, 1);
+ }
+ // Similarly, test if the very last movie object is empty and pop it
+ if (movies[movies.length - 1][headers[0]] == null) {
+ movies.pop();
+ }
+ // Add movies to collection
+ moviesCollection.push({
+ heading: lastHeading,
+ movies: movies
+ });
+ movies = [{}];
};
// Ajax the markdown file with all movie data
client.open('GET', window.location.href + 'README.md');
client.onreadystatechange = function(e) {
- // Wipe movies, collections and content as this'll run a bunch of times
- document.getElementById("root").innerHTML = '';
- moviesCollection = [];
- movies = [{}];
+ // Wipe movies, collections and content as this'll run a bunch of times
+ document.getElementById('root').innerHTML = '';
+ moviesCollection = [];
+ movies = [{}];
- /*
+ /*
// 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, {
- renderer: objectifyMarkdownNotWomen
- }, function() {
- if (moviesCollection[0] == null) {
- return;
- }
- console.log(moviesCollection);
- //document.body.innerHTML = JSON.stringify(moviesCollection);
+ marked(
+ client.responseText,
+ {
+ renderer: objectifyMarkdownNotWomen
+ },
+ function() {
+ if (moviesCollection[0] == null) {
+ return;
+ }
+ console.log(moviesCollection);
+ //document.body.innerHTML = JSON.stringify(moviesCollection);
- // Create JSX for tables of each set of movies in moviesCollection
- var moviesCollectionJSX = [];
- moviesCollection.map((movies, i) => {
- moviesCollectionJSX.push(
-
- )
- });
+ // Create JSX for tables of each set of movies in moviesCollection
+ var moviesCollectionJSX = [];
+ moviesCollection.map((movies, i) => {
+ moviesCollectionJSX.push(
+
+
+ {movies.heading}
+
+
+
- {moviesCollectionJSX}
-
,
- document.getElementById("root")
- );
- });
+ ReactDOM.render(
+
+ {moviesCollectionJSX}
+
,
+ document.getElementById('root')
+ );
+ }
+ );
};
client.send();
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 84afb3e..e112648 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -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-tertiary: #15afd9;
-$headings-color: $brand-primary;
-$link-color: #df3968;
-$border-color: adjust-color(
- $brand-tertiary,
- $lightness: -35%
-);
+$brand-tertiary: #15afd9;
+$headings-color: $brand-primary;
+$link-color: #df3968;
+$border-color: adjust-color($brand-tertiary, $lightness: -35%);
body {
- font-size: calc(10px + .5vw);
- padding: 0 0 30px;
- font-family: 'Play', sans-serif;
- background: black;
- color: $brand-secondary;
+ font-size: calc(10px + .5vw);
+ padding: 0 0 30px;
+ font-family: 'Play', sans-serif;
+ background: black;
+ color: $brand-secondary;
}
.container-fluid {
- max-width: 1440px;
- overflow: auto;
+ max-width: 1440px;
+ overflow: auto;
}
h1,
h2,
h3 {
- color: $headings-color;
+ color: $headings-color;
}
h2 {
- font-size: 20px;
+ font-size: 20px;
}
a {
- color: $link-color;
- &:hover {
- color: white;
- }
+ color: $link-color;
+ &:hover {
+ color: white;
+ }
}
th {
- position: relative;
- text-transform: capitalize;
- background: $border-color;
- color: $brand-tertiary;
+ position: relative;
+ text-transform: capitalize;
+ background: $border-color;
+ color: $brand-tertiary;
}
.react-bs-table {
- border: 1px solid $border-color;
- border-radius: 2px;
- margin: 0;
- &,
- & table {
- // We can't do this because, unbelievably, the elements are in a separate table :(
- //table-layout: auto;
- }
- table {
- td,
- th {
- // Override some bananas styles
- // Why did they think nowrap was a smart idea? Fuck mobiles, right?
- white-space: normal;
- word-break: break-word;
- }
- }
+ border: 1px solid $border-color;
+ border-radius: 2px;
+ margin: 0;
+ &,
+ & table {
+ // We can't do this because, unbelievably, the elements are in a separate table :( // table-layout: auto;
+ }
+ table {
+ td,
+ th {
+ // Override some bananas styles
+ // Why did they think nowrap was a smart idea? Fuck mobiles, right?
+ white-space: normal;
+ word-break: break-word;
+ }
+ }
}
.table {
- // Cells
- > thead,
- > tbody,
- > tfoot {
- > tr {
- > th,
- > td {
- border-color: $border-color;
- padding: 1px calc(0px + 1vw);
- }
- > th {
- padding-right: 20px;
- }
- }
- }
+ // Cells
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ border-color: $border-color;
+ padding: 1px calc(0px + 1vw);
+ }
+ > th {
+ padding-right: 20px;
+ }
+ }
+ }
}
.table-hover {
- > tbody {
- > tr:hover {
- background: adjust-color(
- $brand-secondary,
- $lightness: -35%
- );
- }
- }
+ > tbody {
+ > tr:hover {
+ background: adjust-color($brand-secondary, $lightness: -35%);
+ }
+ }
}
// Quick solution to the forced table-layout: fixed
th,
td {
- &:nth-child(1) {
- width: 50%;
- }
- &:nth-child(2) {
- width: 22%;
- }
- &:nth-child(3) {
- width: 14%;
- }
- &:nth-child(4) {
- width: 14%;
- }
+ &:nth-child(1) {
+ width: 50%;
+ }
+ &:nth-child(2) {
+ width: 22%;
+ }
+ &:nth-child(3) {
+ width: 14%;
+ }
+ &:nth-child(4) {
+ width: 14%;
+ }
}
.order {
- position: absolute;
- top: 1px;
- right: 3px;
+ position: absolute;
+ top: 1px;
+ right: 3px;
}
diff --git a/update-movies.bat b/update-movies.bat
deleted file mode 100644
index 10d3730..0000000
--- a/update-movies.bat
+++ /dev/null
@@ -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