🔄 synced local 'quartz/' with remote 'quartz/'

Enveloppe · Mar 11, 2024 · e24364a · e24364a
1 parent 6cf9216
commit e24364a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
@@ -1,6 +1,7 @@
 import { i18n } from "../i18n";
 import { FullSlug, joinSegments, pathToRoot, sluggify } from "../util/path";
 import { JSResourceToScriptElement } from "../util/resources";
+import { getMetaImage } from "./scripts/util";
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types";
 
 export default (() => {
@@ -15,13 +16,7 @@ export default (() => {
 		const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!);
 
 		const iconPath = joinSegments(baseDir, "static/icon.png");
-		let ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`;
-		if (cfg.ogImageDir) {
-			const contentDir = `https://${cfg.baseUrl}/${cfg.ogImageDir}/`;
-			ogImagePath = fileData?.frontmatter?.image
-				? sluggify(`${contentDir}${(fileData.frontmatter.image as string).trim()}`)
-				: `https://${cfg.baseUrl}/static/og-image.png`;
-		}
+		const ogImagePath = getMetaImage(cfg, fileData);
 		return (
 			<head>
 				<title>{title}</title>

diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
@@ -1,8 +1,9 @@
 import { GlobalConfiguration } from "../cfg";
 import { QuartzPluginData } from "../plugins/vfile";
-import { FullSlug, resolveRelative } from "../util/path";
+import { FullSlug, resolveRelative, sluggify } from "../util/path";
 import { Date, getDate } from "./Date";
 import { QuartzComponent, QuartzComponentProps } from "./types";
+import fs from 'fs';
 
 export function byDateAndAlphabetical(
 	cfg: GlobalConfiguration,
@@ -38,9 +39,20 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
 	return (
 		<ul class="section-ul">
 			{list.map((page) => {
-				const title = page.frontmatter?.title;
+				let title = page.frontmatter?.title;
+				if (title === "index") {
+					const path = page.slug?.split("/");
+					title = path?.[path.length - 2].replace("-", " ") ?? "index";
+				}
 				const tags = page.frontmatter?.tags ?? [];
-
+				const description = page.frontmatter?.description;
+				let image : string | undefined = page.frontmatter?.image as string ?? undefined ;
+				if (cfg.ogImageDir) {
+					image = `${cfg.ogImageDir}/${image}`
+					image = resolveRelative(fileData.slug!, image as FullSlug);
+					//check if image exists
+					image = fs.existsSync(image) ? image : undefined;
+				}
 				return (
 					<li class="section-li">
 						<div class="section">
@@ -55,6 +67,19 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
 										{title}
 									</a>
 								</h3>
+								<div class="meta-container">
+									<div>
+										{image && (
+											<img
+												class="meta-image"
+												src={sluggify(image)}
+												width="100"
+												height="100"
+											/>
+										)}
+									</div>
+									<p class="meta-desc">{description}</p>
+								</div>								
 							</div>
 							<ul class="tags">
 								{tags.map((tag) => (

diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts
@@ -1,3 +1,7 @@
+import { Data } from "vfile";
+import { GlobalConfiguration } from "../../cfg";
+import { sluggify } from "../../util/path";
+
 export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: () => void) {
 	if (!outsideContainer) return;
 	function click(this: HTMLElement, e: HTMLElementEventMap["click"]) {
@@ -23,3 +27,14 @@ export function removeAllChildren(node: HTMLElement) {
 		node.removeChild(node.firstChild);
 	}
 }
+
+export function getMetaImage(cfg: GlobalConfiguration, fileData: Data) {
+	const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`;
+	if (cfg.ogImageDir) {
+		const contentDir = `https://${cfg.baseUrl}/${cfg.ogImageDir}/`;
+		return fileData?.frontmatter?.image
+			? sluggify(`${contentDir}${(fileData.frontmatter.image as string).trim()}`)
+			: `https://${cfg.baseUrl}/static/og-image.png`;
+	}
+	return ogImagePath;
+}
diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
@@ -10,15 +10,24 @@ li.section-li {
   margin-bottom: 1em;
 
   & > .section {
-    display: grid;
-    grid-template-columns: 6em 3fr 1fr;
+    // display: grid;
+    // grid-template-columns: 6em 3fr 1fr;
 
     @media all and (max-width: $mobileBreakpoint) {
       & > .tags {
         display: none;
       }
     }
 
+    & > .desc > .meta-container {
+      display: grid;
+      grid-template-columns: 10% 90%;
+    }
+
+    & > .desc > .meta-desc {
+      grid-column: span 2 / span 2;
+    }
+
     & > .desc > h3 > a {
       background-color: transparent;
     }