cmd/hello: split css and js into separate files (#19771)

Move the inline CSS and JS into separate files to be more friendly
to Content Security Policies. ServeHTTP is updated to serve these
assets from the '/static/' path.

Updates tailscale/corp#32398

Signed-off-by: Noel O'Brien <noel@tailscale.com>

cmd/hello/helloserver/hello.tmpl.html

@@ -4,383 +4,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <title>Hello from Tailscale</title>
-  <style>
+  <link type="text/css" rel="stylesheet" href="/static/style.css">
-    html,
+  <script src="/static/script.js" defer></script>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      font-size: 100%;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    html,
-    body,
-    main {
-      height: 100%;
-    }
-
-    *,
-    ::before,
-    ::after {
-      box-sizing: border-box;
-      border-width: 0;
-      border-style: solid;
-      border-color: #dad6d5;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: inherit;
-    }
-
-    a {
-      color: inherit;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    main {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      max-width: 24rem;
-      width: 95%;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .p-2 {
-      padding: 0.5rem;
-    }
-
-    .p-4 {
-      padding: 1rem;
-    }
-
-    .px-2 {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-    }
-
-    .pl-3 {
-      padding-left: 0.75rem;
-    }
-
-    .pr-3 {
-      padding-right: 0.75rem;
-    }
-
-    .pt-4 {
-      padding-top: 1rem;
-    }
-
-    .mr-2 {
-      margin-right: 0.5rem;
-      ;
-    }
-
-    .mb-1 {
-      margin-bottom: 0.25rem;
-    }
-
-    .mb-2 {
-      margin-bottom: 0.5rem;
-    }
-
-    .mb-4 {
-      margin-bottom: 1rem;
-    }
-
-    .mb-6 {
-      margin-bottom: 1.5rem;
-    }
-
-    .mb-8 {
-      margin-bottom: 2rem;
-    }
-
-    .mb-12 {
-      margin-bottom: 3rem;
-    }
-
-    .width-full {
-      width: 100%;
-    }
-
-    .min-width-0 {
-      min-width: 0;
-    }
-
-    .rounded-lg {
-      border-radius: 0.5rem;
-    }
-
-    .relative {
-      position: relative;
-    }
-
-    .flex {
-      display: flex;
-    }
-
-    .justify-between {
-      justify-content: space-between;
-    }
-
-    .items-center {
-      align-items: center;
-    }
-
-    .border {
-      border-width: 1px;
-    }
-
-    .border-t-1 {
-      border-top-width: 1px;
-    }
-
-    .border-gray-100 {
-      border-color: #f7f5f4;
-    }
-
-    .border-gray-200 {
-      border-color: #eeebea;
-    }
-
-    .border-gray-300 {
-      border-color: #dad6d5;
-    }
-
-    .bg-white {
-      background-color: white;
-    }
-
-    .bg-gray-0 {
-      background-color: #faf9f8;
-    }
-
-    .bg-gray-100 {
-      background-color: #f7f5f4;
-    }
-
-    .text-green-600 {
-      color: #0d4b3b;
-    }
-
-    .text-blue-600 {
-      color: #3f5db3;
-    }
-
-    .hover\:text-blue-800:hover {
-      color: #253570;
-    }
-
-    .text-gray-600 {
-      color: #444342;
-    }
-
-    .text-gray-700 {
-      color: #2e2d2d;
-    }
-
-    .text-gray-800 {
-      color: #232222;
-    }
-
-    .text-center {
-      text-align: center;
-    }
-
-    .text-sm {
-      font-size: 0.875rem;
-    }
-
-    .font-title {
-      font-size: 1.25rem;
-      letter-spacing: -0.025em;
-    }
-
-    .font-semibold {
-      font-weight: 600;
-    }
-
-    .font-medium {
-      font-weight: 500;
-    }
-
-    .font-regular {
-      font-weight: 400;
-    }
-
-    .truncate {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .overflow-hidden {
-      overflow: hidden;
-    }
-
-    .profile-pic {
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 9999px;
-      background-size: cover;
-      margin-right: 0.5rem;
-      flex-shrink: 0;
-    }
-
-    .panel {
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    }
-
-    .animate .panel {
-      transform: translateY(10%);
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.0), 0 10px 10px -5px rgba(0, 0, 0, 0.0);
-      transition: transform 1200ms ease, opacity 1200ms ease, box-shadow 1200ms ease;
-    }
-
-    .animate .panel-interior {
-      opacity: 0.0;
-      transition: opacity 1200ms ease;
-    }
-
-    .animate .logo {
-      transform: translateY(2rem);
-      opacity: 0.0;
-      transition: transform 1200ms ease, opacity 1200ms ease;
-    }
-
-    .animate .header-title {
-      transform: translateY(1.6rem);
-      opacity: 0.0;
-      transition: transform 1200ms ease, opacity 1200ms ease;
-    }
-
-    .animate .header-text {
-      transform: translateY(1.2rem);
-      opacity: 0.0;
-      transition: transform 1200ms ease, opacity 1200ms ease;
-    }
-
-    .animate .footer {
-      transform: translateY(-0.5rem);
-      opacity: 0.0;
-      transition: transform 1200ms ease, opacity 1200ms ease;
-    }
-
-    .animating .panel {
-      transform: translateY(0);
-      opacity: 1.0;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    }
-
-    .animating .panel-interior {
-      opacity: 1.0;
-    }
-
-    .animating .spinner {
-      opacity: 0.0;
-    }
-
-    .animating .logo,
-    .animating .header-title,
-    .animating .header-text,
-    .animating .footer {
-      transform: translateY(0);
-      opacity: 1.0;
-    }
-
-    .spinner {
-      display: inline-flex;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      align-items: center;
-      transition: opacity 200ms ease;
-    }
-
-    .spinner span {
-      display: inline-block;
-      background-color: currentColor;
-      border-radius: 9999px;
-      animation-name: loading-dots-blink;
-      animation-duration: 1.4s;
-      animation-iteration-count: infinite;
-      animation-fill-mode: both;
-      width: 0.35em;
-      height: 0.35em;
-      margin: 0 0.15em;
-    }
-
-    .spinner span:nth-child(2) {
-      animation-delay: 200ms;
-    }
-
-    .spinner span:nth-child(3) {
-      animation-delay: 400ms;
-    }
-
-    .spinner {
-      display: none;
-    }
-
-    .animate .spinner {
-      display: inline-flex;
-    }
-
-    @keyframes loading-dots-blink {
-      0% {
-        opacity: 0.2;
-      }
-      20% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0.2;
-      }
-    }
-
-    @media (prefers-reduced-motion) {
-      * {
-        animation-duration: 0ms !important;
-        transition-duration: 0ms !important;
-        transition-delay: 0ms !important;
-      }
-    }
-  </style>
 </head>
 <body class="bg-gray-100">
-  <script>
-    (function() {
-      var lastSeen = localStorage.getItem("lastSeen");
-      if (!lastSeen) {
-        document.body.classList.add("animate");
-        window.addEventListener("load", function () {
-          setTimeout(function () {
-            document.body.classList.add("animating");
-            localStorage.setItem("lastSeen", Date.now());
-          }, 100);
-        });
-      }
-    })();
-  </script>
   <main class="text-gray-800">
     <svg class="logo mb-6" width="28" height="28" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle opacity="0.2" cx="3.4" cy="3.25" r="2.7" fill="currentColor" />
@@ -404,7 +31,13 @@
         <span></span>
       </div>
       <div class="panel-interior flex items-center width-full min-width-0 p-2 mb-4">
-        <div class="profile-pic bg-gray-100" style="background-image: url({{.ProfilePicURL}});"></div>
+        <div class="profile-pic bg-gray-100">
+            <img
+                    src="{{.ProfilePicURL}}"
+                    alt="Profile picture"
+                    class="profile-pic-img"
+            >
+        </div>
         <div class="overflow-hidden">
           {{ with .DisplayName }}
           <h4 class="font-semibold truncate">{{.}}</h4>

cmd/hello/helloserver/helloserver.go

@@ -6,7 +6,7 @@ package helloserver
 
 import (
 	"crypto/tls"
-	_ "embed"
+	"embed"
 	"html/template"
 	"log"
 	"net/http"
@@ -21,6 +21,11 @@ import (
 //go:embed hello.tmpl.html
 var embeddedTemplate string
 
+//go:embed static/*
+var staticFiles embed.FS
+
+var staticHandler = http.FileServerFS(staticFiles)
+
 var tmpl = template.Must(template.New("home").Parse(embeddedTemplate))
 
 // Server is an HTTP server for hello.ts.net.
@@ -116,6 +121,12 @@ func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		http.Redirect(w, r, "https://"+host, http.StatusFound)
 		return
 	}
+
+	if strings.HasPrefix(r.RequestURI, "/static/") {
+		staticHandler.ServeHTTP(w, r)
+		return
+	}
+
 	if r.RequestURI != "/" {
 		http.Redirect(w, r, "/", http.StatusFound)
 		return

cmd/hello/helloserver/static/script.js

@@ -0,0 +1,12 @@
+(function () {
+    var lastSeen = localStorage.getItem("lastSeen");
+    if (!lastSeen) {
+        document.body.classList.add("animate");
+        window.addEventListener("load", function () {
+            setTimeout(function () {
+                document.body.classList.add("animating");
+                localStorage.setItem("lastSeen", Date.now());
+            }, 100);
+        });
+    }
+})();

cmd/hello/helloserver/static/style.css

@@ -0,0 +1,366 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+main {
+    height: 100%;
+}
+
+*,
+::before,
+::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #dad6d5;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: inherit;
+}
+
+a {
+    color: inherit;
+}
+
+p {
+    margin: 0;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 24rem;
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.p-2 {
+    padding: 0.5rem;
+}
+
+.p-4 {
+    padding: 1rem;
+}
+
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.pl-3 {
+    padding-left: 0.75rem;
+}
+
+.pr-3 {
+    padding-right: 0.75rem;
+}
+
+.pt-4 {
+    padding-top: 1rem;
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+;
+}
+
+.mb-1 {
+    margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.mb-6 {
+    margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+    margin-bottom: 2rem;
+}
+
+.mb-12 {
+    margin-bottom: 3rem;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.min-width-0 {
+    min-width: 0;
+}
+
+.rounded-lg {
+    border-radius: 0.5rem;
+}
+
+.relative {
+    position: relative;
+}
+
+.flex {
+    display: flex;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.border {
+    border-width: 1px;
+}
+
+.border-t-1 {
+    border-top-width: 1px;
+}
+
+.border-gray-100 {
+    border-color: #f7f5f4;
+}
+
+.border-gray-200 {
+    border-color: #eeebea;
+}
+
+.border-gray-300 {
+    border-color: #dad6d5;
+}
+
+.bg-white {
+    background-color: white;
+}
+
+.bg-gray-0 {
+    background-color: #faf9f8;
+}
+
+.bg-gray-100 {
+    background-color: #f7f5f4;
+}
+
+.text-green-600 {
+    color: #0d4b3b;
+}
+
+.text-blue-600 {
+    color: #3f5db3;
+}
+
+.hover\:text-blue-800:hover {
+    color: #253570;
+}
+
+.text-gray-600 {
+    color: #444342;
+}
+
+.text-gray-700 {
+    color: #2e2d2d;
+}
+
+.text-gray-800 {
+    color: #232222;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-sm {
+    font-size: 0.875rem;
+}
+
+.font-title {
+    font-size: 1.25rem;
+    letter-spacing: -0.025em;
+}
+
+.font-semibold {
+    font-weight: 600;
+}
+
+.font-medium {
+    font-weight: 500;
+}
+
+.font-regular {
+    font-weight: 400;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.profile-pic {
+    width: 2.5rem;
+    height: 2.5rem;
+    background-size: cover;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+}
+
+.profile-pic-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 9999px;
+}
+
+.panel {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.animate .panel {
+    transform: translateY(10%);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.0), 0 10px 10px -5px rgba(0, 0, 0, 0.0);
+    transition: transform 1200ms ease, opacity 1200ms ease, box-shadow 1200ms ease;
+}
+
+.animate .panel-interior {
+    opacity: 0.0;
+    transition: opacity 1200ms ease;
+}
+
+.animate .logo {
+    transform: translateY(2rem);
+    opacity: 0.0;
+    transition: transform 1200ms ease, opacity 1200ms ease;
+}
+
+.animate .header-title {
+    transform: translateY(1.6rem);
+    opacity: 0.0;
+    transition: transform 1200ms ease, opacity 1200ms ease;
+}
+
+.animate .header-text {
+    transform: translateY(1.2rem);
+    opacity: 0.0;
+    transition: transform 1200ms ease, opacity 1200ms ease;
+}
+
+.animate .footer {
+    transform: translateY(-0.5rem);
+    opacity: 0.0;
+    transition: transform 1200ms ease, opacity 1200ms ease;
+}
+
+.animating .panel {
+    transform: translateY(0);
+    opacity: 1.0;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.animating .panel-interior {
+    opacity: 1.0;
+}
+
+.animating .spinner {
+    opacity: 0.0;
+}
+
+.animating .logo,
+.animating .header-title,
+.animating .header-text,
+.animating .footer {
+    transform: translateY(0);
+    opacity: 1.0;
+}
+
+.spinner {
+    display: inline-flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    align-items: center;
+    transition: opacity 200ms ease;
+}
+
+.spinner span {
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 9999px;
+    animation-name: loading-dots-blink;
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    width: 0.35em;
+    height: 0.35em;
+    margin: 0 0.15em;
+}
+
+.spinner span:nth-child(2) {
+    animation-delay: 200ms;
+}
+
+.spinner span:nth-child(3) {
+    animation-delay: 400ms;
+}
+
+.spinner {
+    display: none;
+}
+
+.animate .spinner {
+    display: inline-flex;
+}
+
+@keyframes loading-dots-blink {
+    0% {
+        opacity: 0.2;
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.2;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    * {
+        animation-duration: 0ms !important;
+        transition-duration: 0ms !important;
+        transition-delay: 0ms !important;
+    }
+}