From 2d3b9c0c3a45c3332554008f36797bebb4bfc248 Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Sat, 22 Apr 2023 01:50:43 +0000
Subject: [PATCH] add a calendar icon

---
 package-lock.json    | 64 +++++++++++++++++++++++++++++++++++++++++++-
 package.json         |  3 +++
 pages/style.css      |  4 +++
 posts/LayoutBlog.tsx |  7 ++++-
 4 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dcace39..f2546d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,9 @@
       "dependencies": {
         "@fontsource/jetbrains-mono": "^4.5.12",
         "@fontsource/lato": "^4.5.10",
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "highlight.js": "^11.7.0",
         "normalize.css": "^8.0.1",
         "prism-themes": "^1.9.0",
@@ -407,6 +410,51 @@
       "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.10.tgz",
       "integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@mapbox/rehype-highlight-code-block": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@mapbox/rehype-highlight-code-block/-/rehype-highlight-code-block-1.0.0.tgz",
@@ -3037,7 +3085,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3299,6 +3346,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/property-information": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
@@ -3363,6 +3420,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-router": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
diff --git a/package.json b/package.json
index eea5a38..93fd7b6 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/lato": "^4.5.10",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "highlight.js": "^11.7.0",
     "normalize.css": "^8.0.1",
     "prism-themes": "^1.9.0",
diff --git a/pages/style.css b/pages/style.css
index 4274315..cd95688 100644
--- a/pages/style.css
+++ b/pages/style.css
@@ -122,3 +122,7 @@ a > code:hover {
   text-decoration: none;
   border-bottom-style: none;
 }
+
+[class*="fa-"] {
+  margin-right: 0.5em;
+}
diff --git a/posts/LayoutBlog.tsx b/posts/LayoutBlog.tsx
index 1d1e7fb..7ff658b 100644
--- a/posts/LayoutBlog.tsx
+++ b/posts/LayoutBlog.tsx
@@ -1,4 +1,6 @@
 import { PropsWithChildren } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendar } from "@fortawesome/free-regular-svg-icons";
 
 import Base from "../pages/LayoutBase";
 
@@ -19,7 +21,10 @@ export default function Layout({
     <div className="header">
       <h1>{title}</h1>
       <h3>{description}</h3>
-      <h4>Published: {published}</h4>
+      <h4>
+        <FontAwesomeIcon icon={faCalendar} />
+        {published}
+      </h4>
       {updated && <p>Last updated: {updated}</p>}
     </div>
   );