random messages

src/assets/styles/global.css

@@ -220,3 +220,10 @@ Custom
   background-color: oklch(from rgba(255, 255, 255, 2.0) calc(l - 0.02) c h);
 }
 
+.random-msg {
+  padding-top: 10px;
+  max-width: 100%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  color: 'inherit';
+}

src/components/Footer.astro

@@ -1,9 +1,8 @@
 ---
-import { metaData } from "../config";
+import { metaData, API_URL } from "../config";
-import { Icon } from "astro-icon/components";
+import RandomMsg from "../components/RandomMsg";
 
 const YEAR = new Date().getFullYear();
-
 ---
 
 <small class="block lg:mt-24 mt-16 text-[#1C1C1C] dark:text-[#D4D4D4] footer-text">
@@ -11,6 +10,7 @@ const YEAR = new Date().getFullYear();
     {metaData.owner}
   </a>
 </small>
+<RandomMsg client:only="react" />
 
 <style>
   @media screen and (max-width: 480px) {

src/components/RandomMsg.jsx

@@ -0,0 +1,28 @@
+import { API_URL } from "../config";
+import { default as $ } from "jquery";
+
+var randomMsg;
+
+const getRandomMsg = () => {
+        $.ajax({
+            url: API_URL+'/randmsg',
+            method: "POST",
+            contentType: "application/json; charset=utf-8"
+        }).done(function (data) {
+            if (! data.msg) {
+                return;
+            } else {
+                randomMsg = data.msg.replace("<br>", "\n");
+                $('.random-msg').html(`<small><i>${randomMsg}</i></small>`);
+            }
+        });
+}
+
+export default function RandomMsg() {
+    getRandomMsg();
+        return (
+            <div className="random-msg">
+            </div>
+        ); 
+}
+