fix head.tsx
This commit is contained in:
parent
9ad6f49c15
commit
e9eebd1c87
@ -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
|
||||||
|
@ -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
BIN
quartz/static/og-image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
@ -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] {
|
||||||
|
Loading…
Reference in New Issue
Block a user