Add icons, packaging

gulpfile.js

@@ -2,64 +2,108 @@ var gulp = require('gulp'),
     vulcanize = require('gulp-vulcanize'),
     compass = require('gulp-compass'),
     plumber = require('gulp-plumber'),
-    path = require("path"),
-    concat = require("gulp-concat"),
-    coffee = require("gulp-coffee"),
-    sourcemaps = require("gulp-sourcemaps"),
+    path = require('path'),
+    concat = require('gulp-concat'),
+    coffee = require('gulp-coffee'),
+    sourcemaps = require('gulp-sourcemaps'),
     runSequence = require('run-sequence'),
     browserSync = require('browser-sync'),
-    del = require("del")
+    del = require('del'),
+    zip = require('gulp-zip');
 
-gulp.task('default', ['html', 'compass', 'coffee'])
+gulp.task('default', ['html', 'compass', 'coffee', 'libs', 'copy'])
+gulp.task('package', function() {
+    return runSequence('html', 'compass', 'coffee', 'libs', 'copy', 'zip');
+})
 
-gulp.task("html", function() {
-    runSequence('columns', 'vulcanize', function() {
-        del("src/columns/compiled")
+gulp.task('html', function() {
+    return runSequence('columns', 'vulcanize', function() {
+        del('src/columns/compiled')
     });
 })
 
-gulp.task("columns", function() {
-    return gulp.src("src/columns/**/*.html")
+gulp.task('columns', function() {
+    return gulp.src('src/columns/**/*.html')
         .pipe(plumber())
-        .pipe(concat("columns.html"))
-        .pipe(gulp.dest("src/columns/compiled"))
+        .pipe(concat('columns.html'))
+        .pipe(gulp.dest('src/columns/compiled'))
+})
+
+gulp.task('libs', function() {
+    return gulp.src([
+        'bower_components/web-animations-js/web-animations-next-lite.min.js',
+        'bower_components/polymer/polymer.js',
+        'bower_components/core-focusable/core-focusable.js',
+        'bower_components/core-focusable/polymer-mixin.js',
+
+        'bower_components/packery/dist/packery.pkgd.js',
+        'bower_components/store.js/store.js',
+        'bower_components/color-thief/src/color-thief.js',
+        'bower_components/draggabilly/dist/draggabilly.pkgd.js',
+        'bower_components/fetch/fetch.js',
+        'bower_components/momentjs/moment.js'
+    ])
+        .pipe(concat('libs.js'))
+        .pipe(gulp.dest('dist/js'))
 })
 
+gulp.task('copy', function() {
+    //for files that don't need to be compiled. but just copied
+    gulp.src('src/font/*')
+        .pipe(gulp.dest("dist/font"));
+    gulp.src('src/img/*')
+        .pipe(gulp.dest("dist/img"));
+    return gulp.src('src/manifest.json')
+        .pipe(gulp.dest('dist'))
+})
+
+gulp.task('zip', function() {
+    return gulp.src("dist/**")
+        .pipe(zip('tabbie.zip'))
+        .pipe(gulp.dest('./'))
+});
+
 gulp.task('vulcanize', function () {
     return gulp.src('src/**.html')
         .pipe(plumber())
         .pipe(vulcanize({
-            dest: "dist",
+            dest: 'dist',
             strip: false,
             csp: true, // chrome does not approve of inline scripts
             excludes: {
                 imports: [
-                    //do not use roboto import because it requires external server
-                    "roboto.html"
+                    //do not use roboto import because it requires external server (imported trough screen.scss)
+                    'roboto.html',
+
+                    //do not use the following imports as they try to import scripts from it's bower location, which we don't package.
+                    //(these get packaged in libs.js)
+                    'core-focusable.html',
+                    'polymer.html',
+                    'web-animations.html'
                 ]
             }
         }))
-        .pipe(gulp.dest("dist"))
+        .pipe(gulp.dest('dist'))
 });
 
 gulp.task('coffee', function() {
-    gulp.src('src/**/*.coffee')
+    return gulp.src('src/**/*.coffee')
         .pipe(plumber())
         .pipe(sourcemaps.init())
         .pipe(coffee({
             bare: true
         }))
-        .pipe(concat("main.js"))
+        .pipe(concat('main.js'))
         .pipe(sourcemaps.write())
         .pipe(gulp.dest('dist/js'))
 });
 
-gulp.task("compass", function() {
-   gulp.src("src/sass/*.scss")
+gulp.task('compass', function() {
+    return gulp.src('src/sass/*.scss')
        .pipe(plumber())
        .pipe(compass({
-           project: path.join(__dirname, "src"),
-           css: path.join(__dirname, "dist/css"),
+           project: path.join(__dirname, 'src'),
+           css: path.join(__dirname, 'dist/css'),
            sourcemap: true
        }))
        .pipe(gulp.dest('dist/css'));
@@ -80,9 +124,9 @@ gulp.task('reload', function () {
 });
 
 gulp.task('watch', ['serve'], function () {
-    gulp.watch("src/**/*.scss", ["compass", 'reload']);
+    gulp.watch('src/**/*.scss', ['compass', 'reload']);
 
-    gulp.watch("src/**/*.html", ["html", 'reload']);
+    gulp.watch('src/**/*.html', ['html', 'reload']);
 
-    gulp.watch("src/**/*.coffee", ["coffee", 'reload']);
+    gulp.watch('src/**/*.coffee', ['coffee', 'reload']);
 });

package.json

@@ -13,6 +13,7 @@
     "gulp-plumber": "^0.6.6",
     "gulp-sourcemaps": "^1.3.0",
     "gulp-vulcanize": "^5.0.0",
+    "gulp-zip": "^2.0.2",
     "run-sequence": "^1.0.2"
   },
   "devDependencies": {},

src/coffee/Column.coffee

@@ -3,11 +3,12 @@ window.Columns.Column = class Column
   constructor: ->
     @className = @constructor.name
 
-    thmb = document.createElement "img"
-    thmb.addEventListener "load", =>
-      ct = new ColorThief thmb
-      @color = ct.getColor thmb
-    thmb.src = "../src/img/" + @thumb
+    if not @color
+      thmb = document.createElement "img"
+      thmb.addEventListener "load", =>
+        ct = new ColorThief thmb
+        @color = ct.getColor thmb
+      thmb.src = "img/" + @thumb
 
     @config = {}
     @cache = []
@@ -105,7 +106,8 @@ window.Columns.Column = class Column
     "cache",
     "config",
     "className",
-    "id"
+    "id",
+    "color"
   ]
 
   #Dialog name

src/columns/dribbble/dribbble-item.html

@@ -44,6 +44,7 @@
                 background-color: rgba(255, 255, 255, .5);
                 transition:opacity 250ms;
                 z-index: 1;
+                text-shadow:0 0 1px #fff;
             }
 
             paper-ripple {

src/columns/reddit/reddit-item.html

@@ -9,6 +9,10 @@
                 padding: 0 0 0 90px;
             }
 
+            :host(.nothumb) {
+                padding:0 0 0 10px;
+            }
+
             img {
                 border-radius:50%;
                 width:50px;
@@ -24,20 +28,27 @@
             }
         </style>
 
-        <template if="{{item.thumbnail && item.thumbnail != 'self'}}">
+        <template if="{{!item.nothumb}}">
             <a class="img" target="_blank" href="{{item.url}}"><img src="{{item.thumbnail}}"></a>
         </template>
         <div>
             <h1><a href="{{item.url}}" target="_blank" >{{item.title}}</a></h1>
             <p>
-                submitted by <a target="_blank" href="http://www.reddit.com/u/{{item.author}}">{{item.author}}</a> <time-ago swag="hi" datetime="{{item.created}}"></time-ago>
+                submitted by <a target="_blank" href="http://www.reddit.com/u/{{item.author}}">{{item.author}}</a> <time-ago datetime="{{item.created}}"></time-ago>
             </p>
             <p>
                 <a target="_blank" href="https://reddit.com{{item.permalink}}">{{item.num_comments}} comments</a>, {{item.score}} points
             </p>
         </div>
     </template>
     <script>
-        Polymer({});
+        Polymer({
+            attached: function() {
+                if(!this.item.thumbnail || this.item.thumbnail == "default" || this.item.thumbnail == "self") {
+                    this.item.nothumb = true
+                    this.classList.add("nothumb");
+                }
+            }
+        });
     </script>
 </polymer-element>

src/item-column.html

@@ -119,7 +119,7 @@
 
         <paper-shadow class="card" z="1" transition="core-transition-fade">
             <core-toolbar id="core_toolbar" class="{{column.className}}">
-                <paper-icon-button on-click="{{settings}}" style="background-image: url(../src/img/{{column.thumb}})" class="logo"></paper-icon-button>
+                <paper-icon-button on-click="{{settings}}" style="background-image: url(img/{{column.thumb}})" class="logo"></paper-icon-button>
                 <div id="div" flex>{{column.name}}</div>
                 <paper-icon-button on-click="{{_delete}}" icon="delete" class="editable" hidden></paper-icon-button>
                 <paper-icon-button on-click="{{settings}}" icon="settings" class="editable settings" hidden></paper-icon-button>

manifest.json → src/manifest.json

@@ -1,15 +1,20 @@
 {
   "name": "Tabbie",
-  "description": "Tabbie aims to be the most customizable new tab extension ever made.",
-  "version": "0.1-alpha",
+  "description": "A material, customizable, and hackable new tab extension.",
+  "version": "0.1",
   "incognito": "split",
   "chrome_url_overrides": {
-    "newtab": "dist/tab.html"
+    "newtab": "tab.html"
   },
   "permissions": [
     "https://lobste.rs/*",
     "https://api.behance.net/*"
   ],
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "icons": {
+    "48": "img/icon_48.png",
+    "64": "img/icon_64.png",
+    "128": "img/icon_128.png"
+  }
 }

src/sass/screen.scss

@@ -8,14 +8,14 @@
 
 @font-face {
     font-family: 'Roboto';
-    src: url('../src/../font/Roboto-Regular-webfont.woff') format('woff');
+    src: url('../font/Roboto-Regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Roboto Slab';
-    src: url('../src/../font/RobotoSlab-Regular-webfont.ttf') format('woff');
+    src: url('../font/RobotoSlab-Regular-webfont.ttf') format('woff');
     font-weight: normal;
     font-style: normal;
 }
@@ -140,7 +140,7 @@ html /deep/ {
         width: 554px;
         padding-top:140px;
         height: 355px;
-        background-image:url('../../src/img/chrome.png')
+        background-image:url('../img/chrome.png')
     }
 
 }

src/tab.html

@@ -4,13 +4,8 @@
     <title>Tabbie</title>
 
     <!-- 3RD PARTY -->
-    <link rel="import" href="../bower_components/polymer/polymer.html">
-    <script src="../bower_components/store.js/store.js"></script>
-    <script src="../bower_components/color-thief/src/color-thief.js"></script>
-    <script src="../bower_components/packery/dist/packery.pkgd.js"></script>
-    <script src="../bower_components/draggabilly/dist/draggabilly.pkgd.js"></script>
-    <script src="../bower_components/fetch/fetch.js"></script>
-    <script src="../bower_components/momentjs/moment.js"></script>
+    <link rel="import" href="../bower_components/polymer/layout.html">
+    <script src="../dist/js/libs.js"></script>
 
     <!-- ELEMENTS -->
     <link rel="import" href="../bower_components/core-icons/core-icons.html">