Try deploy

src/layouts/ContentLayout.astro

@@ -5,6 +5,8 @@ import Base from '@layouts/Base.astro';
 import Header from '@compontents/layout/PostHeader/index.astro';
 import { getBreadcrumbs } from '@lib/utils/paths';
 import { toMilitaryDTG } from '@lib/utils/date';
+import { extractSidenotes } from '@lib/utils/extractors';
+import Sidenote from '@compontents/content/Sidenote.astro';
 
 interface Props {
   entry: CollectionEntry<'articles'> | CollectionEntry<'elements'>;
@@ -15,7 +17,8 @@ const { entry, collectionName } = Astro.props;
 const { Content } = await render(entry);
 const { title, summary, subtitle, updateDate, publishDate, tags, seo } =
   entry.data;
-const hasMargin = Astro.slots.has('margin')
+const sidenotes = entry.body ? extractSidenotes(entry.body) : [];
+const hasMargin = Astro.slots.has('margin') || !!sidenotes;
 
 const breadcrumbs = await getBreadcrumbs(
   entry.data.parent ?? null,
@@ -57,6 +60,7 @@ const headerCover =
         </div>
         {hasMargin &&(
           <aside class="margin">
+            {sidenotes.map(note => <Sidenote {...note} />)}
             <slot name="margin" />
           </aside>
         )}
@@ -69,8 +73,9 @@ const headerCover =
   .frame {
     @mixin layout-wrapper;
 
+    position: relative;
+
     @media (--bp-desktop) {
-      position: relative;
       display: grid;
       grid-template-columns: var(--layout-content-width) var(--layout-margin-width);
       gap: var(--layout-gutter);
@@ -82,7 +87,6 @@ const headerCover =
   }
 
   .margin {
-    position: relative;
     min-width: 0;
   }
 </style>