From a0e7d979674ef6f583aeef14fccbf80fc59a7b32 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Thu, 11 Jul 2024 20:44:17 +0200
Subject: [PATCH] Fixed recorder pages

---
 src/components/AppLayout/AsideLayout.astro | 29 ++++++++++++++--------
 src/pages/[locale]/recorders/[id].astro    | 20 ++++++---------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/AppLayout/AsideLayout.astro b/src/components/AppLayout/AsideLayout.astro
index 9c5403f..170d2f9 100644
--- a/src/components/AppLayout/AsideLayout.astro
+++ b/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" />
-    <div class="when-not-large">
-      <slot name="header-aside" />
-      <slot name="meta" />
-      <slot name="aside" />
-    </div>
-    <div class="when-large">
-      <slot name="meta" />
-    </div>
+    {
+      (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" />
diff --git a/src/pages/[locale]/recorders/[id].astro b/src/pages/[locale]/recorders/[id].astro
index 3600792..1c9626f 100644
--- a/src/pages/[locale]/recorders/[id].astro
+++ b/src/pages/[locale]/recorders/[id].astro
@@ -40,15 +40,15 @@ if (languages.length > 0) {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppLayout>
-  <AsideLayout withAside={avatar !== undefined && additionalAttributes.length > 0}>
+<AppLayout backgroundImage={avatar}>
+  <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} />
-        )
-      }
-      {biography && <RichText content={biography} context={{ lang: language }} />}
-    </div>
+    {!avatar && additionalAttributes.length > 0 && <Attributes attributes={additionalAttributes} />}
+    {biography && <RichText content={biography} context={{ lang: language }} />}
   </AsideLayout>
 </AppLayout>