feat: show banner of notes

quartz.layout.ts

@@ -21,6 +21,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
+    Component.Banner(),
   ],
   left: [
     Component.PageTitle(),

quartz/components/Banner.tsx

@@ -0,0 +1,28 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/banner.scss"
+
+export default (() => {
+  function Banner({ fileData }: QuartzComponentProps) {
+    if (fileData.frontmatter?.banner && typeof fileData.frontmatter?.banner === "string") {
+      const src = fileData.frontmatter.banner.startsWith("http")
+        ? fileData.frontmatter.banner
+        : "/" + fileData.frontmatter.banner
+      const banner_x = fileData.frontmatter.banner_x
+        ? Number(fileData.frontmatter.banner_x) * 100 + "%"
+        : "50%"
+      const banner_y = fileData.frontmatter.banner_y
+        ? Number(fileData.frontmatter.banner_y) * 100 + "%"
+        : "50%"
+      return (
+        <div class="banner">
+          <img src={src} style={"object-position: " + banner_x + " " + banner_y}></img>
+        </div>
+      )
+    } else {
+      return <></>
+    }
+  }
+  Banner.css = style
+
+  return Banner
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
+import Banner from "./Banner"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   Comments,
+  Banner,
 }

quartz/components/styles/banner.scss

@@ -0,0 +1,14 @@
+.banner {
+  max-height: 300px;
+  height: auto;
+  aspect-ratio: 16/9;
+  width: 100%;
+  user-select: none;
+
+  img {
+    object-fit: cover;
+    max-width: none;
+    height: 100%;
+    width: 100%;
+  }
+}