Style fixes

_layouts/article.html

@@ -18,13 +18,13 @@
     <div class="container">
         {% if page.date %}
             <p id="date">{{ page.date | date: "%B %d, %Y" }} • <span id="reading-time">-- min read</span></p>
+            <p id="author-top">Author: {{ page.author | default: "Aryan Kumar" }}</p>
         {% endif %}
         {{ content }}
     </div>
 
     <footer>
-        <p id="author">Author: {{ page.author | default: "Aryan Kumkar" }}</p>
-        <p id="thanks">Thanks ❤️</p>
+        <p>Let's get this 💪</p>
     </footer>
 
     <script src="/assets/js/article.js" type="module"></script>

assets/css/article.css

@@ -53,7 +53,7 @@ pre code {
 a {
     color: #3498db;
     text-decoration: none;
-    word-break: break-word;
+    overflow-wrap: break-word;
 }
 a:hover {
     text-decoration: underline;
@@ -80,38 +80,34 @@ tr:nth-child(even) {
 #date {
     color: #7f8c8d;
     font-style: italic;
-    text-align: right;
-    float: right;
-    margin: 0 0 0.5em 1em;
+    margin: 0;
     display: inline;
 }
+#author-top {
+    color: #7f8c8d;
+    font-size: 0.95em;
+    margin: 0;
+}
+
 
 footer {
-    margin-top: 2em;
-    padding-top: 1em;
-    border-top: 1px solid #ecf0f1;
     color: #7f8c8d;
     font-size: 0.9em;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    text-align: center;
 }
 
 #author {
     margin: 0;
 }
 
-#thanks {
-    margin: 0;
-}
 #reading-time {
     color: #7f8c8d;
     font-size: 0.9em;
     display: inline;
 }
 #scroll-progress {
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
     height: 3px;
     background: #3498db;

assets/ts/article.ts

@@ -5,6 +5,24 @@ document.querySelectorAll('pre code').forEach((el) => {
   hljs.highlightElement(el as HTMLElement);
 });
 
+// Move meta info (date and author) directly under the first heading
+window.addEventListener('DOMContentLoaded', () => {
+  const container = document.querySelector('.container');
+  const heading = container?.querySelector('h1');
+  const dateEl = document.getElementById('date');
+  const authorEl = document.getElementById('author-top');
+
+  if (container && heading && dateEl && authorEl) {
+    const metaWrap = document.createElement('div');
+    metaWrap.className = 'post-meta';
+
+    metaWrap.appendChild(dateEl);
+    metaWrap.appendChild(authorEl);
+
+    heading.insertAdjacentElement('afterend', metaWrap);
+  }
+});
+
 const READING_WPM = 200;
 function calculateReadingTime(): number {
   const container = document.querySelector('.container');

assets/ts/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc -p .",
+    "build:watch": "tsc -p . --watch"
   },
   "keywords": [],
   "author": "",

assets/ts/tsconfig.json

@@ -8,10 +8,10 @@
     // Environment Settings
     // See also https://aka.ms/tsconfig/module
     "module": "esnext",
-    "target": "esnext",
+    "target": "es2024",
     "types": [],
     // For nodejs:
-    // "lib": ["esnext"],
+    "lib": ["esnext", "DOM"],
     // "types": ["node"],
     // and npm install -D @types/node
 
@@ -34,11 +34,10 @@
 
     // Recommended Options
     "strict": true,
-    "jsx": "react-jsx",
     "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "noUncheckedSideEffectImports": true,
     "moduleDetection": "force",
-    "skipLibCheck": true,
+    "skipLibCheck": true
   }
 }

ts/package.json

@@ -1,4 +1,10 @@
 {
+  "name": "site-ts",
+  "private": true,
+  "scripts": {
+    "build": "tsc -p .",
+    "build:watch": "tsc -p . --watch"
+  },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
     "@typescript-eslint/eslint-plugin": "^8.39.0",