Add GPT-2 to Llama 3 blog post

.eleventy.js

@@ -1,4 +1,6 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const markdownIt = require("markdown-it");
+const markdownItKatex = require("@iktakahiro/markdown-it-katex");
 const {
     createI18nInstance,
     localizeUrl,
@@ -12,9 +14,15 @@ module.exports = function (eleventyConfig) {
     // Plugins
     eleventyConfig.addPlugin(syntaxHighlight);
 
+    const markdownLibrary = markdownIt({ html: true }).use(markdownItKatex, {
+        throwOnError: false
+    });
+    eleventyConfig.setLibrary("md", markdownLibrary);
+
     // Copy static assets to public paths used by templates
     eleventyConfig.addPassthroughCopy({ "src/assets/images": "assets/images" });
     eleventyConfig.addPassthroughCopy({ "src/assets/js": "assets/js" });
+    eleventyConfig.addPassthroughCopy({ "node_modules/katex/dist/fonts": "assets/css/fonts" });
 
     function getBlogPosts(collectionApi) {
         return collectionApi.getFilteredByGlob("content/blogs/*.md")

package.json

@@ -34,6 +34,8 @@
     "tailwindcss": "^3.4.1"
   },
   "dependencies": {
-    "i18next": "^25.6.0"
+    "@iktakahiro/markdown-it-katex": "^4.0.1",
+    "i18next": "^25.6.0",
+    "katex": "^0.16.45"
   }
 }

src/assets/css/input.css

@@ -1,4 +1,5 @@
 @import "prismjs/themes/prism-okaidia.css";
+@import "katex/dist/katex.min.css";
 
 @tailwind base;
 @tailwind components;
@@ -85,10 +86,11 @@ html[dir="rtl"] .lang-switcher {
 
 /* Markdown content styling - matches original BLEU */
 .prose {
-  @apply text-bleu-950 max-w-none;
+  @apply text-bleu-950 max-w-none text-lg;
+  overflow-wrap: break-word;
 }
 
-.prose :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, pre, code, table, td, th) {
+.prose :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, pre, code, table, td, th, figcaption) {
   unicode-bidi: plaintext;
   text-align: start;
 }
@@ -120,7 +122,7 @@ html[dir="rtl"] .lang-switcher {
 }
 
 .prose p {
-  @apply mb-5 leading-relaxed text-bleu-950;
+  @apply mb-6 leading-relaxed text-bleu-950;
 }
 
 .prose ul {
@@ -132,15 +134,15 @@ html[dir="rtl"] .lang-switcher {
 }
 
 .prose li {
-  @apply text-bleu-950;
+  @apply text-bleu-950 leading-relaxed;
 }
 
 .prose a {
   @apply text-bleu-600 hover:text-bleu-500 underline transition-colors duration-200;
 }
 
 .prose blockquote {
-  @apply border-s-4 border-bleu-400 ps-4 py-2 my-4 italic bg-bleu-50 text-bleu-800 rounded-e-lg;
+  @apply border-s-4 border-bleu-400 ps-5 py-3 my-6 italic bg-bleu-50 text-bleu-800 rounded-e-lg;
 }
 
 .prose hr {
@@ -171,6 +173,60 @@ html[dir="rtl"] .lang-switcher {
   @apply rounded-lg my-6 max-w-full h-auto;
 }
 
+.prose figure {
+  @apply my-8;
+}
+
+.prose figure img,
+.prose figure video {
+  @apply mx-auto my-0 w-full rounded-lg border border-bleu-100 shadow-sm;
+}
+
+.prose figure video {
+  @apply bg-bleu-950;
+}
+
+.prose figure img.article-portrait-figure {
+  max-height: 680px;
+  width: auto;
+  object-fit: contain;
+}
+
+.prose figcaption {
+  @apply mt-3 text-sm leading-relaxed text-bleu-600;
+}
+
+.prose .sentence-callout {
+  @apply border-s-4 border-bleu-300 ps-5 py-2 my-6 not-italic bg-transparent;
+}
+
+.prose .sentence-callout p {
+  @apply mb-2 text-bleu-800;
+}
+
+.prose .sentence-callout p:last-child {
+  @apply mb-0;
+}
+
+.prose .sentence-callout code {
+  @apply block whitespace-pre-wrap bg-transparent p-0 text-base md:text-lg leading-relaxed text-bleu-950;
+  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.prose .katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.25rem;
+}
+
+.prose .katex {
+  font-size: 1.1em;
+}
+
+.prose .katex-display > .katex {
+  font-size: 1.22em;
+}
+
 /* Diff highlighting lines */
 .token.deleted {
   background-color: rgba(255, 0, 0, 0.15);

src/assets/js/main.js

@@ -51,4 +51,24 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         });
     });
+
+    const scrollPlayVideos = document.querySelectorAll("video[data-scroll-play]");
+
+    if ("IntersectionObserver" in window) {
+        const videoObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                const video = entry.target;
+
+                if (entry.isIntersecting) {
+                    video.play().catch(() => {
+                        // Browsers can still block playback; controls remain available.
+                    });
+                } else {
+                    video.pause();
+                }
+            });
+        }, { threshold: 0.35 });
+
+        scrollPlayVideos.forEach((video) => videoObserver.observe(video));
+    }
 });