diff --git a/.prettierignore b/.prettierignore
index 6056347..d84f1a6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@
# Except these files & folders
!/src
+!/public
!/.github
!tsconfig.json
!astro.config.mjs
diff --git a/public/toggle-theme.js b/public/toggle-theme.js
new file mode 100644
index 0000000..7baaa00
--- /dev/null
+++ b/public/toggle-theme.js
@@ -0,0 +1,52 @@
+const primaryColorScheme = ""; // "light" | "dark"
+
+// Get theme data from local storage
+const currentTheme = localStorage.getItem("theme");
+
+function getPreferTheme() {
+ // return theme value in local storage if it is set
+ if (currentTheme) return currentTheme;
+
+ // return primary color scheme if it is set
+ if (primaryColorScheme) return primaryColorScheme;
+
+ // return user device's prefer color scheme
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light";
+}
+
+let themeValue = getPreferTheme();
+
+function setPreference() {
+ localStorage.setItem("theme", themeValue);
+ reflectPreference();
+}
+
+function reflectPreference() {
+ document.firstElementChild.setAttribute("data-theme", themeValue);
+
+ document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
+}
+
+// set early so no page flashes / CSS is made aware
+reflectPreference();
+
+window.onload = () => {
+ // set on load so screen readers can get the latest value on the button
+ reflectPreference();
+
+ // now this script can find and listen for clicks on the control
+ document.querySelector("#theme-btn").addEventListener("click", () => {
+ themeValue = themeValue === "light" ? "dark" : "light";
+ setPreference();
+ });
+};
+
+// sync with system changes
+window
+ .matchMedia("(prefers-color-scheme: dark)")
+ .addEventListener("change", ({ matches: isDark }) => {
+ themeValue = isDark ? "dark" : "light";
+ setPreference();
+ });
diff --git a/src/assets/socialIcons.ts b/src/assets/socialIcons.ts
index f0af0b2..4988ba3 100644
--- a/src/assets/socialIcons.ts
+++ b/src/assets/socialIcons.ts
@@ -34,7 +34,7 @@ const socialIcons: SocialIcons = {
`,
- Linkedin: `
+ Posted on:
- {formatDatetime(datetime)}
+
);
}
+
+const FormattedDatetime = ({ datetime }: { datetime: string }) => {
+ const myDatetime = new Date(datetime);
+
+ const date = myDatetime.toLocaleDateString([], {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+
+ const time = myDatetime.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+
+ return (
+ <>
+ {date}
+ |
+ at
+ {time}
+
+ );
+};
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 67a9449..a2c3f98 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -58,13 +58,13 @@ const { activeNav } = Astro.props;