Merge pull request #1917 from fluxcd/test-stimulus

Localize meeting times in the browser with JS

.gitignore

@@ -18,3 +18,5 @@ static/install.sh
 
 # build directories
 /bin
+/lib/python*
+/pyvenv.cfg

Makefile

@@ -80,6 +80,16 @@ docker-serve:
 	docker run -v $(shell pwd):/site -p 1313:1313 -it $(SUPPORT_IMAGE_NAME) \
 		make \"MAKEFLAGS=$(MAKEFLAGS)\" serve HUGO_BIND_ADDRESS=0.0.0.0 GITHUB_TOKEN=$(GITHUB_TOKEN) BRANCH=$(BRANCH)
 
+.PHONY : spin-up # spin-deploy
+port = 3000
+spin-up:
+	hugo -D -b "http://127.0.0.1:$(port)/"
+	cd app && spin build && spin up --listen 127.0.0.1:$(port)
+
+# spin-deploy:
+# 	hugo -b "/"
+# 	cd app && spin build && spin deploy
+
 .PHONY: docker-push docker-push-hugo docker-push-support
 docker-push: docker-push-hugo docker-push-support
 

app/.gitignore

@@ -0,0 +1 @@
+.spin/

app/spin.toml

@@ -0,0 +1,21 @@
+spin_manifest_version = 2
+
+[application]
+name = "docs-fluxcd-website"
+version = "0.1.0"
+authors = ["Flux Community <kingdon@tuesdaystudios.com>"]
+description = "fluxcd.io (testing)"
+
+[application.trigger.http]
+base = "/"
+
+[[trigger.http]]
+id = "trigger-app"
+component = "app"
+route = "/..."
+
+[component.app]
+source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v0.2.1/spin_static_fs.wasm", digest = "sha256:5f05b15f0f7cd353d390bc5ebffec7fe25c6a6d7a05b9366c86dcb1a346e9f0f" }
+files = [ { source = "../public", destination = "/" } ]
+environment = { FALLBACK_PATH = "index.html" }
+allowed_outbound_hosts = ["redis://*:*", "mysql://*:*", "postgres://*:*"]

assets/js/calendar.js

@@ -6,3 +6,42 @@ $('.calendar-list li').click(function() {
 
   card.slideDown(500);
 });
+
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("calendar", class extends Stimulus.Controller {
+    static targets = [ "localtz" ];
+    connect(){
+      let tz_description = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      this.localtzTarget.innerHTML = `<b>now localized for ${tz_description}</b>`;
+    }
+  })
+
+  application.register("calrow", class extends Stimulus.Controller {
+    static targets = [ "timestamp", "time", "date" ];
+    connect(){
+
+      if(this.hasTimestampTarget && this.hasDateTarget && this.hasTimeTarget) {
+        let ts = Date.parse(this.timestampTarget.innerHTML);
+        let dto = new Date(ts);
+        let locale = navigator.language;
+        // let locale = 'en-UK';
+
+        // Set date string 
+        let dt_string = dto.toLocaleDateString(locale, {
+          month: 'numeric', day: 'numeric', year: 'numeric',
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+        }); // .replace(/\//g, '-');
+        this.dateTarget.innerHTML = dt_string;
+
+        let tm_string = dto.toLocaleTimeString(locale, {
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZoneName: 'short'
+        });
+        this.timeTarget.innerHTML = tm_string;
+      }
+    }
+  })
+})()

assets/scss/_index.scss

@@ -65,6 +65,9 @@ main.td-main {
       padding-bottom: 45px;
       padding-top: 20px;
       font-size: 32px;
+      span.origtz {
+        display: none;
+      }
     }
     a {
       text-decoration: underline;
@@ -424,4 +427,4 @@ label.date {
 
 .mt-40 {
   margin-top: 40px;
-}
+}

assets/scss/blocks/_calendar.scss

@@ -1,6 +1,6 @@
 .team-calendar {
   padding: 0 1rem 1.5rem 1rem;
-  max-width: 600px;
+  max-width: 740px;
   margin: 0 auto;
   @include media-breakpoint-down(sm) {
     overflow-x: hidden;
@@ -70,7 +70,7 @@
 
       .time {
         display: inline-block;
-        width: 3rem;
+        width: 10rem;
 
         padding: 6px 0;
         padding-right: 2rem;
@@ -85,7 +85,7 @@
         padding: 6px 0;
         font-weight: 500;
         vertical-align: bottom;
-        width: 60%;
+        width: 55%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -95,9 +95,15 @@
       }
     }
 
+    .calendar-row {
+      .origtz {
+        display: none;
+      }
+    }
+
     .calendar-card {
       display: none;
-      max-width: 600px;
+      max-width: 740px;
 
       padding: 0 1rem 1rem 1rem;
       // word-break: break-all;

layouts/partials/hooks/body-end.html

@@ -1,3 +1,6 @@
+<!-- Calendar localization changes: https://github.com/fluxcd/website/pull/1917 -->
+<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
+
 <!-- Calendar changes: https://github.com/fluxcd/website/pull/487 -->
 {{ $calendar := resources.Get "js/calendar.js" | js.Build "calendar.js" }}
 <script

layouts/shortcodes/home/calendar.html

@@ -1,14 +1,16 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<div class="team-calendar">
+<div class="team-calendar" data-controller="calendar">
     <h3 id="calendar">Our Team Calendar</h3>
-    <p class="caption">The upcoming meetings, talks and community events in the next month are listed below. (All times are UTC.)</p>
+    <p class="caption">The upcoming meetings, talks and community events in the next month are listed<br/>
+    below. (All times are <span data-calendar-target="localtz">UTC</span>.)</p>
 
     <ul class="calendar-list">
         {{ range $.Site.Data.calendar }}
         <li>
-            <div class="calendar-row">
-                <div class="date">{{ .date }}</div>
-                <div class="time">{{ .time }}</div>
+            <div class="calendar-row" data-controller="calrow">
+              <div class="date" data-calrow-target="date">{{ .date }}</div><span>&nbsp;</span>
+                <div class="time" data-calrow-target="time">{{ .time }}</div><span>&nbsp;</span>
+                <div class="origtz" aria-hidden="true" data-calrow-target="timestamp">{{ .timestamp }}</div> 
                 <div class="label">{{ .label }}</div>
             </div>
             <div class="calendar-card">

layouts/shortcodes/home/next_event.html

@@ -1,11 +1,12 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{ $blockID := printf "td-cover-block-%d" .Ordinal }}
 
-<p class="next-event">
+<p class="next-event" data-controller="calrow">
 {{ range first 1 $.Site.Data.calendar }}
-📆 Next event: {{ .date }} {{ .time }} UTC:<br/>
+📆 Next event: <span data-calrow-target="date">{{ .date }}</span> <span data-calrow-target="time">{{ .time }} UTC</span>:<br/>
 {{ .label }}<br/>
 Where: {{ safeURL .where }}
+<span data-calrow-target="timestamp" aria-hidden="true" class="origtz">{{ .timestamp }}</span>
 
 {{ end }}
 </p>