fix head.tsx

content/advanced/creating components.md

@@ -140,17 +140,16 @@ export default (() => {
   `
   return YourComponent
 }) satisfies QuartzComponentConstructor
-
 ```
 
 > [!hint]
 > For those coming from React, Quartz components are different from React components in that it only uses JSX for templating and layout. Hooks like `useEffect`, `useState`, etc. are not rendered and other properties that accept functions like `onClick` handlers will not work. Instead, do it using a regular JS script that modifies the DOM element directly.
 
-As the names suggest, the `.beforeDOMLoaded` scripts are executed *before* the page is done loading so it doesn't have access to any elements on the page. This is mostly used to prefetch any critical data.
+As the names suggest, the `.beforeDOMLoaded` scripts are executed _before_ the page is done loading so it doesn't have access to any elements on the page. This is mostly used to prefetch any critical data.
 
 The `.afterDOMLoaded` script executes once the page has been completely loaded. This is a good place to setup anything that should last for the duration of a site visit (e.g. getting something saved from local storage).
 
-If you need to create an `afterDOMLoaded` script that depends on *page specific* elements that may change when navigating to a new page, you can listen for the `"nav"` event that gets fired whenever a page loads (which may happen on navigation if [[SPA Routing]] is enabled).
+If you need to create an `afterDOMLoaded` script that depends on _page specific_ elements that may change when navigating to a new page, you can listen for the `"nav"` event that gets fired whenever a page loads (which may happen on navigation if [[SPA Routing]] is enabled).
 
 ```ts
 document.addEventListener("nav", () => {
@@ -163,7 +162,9 @@ document.addEventListener("nav", () => {
 ```
 
 It is best practice to also unmount any existing event handlers to prevent memory leaks.
+
 #### Importing Code
+
 Of course, it isn't always practical (nor desired!) to write your code as a string literal in the component.
 
 Quartz supports importing component code through `.inline.ts` files.
@@ -181,20 +182,21 @@ export default (() => {
   YourComponent.afterDOM = script
   return YourComponent
 }) satisfies QuartzComponentConstructor
-
 ```
 
 ```ts title="quartz/components/scripts/graph.inline.ts"
 // any imports here are bundled for the browser
 import * as d3 from "d3"
 
-document.getElementById('btn').onclick = () => {
+document.getElementById("btn").onclick = () => {
-  alert('button clicked!')
+  alert("button clicked!")
 }
 ```
 
 Additionally, like what is shown in the example above, you can import packages in `.inline.ts` files. This will be bundled by Quartz and included in the actual script.
+
 ### Using a Component
+
 After creating your custom component, re-export it in `quartz/components/index.ts`:
 
 ```ts title="quartz/components/index.ts" {4,10}
@@ -203,12 +205,7 @@ import Content from "./pages/Content"
 import Darkmode from "./Darkmode"
 import YourComponent from "./YourComponent"
 
-export {
+export { ArticleTitle, Content, Darkmode, YourComponent }
-  ArticleTitle,
-  Content,
-  Darkmode,
-  YourComponent
-}
 ```
 
 Then, you can use it like any other component in `quartz.layout.ts` via `Component.YourComponent()`. See the [[configuration#Layout|layout]] section for more details.
@@ -220,10 +217,12 @@ import YourComponent from "./YourComponent"
 
 export default (() => {
   function AnotherComponent(props: QuartzComponentProps) {
-    return <div>
+    return (
+      <div>
         <p>It's nested!</p>
         <YourComponent {...props} />
       </div>
+    )
   }
 
   return AnotherComponent

quartz/components/Head.tsx

@@ -3,14 +3,14 @@ import { JSResourceToScriptElement } from "../resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
-  function Head({ fileData, externalResources }: QuartzComponentProps) {
+  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
     const slug = canonicalizeServer(fileData.slug!)
     const title = fileData.frontmatter?.title ?? "Untitled"
-    const description = fileData.description ?? "No description provided"
+    const description = fileData.description?.trim() ?? "No description provided"
     const { css, js } = externalResources
     const baseDir = pathToRoot(slug)
     const iconPath = baseDir + "/static/icon.png"
-    const ogImagePath = baseDir + "/static/og-image.png"
+    const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
 
     return (
       <head>
@@ -18,8 +18,8 @@ export default (() => {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
-        <meta property="og:description" content={title} />
+        <meta property="og:description" content={description} />
-        <meta property="og:image" content={ogImagePath} />
+        {cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
         <meta property="og:width" content="1200" />
         <meta property="og:height" content="675" />
         <link rel="icon" href={iconPath} />

quartz/styles/base.scss

@@ -269,24 +269,28 @@ h6 {
 // typography improvements
 h1 {
   font-size: 1.75rem;
-  margin-top: 2.75rem;
+  margin-top: 2.25rem;
+  margin-bottom: 1rem;
 }
 
 h2 {
   font-size: 1.4rem;
-  margin-top: 2.4rem;
+  margin-top: 1.9rem;
+  margin-bottom: 1rem;
 }
 
 h3 {
   font-size: 1.12rem;
-  margin-top: 2.12rem;
+  margin-top: 1.62rem;
+  margin-bottom: 1rem;
 }
 
 h4,
 h5,
 h6 {
   font-size: 1rem;
-  margin-top: 2rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 div[data-rehype-pretty-code-fragment] {