Update time right away

Author: andreasvirkus

public/sw-destroy.js renamed to public/js/sw-destroy.js

@@ -0,0 +1,24 @@
+// Included directly in the browser, hence why this can't be TS
+const datetime = document.querySelector('time')
+const readableTime = document.querySelector('.js-time-of-day')
+
+function updateTime() {
+  if (!datetime) return
+
+  const today = new Date()
+  const hour = today.getHours()
+  const hourFormatted = hour < 10 ? '0' + hour : hour
+  const min = today.getMinutes()
+  const minFormatted = min < 10 ? '0' + min : min
+  let timeOfDay = hour < 12 ? 'morning' : hour < 18 ? 'afternoon' : 'evening'
+
+  if (hour < 6) timeOfDay = 'night'
+
+  const time = `${hourFormatted}:${minFormatted}`
+  datetime.setAttribute('datetime', today.toISOString())
+  datetime.textContent = time
+  readableTime.textContent = timeOfDay
+}
+
+updateTime()
+setInterval(updateTime, 30 * 1000)

public/js/update-time.js

@@ -42,4 +42,4 @@ const { title, description, image = '/blog-placeholder.jpg' } = Astro.props
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<script is:inline src="/sw-destroy.js"></script>
+<script is:inline src="/js/sw-destroy.js"></script>

src/components/BaseHead.astro

@@ -11,7 +11,11 @@ if (hour < 6) timeOfDay = 'night'
 
 <footer>
   <hr />
-  <p>Good {timeOfDay}! It's <time :datetime={today}>{hourFormatted}:{minFormatted}</time>.</p>
+  <p>
+    Good <span class="js-time-of-day">{timeOfDay}</span>! It's <time :datetime={today}
+      >{hourFormatted}:{minFormatted}</time
+    >.
+  </p>
 
   <div class="links">
     <a href="mailto:[email protected]"> E-mail me! Write about anything.</a>
@@ -27,29 +31,7 @@ if (hour < 6) timeOfDay = 'night'
   </div>
 </footer>
 
-<script type="module">
-  const datetime = document.querySelector('time')
-
-  function updateTime() {
-    if (!datetime) return
-
-    const today = new Date()
-    const hour = today.getHours()
-    const hourFormatted = hour < 10 ? '0' + hour : hour
-    const min = today.getMinutes()
-    const minFormatted = min < 10 ? '0' + min : min
-    let timeOfDay = hour < 12 ? 'morning' : hour < 18 ? 'afternoon' : 'evening'
-
-    if (hour < 6) timeOfDay = 'night'
-
-    const time = `${hourFormatted}:${minFormatted}`
-    const greeting = `Good ${timeOfDay}! It's ${time}.`
-    datetime.textContent = greeting
-    datetime.setAttribute('datetime', today.toISOString())
-  }
-
-  setInterval(updateTime, 30 * 1000)
-</script>
+<script is:inline type="module" src="/js/update-time.js"></script>
 
 <style>
   footer {