update

app/src/components/Accordion.astro

@@ -134,6 +134,12 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     padding: 12px 4px 4px;
   }
 
+  /* Ensure the very last slotted element has no bottom spacing */
+  .accordion .accordion__content > :global(*:last-child) {
+    padding-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
   /* Separator between header and content when open (edge-to-edge) */
   .accordion[open] .accordion__content-wrapper::before {
     content: "";

app/src/content/chapters/available-blocks.mdx

@@ -158,58 +158,19 @@ Here are a few variations using the same bibliography:
 [^f1]: Footnote attached to the sentence above.
 ```
 
+### Separator
 
-### Placement
+Use `---` on its own line to insert a horizontal separator between sections. This is a standard Markdown “thematic break”. Don’t confuse it with the `---` used at the very top of the file to delimit the frontmatter.
 
-#### Asides
-
-<Aside>
-  This paragraph presents a **key idea** concisely.
-  <Fragment slot="aside">
-    **Side note** for brief context or a definition.
-  </Fragment>
-  </Aside>
+---
 
 <small className="muted">Example</small>
 ```mdx
-import Aside from '../components/Aside.astro'
-
-<Aside>
-  Main paragraph with the core idea.
-  <Fragment slot="aside">Short side note.</Fragment>
-</Aside>
-```
-
-Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
+Intro paragraph.
 
-#### Wide example
-
-<Wide>
-  <div className="demo-wide">demo wide</div>
-</Wide>
-
-<small className="muted">Example</small>
-```mdx
-import Wide from '../components/Wide.astro'
-
-<Wide>
-  Your content here...
-</Wide>
-```
-
-#### Full-bleed example
-
-<FullBleed>
-  <div className="demo-full-bleed">demo full-bleed</div>
-</FullBleed>
-
-<small className="muted">Example</small>
-```mdx
-import FullBleed from '../components/FullBleed.astro'
+---
 
-<FullBleed>
-  Your content here...
-</FullBleed>
+Next section begins here.
 ```
 
 
@@ -359,7 +320,7 @@ You can embed external content in your article using **iframes**. For example, *
 <iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
 ```
 
-#### gradio
+#### Gradio
 
 You can also embed **gradio** apps.
 

app/src/content/chapters/getting-started.mdx

@@ -35,8 +35,25 @@ A [slug-title].pdf and thumb.jpg are also generated at build time. You can find
 
 ### Deploy
 
-The recommended way is to **clone this [🤗 Hugging Face Space](https://huggingface.co/spaces/tfrere/science-blog-template)**.  
+The recommended way is to **duplicate this Space on Hugging Face** rather than cloning it directly:
 
-Once you have cloned the Space, **just push your changes** to your repository.  
+1. Open the template Space: **[🤗 science-blog-template](https://huggingface.co/spaces/tfrere/science-blog-template)** and click "Duplicate this Space".
+2. Give it a name, choose visibility, and keep the SDK as **Docker** (this project includes a `Dockerfile`).
+3. A new Space repository will be created under your account.
 
-**Every push automatically triggers a build and deploy** — no extra configuration needed.
+Then push your changes to your new Space repo:
+
+```bash
+git clone https://huggingface.co/spaces/<your-username>/<your-space>
+cd <your-space>
+# Make edits locally, then:
+git add .
+git commit -m "Update content"
+git push
+```
+
+**Every push automatically triggers a build and deploy** on Spaces.
+
+Notes for Docker Spaces:
+- This project exposes port `8080` via Nginx; the Space front matter includes `app_port: 8080` so the service can be probed correctly.
+- No extra configuration is required; the `Dockerfile` builds the Astro site and serves it.

app/src/content/chapters/writing-your-content.mdx

@@ -72,17 +72,6 @@ Below is an image imported via Astro and optimized at build time:
 ```
 
 
-Use `---` on its own line to insert a horizontal separator between sections. This is a standard Markdown “thematic break”. Don’t confuse it with the `---` used at the very top of the file to delimit the frontmatter.
-
-<small className="muted">Example</small>
-```mdx
-Intro paragraph.
-
----
-
-Next section begins here.
-```
-
 
 ### Chapters
 
@@ -131,3 +120,59 @@ Use the **color picker** below to see how the primary color affects the theme.
 Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
 
 <HtmlFragment src="palettes.html" />
+
+
+### Placement
+
+Use these helpers when you need to step outside the main content flow: **Asides** for contextual side notes, **Wide** to extend beyond the main column, and **Full-bleed** for full-width, immersive sections.
+
+#### Asides
+
+<Aside>
+  This paragraph presents a **key idea** concisely.
+  <Fragment slot="aside">
+    **Side note** for brief context or a definition.
+  </Fragment>
+  </Aside>
+
+<small className="muted">Example</small>
+```mdx
+import Aside from '../components/Aside.astro'
+
+<Aside>
+  Main paragraph with the core idea.
+  <Fragment slot="aside">Short side note.</Fragment>
+</Aside>
+```
+
+Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
+
+#### Wide example
+
+<Wide>
+  <div className="demo-wide">demo wide</div>
+</Wide>
+
+<small className="muted">Example</small>
+```mdx
+import Wide from '../components/Wide.astro'
+
+<Wide>
+  Your content here...
+</Wide>
+```
+
+#### Full-bleed example
+
+<FullBleed>
+  <div className="demo-full-bleed">demo full-bleed</div>
+</FullBleed>
+
+<small className="muted">Example</small>
+```mdx
+import FullBleed from '../components/FullBleed.astro'
+
+<FullBleed>
+  Your content here...
+</FullBleed>
+```