Fixed recorder pages

src/components/AppLayout/AsideLayout.astro

@@ -22,27 +22,34 @@ default slot
 
 interface Props {
   reducedAsideWidth?: boolean;
-  withAside?: boolean | undefined;
 }
 
-const { reducedAsideWidth = false, withAside = true } = Astro.props;
+const { reducedAsideWidth = false } = Astro.props;
 ---
 
 <div id="layout" class:list={{ "reduced-width": reducedAsideWidth }}>
   <div id="left">
     <slot name="header" />
+    {
+      (Astro.slots.has("header-aside") || Astro.slots.has("meta") || Astro.slots.has("aside")) && (
         <div class="when-not-large">
           <slot name="header-aside" />
           <slot name="meta" />
           <slot name="aside" />
         </div>
+      )
+    }
+    {
+      Astro.slots.has("meta") && (
         <div class="when-large">
           <slot name="meta" />
         </div>
+      )
+    }
     <slot />
   </div>
   {
-    withAside && (
+    (Astro.slots.has("header-aside") || Astro.slots.has("aside")) && (
       <Card class="when-large right">
         <slot name="header-aside" />
         <slot name="aside" />

src/pages/[locale]/recorders/[id].astro

@@ -40,15 +40,15 @@ if (languages.length > 0) {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppLayout>
+<AppLayout backgroundImage={avatar}>
-  <AsideLayout withAside={avatar !== undefined && additionalAttributes.length > 0}>
+  <AsideLayout>
     <Fragment slot="header">
-      <AppLayoutTitle pretitle={`Recorder#${id.substring(0, 5)}`} title={username} />
+      <AppLayoutTitle pretitle={`Recorder#${id.substring(id.length - 5)}`} title={username} />
     </Fragment>
 
     {
       avatar && (
-        <Fragment slot="header-aside">
+        <Fragment slot={avatar && "header-aside"}>
           <a
             href={getLocalizedUrl(`/images/${avatar.id}`)}
             style={`aspect-ratio: ${avatar.width}/${avatar.height};`}>
@@ -66,20 +66,14 @@ if (languages.length > 0) {
 
     {
       avatar && additionalAttributes.length > 0 && (
-        <Fragment slot="aside">
+        <Fragment slot={avatar && additionalAttributes.length > 0 && "aside"}>
           <Attributes attributes={additionalAttributes} />
         </Fragment>
       )
     }
 
-    <div id="info">
+    {!avatar && additionalAttributes.length > 0 && <Attributes attributes={additionalAttributes} />}
-      {
-        !avatar && additionalAttributes.length > 0 && (
-          <Attributes attributes={additionalAttributes} />
-        )
-      }
     {biography && <RichText content={biography} context={{ lang: language }} />}
-    </div>
   </AsideLayout>
 </AppLayout>