delete tag metadata

Author: apacheli

assets/index.css

@@ -125,7 +125,6 @@ svg:hover {
   display: none;
   height: 2.5rem;
   width: 2.5rem;
-  z-index: 1;
 }
 
 @media (max-width: 72rem) {
@@ -236,9 +235,9 @@ blockquote {
   background-color: var(--dark);
   border-radius: 0 .25rem .25rem 0;
   border-left: .25rem solid var(--sub);
+  color: var(--sub);
   margin: 0;
   padding-left: 1rem;
-  color: var(--sub);
 }
 
 li code,
@@ -254,12 +253,12 @@ pre {
   line-height: 1.25rem;
   overflow: auto;
   padding: 1rem;
-  position: relative;
   scrollbar-color: var(--sub) transparent;
+  scrollbar-width: thin;
   width: 100%;
 }
 
-.contains-task-list {
+ul:has(> li input) {
   list-style: none;
   padding-left: 1rem;
 }

components/Footer.js

@@ -55,7 +55,7 @@ export default render(
       </ul>
     </nav>
     <span>
-      Last updated on {` <strong>${d}</strong> `}
+      Last updated on {`<strong>${d}</strong> `}
       <a href="https://github.com/apacheli/apacheli.github.io">(Source)</a>
     </span>
     <span>

server/render.js

@@ -8,27 +8,11 @@ const __JSX__ = (type, attributes, ...children) => ({
 
 export default __JSX__;
 
-const styleNames = {
-  textAlign: "text-align",
-};
-
-const _attr = (attribute) => {
-  if (typeof attribute === "boolean") {
-    return "";
-  }
-  if (typeof attribute !== "object") {
-    return `="${attribute}"`;
-  }
-  let str = "";
-  for (const key in attribute) {
-    str += `;${styleNames[key] ?? key}:${attribute[key]}`;
-  }
-  return str.slice(1);
-};
-
-const attributeNames = {
-  "className": "class",
-};
+const attributeNames = [
+  "aria-",
+  "className",
+  "data-",
+];
 
 export const render = (element) => {
   if (typeof element === "function") {
@@ -38,7 +22,7 @@ export const render = (element) => {
     return "";
   }
   if (typeof element !== "object") {
-    return `${element}`;
+    return `${element}`.replace(/\n/g, " ");
   }
   if (Array.isArray(element)) {
     return element.reduce((a, b) => a + render(b), "");
@@ -50,16 +34,19 @@ export const render = (element) => {
     const lang = element.attributes.className?.slice(9);
     return lang === undefined
       ? `<code>${element.children[0]}</code>`
-      : hljs.highlight(lang, element.children[0]).value;
+      : hljs.highlight(lang, element.children[0].slice(0, -1)).value;
   }
   const c = element.children.reduce((a, b) => a + render(b), "");
   if (element.type === null) {
     return c;
   }
   let attributes = "";
   for (const attribute in element.attributes) {
-    const b = _attr(element.attributes[attribute]);
-    attributes += ` ${attributeNames[attribute] ?? attribute}${b}`;
+    if (attributeNames.some((a) => attribute.startsWith(a))) {
+      continue;
+    }
+    const a = element.attributes[attribute];
+    attributes += ` ${attribute}${typeof a === "boolean" ? "" : `="${a}"`}`;
   }
   return `<${element.type}${attributes}>${c && `${c}</${element.type}>`}`;
 };