Multiples fixes.

public/blog/birthday/article.md

@@ -3,6 +3,7 @@ title: "Happy first birthday Draco compiler!"
 date:   2023-10-09 18:23:00 +0200
 teaser: "🎉 Celebrating Draco compiler's 1st birthday! Dive into a year of code, community, and incredible milestones. Let's rewind and relive the journey!"
 image: "/generated/party.svg"
+imageMargin: "20px"
 ---
 
 I'd like to go through the first year of Draco compiler development, highlighting major milestones. This first year was full of exciting, sudden contributions and some extremely active time periods. I'm hoping the project will grow throughout the years, and this won't be the only yearly history diary I'll be able to write.

src/app/blog/page.css

@@ -22,7 +22,7 @@
   background-color: #ffffff23;
 }
 
-.blog-entries > div img {
+.blog-entries > a img {
   width: 20rem;
 }
 

src/app/blog/page.tsx

@@ -4,6 +4,8 @@ import { getBlogArticles } from "@/server/blog";
 
 export default async function Page() {
   const articles = await getBlogArticles();
+  // sort by date
+  articles.sort((a, b) => (a.date > b.date ? -1 : 1));
   return (
     <div className="blog-entries">
       {articles.map((article, i) => (
@@ -12,10 +14,19 @@ export default async function Page() {
             <h2 className="article-preview-title">{article.title}</h2>
             <div>{article.teaser}</div>
           </div>
-            {
-              // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-            article.image != undefined ? (<img src={article.image} />) : (<></>)
-            }
+          {
+            /* eslint-disable @next/next/no-img-element, jsx-a11y/alt-text */
+            article.image != undefined ? (
+              <img
+                src={article.image}
+                style={{
+                  margin: article.imageMargin,
+                }}
+              />
+            ) : (
+              <></>
+            )
+          }
         </Link>
       ))}
     </div>

src/components/TableOfContentScrollEffect.tsx

@@ -12,7 +12,7 @@ export default function TableOfContentScrollEffect() {
       li.classList.add("active-poc-heading");
       lastClickTime = Date.now();
     }
-    const tocLinks =  Array.from(document.getElementsByClassName("poc-heading"));
+    const tocLinks = Array.from(document.getElementsByClassName("poc-heading"));
     tocLinks.forEach((e) => {
       e.addEventListener("click", onLinkClick);
     });
@@ -48,16 +48,39 @@ export default function TableOfContentScrollEffect() {
       });
 
       // Prevent scroll event after clicking on heading to change the active heading.
-      if(lastClickTime + 50 > Date.now()) {
+      if (lastClickTime + 50 > Date.now()) {
         return;
       }
 
       clearActiveTag();
       let activeHeading: HTMLHeadingElement;
-      const hasAnyOnScreen =
+      console.log(headingsInScreen);
+      const hasHeadingOnScreen =
         headingsInScreen.findIndex((s) => s.isOnScreen) !== -1;
-      if (!hasAnyOnScreen) {
-        activeHeading = entries[0].target as HTMLHeadingElement;
+      if (!hasHeadingOnScreen) {
+        // we want to know if the headings was scrolled out of the screen from the top or from the bottom.
+        // if it's at the top, the coordinate won't be 0 because it may have a padding, so we need to get this padding.
+        const padding = entries[0].rootBounds!.y;
+        const positionRelativeToObserver =
+          entries[0].boundingClientRect.top - padding;
+        // if the position is negative it means the heading is above the screen, so we are scrolling down.
+        const isScrollingBackward = positionRelativeToObserver > 0;
+
+        if (!isScrollingBackward) {
+          // we are scrolling down, so the current heading is the one that just exited the screen.
+          activeHeading = entries[0].target as HTMLHeadingElement;
+        } else {
+          // we are scrolling up, so the current heading is the previous of the one that exited the screen.
+          const index = headingsInScreen.findIndex(
+            (s) => s.element === entries[0].target
+          );
+          if (index === 0) {
+            // if somehow the first heading is far in the text, we will keep selecting it.
+            activeHeading = headingsInScreen[0].element;
+          } else {
+            activeHeading = headingsInScreen[index - 1].element;
+          }
+        }
       } else {
         let previous = headingsInScreen[0];
         for (let i = 0; i < headingsInScreen.length; i++) {
@@ -92,7 +115,6 @@ export default function TableOfContentScrollEffect() {
       tocLinks.forEach((e) => {
         e.removeEventListener("click", onLinkClick);
       });
-
     };
   });
 

src/server/blog.ts

@@ -4,11 +4,12 @@ import fm from "front-matter";
 
 export interface BlogArticle {
     title: string;
-    date: string | undefined;
+    date: string;
     tags: string[];
     markdown: string;
     authors: string[] | undefined;
     image: string | undefined;
+    imageMargin: string | undefined;
     teaser: string | undefined;
     path: string;
 }
@@ -28,12 +29,17 @@ export async function getBlogArticles(): Promise<BlogArticle[]> {
             const result = fm(article);
             const attributes = result.attributes as {
                 title: string | undefined;
-                date: string | undefined;
+                date: string;
                 tags: string[] | undefined;
                 teaser: string | undefined;
                 authors: string[] | undefined;
                 image: string | undefined;
+                imageMargin: string | undefined;
             };
+            if (attributes.date === undefined) {
+                throw new Error(`Article ${dirEntry.name} does not have a date`);
+            }
+
             articles.push(
                 {
                     title: attributes.title ?? "Untitled",
@@ -43,6 +49,7 @@ export async function getBlogArticles(): Promise<BlogArticle[]> {
                     teaser: attributes.teaser,
                     authors: attributes.authors,
                     image: attributes.image,
+                    imageMargin: attributes.imageMargin,
                     path: encodeURIComponent(dirEntry.name)
                 }
             );