Merge pull request #66 from brightdigit/develop

updates to home page
brightdigit · Aug 29, 2018 · 4a301ac · 4a301ac
2 parents c4b6455 + 0766a56
commit 4a301ac
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,21 @@
-[![Twitter](https://img.shields.io/badge/Twitter-@leogdion-blue.svg?style=flat)](http://twitter.com/leogdion)
-[![Codecov](https://img.shields.io/codecov/c/github/brightdigit/speculid.svg?maxAge=2592000)](https://codecov.io/gh/brightdigit/speculid/branch)
-[![Travis](https://img.shields.io/travis/brightdigit/speculid.svg)](https://travis-ci.org/brightdigit/speculid)
-[![Beerpay](https://img.shields.io/beerpay/brightdigit/speculid.svg?maxAge=2592000)](https://beerpay.io/brightdigit/speculid)
-[![Gitter](https://img.shields.io/gitter/room/speculid/Lobby.js.svg?maxAge=2592000)](https://gitter.im/speculid/Lobby)
+
 
 <!--ts-->
    * [Introduction](#introduction)
       * [Challenges Managing Graphic Assets](#challenges-managing-graphic-assets)
          * [<a href="https://camo.githubusercontent.com/f84864b171328f85d86395a98401ce67c4a2f83c/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f6d656368616e69632e737667" target="_blank" rel="nofollow"><img src="https://camo.githubusercontent.com/f84864b171328f85d86395a98401ce67c4a2f83c/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f6d656368616e69632e737667" height="25pt" data-canonical-src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/mechanic.svg" style="max-width:100\x;"></a> Manually Create Multiple Sizes](#-manually-create-multiple-sizes)
          * [<a href="https://camo.githubusercontent.com/ce1d1e0deb43857c938016c58c7a008e043b9dfe/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f617263686976652e737667" target="_blank" rel="nofollow"><img src="https://camo.githubusercontent.com/ce1d1e0deb43857c938016c58c7a008e043b9dfe/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f617263686976652e737667" height="25pt" data-canonical-src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/archive.svg" style="max-width:100\x;"></a> Store Generated Image Files](#-store-generated-image-files)
+         * [What If You Had...](#what-if-you-had)
+            * [Care-Free Graphic Management Where...](#care-free-graphic-management-where)
       * [What Speculid Does](#what-speculid-does)
          * [<a href="https://camo.githubusercontent.com/2abe35faea1b42b10a426f57fee564fd6fb60bc5/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f6d616368696e6572792e737667" target="_blank" rel="nofollow"><img src="https://camo.githubusercontent.com/2abe35faea1b42b10a426f57fee564fd6fb60bc5/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f6d616368696e6572792e737667" height="25pt" data-canonical-src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/machinery.svg" style="max-width:100\x;"></a> Automate the process](#-automate-the-process)
          * [<a href="https://camo.githubusercontent.com/f3de2019c718f4688351765967af24b99be59056/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f636c65616e2d636f64652e737667" target="_blank" rel="nofollow"><img src="https://camo.githubusercontent.com/f3de2019c718f4688351765967af24b99be59056/68747470733a2f2f63646e2e7261776769742e636f6d2f62726967687464696769742f53706563756c69642f67682d70616765732f696d616765732f636c65616e2d636f64652e737667" height="25pt" data-canonical-src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/clean-code.svg" style="max-width:100\x;"></a> Tidy Your Repo](#-tidy-your-repo)
+         * [Features](#features)
+            * [Input File Types Supported](#input-file-types-supported)
+            * [Modifiers](#modifiers)
+            * [Output File Types Supported](#output-file-types-supported)
    * [Download](#download)
+   * [Table of Contents](#table-of-contents)
    * [Installation](#installation)
    * [Usage](#usage)
       * [File Format](#file-format)
@@ -21,7 +24,7 @@
          * [Geometry <em>optional</em> geometry](#geometry-optional-geometry)
          * [Background <em>optional</em> background](#background-optional-background)
          * [Remove Alpha <em>optional</em>  remove-alpha](#remove-alpha-optional--remove-alpha)
-      * [Xcode Integration](#xcode-integration)
+      * [Xcode Integration and Automation](#xcode-integration-and-automation)
 
 <!-- Added by: leo, at:  -->
 
@@ -31,9 +34,9 @@
 
 ## Challenges Managing Graphic Assets
 
-Part of the process of building an app for **watchOS**, **iOS**, or **macOS** is including all the image assets and app icons in your application. That could be done by exporting all the various sizes from your graphics application. 
+Part of the process of building an app for **watchOS**, **iOS**, or **macOS** is including all the image assets and app icons  in your application. Each image assets or app icons requires **several copies for different resolutions, different devices, and different sizes.** Right now, this needs to be done by exporting all the various similar images from a major graphics application. 
 
-The problem is the need to:
+That means developers need to:
 
 <section class="cards" markdown="1">
 
@@ -43,7 +46,7 @@ The problem is the need to:
 
 ### <img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/mechanic.svg" height="25pt"/> Manually Create Multiple Sizes
 
-Each graphic must be **manually updated, converted, resized**. For an Xcode Project, that means a Graphic Designer or Developer need to repeatedly update each size every time.
+Each graphic must be **manually converted and resized several times for each update**.
 
 </section>
 <section class="card half" markdown="1">
@@ -52,21 +55,38 @@ Each graphic must be **manually updated, converted, resized**. For an Xcode Proj
 
 ### <img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/archive.svg" height="25pt"/> Store Generated Image Files
 
-These generated files need to be stored in the repository. An Asset Catalog Image Set will need a 1x, 2x, 3x of each graphic and **App Icons may need as many 30 different sizes**.
+An asset catalog image set will need a 1x, 2x, 3x of each graphic and **App Icons may need as many 30 different sizes**.
 
 </section>
 </section>
 
-<!-- <section class="cards" markdown="1">
+### What If You Had...
+
+<section class="cards" markdown="1">
+
 <section class="card whole" markdown="1">
-![Multiple Images](./images/Logo-dashed.svg)
-### 
-For Apple developers, there is no application which prepares graphics files for asset catalogs. 
+
+
+
+
+
+
+
+
+<img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="100px"/><img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="75px"/><img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="50px"/><img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="25px"/><img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="12px"/><img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/emoji.svg" height="6px"/>
+
+#### Care-Free Graphic Management Where...
+
+* **Only one file is needed** _for each Image Set and App Icon._
+* **Graphic Designers need only export a single file change** _each time rather than as many as serveral scaled copies._
+* **Resizing and conversion is done behind the scenes** _based on a single source image._
+
+</section>
 </section>
-</section> -->
 
 ## What Speculid Does
 
+**Speculid** links a single graphic file to an Image Set or App Icon and automatically renders different resolutions, file types, and sizes for all the image specifications required.
 
 ![diagram](https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/Diagram.png)
 
@@ -77,7 +97,7 @@ For Apple developers, there is no application which prepares graphics files for
 
 ### <img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/machinery.svg" height="25pt"/> Automate the process 
 
-Speculid automates the process so **only one graphic file is needed**. Add Speculid to your build process and now the **conversions and resizing are automated** as part of the build process. Now there is no need for anyone to manually create each size for each device.
+Speculid automates the process so **only one graphic file is needed**. Add Speculid to your build process and now the **conversions and resizing are automated** as part of the build process. Now there is no need for anyone to manually create each size for each device every time.
 
 </section>
 <section class="card half" markdown="1">
@@ -86,36 +106,56 @@ Speculid automates the process so **only one graphic file is needed**. Add Specu
 
 ### <img class="readme-only" src="https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/clean-code.svg" height="25pt"/> Tidy Your Repo
 
-**Reduce the size of your code repo** by including a single vector or raster image and build all your nessecary png and pdf files at compile. That means **faster remote pulls and less redundancy.**
+**Reduce the size of your repository** by including a single vector or raster image and ignore all your automated png and pdf files at compile. That means **faster remote pulls, less redundancy, and complete syncronization between sizes.**
 
 </section>
 </section>
 
--------
+### Features
+
+This means **Speuclid** can...
+
+* **take multiple input file types including SVG vector files** and raster PNG files
+* **automatically create each necessary resized raster file**
+* **remove transparencies from PNG and SVG file** for App Icons
+* **export to PDF for vector images in Image Sets** as well as PNG
+
+#### Input File Types Supported 
+
+* **SVG** - Scalable Vector Graphics
+* **PNG** - Portable Network Graphics
 
-**Speculid** links any image file to an Image Set or App Icon and will automatically:
+#### Modifiers 
 
-* Create Each Necessary Raster File **Resized**
-* **Use Vector Image Files** Such As SVG as Source Imagery
-* Allow the **Removal of Transparency for App Icons**
+* [Adding Background Colors](#background-optional-background)
+* [Transparency Removal](#remove-alpha-optional--remove-alpha)
+
+#### Output File Types Supported 
+
+* **PNG** - Portable Network Graphics  
+* **PDF** - Portable Document Format 
 
 # Download
 
 
 
 <div class="readme-only" markdown="1">
 
-Enter your email address [here](https://www.speculid.com#download) to get the latest version.
+Enter your email address [here](https://speculid.com#download) to request access to the latest version.
 
 </div>
 
+# Table of Contents
+
+
+
 # Installation
 
-Once you have unzipped the downloaded file, go ahead and **copy the application *Speculid.App* to the Applications folder**.
+Once you have unzipped the file, go ahead, and **copy the application *Speculid.App* to the Applications folder**.
 
 # Usage
 
-Speculid only supports being called through a command line terminal.  
+Speculid only supports being called through a command line terminal for now.  
 
 ```bash
 $ /Applications/Speculid/Contents/MacOS/Speculid --process <file>
@@ -129,7 +169,7 @@ Options:
 
 ## File Format
 
-The `.speculid` file is a `json` file with the image set or app icon path, the graphic file source, and optionally the basic image geometry (width or height). Such as
+The `.speculid` file is a `json` file with the image set or app icon path, the graphic file source, and optionally basic image geometry (width or height). All paths specified in the json file could be relative to the `.speculid` file or an absolute path. Such as
 
 ```json
 {
@@ -152,11 +192,11 @@ or
 
 ![Image Set Examples from Xcode](https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/SetExample.png)
 
-A set is an image set or app icon set used by Xcode. That path specified in the json could be relative to the `.speculid` file.
+A set is an image set or app icon used by Xcode.
 
 ### Source `source`
 
-The image source file which could be a SVG or any bitmap image type compatible with [imagemagick](http://www.imagemagick.org).
+The image source file which could be a SVG or PNG file.
 
 ### Geometry *optional* `geometry`
 
@@ -169,32 +209,34 @@ You can only specify the height or the width. The other dimension is automatical
 
 ### Background *optional* `background`
 
-As a requirement, **App Icons are required to exclude any alpha channels**. In order to remove a transparency from a source png or svg file, you can specify to remove the alpha channel and add a background color. The background color can be set with a string in a standard rgb, rgba, or hex code format (#RRGGBB or #AARRGGBB). If no alpha is specified an alpha of 1.0 is assumed.
+As a requirement, **App Icons are required to exclude any alpha channels**. In order to remove a transparency from a source PNG or SVG file, you can specify to remove the alpha channel and add a background color. 
+
+The background color can be set in a standard rgb, rgba, or hex code format (#RRGGBB or #AARRGGBB). If no alpha is specified an alpha of 1.0 is assumed.
 
 ### Remove Alpha *optional*  `remove-alpha`
 
 To specifically remove the alpha channel, a true boolean value must be specified. This will remove the alpha channel from the file. Make sure to specify an opaque background color when removing the alpha channel.
 
-## Xcode Integration
+## Xcode Integration and Automation
 
 With **Speculid**, the process of building image assets can be automated in **Xcode**.
 
-1. **Create the speculid files** and add them to your project folder as well as your source graphic files. 
+1. **Create the speculid file** and add it to your project folder as well as your source graphic files. 
 
     ![Xcode Target Membership](https://cdn.rawgit.com/brightdigit/Speculid/gh-pages/images/XcodeTargetMembership.png)
 
-    * *Note: you don't need to add these files to your target membership*
+    * *Note: you don't need to add these files to any target membership*
 
 2. **Edit the speculid file.**
 
-    1. **Add the property for the source** - a relative path to the SVG, or PNG file.
+    1. **Add the property for the source** - the path to the SVG or PNG file.
         ```json
         {
           "source" : "geometry.svg",
           ...
         }
         ```
-    1. **Add the property for the set** - a relative path to the Image Set or App Icon folder.
+    1. **Add the property for the set** - the path to the Image Set or App Icon folder.
         ```json
         {
           "set" : "Assets.xcassets/iOS AppIcon.appiconset",
@@ -209,6 +251,9 @@ With **Speculid**, the process of building image assets can be automated in **Xc
           "geometry" : "128"
         }
         ```
+        If you specify *128* in the *geometry* property, that means the width for the *1x* image will be *128 pixels*, the width for the *2x* image will be *256 pixels*, and the width for the *3x* image will be *384 pixels*. Heights will be calculated based on the aspect ratio of the SVG file.
+        Vector images in an image set will be converted to a iOS compatible PDF file.
+
     1. *optional* **Add the properties for the background color and alpha removal** - if this a conversion to an App Icon, you should remove any background transpareny and add a background color.
         ```json
         {

diff --git a/gh-pages b/gh-pages
diff --git a/scripts/readme.sh b/scripts/readme.sh
@@ -7,9 +7,9 @@ cat $SOURCE | \
 	perl -pe 's/\{\:height="[^"]+"\}//g' | \
 	perl -pe 's/\]\(\/([^\/])/\]\(https\:\/\/cdn.rawgit.com\/brightdigit\/Speculid\/gh-pages\/$1/g' | \
 	perl -pe 's/src="\//src="https\:\/\/cdn.rawgit.com\/brightdigit\/Speculid\/gh-pages\//g' | \
-	perl -pe 's/\!.+\{\:class="html-only"\}//g' | \
+	perl -pe 's/\!?\[.+\{\:class="html-only"\}//g' | \
 	perl -0pe 's/\<\!-- HTML-ONLY BEGIN --\>.*\<\!-- HTML-ONLY END --\>//gms' | \
-	perl -0pe 's/\* TOC.*{:toc}/<!--ts-->\n<!--te-->/gms' | \
+	perl -0pe 's/\* TOC.*{:toc}//gms' | \
 
 	cat > $DESTINATION