Display DB cover

otoyo · Mar 6, 2023 · 6a5e37c · 6a5e37c
1 parent 815ebaa
commit 6a5e37c
Showing 1 changed file with 41 additions and 23 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -52,31 +52,41 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
     <GoogleAnalytics trackingId={PUBLIC_GA_TRACKING_ID} />
     <div class="container">
       <main>
-        <header>
-          <h1>
-            <a href={getNavLink('/')}>{database.Title}</a>
-          </h1>
-          <div class="description">
-            {database.Description}
-          </div>
-        </header>
-
-        <slot name="main" />
-
-        <footer>
-          <div>
-            <span>Powered by</span>
-            <a href="https://github.com/otoyo/astro-notion-blog"
-              >astro-notion-blog</a
-            >
-          </div>
-        </footer>
+        {
+          database.Cover && database.Cover.Type === 'external' && (
+            <div
+              class="cover"
+              style={`background-image: url('${database.Cover.Url}');`}
+            />
+          )
+        }
+
+        <div class="content">
+          <header>
+            <h1>
+              <a href={getNavLink('/')}>{database.Title}</a>
+            </h1>
+            <div class="description">
+              {database.Description}
+            </div>
+          </header>
+
+          <slot name="main" />
+
+          <footer>
+            <div>
+              <span>Powered by</span>
+              <a href="https://github.com/otoyo/astro-notion-blog"
+                >astro-notion-blog</a
+              >
+            </div>
+          </footer>
+        </div>
       </main>
 
-      <aside>
+      <aside style={database.Cover && 'padding-top: 200px;'}>
         <slot name="aside" />
       </aside>
-      <slot />
     </div>
 
     {
@@ -101,7 +111,6 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
   main {
     flex: 1;
     order: 2;
-    padding: 0 40px;
     justify-content: space-between;
   }
   @media (max-width: 640px) {
@@ -114,7 +123,7 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
   aside {
     order: 1;
     width: 300px;
-    padding: 100px 20px 20px;
+    padding: 60px 20px 20px;
     background-color: #f4f4f4;
   }
   @media (max-width: 640px) {
@@ -125,6 +134,15 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
     }
   }
 
+  div.cover {
+    height: 200px;
+    background-position: left;
+  }
+
+  div.content {
+    padding: 20px 40px;
+  }
+
   main header {
     padding: 20px 0 20px;
   }