Refresh continued

assets/css/main.css

@@ -0,0 +1,249 @@
+@import '@resonate/tachyons';
+
+.search-component .search-label {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.search-component input[type="search"] {
+  appearance: none;
+  text-indent: 1rem;
+  font-family: inherit;
+  height: calc(3rem - 1px);
+}
+
+.search-component input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.typeahead {
+  visibility: hidden;
+  opacity: 0;
+  display: none;
+}
+
+.search-component form:focus-within input[type="search"] {
+  height: 3rem;
+  outline-style: solid;
+  outline-width: 1px;
+  outline-color: var(--dark-gray);
+  outline-offset: -1px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .search-component form:focus-within input[type="search"] {
+    outline-color: var(--near-black);
+  }
+}  
+
+.color-scheme--dark .search-component form:focus-within input[type="search"] {
+  outline-color: var(--near-black);
+}
+
+.search-component form:focus-within > div.typeahead {
+  visibility: visible;
+  z-index: 1;
+  opacity: 1;
+  display: block;
+}
+
+/**
+ * <input> styling for radio + checkbox
+ */
+
+input[type="radio"] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+input[type="radio"]:active ~ label {
+  opacity: 1;
+}
+
+input[type="radio"]:checked ~ label {
+  opacity: 1;
+}
+
+input[type="radio"]:checked ~ label .icon {
+  fill: var(--black);
+}
+
+input[type="checkbox"] ~ label .icon {
+  fill: transparent;
+}
+
+input[type="checkbox"]:checked ~ label .icon {
+  fill: var(--black);
+}
+
+/**
+ * Offset margin
+ */
+
+.ml-3 {
+  margin-left: -1rem;
+}
+
+.mr-3 {
+  margin-right: -1rem;
+}
+
+/**
+ * Custom html <select> styling
+ */
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='white' width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-repeat: no-repeat;
+  background-position-x: 95%;
+  background-position-y: 50%;
+}
+
+.icon-logo {
+  width: 26px;
+  height: 26px;
+}
+
+.footer-component dd > .link {
+  padding-bottom: .1rem;
+}
+
+.footer-component dd > .link:hover {
+  border-bottom: 1px solid currentcolor;
+}
+
+.icon-resonate {
+  width: 100%;
+  height: 100%;
+  max-width: 144px; /* need tachyons update */
+}
+
+.icon-logo-wordmark {
+  width: 132px;
+  height: 132px;
+}
+
+@media (--breakpoint-large) {
+  .bg-transparent-l {
+    background-color: transparent!important; /* TODO should be in @resonate/tachyons */
+  }
+}
+
+.dropdown-navigation li, .dropdown-navigation--focus li {
+  position: relative;
+  transition-duration: 0.2s;
+}
+
+.dropdown-navigation li:focus-within a, .dropdown-navigation--focus li:focus-within a {
+  outline: none;
+}
+
+.dropdown-navigation ul[role="menu"] li ul[role="menu"], .dropdown-navigation--focus ul[role="menu"] li ul[role="menu"] {
+  visibility: hidden;
+  opacity: 0;
+  min-width: 5rem;
+  transition: all 0.2s ease;
+  left: 0;
+  display: none;
+}
+
+@media (--breakpoint-large) {
+  #header .logo .icon-resonate {
+    display: block;
+  }
+  .dropdown-navigation ul[role="menu"] li ul[role="menu"], .dropdown-navigation--focus ul[role="menu"] li ul[role="menu"] {
+    bottom: auto;
+    margin-top: -1px;
+  }
+}
+
+.dropdown-navigation ul li ul[role="menu"] a, .dropdown-navigation--focus ul[role="menu"] li ul[role="menu"] a {
+  width: 100%;
+}
+
+.dropdown-navigation ul[role="menu"] li:hover > ul[role="menu"],
+.dropdown-navigation ul[role="menu"] li:focus-within > ul[role="menu"],
+.dropdown-navigation ul[role="menu"] li ul[role="menu"]:hover,
+.dropdown-navigation ul[role="menu"] li ul[role="menu"]:focus {
+  visibility: visible;
+  z-index: 1;
+  opacity: 1;
+  display: block;
+}
+
+.dropdown-navigation--focus ul[role="menu"] li:focus-within > ul[role="menu"],
+.dropdown-navigation--focus ul[role="menu"] li ul[role="menu"]:focus {
+  visibility: visible;
+  z-index: 1;
+  opacity: 1;
+  display: block;
+}
+
+.dropdown-navigation ul[role="menu"] li ul[role="menu"] li, .dropdown-navigation--focus ul[role="menu"] li ul[role="menu"] li {
+  clear: both;
+  width: 100%;
+}
+
+@media (--breakpoint-large) {
+  .dropdown-navigation ul[role="menu"], .dropdown-navigation--focus ul[role="menu"] {
+    top: 100%;
+  }
+}
+
+.right-4 {
+  right: 4rem;
+}
+
+@media (--breakpoint-large) {
+  .initial-l {
+    position: static;
+    position: initial;
+  }
+}
+
+.bottom-100 {
+  bottom: 100%;
+}
+
+.top-100 {
+  top: 100%;
+}
+
+@media (--breakpoint-large) {
+  .top-100-l {
+    top: 100%;
+  }
+}
+
+/* ajust spacing for fixed|sticky header */
+
+#app {
+  padding-top: 3rem;
+}
+
+@media (--breakpoint-large) {
+  #app {
+    padding-top: 0;
+  }
+}
+
+input[disabled][type=number] {
+  -moz-appearance: textfield;
+}
+
+.icon--dn {
+  display: none;
+}
+
+@media (--breakpoint-not-small){
+  .icon--dn-ns {
+    display: none;
+  }
+  .icon--dib-ns {
+    display: inline-block;
+  }
+}

cmd/run_server.go

@@ -50,6 +50,10 @@ func RunServer(configBackend string) error {
 	services.OauthService.RegisterRoutes(router, "/v1/oauth")
 
 	webRoutes := mux.NewRouter()
+
+	// Serve static files under ../public
+	webRoutes.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("../public/"))))
+
 	services.WebService.RegisterRoutes(webRoutes, "/web")
 
 	CSRF := csrf.Protect(

config.sample.json

@@ -1,5 +1,6 @@
 {
   "Hostname": "id.resonate.localhost",
+  "Version":"1.2.0-0",
   "Clients": [
     {
       "ConnectUrl": "https://stream.resonate.localhost/api/v3/user/connect/resonate",

config/config.go

@@ -80,6 +80,7 @@ type UserAPIConfig struct {
 // Config stores all configuration options
 type Config struct {
 	Hostname            string
+	Version             string // versioning for static assets
 	CSRF                CSRFConfig
 	Mailgun             MailgunConfig
 	Database            DatabaseConfig

package.json

@@ -7,8 +7,8 @@
     "build": "./node_modules/.bin/esbuild assets/js/main.js --bundle --outfile=public/js/main.js",
     "build:js:minify": "./node_modules/.bin/esbuild assets/js/main.js --minify --bundle --outfile=public/js/main.min.js",
     "build:js": "./node_modules/.bin/esbuild assets/js/main.js --bundle --outfile=public/js/main.js",
-    "build:css": "postcss assets/css/main.css -o public/css/main.min.css",
-    "watch:css": "postcss --watch assets/css/main.css -o public/css/main.min.css",
+    "build:css": "postcss assets/css/main.css -o public/css/main.css",
+    "watch:css": "postcss --watch assets/css/main.css -o public/css/main.css",
     "watch:js": "./node_modules/.bin/esbuild assets/js/main.js --bundle --outdir=./public/js --watch --servedir=./public --keyfile=your.key --certfile=your.cert"
   },
   "keywords": [
@@ -25,6 +25,7 @@
     "postcss-preset-env": "^8.0.1"
   },
   "dependencies": {
+    "@resonate/tachyons": "^1.3.4",
     "alpinejs": "^3.13.3",
     "browser-cookies": "^1.2.0",
     "validator": "^12.0.0",