Improve index.html template

* Add Changelogs for future use * Update the documentation
bzon · May 1, 2018 · d1ba00d · d1ba00d
1 parent b869359
commit d1ba00d
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -1,32 +1,40 @@
-# GOTA
+# About gota
 
 [![Go Report Card](https://goreportcard.com/badge/github.com/bzon/gota)](https://goreportcard.com/report/github.com/bzon/gota)
 [![GoDoc](https://img.shields.io/badge/godoc-reference-blue.svg?style=flat)](https://godoc.org/github.com/bzon/gota)
 [![GitHub tag](https://img.shields.io/github/tag/bzon/gota.svg)](https://github.com/bzon/gota/releases/)
 
-Automate the beta testing distribution of your Android and iOS application files with gota.
+Automate the beta testing distribution of your Android and iOS application files.
 
-Gota is a [Golang](http://golang.org/) powered Over the Air Installation site creation command line tool.
+__gota__ is a just command line tool that you can easily integrate in your current continuous integration workflow with tools such as Fastlane.
 
 ![](./docs/gota_workflow.png)
 
-## Features Checklist
+__gota__ automatically detects the build information of your ipa or apk files and creates an OTA (over the air) installation site that is uploaded to your desired hosting server.
 
-Supported Static Website Hosting Service
+|Android						  |iOS							  |
+|---------------------------------|-------------------------------|
+|![](./docs/samplesite_android.png)|![](./docs/samplesite_ios.png)|
+
+## Supported Static Hosting Service
 
 * [x] Amazon S3 Bucket
 * [x] Nexus 3 Site Repository
 * [ ] DigitalOcean Spaces 
 * [ ] Standalone Gota Server
 * [ ] Nexus 2 Site Repository
 
-## Installation
+## Getting Started
+
+### Installation
 
-Get the executable binary for your platform from the [Release Page](https://github.com/bzon/gota/releases/). Currently, Linux, macOS and Windows are supported.
+Get the executable binary for your platform from the [Release Page](https://github.com/bzon/gota/releases/).
+
+Currently, Linux, macOS and Windows are supported.
 
 If you have Go installed, just run `go get github.com/bzon/gota`.
 
-## User Guide
+### Help Flags
 
 To see the required flags, use the --help flag.
 
@@ -36,12 +44,7 @@ gota nexus --help
 gota s3 --help
 ```
 
-Gota creates a `gotalink.txt` and `ipalink.txt` (if uploading an ipa) that contains the url or direct download link.
-
-If you are using a CI server, you can have it read these files for quickly getting the url that you can send to your team.
-
-### Upload to S3 Bucket
-
+### Uploading to S3 Bucket
 
 ```bash
 # set the aws credentials
@@ -60,7 +63,7 @@ export AWS_SECRET_ACCESS_KEY=xxxxx
 __NOTE__: Currently, gota assigns an AES256 encryption and a public-read ACL to all files that are uploaded.
 This may change to be configurable in the future.
 
-### Upload to Nexus
+### Uploading to Nexus
 
 The repository must be a [Raw Site Repository](https://help.sonatype.com/repomanager3/raw-repositories-and-maven-sites).
 
@@ -83,6 +86,10 @@ file uploaded: http://localhost:8081/repository/site/nexus_android_repo/1.0.0/10
 
 __NOTE__: Currently supports only Nexus 3.
 
+### Extra Features
+
+__gota__ creates a `gotalink.txt` and `ipalink.txt` (if uploading an ipa) that contains the url or direct download link. If you are using a CI server, you can have it read these files for quickly getting the url that you can send to your team.
+
 ### Site Directory Layout
 
 ```bash
@@ -96,14 +103,7 @@ destDir
 	 \__index.html
 ```
 
-## Development Setup
-
-### Build and Test
-
-```bash
-go get -v ./...
-go test -v ./...
-```
+## Developers
 
 If you are on Windows, ensure to go get spf13/cobra's dependency for it.
 
@@ -113,7 +113,7 @@ go get -v ./...
 go test -v ./...
 ```
 
-### S3 Feature Test
+### Testing S3 Feature
 
 Set these environment variables before running `go test` in s3 package.
 
@@ -123,15 +123,15 @@ AWS_SECRET_ACCESS_KEY=xxxxx
 GOTEST_AWS_BUCKET=example-bucket
 ```
 
-### Nexus Feature Test
+### Testing Nexus Feature
 
 You must have a Nexus 3 server running in your machine.
 
 Get it easily via docker command: `docker run -d -p 8081:8081 --name nexus3`.
 
 Then, create a Raw Repository with a repository id `site`.
 
-## Inspirations and References
+## Motivation
 
 * [Fastlane Nexus Upload](https://docs.fastlane.tools/actions/nexus_upload/)
 * [Fastlane S3 Plugin](https://github.com/joshdholtz/fastlane-plugin-s3/)

diff --git a/docs/apk_nexus_uploaded.png b/docs/apk_nexus_uploaded.png
diff --git a/docs/gota_html.png b/docs/gota_html.png
diff --git a/docs/ios_nexus_uploaded.png b/docs/ios_nexus_uploaded.png
diff --git a/docs/samplesite_android.png b/docs/samplesite_android.png
diff --git a/docs/samplesite_ios.png b/docs/samplesite_ios.png
diff --git a/parser/parser.go b/parser/parser.go
@@ -51,6 +51,11 @@ type MobileApp struct {
 	DownloadURL string
 	PlistURL    htmltemp.URL
 	File        string
+	Changelogs  []Changelog
+}
+
+type Changelog struct {
+	Author, Date, Subject string
 }
 
 // GenerateAssets creates the site assets that will be uploaded along with the ipa or apk file

diff --git a/parser/parser_test.go b/parser/parser_test.go
@@ -48,6 +48,18 @@ func TestGenerateAssets(t *testing.T) {
 			app.UploadDate = time.Now().Format(time.RFC1123)
 			app.AppInfo = appInfo
 			app.File = tc.file
+			app.Changelogs = []Changelog{
+				{
+					Date:    time.Now().Format(time.RFC1123),
+					Author:  "[email protected]",
+					Subject: "Dico delectus facilisi cum ad, est soluta populo ne.",
+				},
+				{
+					Date:    time.Now().Add(-24 * time.Hour).Format(time.RFC1123),
+					Author:  "[email protected]",
+					Subject: "Sed ipsum congue quaestio ei, eu mundi iudico accusamus vix.",
+				},
+			}
 			if err := app.GenerateAssets(); err != nil {
 				t.Fatal(err)
 			}

diff --git a/parser/templates.go b/parser/templates.go
@@ -63,96 +63,140 @@ const plistTemplateString = `<?xml version="1.0" encoding="UTF-8"?>
 </dict>
 </plist>`
 
-var indexHTMLTemplateString = `<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-	<title>Install {{.Name}}</title>
-  </head>
-  <body>
-    <style type="text/css">
-      * {
-        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-        text-align: center;
-        background-color: #f5f5f5;
-      }
-      .oneRow {
-        width: 100%;
-        overflow: auto;
-        overflow-y: hidden;
-        white-space: nowrap;
-        text-align: center;
-      }
-      .download {
-        margin: 30px;
-        font-size: 130%;
-      }
-      #appIcon {
-        -webkit-border-radius: 22.544%;
-        -moz-border-radius: 22.544%;
-        -ms-border-radius: 22.544%;
-          border-radius: 22.544%;
-        margin-bottom: 30px;
-      }
-      a {
-        text-decoration: none;
-        color: blue;
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-      #footnote {
-        color: #737373;
-        font-size: 14px;
-      }
-      #finished { display: none; }
-      #fastlaneLogo {
-        text-align: center;
-        max-width: 150px;
-        margin-top: 10px;
-      }
-    </style>
+var indexHTMLTemplateString = `<!DOCTYPE HTML5>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+        <style>
+		  	* {
+				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+		  	}
+            .main-container {
+                height: inherit;
+                width: inherit;
+                margin-top: 2%;
+            }
+            .demo-card-wide.mdl-card {
+                width: 512px;
+                margin: 0 auto;
+            }
+            .demo-card-wide > .mdl-card__title {
+                color: #fff;
+                height: 116px;
+                background: #3c8fc6 center / cover;
+                text-indent: 0px;   
+                vertical-align:bottom;             
+            }
+            .demo-card-wide > .mdl-card__details {
+				margin: 0 auto;
+				text-align: center;
+            }
+            .demo-card-wide > .mdl-card__menu {
+                color: #fff;
+            }
+            .logo {
+                background: url('appicon.png') center / cover;
+                display: block; 
+                float: left;
+                width: 80px;
+                height: 80px;
+            }
+            .logo-title {
+                display: block; 
+                float: left;
+                text-indent: 2%;
+                height: 80px;
+                line-height: 80px;
+            }
+            .release-note {
+                margin: 0 auto; 
+                margin-top: 10px; 
+                width: 512px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="main-container">
+            <!-- elease Details -->
+            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
+                <div class="mdl-card__title">
+                    <div class="logo"></div>
+                    <div class="logo-title mdl-card__title-text">{{.Name}}</div>
+                </div>
+                <div class="mdl-card__supporting-text" style="padding: 0; width: 100%">
+                    <table class="mdl-data-table mdl-js-data-table" style="width: 100%; border: 0px">
+                        <tbody>
+							{{if .IsIOS -}}
+                            <tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">CFBundleShortVersion</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
+							</tr>
+							<tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">CFBundleVersion</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
+							</tr>
+							{{else -}}
+							<tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">Version Name</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
+							</tr>
+							<tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">Version Code</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
+							</tr>
+							{{end -}}
+							<tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">Bundle ID</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.BundleId}}</td>
+							</tr>
+							<tr>
+                    	        <td class="mdl-data-table__cell--non-numeric">Upload Date</td>
+                                <td class="mdl-data-table__cell--non-numeric">{{.UploadDate}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-    <h1 style="text-align: center;">{{.Name}}</h1>
-
-	{{if .IsIOS -}}
-	<a href="{{.PlistURL}}"><img src="appicon.png" id="appIcon"></a>
-    <div class="oneRow">
-      <span class="download" id="ios">
-        <a href="itms-services://?action=download-manifest&amp;url={{.PlistURL}}" id="text" class="btn btn-lg btn-default" onclick="document.getElementById('finished').id = '';">
-			Install {{.Name}} {{.Version}} ({{.Build}})
-        </a>
-        <br>
-		<p>Uploaded on {{.UploadDate}}</p>
-      </span>
-    </div>
-
-    <p id="finished">
-      App is being installed. Close your Browser using the home button.
-    </p>
-	{{- else}}	
-	<a href="{{.DownloadURL}}"><img src="appicon.png" id="appIcon"></a>
-    <div class="oneRow">
-      <span class="download" id="android">
-        <a href="{{.DownloadURL}}" id="text" class="btn btn-lg btn-default" onclick="document.getElementById('finished').id = '';">
-          Install {{.Name}} {{.Version}} ({{.Build}})
-        </a>
-        <br>
-        <p>Uploaded on {{.UploadDate}}</p>
-      </span>
-    </div>
-
-    <p id="finished">
-      App is being installed. You might have to close the browser.
-    </p>
-
-	{{- end}}
-    <p id="footnote">
-	This is a beta version and is not meant for the public.
-    </p>
-  </body>
-
-  <script type='text/javascript'>
-    document.getElementById("desktop").remove()
-  </script>
-</html>`
+                <div class="mdl-card__actions mdl-card--border">
+					{{if .IsIOS -}}
+                    <a href="itms-services://?action=download-manifest&amp;url={{.PlistURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+                    Install
+                    </a>
+					{{else -}}
+					<a href="{{.DownloadURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+                    Install
+                    </a>
+					{{end -}}
+                </div>
+                <div class="mdl-card__menu">
+                    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+                    <i class="material-icons">share</i>
+                    </button>
+                </div>
+            </div>
+            <!-- Release Notes -->
+            <table class="mdl-data-table mdl-shadow--2dp mdl-js-data-table release-note">
+                <thead>
+					<tr>
+                       <th class="mdl-data-table__cell--non-numeric">Date</th>
+                       <th class="mdl-data-table__cell--non-numeric">Author</th>
+                       <th class="mdl-data-table__cell--non-numeric">Subject</th>
+					</tr>
+                </thead>
+                <tbody>
+					{{range .Changelogs}}
+                    <tr>
+                        <td class="mdl-data-table__cell--non-numeric">{{.Date}}</td>
+                        <td class="mdl-data-table__cell--non-numeric">{{.Author}}</td>
+                        <td class="mdl-data-table__cell--non-numeric">{{.Subject}}</td>
+                    </tr>
+					{{end}}
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>
+`