update hf user, overal layout, code output

app/.astro/astro/content.d.ts

@@ -0,0 +1,238 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+			components: import('astro').MDXInstance<{}>['components'];
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"chapters": {
+"best-pratices.mdx": {
+	id: "best-pratices.mdx";
+  slug: "best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"components.mdx": {
+	id: "components.mdx";
+  slug: "components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"debug-components.mdx": {
+	id: "debug-components.mdx";
+  slug: "debug-components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"getting-started.mdx": {
+	id: "getting-started.mdx";
+  slug: "getting-started";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"greetings.mdx": {
+	id: "greetings.mdx";
+  slug: "greetings";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"introduction.mdx": {
+	id: "introduction.mdx";
+  slug: "introduction";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"markdown.mdx": {
+	id: "markdown.mdx";
+  slug: "markdown";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"writing-your-content.mdx": {
+	id: "writing-your-content.mdx";
+  slug: "writing-your-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+};
+"embeds": {
+"vibe-code-d3-embeds-directives.md": {
+	id: "vibe-code-d3-embeds-directives.md";
+  slug: "vibe-code-d3-embeds-directives";
+  body: string;
+  collection: "embeds";
+  data: any
+} & { render(): Render[".md"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		"assets": {
+"data/mnist-variant-model": {
+	id: "data/mnist-variant-model";
+  collection: "assets";
+  data: any
+};
+};
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/src/components/Accordion.astro

@@ -79,7 +79,7 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     margin: 0 0 var(--spacing-4);
     padding: 0;
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: var(--table-border-radius);
     background: var(--surface-bg);
     transition: box-shadow 180ms ease, border-color 180ms ease;
   }
@@ -141,16 +141,32 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     position: relative;
   }
 
+  /* Subtle top shadow overlay when open (visible above children) */
+  .accordion[open] .accordion__content-wrapper::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 6px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.025), rgba(0,0,0,0));
+    pointer-events: none;
+    z-index: 1;
+  }
+
   .accordion__content {
     margin: 0;
     padding: 0;
   }
 
-  /* Ensure the very last slotted element has no bottom spacing */
+  /* Ensure the very last slotted element has no bottom margin */
   .accordion .accordion__content > :global(*:last-child) {
-    padding-bottom: 0 !important;
     margin-bottom: 0 !important;
   }
+  /* Remove bottom padding on last child, except for code-output blocks */
+  .accordion .accordion__content > :global(:not(.code-output):last-child) {
+    padding-bottom: 0 !important;
+  }
 
   /* Ensure the very first slotted element has no top spacing */
   .accordion .accordion__content > :global(*:first-child) {
@@ -167,23 +183,11 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     padding: 0;
   }
 
-  /* Separator between header and content when open (edge-to-edge) */
-  .accordion[open] .accordion__content-wrapper::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0px; /* space below header */
-    height: 1px;
-    background: var(--border-color);
-    pointer-events: none;
-  }
-
   /* Focus styles for accessibility */
   .accordion__summary:focus-visible {
     outline: 2px solid var(--primary-color);
     outline-offset: 3px;
-    border-radius: 8px;
+    border-radius: var(--table-border-radius);
   }
 
 

app/src/components/HfUser.astro

@@ -39,8 +39,6 @@ const imgSrc = avatarUrl ?? `https://huggingface.co/api/users/${encodeURICompone
     gap: 10px;
     padding: 10px 10px 10px 12px;
     border-radius: 12px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
-    border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: none;
   }
   .hf-user__left {

app/src/content/chapters/markdown.mdx

@@ -86,6 +86,15 @@ Or it can also be used at a standalone block.
 Hello i'm a standalone output block.
 :::
 
+<Accordion title="It also works in an accordion">
+```python
+print("This script prints a very very long line to check overflow behavior.")
+```
+::::output
+This script prints a very very long line to check overflow behavior.
+::::
+</Accordion>
+
 
 <Accordion title="Code example">
 ````mdx

app/src/styles/_layout.css

@@ -8,7 +8,7 @@
   padding: 0 var(--content-padding-x);
   margin-top: 40px;
   display: grid;
-  grid-template-columns: 220px minmax(0, 680px) 260px;
+  grid-template-columns: 260px minmax(0, 680px) 260px;
   gap: 32px;
   align-items: start;
 }
@@ -70,15 +70,15 @@
 
 .wide {
   /* Target up to ~1100px while staying within viewport minus page gutters */
-  width: min(1100px, 100vw - 32px);
-  margin-left: calc(50% + var(--content-padding-x) * 2);
+  width: min(1100px, 100vw - var(--content-padding-x) * 2);
+  margin-left: 50%;
   transform: translateX(-50%);
 }
 
 .full-width {
   /* Span the full viewport width and center relative to viewport */
   width: 100vw;
-  margin-left: calc(50% - 50vw + var(--content-padding-x) * 2);
+  margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
 }
 

app/src/styles/components/_code.css

@@ -39,7 +39,6 @@ section.content-grid pre {
   -webkit-overflow-scrolling: touch;
   padding: 0;
   margin-bottom: var(--block-spacing-y) !important;
-  overflow: hidden!important;
   overflow-x: auto;
 }
 
@@ -150,6 +149,7 @@ section.content-grid pre code {
 /* Inside Accordions: remove padding and border on code containers */
 .accordion .astro-code { padding: 0; border: none; }
 .accordion .astro-code { margin-bottom: 0 !important; }
+.accordion .code-output { border: none; border-top: 1px solid var(--border-color)!important; }
 .accordion pre { margin-bottom: 0 !important; }
 .accordion .code-card pre { margin: 0 !important; }
 
@@ -203,9 +203,13 @@ section.content-grid pre code {
   background: oklch(from var(--code-bg) calc(l - 0.005) c h);
   border: 1px solid var(--border-color);
   border-radius: 6px;
-  padding: calc(var(--spacing-3) + 6px) var(--spacing-3) var(--spacing-3) var(--spacing-3);
   margin-top: 0;
   margin-bottom: var(--block-spacing-y);
+  padding: 0 !important;
+}
+
+.code-output pre {
+  padding: calc(var(--spacing-3) + 6px) var(--spacing-3) var(--spacing-3) var(--spacing-3) !important;
 }
 
 /* If immediately following a code container, keep tight visual connection */
@@ -217,7 +221,6 @@ section.content-grid pre + .code-output {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   box-shadow: inset 0 8px 12px -12px rgba(0, 0, 0, 0.15);
-
 }
 
 /* Remove bottom margin on code when immediately followed by results */

app/src/styles/global.css

@@ -10,12 +10,15 @@
 
 .demo-wide,
 .demo-full-width {
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   min-height: 150px;
   color: var(--muted-color);
   font-size: 12px;
-  border: 1px dashed var(--border-color);
+  border: 2px dashed var(--border-color);
   border-radius: 8px;
   background: var(--surface-bg);
   margin-bottom: var(--block-spacing-y);