alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2025-05-28 18:09:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

generic quartz component for layout

Browse source
This commit is contained in:
Jacky Zhao 2023-06-07 22:27:32 -07:00
parent dde36fa558
commit 317cce9314
11 changed files with 77 additions and 58 deletions

15
quartz/components/Body.tsx
View file

@ -1,15 +1,14 @@
import { ComponentChildren } from "preact"
import clipboardScript from './scripts/clipboard.inline'
import clipboardStyle from './styles/clipboard.scss'
import { QuartzComponentProps } from "./types"
export interface BodyProps {
title?: string
children: ComponentChildren
}
export default function Body({ title, children }: BodyProps) {
export default function Body({ fileData, children }: QuartzComponentProps) {
const title = fileData.frontmatter?.title
const displayTitle = fileData.slug === "index" ? undefined : title
return <article>
{title && <h1>{title}</h1>}
<div class="top-section">
{displayTitle && <h1>{displayTitle}</h1>}
</div>
{children}
</article>
}

15
quartz/components/Head.tsx
View file

@ -1,18 +1,15 @@
import { resolveToRoot } from "../path"
import { StaticResources } from "../resources"
import { QuartzComponentProps } from "./types"
export interface HeadProps {
title: string
description: string
slug: string
externalResources: StaticResources
}
export default function Head({ title, description, slug, externalResources }: HeadProps) {
export default function Head({ fileData, externalResources }: QuartzComponentProps) {
const slug = fileData.slug!
const title = fileData.frontmatter?.title ?? "Untitled"
const description = fileData.description ?? "No description provided"
const { css, js } = externalResources
const baseDir = resolveToRoot(slug)
const iconPath = baseDir + "/static/icon.png"
const ogImagePath = baseDir + "/static/og-image.png"
return <head>
<title>{title}</title>
<meta charSet="utf-8" />

18
quartz/components/Header.tsx
View file

@ -1,20 +1,10 @@
import { resolveToRoot } from "../path"
import Darkmode from "./Darkmode"
import style from './styles/header.scss'
import { QuartzComponentProps } from "./types"
export interface HeaderProps {
title: string
slug: string
}
export default function Header({ title, slug }: HeaderProps) {
const baseDir = resolveToRoot(slug)
export default function Header({ children }: QuartzComponentProps) {
return <header>
<h1><a href={baseDir}>{title}</a></h1>
<div class="spacer"></div>
<Darkmode />
{children}
</header>
}
Header.beforeDOMLoaded = Darkmode.beforeDOMLoaded
Header.css = style + Darkmode.css
Header.css = style

9
quartz/components/PageTitle.tsx Normal file
View file

@ -0,0 +1,9 @@
import { resolveToRoot } from "../path"
import { QuartzComponentProps } from "./types"
export default function({ cfg, fileData }: QuartzComponentProps) {
const title = cfg.siteTitle
const slug = fileData.slug!
const baseDir = resolveToRoot(slug)
return <h1><a href={baseDir}>{title}</a></h1>
}

3
quartz/components/Spacer.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function() {
return <div class="spacer"></div>
}

14
quartz/components/types.ts
View file

@ -1,6 +1,16 @@
import { ComponentType } from "preact"
import { ComponentType, JSX } from "preact"
import { StaticResources } from "../resources"
import { QuartzPluginData } from "../plugins/vfile"
import { GlobalConfiguration } from "../cfg"
export type QuartzComponent<Props> = ComponentType<Props> & {
export type QuartzComponentProps = {
externalResources: StaticResources
fileData: QuartzPluginData
cfg: GlobalConfiguration
children: QuartzComponent[] | JSX.Element[]
}
export type QuartzComponent = ComponentType<QuartzComponentProps> & {
css?: string,
beforeDOMLoaded?: string,
afterDOMLoaded?: string,