From 97b2c23f9f72781584fecca3e42b3b089cabb28c Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Sun, 14 Apr 2024 04:03:15 -0700
Subject: [PATCH] intro: explain using the javascript Date api over the date
 command

---
 content/docs/configuration/intro.md        | 30 +++++++++++++++++++++-
 content/docs/configuration/qml-overview.md |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/content/docs/configuration/intro.md b/content/docs/configuration/intro.md
index 0e6e6cd..b177aed 100644
--- a/content/docs/configuration/intro.md
+++ b/content/docs/configuration/intro.md
@@ -750,7 +750,7 @@ import QtQuick
 
 // your singletons should always have Singleton as the type
 Singleton {
-  property string time;
+  property string time
 
   Process {
     id: dateProc
@@ -817,3 +817,31 @@ Scope {
   }
 }
 ```
+
+## JavaScript APIs
+
+In addition to calling external processes, a [limited set of javascript interfaces] is available.
+We can use this to improve our clock by using the [Date API] instead of calling `date`.
+
+[limited set of javascript interfaces]: https://doc.qt.io/qt-6/qtqml-javascript-functionlist.html
+[Date API]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+
+```qml {filename="Time.qml"}
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+  property var date: new Date()
+  property string time: date.toLocaleString(Qt.locale())
+
+  Timer {
+    interval: 1000
+    running: true
+    repeat: true
+    onTriggered: date = new Date()
+  }
+}
+```
diff --git a/content/docs/configuration/qml-overview.md b/content/docs/configuration/qml-overview.md
index 58076c8..15e887b 100644
--- a/content/docs/configuration/qml-overview.md
+++ b/content/docs/configuration/qml-overview.md
@@ -15,7 +15,7 @@ Notes:
 - Semicolons are permitted basically everywhere, and recommended in
 functions and expressions.
 - While types can often be elided, we recommend you use them where
-possible to catch proplems early instead of running into them unexpectedly layer on.
+possible to catch problems early instead of running into them unexpectedly later on.
 
 ```qml
 // QML Import statement