diff --git a/.gitignore b/.gitignore index 10c0b40..1b5eb28 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,7 @@ node_modules/* npm-debug.log -dist/textbook.js -dist/textbook.js.map - +build build/* -!build/.exists .DS_Store diff --git a/build/.exists b/build/.exists deleted file mode 100644 index e69de29..0000000 diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index da93a2a..0000000 --- a/dist/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - Lolololol - - - - - - - - - - - - diff --git a/gulpfile.js b/gulpfile.js index 0d06cbd..32839d3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,7 +4,7 @@ var uglify = require('gulp-uglify'); var path = require('path'); var WrapperPlugin = require('wrapper-webpack-plugin'); var webshot = require('gulp-webshot'); -var fs = require('fs'); +var fs = require('fs-extra'); var env = require('./src/env.js'); var Twit = require('twit') @@ -37,7 +37,7 @@ var webpackModule = { }; gulp.task('tweet',function(done){ - var b64content = fs.readFileSync('build/index.jpeg', { encoding: 'base64' }); + var b64content = fs.readFileSync('build/book.jpg', { encoding: 'base64' }); T.post('media/upload', { media_data: b64content }, function (err, data, response) { var params = { status: '', media_ids: [data.media_id_string] } T.post('statuses/update', params, function (err, data, response) { @@ -46,31 +46,50 @@ gulp.task('tweet',function(done){ }) }) -gulp.task('webshot',function(){ - return gulp.src('dist/index.html') - .pipe(webshot({ - dest: 'build/', - root: 'dist', - renderDelay: 20000, - streamType: 'jpeg', - quality: 75, - screenSize: { - width: 800, - height: 1100 - } - })) -}) +gulp.task('webshot',function(done){ -gulp.task('shitpost', - gulp.series('webshot','tweet') -); + var webshot = require('webshot'); + + var options = { + renderDelay: 20000, + siteType: 'file', + phantomPath: require('phantomjs2').path, + phantomConfig: { + 'local-to-remote-url-access':'true', + 'web-security':'false' + }, + userAgent: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3', + errorIfJSException: true, + quality: 75, + screenSize: { + width: 800, + height: 1100 + } + }; + + webshot('build/index.html', 'build/book.jpg', options, function(err) { + if(err) { + console.error(err); + } + else { + done(); + } + }); + +}); -gulp.task('test', function (done) { - console.log('yes it works its perfect'); +gulp.task('_makefiles',function(done){ + fs.removeSync('build'); + fs.mkdirsSync('build'); + fs.copySync('src/template/index.html','build/index.html'); + var data = fs.readFileSync('build/index.html'); + data = data.toString(); + data = data.replace('{{base}}','file://'+__dirname+'/build/index.html'); + fs.writeFileSync('build/index.html', data); done(); }); -gulp.task('default', function() { +gulp.task('_makejs', function() { return gulp.src('src/index.js') .pipe(webpack({ output: { @@ -98,11 +117,10 @@ gulp.task('default', function() { root: path.resolve('./src') } })) - .pipe(gulp.dest('dist/')); + .pipe(gulp.dest('build/')); }); gulp.task('watch',function() { - return gulp.src('src/index.js') .pipe(webpack({ watch: true, @@ -132,5 +150,14 @@ gulp.task('watch',function() { root: path.resolve('./src') } })) - .pipe(gulp.dest('dist/')); + .pipe(gulp.dest('build/')); }) + + +gulp.task('default', + gulp.series('_makefiles','_makejs') +); + +gulp.task('shitpost', + gulp.series('default','webshot','tweet') +); diff --git a/package.json b/package.json index df1775f..71c750d 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,11 @@ "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", + "color-scheme": "0.0.5", "document-ready-promise": "^3.0.1", "es6-promise": "^4.0.5", "es6-promise-promise": "1.0.0", + "fs-extra": "^1.0.0", "gulp": "github:gulpjs/gulp#4.0", "gulp-github-release": "^1.2.0", "gulp-mocha-phantomjs": "^0.12.0", @@ -30,10 +32,12 @@ "mocha": "^2.5.3", "mocha-phantomjs": "^4.1.0", "mustache": "^2.2.1", + "phantomjs2": "^2.2.0", "raw-loader": "^0.5.1", "twit": "^2.2.5", "webpack": "^1.13.1", "webpack-stream": "^3.2.0", + "webshot": "^0.18.0", "wrapper-webpack-plugin": "0.1.11" } } diff --git a/src/data/majors.js b/src/data/majors.js index 3bedc75..31360cb 100644 --- a/src/data/majors.js +++ b/src/data/majors.js @@ -1 +1,106 @@ -module.exports = ["Accounting","Actuarial Science","Advertising","Agriculture","Agricultural and Biological Engineering","Agricultural Business Management","Agriculture Economics","Animal Bioscience","Animal Sciences","Anthropology","Applied Mathematics","Archaeology","Architectural Engineering","Architecture","Art History","Studio Art","Art Education","Biobehavioral Health","Biochemistry","Bioengineering","Biology","Biophysics","Biotechnology","Business Administration and Management","Business Logistics","Chemical Engineering","Chemistry","Children","Civil Engineering","Computer Engineering","Computer Science","Crime, Law, and Justice","Dance","Earth Sciences","Economics","Electrical Engineering","Elementary and Kindergarten Education","Engineering Science","English","Environmental Systems Engineering","Environmental Sciences","Environmental Resource Management","Film and Video","Finance","Food Science","Forest Science","Forest Technology","General Science","Geography","Geosciences","Graphic Design and Photography","Health and Physical Education","Health Policy and Administration","History","Horticulture","Hotel, Restaurant, and Institutional Management","Human Development and Family Studies","Individual and Family Studies","Industrial Engineering","Information Sciences and Technology","Journalism","Kinesiology","Landscape Architecture","Law Enforcement and Correction","Marine Biology","Marketing","Mathematics","Mechanical Engineering","Media Studies","Meteorology","Microbiology","Mineral Economics","Modern Languages","Music Education","Nuclear Engineering","Nursing","Nutrition","Philosophy","Physics","Physiology","Political Science","Pre-medicine","Psychology","Public Relations","Real Estate","Recreation and Parks","Rehabilitation Services","Religious Studies","Secondary Education","Sociology","Social Work","Special Education","Speech Communication","Speech Pathology and Audiology/Communication Disorder","Statistics","Telecommunications","Theater","Wildlife and Fishery Science","Wildlife Technology","Gender Studies"]; +module.exports = [ + "Accounting", + "Actuarial Science", + "Advertising", + "Agriculture", + "Agricultural Engineering", + "Agricultural Business Management", + "Agriculture Economics", + "Animal Bioscience", + "Animal Sciences", + "Anthropology", + "Applied Mathematics", + "Archaeology", + "Architectural Engineering", + "Architecture", + "Art History", + "Studio Art", + "Art Education", + "Biobehavioral Health", + "Biochemistry", + "Bioengineering", + "Biological Engineering", + "Biology", + "Biophysics", + "Biotechnology", + "Business Administration", + "Business Logistics", + "Chemical Engineering", + "Chemistry", + "Children", + "Civil Engineering", + "Computer Engineering", + "Computer Science", + "Crime, Law, and Justice", + "Dance", + "Earth Sciences", + "Ethics", + "Economics", + "Electrical Engineering", + "Elementary Education", + "Engineering Science", + "English", + "Environmental Systems Engineering", + "Environmental Sciences", + "Environmental Resource Management", + "Film and Video", + "Finance", + "Food Science", + "Forest Science", + "Forest Technology", + "General Science", + "Geography", + "Geosciences", + "Graphic Design and Photography", + "Health and Physical Education", + "Health Policy and Administration", + "History", + "Horticulture", + "Hotel and Restaurant Management", + "Human Development & Family Studies", + "Individual and Family Studies", + "Industrial Engineering", + "Information Sciences and Technology", + "Journalism", + "Kinesiology", + "Landscape Architecture", + "Law Enforcement and Correction", + "Marine Biology", + "Marketing", + "Mathematics", + "Mechanical Engineering", + "Media Studies", + "Meteorology", + "Microbiology", + "Mineral Economics", + "Modern Languages", + "Music Education", + "Nuclear Engineering", + "Nursing", + "Nutrition", + "Philosophy", + "Physics", + "Physiology", + "Political Science", + "Politics", + "Pre-medicine", + "Psychology", + "Public Relations", + "Public Health", + "Real Estate", + "Recreation and Parks", + "Rehabilitation Services", + "Religious Studies", + "Secondary Education", + "Sociology", + "Social Work", + "Special Education", + "Speech Communication", + "Statistics", + "Telecommunications", + "Theater", + "Wildlife and Fishery Science", + "Wildlife Technology", + "Gender Studies", + "Energy" +]; diff --git a/src/data/wrap.js b/src/data/wrap.js new file mode 100644 index 0000000..4ce6b86 --- /dev/null +++ b/src/data/wrap.js @@ -0,0 +1,10 @@ +module.exports = [ + 'Updated $1', + 'Intro to $1', + '$1 101', + '$1 in depth', + 'Dive into $1', + 'Integrated $1', + '$1 Theory', + 'New $1' +] diff --git a/src/index.js b/src/index.js index f77458e..d67338b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,71 +1,134 @@ -var env = require('env.js'); -var apiUrl = 'https://api.shutterstock.com/v2'; +var photoGetter = require('lib/photoGetter.js'); +var makeColors = require('lib/makeColors.js'); -var concepts = require('data/concepts.js'); var titles = require('data/majors.js'); var names = require('data/names.js'); +var wrap = require('data/wrap.js'); -var bookCreated = new Event('bookCreated',{bubbles:true}); +var bookCreated = new Event('bookCreated',{bubbles:true}); -function encodeAuthorization() { - var clientId = env.clientId; - var clientSecret = env.clientSecret; +var random = function(arr) { + return arr[Math.floor(Math.random() * arr.length)]; +} - if (!clientId || !clientSecret) { - throw('Client id and/or client secret are missing in the API key section, with out these you wont be able to contact the API.'); +var getAuthor = function(type) { + if(type == 0) { + return random(names)+' '+random(names).charAt(0).toUpperCase()+' '+random(names); + } + if(type == 1) { + return random(names).charAt(0).toUpperCase()+'. '+random(names); + } + else { + return random(names)+' '+random(names); } - return 'Basic ' + window.btoa(clientId + ':' + clientSecret); } -module.exports = function(){ +var getTitle = function() { + var title = titles[Math.floor(Math.random() * titles.length)]; + var titleSeed = Math.random(); + if(titleSeed > .25) title = random(wrap).replace('$1',title); + return title; +} - var rq = $.ajax({ - url: apiUrl + '/images/search', - dataType: 'json', - data: { - query: concepts[Math.floor(Math.random() * concepts.length)], - image_type: 'photo', - orientation: 'vertical' - }, - headers: { - Authorization: encodeAuthorization() - } +var makeCss = function() { + + var css = require('template/textbook.css'); + var colors = makeColors(); + + Object.keys(colors).map(function(k){ + css = css + .replace(new RegExp('-color-'+k+'-1-', 'g'),'#'+colors[k][0]) + .replace(new RegExp('-color-'+k+'-2-', 'g'),'#'+colors[k][1]) + .replace(new RegExp('-color-'+k+'-3-', 'g'),'#'+colors[k][2]) }); - var random = function(arr) { - return arr[Math.floor(Math.random() * arr.length)]; - } + $('head').append( + $('').text(css) + ); +} - var getAuthor = function() { - return random(names)+' '+random(names); - } +var makeBook = function(params) { - rq.done(function(response){ - var url = response.data[Math.floor(Math.random() * response.data.length)].assets.preview.url; - var url2 = response.data[Math.floor(Math.random() * response.data.length)].assets.preview.url; + if(!params) params = {}; + if(!params.debug) params.debug = false; - var authors = Math.ceil(Math.random()*4); - var layout = Math.ceil(Math.random()*6); + var getPhotos = new photoGetter(params.debug); - var title = titles[Math.floor(Math.random() * titles.length)]; - var titleSeed = Math.random(); - if(titleSeed > .75) title = 'Intro to '+title; - else if (titleSeed < .25) title = title + ' 101'; - else if (titleSeed < .5) title = 'Updated '+title; + var authorsTotal = Math.ceil(Math.random()*4); + var authorsType = Math.floor(Math.random()*3); - $('textbook').addClass('l'+layout); + if(!params.layout) params.layout = Math.ceil(Math.random()*6); - $('textbook bg').css({'background-image':'url('+url+')'}); - $('textbook bg2').css({'background-image':'url('+url2+')'}); - $('textbook title').text(title); + var title = getTitle(); - for(var i = 0; i < authors; i++) { - $('textbook author').append(''+getAuthor()+''); - } + var $textbook = $(''); - $('textbook')[0].dispatchEvent(bookCreated); + $textbook.addClass('l'+params.layout); + + $textbook.append( + $('').append(''+title+'') + ); + $textbook.append( + $('') + ); + for(var i = 0; i < authorsTotal; i++) { + $textbook.find('author').append(''+getAuthor(authorsType)+''); + } + getPhotos.done(function(photos){ + $textbook.append( + $('').css({'background-image':'url('+photos[0]+')'}) + ); + $textbook.append( + $('').css({'background-image':'url('+photos[1]+')'}) + ); + }); + + $('body').append($textbook); + + $textbook[0].dispatchEvent(bookCreated); + +} + +module.exports = function(){ + + var lib = {}; + lib.makeBook = makeBook; + + makeCss(); + lib.makeBook(); + + /* + lib.makeBook({ + debug: true, + layout: 1 + }); + lib.makeBook({ + debug: true, + layout: 2 + }); + lib.makeBook({ + debug: true, + layout: 3 + }); + lib.makeBook({ + debug: true, + layout: 4 + }); + lib.makeBook({ + debug: true, + layout: 5 + }); + lib.makeBook({ + debug: true, + layout: 6 + }); + lib.makeBook({ + debug: true, + layout: 7 }); + */ + return lib; } diff --git a/src/lib/makeColors.js b/src/lib/makeColors.js new file mode 100644 index 0000000..edd0fb8 --- /dev/null +++ b/src/lib/makeColors.js @@ -0,0 +1,41 @@ +var ColorScheme = require('color-scheme'); + +module.exports = function() { + + var colors = {}; + + var allColors = (new ColorScheme) + .from_hue(Math.floor(Math.random()*256)) + .scheme('triade') + .variation('pastel') + .colors(); + colors.pastel = [ + allColors[0],allColors[4],allColors[8] + ]; + var allColors = (new ColorScheme) + .from_hue(Math.floor(Math.random()*256)) + .scheme('triade') + .variation('soft') + .colors(); + colors.soft = [ + allColors[0],allColors[4],allColors[8] + ]; + var allColors = (new ColorScheme) + .from_hue(Math.floor(Math.random()*256)) + .scheme('triade') + .variation('hard') + .colors(); + colors.hard = [ + allColors[0],allColors[4],allColors[8] + ]; + var allColors = (new ColorScheme) + .from_hue(Math.floor(Math.random()*256)) + .scheme('triade') + .variation('pale') + .colors(); + colors.pale = [ + allColors[0],allColors[4],allColors[8] + ]; + + return colors; +} diff --git a/src/lib/photoGetter.js b/src/lib/photoGetter.js new file mode 100644 index 0000000..7d50412 --- /dev/null +++ b/src/lib/photoGetter.js @@ -0,0 +1,43 @@ +var env = require('env.js'); +var concepts = require('data/concepts.js'); +var apiUrl = 'https://api.shutterstock.com/v2'; + +function encodeAuthorization() { + var clientId = env.clientId; + var clientSecret = env.clientSecret; + + if (!clientId || !clientSecret) { + throw('Client id and/or client secret are missing in the API key section, with out these you wont be able to contact the API.'); + } + return 'Basic ' + window.btoa(clientId + ':' + clientSecret); +} + +module.exports = function(mock) { + var dfd = jQuery.Deferred(); + if(mock === true) { + dfd.resolve([ + 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Gameplay_of_Pokemon_Go.jpg/245px-Gameplay_of_Pokemon_Go.jpg', + 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Reina_restaurant_Istanbul.JPG/1920px-Reina_restaurant_Istanbul.JPG' + ]); + } + else { + $.ajax({ + url: apiUrl + '/images/search', + dataType: 'json', + data: { + query: concepts[Math.floor(Math.random() * concepts.length)], + image_type: 'photo', + orientation: 'vertical' + }, + headers: { + Authorization: encodeAuthorization() + } + }).done(function(response){ + dfd.resolve([ + response.data[Math.floor(Math.random() * response.data.length)].assets.preview.url, + response.data[Math.floor(Math.random() * response.data.length)].assets.preview.url + ]); + }); + } + return dfd.promise(); +} diff --git a/src/template/index.html b/src/template/index.html new file mode 100644 index 0000000..638078f --- /dev/null +++ b/src/template/index.html @@ -0,0 +1,15 @@ + + + + + + + Textbook + + + + + + + + diff --git a/dist/textbook.css b/src/template/textbook.css similarity index 68% rename from dist/textbook.css rename to src/template/textbook.css index b9bca90..94946a6 100644 --- a/dist/textbook.css +++ b/src/template/textbook.css @@ -1,7 +1,5 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat|Prociono|Roboto|Anton'); - body { - background: #000; + background: red; -webkit-font-smoothing: antialiased; } @@ -18,7 +16,8 @@ textbook { height: 1100px; background: #fff; position: relative; - overflow: hidden;; + overflow: hidden; + float: left; } textbook > * { @@ -27,9 +26,7 @@ textbook > * { bottom: 0; left: 0; right: 0; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + z-index: 10; } textbook bg, textbook bg2 { @@ -41,20 +38,37 @@ textbook bg, textbook bg2 { bottom: 0; left: 0; right: 0; + z-index: 5; } textbook.l6 { font-family: montserrat; - background: #222; + background: -color-pale-2-; color: #fff; } +textbook.l6:after { + content: '\0020'; + display: block; + width:100%; + height: 100%; + z-index: 9; + background: #000; + position: absolute; + opacity: .5; + top:0; + left: 0; + right: 0; + bottom: 0; +} + textbook.l6 bg, textbook.l6 bg2 { border-radius: 100%; width: 1000px; height: 1000px; - left: -100px + left: -100px; + z-index: 10; } textbook.l6 title { @@ -63,7 +77,7 @@ textbook.l6 title { display: -webkit-flex;display: flex; -webkit-align-items: center;align-items: center; padding: 0 5%; - font-size: 100px; + font-size: 80px; text-align: center; } @@ -72,15 +86,19 @@ textbook.l6 author { color: #222; top: auto; bottom: 5%; + z-index: 10; + text-shadow: 0 0 10px #fff; } textbook.l6 bg { top: -55%; + z-index: 9; } textbook.l6 bg2 { bottom: -55%; top: auto; + z-index: 9; } textbook.l5 { @@ -107,13 +125,13 @@ textbook.l5 title { text-transform: uppercase; display: -webkit-flex;display: flex; -webkit-align-items: center;align-items: center; - color: #4286f4; + color: -color-pastel-2-; background: linear-gradient(to right,rgba(255,255,255,0),#fff); } textbook.l4 { font-family: Anton; - background: linear-gradient(to bottom,#f1a70f,#0091d0); + background: linear-gradient(to bottom,-color-hard-1-,-color-hard-2-); } textbook.l4 title { @@ -154,7 +172,7 @@ textbook.l4 bg { right: -10%; bottom: 10%; -webkit-transform: rotate(-5deg); - box-shadow: 0 0 0 5px #78d024; + box-shadow: 0 0 0 5px -color-hard-3-; } @@ -172,15 +190,32 @@ textbook.l3 title { color: #fff; padding: 0 4%; font-size: 60px; - background: rgba(49, 104, 90,.75); height: 20%; text-transform: uppercase; display: -webkit-flex;display: flex; -webkit-align-items: center;align-items: center; } +textbook.l3 title span { + z-index: 10; + position: relative; +} +textbook.l3 title:after { + content: '\0020'; + display: block; + width:100%; + height: 100%; + z-index: 9; + background: -color-pastel-2-; + position: absolute; + opacity: .75; + top:0; + left: 0; + right: 0; + bottom: 0; + } + textbook.l3 author { - background: rgba(68, 49, 104,.75); top: 24%; right: 12%; font-size: 20px; @@ -190,7 +225,27 @@ textbook.l3 author { padding: 0 4%; color: #fff; font-weight: 100; + z-index: 10; + overflow: hidden; +} +textbook.l3 author span { + z-index: 10; + position: relative; } +textbook.l3 author:after { + content: '\0020'; + display: block; + width:100%; + height: 100%; + z-index: 9; + background: -color-pastel-1-; + position: absolute; + opacity: .75; + top:0; + left: 0; + right: 0; + bottom: 0; + } textbook.l3 author span:not(:last-child):after { content: ', '; @@ -211,7 +266,7 @@ textbook.l2 bg2 { textbook.l2 title { font-size: 120px; - color: #fffcb5; + color: -color-pale-1-; font-family: Roboto, arial, sans-serif; font-style: italic; font-stretch: condensed; @@ -236,7 +291,7 @@ textbook.l2 author { textbook.l1 { - background-color: #2d5ead; + background-color: -color-pastel-1-; } textbook.l1 title { @@ -245,10 +300,12 @@ textbook.l1 title { color: #fff; font-family: Prociono, "times new roman"; height: 20%; + padding: 0 10%; display: -webkit-flex;display: flex;; -webkit-align-items: center;align-items: center; -webkit-justify-content: center;justify-content: center; text-align: center; + font-variant: small-caps; border-bottom: 4px solid #000; } @@ -260,7 +317,6 @@ textbook.l1 author { height: 20%; bottom:0; top: 80%; - font-variant: small-caps; display: -webkit-flex;display: flex;; -webkit-align-items: center;align-items: center; -webkit-justify-content: center;justify-content: center; @@ -268,7 +324,7 @@ textbook.l1 author { -webkit-flex-direction: column; flex-direction: column; border-top: 4px solid #000; - background: #2d5ead; + background: -color-pastel-1-; } textbook.l1 author span { @@ -286,3 +342,48 @@ textbook.l1 bg2 { top: 20%; bottom: 18%; } + +textbook.l7 { + text-align: center; +} + +textbook.l7 title { + font-family: Prociono, serif; + background: #888; + color: #fff; + text-shadow: 4px 4px #333; + position: absolute; + bottom: 25%; + left: 10%; + right: 10%; + top: auto; + text-align: center; + font-size: 50px; + height: auto; + padding: 5%; + border: 4px outset #888; + box-shadow: 10px 10px rgba(100,100,100,.8); +} + +textbook.l7 title span { + -webkit-transform: scaleX(.7); + transform: scaleX(.7); +} + +textbook.l7 author { + top: 73.5%; + display: inline-block; + padding: 2%; + font-size: 18px; + position: relative; + width: auto; + left: auto; + right: auto; + height: auto; + margin: auto; + background: -color-pale-1-; + color: #000; + text-shadow: 2px 2px #888; + box-shadow: 10px 10px rgba(100,100,100,.8); + font-family: Roboto, arial, sans-serif +}