Resource versioning, page preview spinner

KSIUJ · Jun 23, 2019 · f171c9f · f171c9f
1 parent 2439f09
commit f171c9f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 20 deletions.
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
@@ -17,6 +17,12 @@ [email protected]
 # Site settings
 mordor.site.address=http://127.0.0.1:8080
 spring.mvc.static-path-pattern=/static/**
+spring.resources.cache.cachecontrol.max-age=365d
+spring.resources.chain.html-application-cache=true
+spring.resources.chain.enabled=true
+spring.resources.chain.strategy.content.enabled=true
+spring.resources.chain.strategy.content.paths=/**
+spring.mvc.favicon.enabled=false
 mordor.root_path=/home/adam
 mordor.secret=CHANGE_THIS_FOR_PRODUCTION
 mordor.allow_user_registration=true

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
@@ -46,4 +46,5 @@ code.hljs {
     width: 100%;
     border: none;
     outline: none;
+    overflow: hidden;
 }
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
@@ -10,14 +10,14 @@
     <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"
             integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0"
             crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" th:href="@{/static/style.css}">
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="manifest" href="/static/site.webmanifest">
-    <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#ff0000">
-    <link rel="shortcut icon" href="/static/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" th:href="@{/static/apple-touch-icon.png}">
+    <link rel="icon" type="image/png" sizes="32x32" th:href="@{/static/favicon-32x32.png}">
+    <link rel="icon" type="image/png" sizes="16x16" th:href="@{/static/favicon-16x16.png}">
+    <link rel="manifest" th:href="@{/static/site.webmanifest}">
+    <link rel="mask-icon" th:href="@{/static/safari-pinned-tab.svg}" color="#ff0000">
+    <link rel="shortcut icon" th:href="@{/static/favicon.ico}">
     <meta name="msapplication-TileColor" content="#b91d47">
     <meta name="msapplication-config" content="/static/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">

diff --git a/src/main/resources/templates/preview_page.html b/src/main/resources/templates/preview_page.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en"
-      layout:decorate="~{layout}">
+      layout:decorate="~{layout}" xmlns:th="http://www.w3.org/1999/xhtml">
 <head>
     <title>Mordor</title>
 </head>
@@ -14,26 +14,41 @@
     </ol>
 
     <script>
-        function setIframeHeight(iframe) {
-            if (iframe) {
-                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
-                if (iframeWin.document.body) {
-                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
-                }
-            }
-        };
         window.onload = function () {
-            setIframeHeight(document.getElementById('page-frame'));
+            let iframe = document.getElementById('page-frame');
+            document.getElementById('spinner').style.display = 'none';
+            iframe.classList.remove('d-none');
+            let iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
+            if (iframeWin.document.body) {
+                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
+            }
         };
     </script>
+    <noscript>
+        <style>
+            #spinner {
+                display: none !important;
+            }
+
+            #page-frame {
+                display: block !important;
+            }
+        </style>
+    </noscript>
 
     <div class="card mt-2">
         <div class="card-header">
             <a href="#" th:href="@{${download}}" class="btn btn-secondary"><i class="fas fa-download"></i> Download</a>
         </div>
-        <pre class="card-body p-0 m-0">
-            <iframe id="page-frame" class="page-frame" th:src="@{${raw}}" height="200" sandbox="allow-same-origin"></iframe>
-        </pre>
+        <div class="card-body p-0 m-0">
+            <div class="text-center m-5" id="spinner">
+                <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <iframe id="page-frame" class="page-frame d-none" th:src="@{${raw}}" height="1000em"
+                    sandbox="allow-same-origin"></iframe>
+        </div>
     </div>
 </div>
 </body>