Added a footer for quick access to some data

Author: Fector101

docs/website/generate-last-updated.cjs

@@ -0,0 +1,22 @@
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+try {
+  const rawDate = execSync('git log -1 --format="%cd"').toString().trim();
+  const date = new Date(rawDate);
+
+  // Format to 12-hour format with full date
+  const formatted = new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',      // e.g., May 24, 2025
+    timeStyle: 'short',       // e.g., 9:05 PM
+    hour12: true
+  }).format(date);
+
+  const outputPath = path.join(__dirname, "public", "last-updated.txt");
+  fs.writeFileSync(outputPath, formatted, "utf8");
+
+  console.log(`✅ Last updated written as: ${formatted}`);
+} catch (err) {
+  console.error("❌ Failed to write last updated date:", err);
+}

docs/website/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "prebuild": "node generate-last-updated.cjs",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"

docs/website/public/last-updated.txt

@@ -0,0 +1 @@
+May 24, 2025, 6:37 PM

docs/website/src/App.tsx

@@ -16,6 +16,7 @@ import ExtrasPage from "./pages/ExtrasPage.tsx";
 import VersionsPage from "./pages/VersionsPage.tsx";
 import { useState } from "react";
 import HomePage from "./pages/HomePage.tsx";
+import Footer from "./ui/Footer/Footer.tsx";
 
 function App() {
     const [version,setVersion]=useState(1.59)
@@ -37,6 +38,7 @@ function App() {
                     <Route path="*" element={<p className="page">Page Not Found</p>} />
                 </Routes>
             </main>
+            <Footer/>
             <Analytics />
         </>
     )

docs/website/src/assets/css/quick-styles.css

@@ -158,13 +158,15 @@ span.code.green {
 span.code.yellow {
     color: #dfdf1a;
 }
+
 span.code.yellow-shade {
     color: rgb(251, 225, 172);
 }
 
 span.code.green-shade {
     color: #71f171;
 }
+
 .opacity-0 {
     opacity: 0;
 }
@@ -177,4 +179,6 @@ span.code.green-shade {
     white-space: pre-line;
 }
 
-.align-self-end {}
+.text-align-center {
+    text-align: center;
+}

docs/website/src/ui/Footer/Footer.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router'
+import "./footer.css"
+/**
+ * Footer component for the documentation website.
+ * Displays last updated date and links to support the project.
+ *
+ * @returns {JSX.Element} The footer element.
+ */
+export default function Footer(): JSX.Element {
+    const [date, setDate] = useState('');
+
+    useEffect(() => {
+      fetch('/last-updated.txt')
+        .then(res => res.text())
+        .then(text => setDate(new Date(text).toLocaleString()));
+    }, []);
+    return (
+        <footer className='flex fd-column justify-content-cen text-align-center footer'>
+            {/* <h2 className='footer-title'>Laner Documentation</h2>
+            <p className='footer-subtitle'>A comprehensive guide to using Laner</p> */}
+            {/* <p>Made with ❤️ using <Link to='https://react.dev/'>React</Link> and <Link to='https://vitejs.dev/'>Vite</Link></p> */}
+            {/* <p>Documentation hosted on <Link to='https://vercel.com/'>Vercel</Link></p> */}
+
+            <p>Thoroughly Tested and supported by <Link to='https://github.com/Fector101/laner'>Laner</Link> </p>
+            <div className='support-links-box flex fd-column justify-content-cen text-align-center'>
+            <p>Find this project helpful?</p>
+            <p> consider buying me a <Link to='https://www.buymeacoffee.com/fector101' className="buy-me-a-coffee">Coffee ☕️</Link></p>
+            <p> Or a star on 🌟<Link to='https://github.com/Fector101/android_notify'>GitHub.</Link></p>
+            <p>Your support helps maintain and improve the project.</p>
+            </div>
+            <p>Last Updated: {date}, © 2023 Fector101</p>
+        </footer>
+    )
+}

docs/website/src/ui/Footer/footer.css

@@ -0,0 +1,20 @@
+footer{
+    padding: 2rem 15px;
+    background-color: #171716;
+    font-size: 13px;
+    gap: 5px;
+    color: white;
+}
+footer .support-links-box{
+    align-self: center;
+    gap: 5px;
+    background-color: #b5d4b019;
+    padding: 10px;
+    border-radius: 5px;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-style: solid;
+    border-color: rgb(70, 71, 71);
+    width: max-content;
+    max-width: 100%;
+}