Add logos and images.

eakoriakin · Oct 12, 2018 · 746345e · 746345e
1 parent 2aa0f10
commit 746345e
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 24 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -5,12 +5,14 @@ let gulp = require('gulp'),
   rename = require('gulp-rename'),
   jsonEditor = require('gulp-json-editor'),
   fs = require('fs'),
+  tar = require('tar'),
   sass = require('gulp-sass');
 
 let packageJson = JSON.parse(fs.readFileSync('./package.json')),
   paths = {
     gulp: 'node_modules/gulp/bin/gulp.js',
     ngPackagr: 'node_modules/ng-packagr/cli/main.js',
+    ionic: 'C:/Program Files/nodejs/node_modules/ionic/bin/ionic',
     images: {
       root: 'images/'
     },
@@ -44,12 +46,25 @@ function executeCommand(command, parameters) {
     command = paths.gulp;
   } else if (command === 'ng-packagr') {
     command = paths.ngPackagr;
+  } else if (command === 'ionic') {
+    command = paths.ionic;
   }
 
   var _parameters = _.cloneDeep(parameters);
   _parameters.unshift(command);
 
-  childProcess.spawnSync('node', _parameters, { stdio: 'inherit' });
+  childProcess.spawnSync('node', _parameters, { stdio: 'inherit', cwd: './' });
+}
+
+function createTar(file, directory) {
+  return tar.create({
+    gzip: true,
+    strict: true,
+    portable: true,
+    cwd: directory,
+    file: file,
+    sync: true
+  }, ['.']);
 }
 
 function copyCss() {
@@ -65,8 +80,6 @@ function copyCss() {
     }),
     new Promise(function (resolve, reject) {
       gulp.src(paths.src.css)
-        // This is to create a minified CSS file in order to use in StackBlitz demos.
-        // The minified file isn't required for component to work.
         .pipe(sass({
           outputStyle: 'compressed'
         }))
@@ -78,14 +91,6 @@ function copyCss() {
   ]);
 }
 
-// function modifyReadme() {
-//   // Replace version.
-//   let readmeFile = `${paths.dist.root}README.md`,
-//     data = fs.readFileSync(readmeFile, 'utf8');
-//   data = data.replace(/<version>/g, packageJson.version);
-//   fs.writeFileSync(readmeFile, data, 'utf8');
-// }
-
 function copyImages() {
   return new Promise(function (resolve, reject) {
     gulp.src(`${paths.images.root}**/*`)
@@ -95,6 +100,19 @@ function copyImages() {
   });
 }
 
+// Although ng-packagr creates .tgz package, we modify package.json after it,
+// so we need to repack it.
+function pack() {
+  let tarName = `${packageJson.name}-${packageJson.version}.tgz`;
+
+  // Remove archive created by ng-packagr.
+  fs.unlinkSync('dist.tgz');
+
+  // Create new archive.
+  createTar(tarName, paths.dist.root);
+  fs.renameSync(tarName, `${paths.dist.root}${tarName}`);
+}
+
 function minifyJS() {
   // Minify files.
   return Promise.all([
@@ -132,9 +150,11 @@ function modifyPackageJson() {
         json.main = `bundles/${paths.dist.bundles.minFile}`;
         json.module = `esm5/${paths.dist.esm5.minFile}`;
         json.es2015 = `esm2015/${paths.dist.esm2015.minFile}`;
+        json.private = true;
         delete json.cordova;
         delete json.devDependencies;
         delete json.dependencies;
+        delete json.repository;
         return json;
       }))
       .pipe(gulp.dest(paths.dist.root))
@@ -143,16 +163,18 @@ function modifyPackageJson() {
   });
 }
 
+gulp.task('heroku', function () {
+  executeCommand('ionic', ['build', '--minifyjs', '--minifycss', '--optimizejs']);
+});
+
 gulp.task('build', function () {
   executeCommand('ng-packagr', ['-p', 'ng-package.json']);
 
   minifyJS().then(function () {
     modifyPackageJson().then(function () {
-      // modifyReadme();
       copyCss().then(function () {
         copyImages().then(function () {
-          // Remove archive created by ng-packagr.
-          fs.unlinkSync('dist.tgz');
+          pack();
         });
       });
     });

diff --git a/images/android-1.png b/images/android-1.png
diff --git a/images/android-2.png b/images/android-2.png
diff --git a/images/ios-1.png b/images/ios-1.png
diff --git a/images/ios-2.png b/images/ios-2.png
diff --git a/ionic-selectable.code-workspace b/ionic-selectable.code-workspace
@@ -22,6 +22,7 @@
         "source.organizeImports": true
       }
     },
-    "beautify.tabSize": 2
-  }
+    "beautify.tabSize": 2,
+    "editor.tabSize": 2
+}
 }
diff --git a/logos/banner/index.html b/logos/banner/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Ionic Selectable Icon</title>
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Quicksand', sans-serif;
+            font-weight: 300;
+        }
+
+        .wrapper {
+            padding-top: 30px;
+            margin: 0 auto;
+            width: 256px;
+        }
+
+        /*Icon.*/
+        .ionic-selectable-icon {
+            position: relative;
+            width: 246px;
+            height: 246px;
+            border-radius: 50%;
+            border: 5px solid #4e8ef5;
+        }
+
+        .ionic-selectable-icon-dot {
+            position: absolute;
+            top: 19px;
+            right: 19px;
+            background-color: #4e8ef5;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+        }
+
+        .ionic-selectable-icon-text {
+            font-weight: 500;
+            position: absolute;
+            top: 74px;
+            left: 32px;
+            width: 180px;
+        }
+
+        .ionic-selectable-icon-ionic {
+            color: #7b8492;
+            font-size: 30px;
+            line-height: 20px;
+        }
+
+        .ionic-selectable-icon-select {
+            font-size: 66px;
+            line-height: 50px;
+        }
+
+        .ionic-selectable-icon-able {
+            text-align: right;
+            color: #7b8492;
+            font-size: 30px;
+        }
+
+        /*Gumroad.*/
+        .ionic-selectable-wrapper-gumroad {
+            background: #f7f7f7;
+        }
+
+        .ionic-selectable-gumroad {
+            margin-top: 50px;
+            position: relative;
+            width: 216px;
+            height: 216px;
+            border-radius: 50%;
+            border: 5px solid #4e8ef5;
+        }
+
+        .ionic-selectable-gumroad-dot {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background-color: #4e8ef5;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+        }
+
+        .ionic-selectable-gumroad-text {
+            font-weight: 500;
+            position: absolute;
+            top: 56px;
+            left: 32px;
+            width: 180px;
+        }
+
+        .ionic-selectable-gumroad-ionic {
+            color: #7b8492;
+            font-size: 26px;
+            line-height: 20px;
+        }
+
+        .ionic-selectable-gumroad-select {
+            font-size: 56px;
+            line-height: 50px;
+        }
+
+        .ionic-selectable-gumroad-able {
+            text-align: right;
+            color: #7b8492;
+            font-size: 26px;
+            padding-right: 28px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="ionic-selectable-icon">
+            <div class="ionic-selectable-icon-dot">
+            </div>
+            <div class="ionic-selectable-icon-text">
+                <div class="ionic-selectable-icon-ionic">
+                    Ionic
+                </div>
+                <div class="ionic-selectable-icon-select">
+                    select
+                </div>
+                <div class="ionic-selectable-icon-able">
+                    able
+                </div>
+            </div>
+        </div>
+        <div class="ionic-selectable-wrapper-gumroad">
+            <div class="ionic-selectable-gumroad">
+                <div class="ionic-selectable-gumroad-dot">
+                </div>
+                <div class="ionic-selectable-gumroad-text">
+                    <div class="ionic-selectable-gumroad-ionic">
+                        Ionic
+                    </div>
+                    <div class="ionic-selectable-gumroad-select">
+                        select
+                    </div>
+                    <div class="ionic-selectable-gumroad-able">
+                        able
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/logos/banner/ionic.png b/logos/banner/ionic.png
diff --git a/logos/gumroad.png b/logos/gumroad.png
diff --git a/logos/icon.png b/logos/icon.png
diff --git a/logos/screenshots/1-1.png b/logos/screenshots/1-1.png
diff --git a/logos/screenshots/2-1.png b/logos/screenshots/2-1.png
diff --git a/logos/screenshots/3-1.png b/logos/screenshots/3-1.png
diff --git a/logos/screenshots/4-1.png b/logos/screenshots/4-1.png
diff --git a/logos/screenshots/5-1.png b/logos/screenshots/5-1.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -92,7 +92,8 @@
     "tsickle": "0.25.6",
     "tslint": "5.11.0",
     "typescript": "2.9.2",
-    "zone.js": "0.8.26"
+    "zone.js": "0.8.26",
+    "tar": "4.4.6"
   },
   "scripts": {
     "ng": "ng",