site: make footer show last updated (#530)

* site: make footer show last updated Little JS snippet to actually show something like: · Page last updated [3 days ago](link to commit). Instead of: · Build from commit [abcdef](link to commit). Written in ES6 syntax (https://caniuse.com/#search=es6). Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com> * address feedback Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com> * indent line Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
kubernetes-sigs · Mar 4, 2020 · 953a73b · 953a73b
1 parent 5c5c57b
commit 953a73b
Showing 1 changed file with 33 additions and 12 deletions.
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
@@ -6,22 +6,43 @@
                 <a href="https://github.com/kubernetes/community/blob/master/sig-cli/README.md#cli-special-interest-group" target="_blank" class="text-info">
                     SIG CLI</a> project.
                 <p>
-                    {{ with .File }}
+                    {{- with .File -}}
                         <a href="http://sigs.k8s.io/krew/site/content/{{- .File.Path -}}" target="_blank" class="text-info">
                         Edit Page</a>
-                    {{ end }}
-
-                    {{ if .GitInfo }}
-                    <strong>&middot;</strong>
-                    Last updated in commit
-                    <a href="https://github.com/kubernetes-sigs/krew/commit/{{- .GitInfo.Hash -}}"
-                        target="_blank" class="text-muted">
-                        {{- .GitInfo.AbbreviatedHash -}}
-                    </a>.
-                    {{ end}}
+                    {{- end -}}
+                    {{- if .GitInfo }}
+                        &middot;
+                        <span id="lastmod"></span>
+                    {{- end}}
                 </p>
-        </footer>
+            </footer>
         </div>
     </div><!-- .container -->
+
+    {{ if .GitInfo }}
+    <script>
+        function writeLastMod(lastMod, commitHash){
+            var days = (Date.now()/1000 - lastMod)/(60*60*24);
+            var text;
+            if (days < 1) {
+                text = 'today'
+            } else if (days < 2 ) {
+                text = 'yesterday'
+            } else if (days < 62) {
+                text = `${Math.trunc(days)} days ago`
+            } else if (days < 365*2) {
+                text = `${Math.trunc(days/30)} months ago`
+            } else {
+                text = `${Math.trunc(days/365)} years ago`
+            }
+            document.getElementById('lastmod').innerHTML = `Page last updated ` +
+                `<a class="text-info" target="_blank"` +
+                `href="https://github.com/kubernetes-sigs/krew/commit/${commitHash}">` +
+                `${text}</a>.`;
+        };
+        writeLastMod({{- .Lastmod.Unix -}}, '{{- .GitInfo.Hash -}}');
+    </script>
+    {{ end }}
+
 </body>
 </html>