Spaces:

dlouapre
/

eiffel-tower-llama

Running

App Files Files Community

thibaud frere commited on Aug 25

Commit

3f64d97

1 Parent(s): d8d4124

feat(astro): port base Distill-like template into index.astro with TOC and Plotly

Browse files

Files changed (1) hide show

app/src/pages/index.astro +143 -7

app/src/pages/index.astro CHANGED Viewed

@@ -1,21 +1,157 @@
 ---
 import { Image } from 'astro:assets';
 import banner from "../assets/images/banner.png";
-const title = 'Hello Astro on HF Spaces';
 ---
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
   </head>
   <body>
-    <main style="max-width: 720px; margin: 40px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;">
-      <h1 style="margin:0 0 16px;">🚀 Hello World</h1>
-      <p>Astro est déployé statiquement via Nginx sur le port 8080.</p>
-      <figure>
-        <Image src={banner} alt="FineTasks banner" widths={[480,768,1080,1440]} formats={["avif","webp","png"]} sizes="(max-width: 768px) 100vw, 720px" loading="lazy" decoding="async" />
-      </figure>
     </main>
   </body>
 </html>

 ---
 import { Image } from 'astro:assets';
 import banner from "../assets/images/banner.png";
+const title = 'The Distill Blog Template (Astro)';
 ---
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <base target="_blank" />
     <title>{title}</title>
+    <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
+    <style>
+      :root { --page-width: 980px; }
+      body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; }
+      main { max-width: var(--page-width); margin: 24px auto; padding: 16px; }
+      .l-page { max-width: var(--page-width); margin: 0 auto; }
+      .l-screen { width: 100%; }
+      figure { margin: 16px 0; }
+      .figcaption, figcaption { color: rgba(0,0,0,.6); font-size: 12px; }
+      .plot-card { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; padding: 12px; }
+      d-contents nav { border-left: 1px solid rgba(0,0,0,.1); padding-left: 16px; margin: 16px 0; }
+      .toc-header { display:flex; align-items:center; gap: 8px; cursor: pointer; user-select:none; }
+      .toc-title { font-weight: 600; }
+      .toggle-icon { transition: transform .2s ease; display:inline-block; }
+      .toggle-icon.collapsed { transform: rotate(-90deg); }
+      .toc-content.collapsed { display:none; }
+      d-article pre, d-code[block] { overflow:auto; background:#f6f8fa; border:1px solid #d0d7de; border-radius:6px; padding:12px; }
+      d-article table { border-collapse: collapse; width: 100%; }
+      d-article th, d-article td { border-bottom: 1px solid rgba(0,0,0,.1); padding: 6px 8px; text-align: left; }
+      aside { color: rgba(0,0,0,.6); font-size: 14px; }
+    </style>
   </head>
   <body>
+    <main>
+      <d-front-matter>
+        <script id='distill-front-matter' type="application/json">{ "title": "The Distill Blog Template", "description": "Building beautiful blog posts.", "published": "Feb 19, 2025", "affiliation": {"name": "YourCompany"}, "authors": [ { "author":"The Author (you!)", "authorURL":"https://huggingface.co/" } ] }</script>
+      </d-front-matter>
+      <d-title>
+        <h1 class="l-page" style="text-align: center;">The Distill Template:<br/>Craft Beautiful Blogs</h1>
+        <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
+          <div style="display: flex; justify-content: center; position: relative;">
+            <figure class="l-page" style="margin:0;">
+              <Image src={banner} alt="Banner" widths={[480,768,1080,1440]} formats={["avif","webp","png"]} sizes="(max-width: 768px) 100vw, var(--page-width)" loading="eager" />
+            </figure>
+          </div>
+          <p style="text-align: center; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">It's nice to have a cute interactive banner!</p>
+        </div>
+      </d-title>
+      <d-byline></d-byline>
+      <d-article>
+        <d-contents></d-contents>
+        <p>Welcome to the Distill Blog Template! This framework is based on the <a href="https://distill.pub/">distill.pub</a> design and has been adapted to make it easy for you to create beautiful, interactive technical blogs.</p>
+        <aside>Reading time: 10-15 minutes.</aside>
+        <p>This template includes support for mathematics, interactive visualizations, citations, footnotes, and more.</p>
+        <h2>Getting Started with the Template</h2>
+        <h3>Installation and Setup</h3>
+        <d-code block language="bash">npm install\nnpm run dev</d-code>
+        <h3>Mathematical Equations</h3>
+        <p>You can include inline math using <code>x^2 + y^2 = z^2</code>.</p>
+        <h3>Figures and Images</h3>
+        <figure>
+          <Image src={banner} alt="Example figure" widths={[480,768,1080]} formats={["avif","webp","png"]} sizes="(max-width: 768px) 100vw, var(--page-width)" />
+          <figcaption>Caption for your figure</figcaption>
+        </figure>
+        <h3>Tables</h3>
+        <table>
+          <thead>
+            <tr><th><strong>Model</strong></th><th><strong>Accuracy</strong></th><th><strong>Speed</strong></th></tr>
+          </thead>
+          <tbody>
+            <tr><td>Model A</td><td>95%</td><td>Fast</td></tr>
+            <tr><td>Model B</td><td>98%</td><td>Medium</td></tr>
+            <tr><td>Model C</td><td>99%</td><td>Slow</td></tr>
+          </tbody>
+        </table>
+        <h2>Interactive Components</h2>
+        <div class="plot-card">
+          <div id="fragment-line"></div>
+        </div>
+        <script>
+          // Example: simple Plotly line chart using the CDN
+          const container = document.getElementById('fragment-line');
+          if (container && window.Plotly) {
+            window.Plotly.newPlot(container, [{x:[1,2,3,4], y:[1,3,2,4], type:'scatter'}], {margin:{t:16,r:16,b:32,l:32}});
+          }
+        </script>
+      </d-article>
+      <d-appendix>
+        <h3 id="citation">Citation</h3>
+        <pre class="citation short">"The Distill Blog Template", 2025.</pre>
+      </d-appendix>
+      <script>
+        function toggleTOC() {
+          const content = document.querySelector('.toc-content');
+          const icon = document.querySelector('.toggle-icon');
+          if (content) content.classList.toggle('collapsed');
+          if (icon) icon.classList.toggle('collapsed');
+        }
+      </script>
+      <script>
+        const article = document.querySelector('d-article');
+        const toc = document.querySelector('d-contents');
+        if (toc && article) {
+          const headings = article.querySelectorAll('h2, h3, h4');
+          let ToC = `<nav role="navigation" class="l-text figcaption"><div class="toc-header" onclick="toggleTOC()"><span class="toc-title">Table of Contents</span><span class="toggle-icon">▼</span></div><div class="toc-content">`;
+          let prevLevel = 0;
+          for (const el of headings) {
+            const isInTitle = el.parentElement.tagName == 'D-TITLE';
+            const isException = el.getAttribute('no-toc');
+            if (isInTitle || isException) continue;
+            el.setAttribute('id', el.textContent.toLowerCase().replaceAll(" ", "_"));
+            const link = '<a target="_self" href="#' + el.getAttribute('id') + '">' + el.textContent + '</a>';
+            const level = el.tagName === 'H2' ? 0 : (el.tagName === 'H3' ? 1 : 2);
+            while (prevLevel < level) { ToC += '<ul>'; prevLevel++; }
+            while (prevLevel > level) { ToC += '</ul>'; prevLevel--; }
+            if (level === 0) ToC += '<div>' + link + '</div>'; else ToC += '<li>' + link + '</li>';
+          }
+          while (prevLevel > 0) { ToC += '</ul>'; prevLevel--; }
+          ToC += '</div></nav>';
+          toc.innerHTML = ToC;
+          toc.setAttribute('prerendered', 'true');
+          const toc_links = document.querySelectorAll('d-contents > nav div a');
+          window.addEventListener('scroll', () => {
+            if (!headings || !toc_links) return;
+            for (let i = headings.length - 1; i >= 0; i--) {
+              const heading = headings[i];
+              if (heading.parentElement.tagName == 'D-TITLE' || heading.getAttribute('no-toc')) continue;
+              if (heading.getBoundingClientRect().top - 50 <= 0) {
+                const headingId = heading.getAttribute('id');
+                const activeLink = Array.from(toc_links).find(link => link.getAttribute('href') === '#' + headingId);
+                if (activeLink && !activeLink.classList.contains('active')) {
+                  toc_links.forEach(link => link.classList.remove('active'));
+                  activeLink.classList.add('active');
+                }
+                break;
+              }
+            }
+          });
+        }
+      </script>
     </main>
   </body>
 </html>