More documentation and some work on timeAgo.

.gitignore

@@ -2,6 +2,7 @@
 .php_cs
 .php_cs.cache
 .phpunit.result.cache
+.DS_Store
 build
 composer.lock
 coverage

README.md

@@ -1,5 +1,7 @@
 # Introduction
 
+![preview](./docs/src/.vuepress/public/preview.png)
+
 This is a Laravel package to help promote social proof and legitimacy within your application. With a simple blade component added to any page you can share with potential customers or users that other customers are using and/or paying for your product. A simple pop-up will display in the corner of page with information such as "Someone in New York purchased the annual plan 2 minutes ago."
 
 Full documentation can be found at [laravelbandwagon.com](https://www.laravelbandwagon.com)
@@ -24,6 +26,9 @@ php artisan vendor:publish --provider="Bndwgn\Bandwagon\BandwagonServiceProvider
 ## Rendering the component
 
 To render the component just add the component to any or all desired pages like so:
+
+![thumb](./docs/src/.vuepress/public/bandwagon-thumb.gif)
+
 ```html
 <x-bandwagon-renderer />
 ```

docs/src/guide/README.md

@@ -1,3 +1,5 @@
 # Introduction
 
-This is a Laravel package to help promote social proof and legitimacy within your application. With a simple blade component added to any page you can share with potential customers or users that other customers are using and/or paying for your product. A simple pop-up will display in the corner of page with information such as "Someone in New York purchased the annual plan 2 minutes ago."
+<img :src="$withBase('/preview.png')" alt="foo">
+
+This is a Laravel package to help promote social proof and legitimacy within your application. With a simple blade component added to any page you can share with potential customers or users that other customers are using and/or paying for your product. A simple pop-up will display in the corner of page with information such as "Someone in New York purchased the business plan 2 minutes ago."

docs/src/guide/getting-started.md

@@ -16,6 +16,8 @@ php artisan vendor:publish --provider="Bndwgn\Bandwagon\BandwagonServiceProvider
 ```
 
 ## Rendering the component
+<br />
+<img :src="$withBase('/bandwagon-thumb.gif')" alt="component">
 
 To render the component just add the component to any or all desired pages like so:
 ```html

resources/js/BandwagonRenderer.vue

@@ -79,29 +79,34 @@ export default {
             var elapsed = Date.now() - (this.since * 1000);
 
             if (elapsed < msPerMinute) {
-                return Math.round(elapsed/1000) + ' seconds ago';   
-            }
-
-            else if (elapsed < msPerHour) {
-                return Math.round(elapsed/msPerMinute) + ' minutes ago';   
-            }
-
-            else if (elapsed < msPerDay ) {
-                return Math.round(elapsed/msPerHour ) + ' hours ago';   
-            }
-
-            else if (elapsed < msPerMonth) {
-                return 'approximately ' + Math.round(elapsed/msPerDay) + ' days ago';   
-            }
-
-            else if (elapsed < msPerYear) {
-                return 'approximately ' + Math.round(elapsed/msPerMonth) + ' months ago';   
-            }
-
-            else {
-                return 'approximately ' + Math.round(elapsed/msPerYear ) + ' years ago';   
+                let result = Math.round(elapsed/1000);
+                let pluralString = this.pluralString(result);
+                return  `${result} second${pluralString} ago`;   
+            } else if (elapsed < msPerHour) {
+                let result = Math.round(elapsed/msPerMinute);
+                let pluralString = this.pluralString(result);
+                return `${result} minute${pluralString} ago`;   
+            } else if (elapsed < msPerDay ) {
+                let result = Math.round(elapsed/msPerHour);
+                let pluralString = this.pluralString(result);
+                return `${result} hour${pluralString} ago`;   
+            } else if (elapsed < msPerMonth) {
+                let result = Math.round(elapsed/msPerDay);
+                let pluralString = this.pluralString(result);
+                return `approximately ${result} day${pluralString} ago`;   
+            } else if (elapsed < msPerYear) {
+                let result = Math.round(elapsed/msPerMonth);
+                let pluralString = this.pluralString(result);
+                return `approximately ${result} month${pluralString} ago`;   
+            } else {
+                let result = Math.round(elapsed/msPerYear);
+                let pluralString = this.pluralString(result);
+                return `approximately ${result} year${pluralString} ago`;   
             }
         },
+        pluralString(num) {
+            return num > 1 ? 's' : '';
+        },
         showClass() {
             return (this.title || this.subtitle) ? ' bandwagon-show' : '';
         }