smart-avatar - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

package.json

 {
   "name": "smart-avatar",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Render avatars with dynamic, defined fallback",
-  "browser": "./dist/smart-avatar.min.js",
+  "main": "./dist/smart-avatar.min.js",
   "directories": {
@@ -14,4 +14,5 @@ "lib": "./lib"
   "scripts": {
-    "build": "webpack",
-    "build:demo": "gulp --gulpfile ./gulpfile.demo.js && http-server ./demo -p 7878",
+    "build": "webpack && gulp --gulpfile ./gulpfile.browser.js",
+    "build:browser": "gulp --gulpfile ./gulpfile.browser.js",
+    "build:demo": "gulp --gulpfile ./gulpfile.demo.js",
     "test": "gulp --gulpfile ./gulpfile.test.js && http-server ./test/manual -p 7878"
@@ -49,2 +50,3 @@ },
     "gulp-replace": "^1.0.0",
+    "terser": "^3.14.1",
     "webpack": "^4.29.0",
@@ -51,0 +53,0 @@ "webpack-cli": "^3.2.1"

README.md

@@ -1,8 +0,6 @@
-# smart-avatar <img align="left" height="100" src="/.media/[e-mail]">
+# smart-avatar <img align="left" height="100" src="https://github.com/jaredgorski/smart-avatar/blob/master/.media/smartfox%40640.png">
 Render avatars with dynamic, defined fallback
 
-![](.media/smart-avatar_demo.gif)
+![](https://github.com/jaredgorski/smart-avatar/blob/master/.media/smart-avatar_demo.gif)
 
-**Live demo: [smart-avatar-demo.live](https://smart-avatar-demo-d4405lbmo.now.sh/)**
-
 ---
@@ -12,8 +10,27 @@
 
+* [Live Demo](#live-demo)
 * [Usage](#usage)
   * [Basic Example](#basic-example)
   * [Detailed Example](#detailed-example)
+* [Guide to Settings](#guide-to-settings)
+  * [Priority Setting](#priority-setting)
+  * [General Settings](#general-settings)
+  * [Gravatar Settings](#gravatar-settings)
+  * [User-defined Source](#user-defined-source)
+  * [Smart Resource Settings](#smart-resource-settings)
+* [Available Icon Options](#available-icon-options)
+  * [Gravatar-hosted Icons](#gravatar-hosted-icons-from-their-website)
+  * [SmartAvatar Icons](#smartavatar-icons)
+* [Develop and Test](#develop-and-test)
     
 ---
 
+# Live Demo
+
+A live demo is hosted at the following link. This demo allows for experimentation with all of the configuration settings smart-avatar provides. This demo may help you to determine whether this package is right for your needs. Demo will be updated with major changes to functionality.
+
+### Link: [demo-smartavatar.wedeploy.io](https://demo-smartavatar.wedeploy.io/)
+
+---
+
 # Usage
@@ -62,2 +79,3 @@
   "timestamp": true                                 // adds timestamp attribute (for unique id)
+  "alt": "User jaredgorski profile image"           // adds alt attribute for accessibility (if not initials or smartfox)
   
@@ -84,4 +102,104 @@ // gravatar settings
 
-### Develop and Test:
 
+# Guide to Settings
+
+## Priority Setting
+Key | Definition | Default
+--- | --- | ---
+`priority` | **Array** - Defines fallback order. | `['gravatar', 'src', 'smart']`
+
+The priority setting consists of up to 3 items:
+ - **gravatar**: Attempts to render a gravatar asset if `email` address and/or `hash` is provided.
+ - **src**: Attempts to render a user-defined asset.
+ - **smart**: Attempts to render an initials avatar if `initials` is provided, or an icon if not. If no [valid icon option](#available-icon-options) is provided, the `smartfox` icon will be rendered.
+
+In the case of **gravatar** and **src**, these options will fall back to the next option in the priority array. So, **gravatar** will fall back to **src** (and vice-versa) and/or will finally fall back to **smart** of no valid data was provided to render a **gravatar** or **src** asset.
+
+Once **smart** is reached, the smart-avatar will look for `initials`. If none are provided, it will fall back to any defined `icon`, and finally to the `smartfox`. This means that, if **smart** is included *before* **gravatar** or **src**, any data for the latter option will not be reached in the priority queue and will therefore not be rendered. Also, even if **smart** is not included in the array, the `smartfox` icon will serve as a final fallback.
+
+## General Settings
+Key | Definition | Default
+--- | --- | ---
+`alt` | **String** - Adds `alt` attribute to img element output. | N/A
+`cssClass` | **String** - Adds custom CSS classes. | N/A
+`round` | **Boolean** - Generates output with border-radius of 50%. | `false`
+`size` | **Number or String** - Defines output element width in `px`. | `80`
+`timestamp` | **Boolean** - Adds `sa_timestamp` attribute with milliseconds elapsed since the UNIX epoch. | `false`
+
+These settings apply to the rendered element in general. One can add CSS classes for use by custom stylesheets, define the size and shape of the rendered element, add a timestamp for debugging or use as a unique id (obviously this value is not permanent), and add an `alt` attribute for accessibility purposes.
+
+## Gravatar Settings
+Key | Definition | Default
+--- | --- | ---
+`email` | **String** - Relative or absolute path to desired asset. | N/A
+`format` | **String** - Image format to request from Gravatar: *jpg, png, or tiff.* | `jpg`
+`hash` | **String** - md5 hash of Gravatar email address. | N/A
+`protocol` | **String** - Protocol to use for Gravatar request: *secure (https), unsecure (http), or agnostic (//).* | `secure`
+`resolution` | **Number or String** - Defines gravatar resolution (width) in `px`. Does not affect size. | `120`, or `size` * 1.5
+
+Defining these settings enables rendering a Gravatar user image by requesting a resource from Gravatar for a given user's email address. Many aspects of this request and output can be customized, including the request protocol, resource format, and image resolution. Keep in mind that higher resolutions result in more data transfer, meaning larger requests.
+
+## User-defined Source
+Key | Definition | Default
+--- | --- | ---
+`src` | **String** - Relative or absolute path to desired asset. | N/A
+
+Providing a path to a custom resource allows for proprietary icons and user images to be used as primary avatars or fallback resources.
+
+## Smart Resource Settings
+Key | Definition | Default
+--- | --- | ---
+`color` | **String** - Background color of smart icon as Hex, RGB, or RGBA value. | `#777`
+`icon` | **String** - Defines smart icon style. | `smartfox`
+`initials` | **String** - 1 or 2 letters to use as initials. | N/A
+`textColor` | **String** - Font color of initials icon as Hex, RGB, or RGBA value. | `#FFF`
+
+The "smart" resource is so-called because it provides an easy API for quality fallback in the worst-case scenario. If the given **gravatar** data doesn't return a valid image and the **src** path is broken, an asset with a given user's initials or a general, non-specific icon makes for a great avatar. If an icon is preferred, there are plenty of options to choose from, with more to come. See the list of available icons below.
+
+
+# Available Icon Options
+
+## SmartAvatar Icons
+
+**smartfox** - the best default fox ever (uses `color` as background)
+<p align="left">
+  <img height="80" src="https://github.com/jaredgorski/smart-avatar/blob/master/.media/smartfox%40640.png">
+</p>
+
+## Gravatar-hosted Icons ([from their website](https://en.gravatar.com/site/implement/images/)):
+
+**mp** - (mystery-person) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y">
+</p>
+
+**identicon** - a geometric pattern based on an email hash
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y">
+</p>
+
+**monsterid** - a generated 'monster' with different colors, faces, etc
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid&f=y">
+</p>
+
+**wavatar** - generated faces with differing features and backgrounds
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=wavatar&f=y">
+</p>
+
+**retro** - awesome generated, 8-bit arcade-style pixelated faces
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=retro&f=y">
+</p>
+
+**robohash** - a generated robot with different colors, faces, etc
+<p align="left">
+  <img height="80" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=robohash&f=y">
+</p>
+
+---
+
+# Develop and Test:
+
 `npm i`
@@ -88,0 +206,0 @@

No alert changes

Improved metrics

Total package byte prevSize

11786

increased by135.77%

Number of lines in readme file

209

increased by129.67%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes