From ee9ed4f2877bff1a64104b6d97ed0d51b1bb6fa3 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 09 Aug 2023 03:36:24 +0000
Subject: [PATCH] fix head.tsx
---
quartz/styles/base.scss | 12 ++++++++----
quartz/static/og-image.png | 0
quartz/components/Head.tsx | 10 +++++-----
content/advanced/creating components.md | 33 ++++++++++++++++-----------------
4 files changed, 29 insertions(+), 26 deletions(-)
diff --git a/content/advanced/creating components.md b/content/advanced/creating components.md
index a907013..e9f1385 100644
--- a/content/advanced/creating components.md
+++ b/content/advanced/creating components.md
@@ -140,17 +140,16 @@
`
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 @@
```
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 @@
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 = () => {
- alert('button clicked!')
+document.getElementById("btn").onclick = () => {
+ 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
+
+### 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 Darkmode from "./Darkmode"
import YourComponent from "./YourComponent"
-export {
- ArticleTitle,
- Content,
- Darkmode,
- YourComponent
-}
+export { 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 @@
export default (() => {
function AnotherComponent(props: QuartzComponentProps) {
- return <div>
- <p>It's nested!</p>
- <YourComponent {...props} />
- </div>
+ return (
+ <div>
+ <p>It's nested!</p>
+ <YourComponent {...props} />
+ </div>
+ )
}
return AnotherComponent
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 44decac..0651b95 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -3,14 +3,14 @@
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 @@
<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:image" content={ogImagePath} />
+ <meta property="og:description" content={description} />
+ {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} />
diff --git a/quartz/static/og-image.png b/quartz/static/og-image.png
new file mode 100644
index 0000000..f132145
--- /dev/null
+++ b/quartz/static/og-image.png
Binary files differ
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index bd072d7..3fbbf87 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -269,24 +269,28 @@
// 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] {
--
Gitblit v1.10.0