Merge pull request otoyo#99 from otoyo/display-db-cover

Display DB cover
ytsuda3311 · Mar 7, 2023 · f4a1844 · f4a1844
2 parents f896682 + c9c6d9f
commit f4a1844
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 27 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import { CUSTOM_DOMAIN, BASE_PATH } from './src/server-constants';
+import CoverImageDownloader from './src/integrations/cover-image-downloader';
 import FeaturedImageDownloader from './src/integrations/featured-image-downloader';
 import PublicNotionCopier from './src/integrations/public-notion-copier';
 
@@ -29,5 +30,9 @@ const getSite = function () {
 export default defineConfig({
   site: getSite(),
   base: BASE_PATH,
-  integrations: [FeaturedImageDownloader(), PublicNotionCopier()],
+  integrations: [
+    CoverImageDownloader(),
+    FeaturedImageDownloader(),
+    PublicNotionCopier(),
+  ],
 });
diff --git a/src/integrations/cover-image-downloader.ts b/src/integrations/cover-image-downloader.ts
@@ -0,0 +1,25 @@
+import type { AstroIntegration } from 'astro'
+import { getDatabase, downloadFile } from '../lib/notion/client'
+
+export default (): AstroIntegration => ({
+  name: 'cover-image-downloader',
+  hooks: {
+    'astro:build:start': async () => {
+      const database = await getDatabase()
+
+      if (!database.Cover || database.Cover.Type !== 'file') {
+        return Promise.resolve()
+      }
+
+      let url!: URL
+      try {
+        url = new URL(database.Cover.Url)
+      } catch (err) {
+        console.log('Invalid Cover image URL')
+        return Promise.resolve()
+      }
+
+      return downloadFile(url)
+    },
+  },
+})
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,7 +1,7 @@
 ---
 import { PUBLIC_GA_TRACKING_ID, ENABLE_LIGHTBOX } from '../server-constants.ts'
 import { getDatabase } from '../lib/notion/client.ts'
-import { getNavLink, getStaticFilePath } from '../lib/blog-helpers.ts'
+import { getNavLink, getStaticFilePath, filePath } from '../lib/blog-helpers.ts'
 import '../styles/syntax-coloring.css'
 import GoogleAnalytics from '../components/GoogleAnalytics.astro'
 
@@ -20,6 +20,21 @@ const siteTitle = title ? `${title} - ${database.Title}` : database.Title
 const siteDescription = description ? description : database.Description
 const siteURL = new URL(path, Astro.site).toString()
 const siteOGImage = new URL('/default-og-image.png', Astro.site)
+
+let coverImageURL: string
+if (database.Cover) {
+  if (database.Cover.Type === 'external') {
+    coverImageURL = database.Cover.Url
+  } else if (database.Cover.Type === 'file') {
+    try {
+      coverImageURL = filePath(new URL(database.Cover.Url))
+    } catch (err) {
+      console.log('Invalid DB cover image URL')
+    }
+  }
+}
+
+const asidePaddingTop = coverImageURL ? '200px' : '60px'
 ---
 
 <!DOCTYPE html>
@@ -52,31 +67,40 @@ 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>
+        {
+          coverImageURL && (
+            <div class="cover">
+              <img src={coverImageURL} />
+            </div>
+          )
+        }
+
+        <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>
         <slot name="aside" />
       </aside>
-      <slot />
     </div>
 
     {
@@ -87,7 +111,7 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
   </body>
 </html>
 
-<style>
+<style define:vars={{ asidePaddingTop }}>
   .container {
     display: flex;
     min-height: 100vh;
@@ -101,20 +125,18 @@ 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) {
     main {
       order: 1;
-      padding: 0 18px;
     }
   }
 
   aside {
     order: 1;
     width: 300px;
-    padding: 100px 20px 20px;
+    padding: var(--asidePaddingTop) 20px 20px;
     background-color: #f4f4f4;
   }
   @media (max-width: 640px) {
@@ -125,6 +147,25 @@ const siteOGImage = new URL('/default-og-image.png', Astro.site)
     }
   }
 
+  div.cover {
+  }
+  div.cover img {
+    display: block;
+    width: 100%;
+    height: 20vh;
+    object-fit: cover;
+    object-position: center 60%;
+  }
+
+  div.content {
+    padding: 20px 40px;
+  }
+  @media (max-width: 640px) {
+    div.content {
+      padding: 0 18px;
+    }
+  }
+
   main header {
     padding: 20px 0 20px;
   }

diff --git a/src/lib/notion/client.ts b/src/lib/notion/client.ts
@@ -389,7 +389,7 @@ export async function getDatabase(): Promise<Database> {
   if (res.cover) {
     cover = {
       Type: res.cover.type,
-      Url: res.cover.external?.url || '',
+      Url: res.cover.external?.url || res.cover?.file?.url || '',
     }
   }