small improvements

Author: apacheli

assets/index.css

@@ -32,10 +32,10 @@ svg:hover {
 }
 
 :root {
-  --bg: rgb(48, 96, 120);
+  --bg: #206080;
   --dark: #0000000d;
   --duration: .25s;
-  --header: rgb(16, 24, 32);
+  --header: #0c141c;
   --key: #ffffff0d;
   --sub: #c0c0c0;
   --text: #ffffff;

components/Footer.js

@@ -2,50 +2,39 @@ import __JSX__, { render } from "../server/render.js";
 
 import { SocialIcon } from "./Icon.js";
 
-const socials = [
-  {
-    icon: "discord",
-    href: "https://discord.com/users/460612586061430806",
-    h: "#5865F2",
-  },
-  {
-    icon: "github",
-    href: "https://github.com/apacheli",
-    h: "#808080",
-  },
-  {
-    icon: "steam",
-    href: "https://steamcommunity.com/id/apacheli/",
-    h: "#00adef",
-  },
-  {
-    icon: "twitch",
-    href: "https://www.twitch.tv/apachelitv",
-    h: "#8d44f7",
-  },
-  {
-    icon: "twitter",
-    href: "https://twitter.com/apacheopteryx",
-    h: "#24a3f1",
-  },
-  {
-    icon: "youtube",
-    href: "https://www.youtube.com/@apacheli",
-    h: "#ff0000",
-  },
-]
+const socials = [{
+  name: "discord",
+  h: "#5865F2",
+}, {
+  name: "github",
+  h: "#808080",
+}, {
+  name: "steam",
+  h: "#00adef",
+}, {
+  name: "twitch",
+  h: "#8d44f7",
+}, {
+  name: "twitter",
+  h: "#24a3f1",
+}, {
+  name: "youtube",
+  h: "#ff0000",
+}]
   .map((social) => (
     <li>
       <SocialIcon
-        icon={social.icon}
+        icon={social.name}
         h={social.h}
-        href={social.href}
+        href={`/${social.name}`}
       />
     </li>
   ));
 
 const date = new Date();
-const d = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+const year = date.getFullYear();
+const month = `${date.getMonth() + 1}`.padStart(2, "0");
+const day = `${date.getDate()}`.padStart(2, "0");
 
 export default render(
   <footer class="main-ftr">
@@ -55,7 +44,7 @@ export default render(
       </ul>
     </nav>
     <span>
-      Last updated on {`<strong>${d}</strong> `}
+      Last deployed at {`<strong>${year}-${month}-${day}</strong> `}
       <a href="https://github.com/apacheli/apacheli.github.io">(Source)</a>
     </span>
     <span>

pages/index.mdx

@@ -5,7 +5,7 @@ export const description = "Web and Software Developer"
 
 # Hello, I'm apacheli.
 
-I build really cool stuff.
+Hello, I'm apacheli, a web and software developer.
 
 > My website is still currently under development. Expect to see more stuff in
 > the future!

server/build.js

@@ -47,7 +47,7 @@ const _buildHtml = async (file) => {
 };
 
 const build = async ({ directories }) => {
-  const p = performance.now();
+  console.time("_build_");
   await Promise.all(directories.map((dir) => mkdir(`dist/${dir}`, _fs)));
   await cp("assets", "dist/assets", _fs);
   const promises = [];
@@ -58,7 +58,7 @@ const build = async ({ directories }) => {
     promises.push(_buildHtml(file));
   }
   await Promise.all(promises);
-  console.log(`\x1b[36mDone. Took ${performance.now() - p} ms.\x1b[39m`);
+  console.timeEnd("_build_");
 };
 
 const normalize = (file) => file.replace(/\\/g, "/");
@@ -92,6 +92,7 @@ const _serveHtml = async (file, paths) => {
 };
 
 async function serve() {
+  console.time("_serve_");
   const paths = {};
 
   const _files = [];
@@ -110,6 +111,7 @@ async function serve() {
     console.log(`    ${k}`);
   }
   console.log("\n=> http://localhost:1337/\n");
+  console.timeEnd("_serve_");
 
   return Bun.serve({
     fetch: (request) => handleRequest(request, paths),

server/render.js

@@ -36,6 +36,9 @@ export const render = (element) => {
       ? `<code>${element.children[0]}</code>`
       : hljs.highlight(lang, element.children[0].slice(0, -1)).value;
   }
+  if (element.type === "img") {
+    element.attributes.loading = "lazy";
+  }
   const c = element.children.reduce((a, b) => a + render(b), "");
   if (element.type === null) {
     return c;