fix head.tsx

This commit is contained in:
Jacky Zhao 2023-08-08 20:36:24 -07:00
parent 9ad6f49c15
commit e9eebd1c87
4 changed files with 29 additions and 26 deletions

View File

@ -140,17 +140,16 @@ export default (() => {
` `
return YourComponent return YourComponent
}) satisfies QuartzComponentConstructor }) satisfies QuartzComponentConstructor
``` ```
> [!hint] > [!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. > 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). 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 ```ts
document.addEventListener("nav", () => { 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. It is best practice to also unmount any existing event handlers to prevent memory leaks.
#### Importing Code #### Importing Code
Of course, it isn't always practical (nor desired!) to write your code as a string literal in the component. 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. Quartz supports importing component code through `.inline.ts` files.
@ -181,20 +182,21 @@ export default (() => {
YourComponent.afterDOM = script YourComponent.afterDOM = script
return YourComponent return YourComponent
}) satisfies QuartzComponentConstructor }) satisfies QuartzComponentConstructor
``` ```
```ts title="quartz/components/scripts/graph.inline.ts" ```ts title="quartz/components/scripts/graph.inline.ts"
// any imports here are bundled for the browser // any imports here are bundled for the browser
import * as d3 from "d3" 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. 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`: After creating your custom component, re-export it in `quartz/components/index.ts`:
```ts title="quartz/components/index.ts" {4,10} ```ts title="quartz/components/index.ts" {4,10}
@ -203,12 +205,7 @@ import Content from "./pages/Content"
import Darkmode from "./Darkmode" import Darkmode from "./Darkmode"
import YourComponent from "./YourComponent" 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. 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 (() => { export default (() => {
function AnotherComponent(props: QuartzComponentProps) { function AnotherComponent(props: QuartzComponentProps) {
return <div> return (
<p>It's nested!</p> <div>
<YourComponent {...props} /> <p>It's nested!</p>
</div> <YourComponent {...props} />
</div>
)
} }
return AnotherComponent return AnotherComponent

View File

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

BIN
quartz/static/og-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

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