working through CDN build feature for html-report

pb33f · Feb 2, 2023 · 3a00404 · 3a00404
1 parent 5ae6e09
commit 3a00404
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 48 deletions.
diff --git a/cmd/html_report.go b/cmd/html_report.go
@@ -38,6 +38,8 @@ func GetHTMLReportCommand() *cobra.Command {
             failed := false
 
             noColorFlag, _ := cmd.Flags().GetBool("no-color")
+            cdnFlag, _ := cmd.Flags().GetBool("use-cdn")
+            latestFlag, _ := cmd.Flags().GetBool("top")
 
             if noColorFlag {
                 pterm.DisableStyling()
@@ -101,7 +103,7 @@ func GetHTMLReportCommand() *cobra.Command {
                             <-doneChan
                             return err
                         }
-                        report, er := runGithubHistoryHTMLReport(user, repo, filePath, false, updateChan, errorChan)
+                        report, er := runGithubHistoryHTMLReport(user, repo, filePath, latestFlag, cdnFlag, updateChan, errorChan)
 
                         // wait for things to be completed.
                         <-doneChan
@@ -129,8 +131,6 @@ func GetHTMLReportCommand() *cobra.Command {
             }
             if len(args) == 2 {
 
-                latestFlag, _ := cmd.Flags().GetBool("top")
-
                 // check if the first arg is a directory, if so - process as a git history operation.
                 p := args[0]
                 f, err := os.Stat(p)
@@ -149,7 +149,7 @@ func GetHTMLReportCommand() *cobra.Command {
                     }
                     go listenForUpdates(updateChan, errorChan)
 
-                    report, er := runGitHistoryHTMLReport(args[0], args[1], latestFlag, updateChan, errorChan)
+                    report, er := runGitHistoryHTMLReport(args[0], args[1], latestFlag, cdnFlag, updateChan, errorChan)
                     <-doneChan
                     if er != nil {
                         for x := range er {
@@ -170,7 +170,7 @@ func GetHTMLReportCommand() *cobra.Command {
 
                 } else {
 
-                    report, errs := runLeftRightHTMLReport(args[0], args[1])
+                    report, errs := runLeftRightHTMLReport(args[0], args[1], cdnFlag)
                     if len(errs) > 0 {
                         for e := range errs {
                             pterm.Error.Println(errs[e].Error())
@@ -190,6 +190,7 @@ func GetHTMLReportCommand() *cobra.Command {
         },
     }
     cmd.Flags().BoolP("no-style", "n", false, "Disable color and style output (very useful for CI/CD)")
+    cmd.Flags().BoolP("use-cdn", "c", false, "Use CDN for CSS and JS delivery instead of bundling inline")
     return cmd
 }
 
@@ -207,7 +208,7 @@ func extractGithubDetailsFromURL(url *url.URL) (string, string, string, error) {
     }
 }
 
-func runGitHistoryHTMLReport(gitPath, filePath string, latest bool,
+func runGitHistoryHTMLReport(gitPath, filePath string, latest, useCDN bool,
     progressChan chan *model.ProgressUpdate, errorChan chan model.ProgressError) ([]byte, []error) {
     if gitPath == "" || filePath == "" {
         err := errors.New("please supply a path to a git repo via -r, and a path to a file via -f")
@@ -245,10 +246,10 @@ func runGitHistoryHTMLReport(gitPath, filePath string, latest bool,
     close(progressChan)
 
     generator := html_report.NewHTMLReport(false, time.Now(), commitHistory)
-    return generator.GenerateReport(false), nil
+    return generator.GenerateReport(false, useCDN), nil
 }
 
-func runGithubHistoryHTMLReport(username, repo, filePath string, latest bool,
+func runGithubHistoryHTMLReport(username, repo, filePath string, latest, useCDN bool,
     progressChan chan *model.ProgressUpdate, errorChan chan model.ProgressError) ([]byte, []error) {
 
     commitHistory, errs := git.ProcessGithubRepo(username, repo, filePath, progressChan, errorChan, true)
@@ -279,10 +280,10 @@ func runGithubHistoryHTMLReport(username, repo, filePath string, latest bool,
     generator := html_report.NewHTMLReport(false, time.Now(), commitHistory)
 
     close(progressChan)
-    return generator.GenerateReport(false), nil
+    return generator.GenerateReport(false, useCDN), nil
 }
 
-func runLeftRightHTMLReport(left, right string) ([]byte, []error) {
+func runLeftRightHTMLReport(left, right string, useCDN bool) ([]byte, []error) {
 
     var leftBytes, rightBytes []byte
     var errs []error
@@ -317,5 +318,5 @@ func runLeftRightHTMLReport(left, right string) ([]byte, []error) {
         return nil, errs
     }
     generator := html_report.NewHTMLReport(false, time.Now(), commits)
-    return generator.GenerateReport(false), nil
+    return generator.GenerateReport(false, useCDN), nil
 }
diff --git a/git/read_local.go b/git/read_local.go
@@ -6,13 +6,13 @@ package git
 import (
     "bytes"
     "fmt"
+    "github.com/araddon/dateparse"
     "github.com/pb33f/libopenapi"
     "github.com/pb33f/libopenapi/resolver"
     "github.com/pb33f/openapi-changes/model"
     "os/exec"
     "path"
     "strings"
-    "time"
 )
 
 const (
@@ -70,7 +70,7 @@ func ExtractHistoryFromFile(repoDirectory, filePath string,
     for k := range lines {
         c := strings.Split(lines[k], "||")
         if len(c) == 5 {
-            date, _ := time.Parse("Mon, 2 Jan 2006 15:04:05 -0400", c[0])
+            date, _ := dateparse.ParseAny(c[0])
             commitHistory = append(commitHistory,
                 &model.Commit{
                     CommitDate:    date,

diff --git a/go.mod b/go.mod
@@ -16,6 +16,7 @@ require (
 require (
 	atomicgo.dev/cursor v0.1.1 // indirect
 	atomicgo.dev/keyboard v0.2.8 // indirect
+	github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de // indirect
 	github.com/containerd/console v1.0.3 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/dprotaso/go-yit v0.0.0-20220510233725-9ba8df137936 // indirect

diff --git a/go.sum b/go.sum
@@ -11,6 +11,8 @@ github.com/MarvinJWendt/testza v0.2.12/go.mod h1:JOIegYyV7rX+7VZ9r77L/eH6CfJHHzX
 github.com/MarvinJWendt/testza v0.3.0/go.mod h1:eFcL4I0idjtIx8P9C6KkAuLgATNKpX4/2oUqKc6bF2c=
 github.com/MarvinJWendt/testza v0.4.2/go.mod h1:mSdhXiKH8sg/gQehJ63bINcCKp7RtYewEjXsvsVUPbE=
 github.com/MarvinJWendt/testza v0.5.1 h1:a9Fqx6vQrHQ4CyiaLhktfTTelwGotmFWy8MNhyaohw8=
+github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de h1:FxWPpzIjnTlhPwqqXc4/vE0f7GvRjuAsbW+HOIe8KnA=
+github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de/go.mod h1:DCaWoUhZrYW9p1lxo/cm8EmUOOzAPSEZNGF2DK1dJgw=
 github.com/atomicgo/cursor v0.0.1/go.mod h1:cBON2QmmrysudxNBFthvMtN32r3jxVRIvzkUiF/RuIk=
 github.com/chzyer/logex v1.1.10/go.mod h1:+Ywpsq7O8HXn0nuIou7OrIPyXbp3wmkHB+jjWRnGsAI=
 github.com/chzyer/readline v0.0.0-20180603132655-2972be24d48e/go.mod h1:nSuG5e5PlCu98SY8svDHJxuZscDgtXS6KTTbou5AhLI=
@@ -70,6 +72,7 @@ github.com/lithammer/fuzzysearch v1.1.5 h1:Ag7aKU08wp0R9QCfF4GoGST9HbmAIeLP7xwMr
 github.com/lithammer/fuzzysearch v1.1.5/go.mod h1:1R1LRNk7yKid1BaQkmuLQaHruxcC4HmAH30Dh61Ih1Q=
 github.com/lucasb-eyer/go-colorful v1.2.0 h1:1nnpGOrhyZZuNyfu1QjKiUICQ74+3FNCN69Aj6K7nkY=
 github.com/lucasb-eyer/go-colorful v1.2.0/go.mod h1:R4dSotOR9KMtayYi1e77YzuveK+i7ruzyGqttikkLy0=
+github.com/mattn/go-runewidth v0.0.10/go.mod h1:RAqKPSqVFrSLVXbA8x7dzmKdmGzieGRCM46jaSJTDAk=
 github.com/mattn/go-runewidth v0.0.13/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
 github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
 github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
@@ -105,10 +108,12 @@ github.com/pterm/pterm v0.12.51 h1:iwhNG1FhQMgks+5kVyr/ClRk3WJCuL907nJN7RqmEpw=
 github.com/pterm/pterm v0.12.51/go.mod h1:79BLm4vos2z+eOoHnDG7ZWuYtLaSStyaspKjGmSoxc4=
 github.com/rivo/tview v0.0.0-20221117065207-09f052e6ca98 h1:0nVxhPi+jdqG11c3n4zTcZQbjGy0yi60ym/6B+NITPU=
 github.com/rivo/tview v0.0.0-20221117065207-09f052e6ca98/go.mod h1:YX2wUZOcJGOIycErz2s9KvDaP0jnWwRCirQMPLPpQ+Y=
+github.com/rivo/uniseg v0.1.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.2 h1:YwD0ulJSJytLpiaWua0sBDusfsCZohxjxzVTYjwxfV8=
 github.com/rivo/uniseg v0.4.2/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
+github.com/scylladb/termtables v0.0.0-20191203121021-c4c0b6d42ff4/go.mod h1:C1a7PQSMz9NShzorzCiG2fk9+xuCgLkPeCvMHYR2OWg=
 github.com/sergi/go-diff v1.1.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=
 github.com/sergi/go-diff v1.2.0 h1:XU+rvMAioB0UC3q1MFrIQy4Vo5/4VsRDQQXHsEya6xQ=
 github.com/sergi/go-diff v1.2.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=

diff --git a/html-report/build_report.go b/html-report/build_report.go
@@ -28,12 +28,15 @@ var bundledCSS string
 
 type HTMLReportGenerator interface {
     GetHTMLReport() *model.HTMLReport
-    GenerateReport(testMode bool) []byte
+    GenerateReport(testMode, useCDN bool) []byte
 }
 
 type ReportData struct {
     BundledJS        string            `json:"bundledJS"`
     BundledCSS       string            `json:"bundledCSS"`
+    UseCDN           bool              `json:"useCDN"`
+    JsCDN            string            `json:"jsCDN"`
+    CssCDN           string            `json:"cssCDN"`
     TestMode         bool              `json:"test"`
     Report           string            `json:"data"`
     ReportData       *model.HTMLReport `json:"-"`
@@ -117,7 +120,7 @@ func (html *htmlReport) GetHTMLReport() *model.HTMLReport {
     return html.model
 }
 
-func (html *htmlReport) GenerateReport(test bool) []byte {
+func (html *htmlReport) GenerateReport(test, useCDN bool) []byte {
 
     templateFuncs := template.FuncMap{
         "renderJSON": func(data interface{}) string {
@@ -139,10 +142,13 @@ func (html *htmlReport) GenerateReport(test bool) []byte {
     reportData := &ReportData{
         BundledJS:  bundledJS,
         BundledCSS: bundledCSS,
+        JsCDN:      "https://raw.githubusercontent.com/pb33f/openapi-changes/main/html-report/ui/build/static/bundle.js",
+        CssCDN:     "https://raw.githubusercontent.com/pb33f/openapi-changes/main/html-report/ui/build/static/main.css",
         Report:     string(data),
         ReportData: html.model,
         Generated:  time.Now(),
         TestMode:   test,
+        UseCDN:     useCDN,
     }
     if html.disableTimestamp {
         reportData.DisableTimestamp = true

diff --git a/html-report/templates/header.gohtml b/html-report/templates/header.gohtml
@@ -1,40 +1,39 @@
 {{ define "header"}}
     <head>
         <title>OpenAPI Changes Report</title>
-        <!-- this file has been autogenerated by openapi-changes https://github.com/pb33f/openapi-changes -->
+        <!-- this file has been autogenerated by openapi-changes https://pb33f.io/openapi-changes -->
         <meta charset="UTF-8">
         <meta name="description" content="report generated by openapi-changes">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta property="og:locale" content="en_US" />
-        <meta property="og:type" content="website" />
+        <meta property="og:locale" content="en_US"/>
+        <meta property="og:type" content="website"/>
         <meta property="og:title" content="OpenAPI Changes Report">
-        <meta property="og:description" content="View how this OpenAPI specification as changed over time" />
-        <meta property="og:publish_date" content="{{ .ReportData.DateGenerated }}" />
-        <meta property="og:url" content="https://pb33f.io/openapi-changes" />
-        <meta property="article:author" content="pb33f" />
-        <meta property="article:publisher" content="https://pb33f.io" />
-        <meta property="article:section" content="Software" />
-        <meta property="article:published_time" content="{{ .ReportData.DateGenerated }}" />
-        <meta property="article:modified_time" content="{{  .ReportData.DateGenerated }}" />
+        <meta property="og:description" content="View how this OpenAPI specification as changed over time"/>
+        <meta property="og:publish_date" content="{{ .ReportData.DateGenerated }}"/>
+        <meta property="og:url" content="https://pb33f.io/openapi-changes"/>
+        <meta property="article:author" content="pb33f"/>
+        <meta property="article:publisher" content="https://pb33f.io"/>
+        <meta property="article:section" content="Software"/>
+        <meta property="article:published_time" content="{{ .ReportData.DateGenerated }}"/>
+        <meta property="article:modified_time" content="{{  .ReportData.DateGenerated }}"/>
         <meta name="twitter:card" content="summary_large_image">
         <meta name="twitter:site" content="@princessb33f">
         <meta name="twitter:creator" content="@princessb33f">
-        <meta name="twitter:label1" content="Generated by" />
-        <meta name="twitter:data1" content="openapi-changes" />
+        <meta name="twitter:label1" content="Generated by"/>
+        <meta name="twitter:data1" content="openapi-changes"/>
         <style>
-            {{ .BundledCSS }}
             .preloader {
                 width: 100vh;
                 margin: calc(50vh - 611px) auto;
                 text-align: center;
             }
-            .lds-ellipsis {
+            .ellipsis {
                 display: inline-block;
                 position: relative;
                 width: 80px;
                 height: 80px;
             }
-            .lds-ellipsis div {
+            .ellipsis div {
                 position: absolute;
                 top: 33px;
                 width: 13px;
@@ -43,45 +42,54 @@
                 background: var(--primary-color);
                 animation-timing-function: cubic-bezier(0, 1, 1, 0);
             }
-            .lds-ellipsis div:nth-child(1) {
+            .ellipsis div:nth-child(1) {
                 left: 8px;
                 animation: lds-ellipsis1 0.6s infinite;
             }
-            .lds-ellipsis div:nth-child(2) {
+            .ellipsis div:nth-child(2) {
                 left: 8px;
                 animation: lds-ellipsis2 0.6s infinite;
             }
-            .lds-ellipsis div:nth-child(3) {
+            .ellipsis div:nth-child(3) {
                 left: 32px;
                 animation: lds-ellipsis2 0.6s infinite;
             }
-            .lds-ellipsis div:nth-child(4) {
+            .ellipsis div:nth-child(4) {
                 left: 56px;
                 animation: lds-ellipsis3 0.6s infinite;
             }
-            @keyframes lds-ellipsis1 {
+            @keyframes ellipsis1 {
                 0% {
                     transform: scale(0);
                 }
                 100% {
                     transform: scale(1);
                 }
             }
-            @keyframes lds-ellipsis3 {
+            @keyframes ellipsis3 {
                 0% {
                     transform: scale(1);
                 }
                 100% {
                     transform: scale(0);
                 }
             }
-            @keyframes lds-ellipsis2 {
+            @keyframes ellipsis2 {
                 0% {
                     transform: translate(0, 0);
                 }
                 100% {
                     transform: translate(24px, 0);
                 }
-            }</style>
+            }
+
+            {{- if not .UseCDN -}}
+            {{ .BundledCSS }}
+            {{- end -}}
+        </style>
+        {{- if .UseCDN }}
+            <link rel="stylesheet" href="{{- .CssCDN -}}"/>
+            <script src="{{- .JsCDN -}}" async></script>
+        {{- end }}
     </head>
-{{ end}}
+{{ end }}
diff --git a/html-report/templates/report.gohtml b/html-report/templates/report.gohtml
@@ -4,7 +4,7 @@
     <body>
         <div id="root">
             <div class="preloader">
-                <div class="lds-ellipsis">
+                <div class="ellipsis">
                     <div></div><div></div><div></div><div></div></div><br/>
                 OpenAPI Changes report is loading...
             </div>
@@ -15,9 +15,11 @@
         window.data = JSON.parse(JSON.stringify(rawData));
 </script>
 {{- if not .TestMode -}}
+    {{- if not .UseCDN -}}
     <script>
         {{ .BundledJS }}
     </script>
+    {{- end -}}
 {{- else -}}
     <script src="http://localhost:3000/bundle.js"></script>
 {{- end -}}

diff --git a/html-report/ui/build/static/bundle.js b/html-report/ui/build/static/bundle.js
diff --git a/html-report/ui/src/OpenAPIChanges.tsx b/html-report/ui/src/OpenAPIChanges.tsx
@@ -93,14 +93,11 @@ function OpenAPIChanges(props: OpenAPIChangesProps) {
                             ]}
                         />
                     </section>
-                    <hr/>
-
                     <footer>
-                        Generated by <a href='https://github.com/pb33f/openapi-changes'>openapi-changes</a>&nbsp;|&nbsp;
-                        Powered by <a href='https://github.com/pb33f/libopenapi'>libopenapi</a>&nbsp;|&nbsp;
-                        Developed by <a href='https://github.com/pb33f'>pb33f heavy industries</a>
+                        Generated by <a href='https://pb33f.io/openapi-changes'>openapi-changes</a>&nbsp;|&nbsp;
+                        Powered by <a href='https://pb33f.io/libopenapi'>libopenapi</a>&nbsp;|&nbsp;
+                        Developed by <a href='https://pb33f.io'>pb33f heavy industries</a>
                     </footer>
-
                 </div>
             </ConfigProvider>
 

diff --git a/model/dto.go b/model/dto.go
@@ -19,6 +19,7 @@ type HTMLReportItem struct {
 type HTMLReport struct {
     DateGenerated string            `json:"dateGenerated"`
     ReportItems   []*HTMLReportItem `json:"reportItems"`
+    UseCDN        bool              `json:"useCDN"`
 }
 
 type TreeNode struct {