parent: 352075ae | patch | commit | ignore whitespace
Jacky Zhao
2023-06-12 2bfe90b7e64839d8ec6319fe93b76472b0285114 
add config to components
13 files modified
79 ■■■■■ changed files
quartz.config.ts 6 ●●●●● patch | view | raw | blame | history
quartz/components/ArticleTitle.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/Body.tsx 7 ●●●●● patch | view | raw | blame | history
quartz/components/Content.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/Darkmode.tsx 5 ●●●●● patch | view | raw | blame | history
quartz/components/Head.tsx 8 ●●●●● patch | view | raw | blame | history
quartz/components/Header.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/PageTitle.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/ReadingTime.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/Spacer.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/TableOfContents.tsx 6 ●●●●● patch | view | raw | blame | history
quartz/components/types.ts 2 ●●●●● patch | view | raw | blame | history
quartz/plugins/emitters/contentPage.tsx 9 ●●●●● patch | view | raw | blame | history 
 quartz.config.ts


@@ -56,9 +56,9 @@


    ],


    emitters: [


      Plugin.ContentPage({


        head: Component.Head,


        header: [Component.PageTitle, Component.Spacer, Component.Darkmode],


        body: [Component.ArticleTitle, Component.ReadingTime, Component.TableOfContents, Component.Content]


        head: Component.Head(),


        header: [Component.PageTitle(), Component.Spacer(), Component.Darkmode()],


        body: [Component.ArticleTitle(), Component.ReadingTime(), Component.TableOfContents(), Component.Content()]


      })


    ]


  },




 quartz/components/ArticleTitle.tsx


@@ -1,6 +1,6 @@


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"




export default function ArticleTitle({ fileData }: QuartzComponentProps) {


function ArticleTitle({ fileData }: QuartzComponentProps) {


  const title = fileData.frontmatter?.title


  const displayTitle = fileData.slug === "index" ? undefined : title


  if (displayTitle) {


@@ -9,3 +9,5 @@


    return null


  }


}




export default (() => ArticleTitle) satisfies QuartzComponentConstructor




 quartz/components/Body.tsx


@@ -1,8 +1,8 @@


import clipboardScript from './scripts/clipboard.inline'


import clipboardStyle from './styles/clipboard.scss'


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"




export default function Body({ children }: QuartzComponentProps) {


function Body({ children }: QuartzComponentProps) {


  return <article>


    {children}


  </article>


@@ -10,3 +10,6 @@




Body.afterDOMLoaded = clipboardScript


Body.css = clipboardStyle




export default (() => Body) satisfies QuartzComponentConstructor






 quartz/components/Content.tsx


@@ -1,9 +1,11 @@


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"


import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'


import { toJsxRuntime } from "hast-util-to-jsx-runtime"




export default function Content({ tree }: QuartzComponentProps) {


function Content({ tree }: QuartzComponentProps) {


  // @ts-ignore (preact makes it angry)


  const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })


  return content


}




export default (() => Content) satisfies QuartzComponentConstructor




 quartz/components/Darkmode.tsx


@@ -3,8 +3,9 @@


// see: https://v8.dev/features/modules#defer


import darkmodeScript from "./scripts/darkmode.inline"


import styles from './styles/darkmode.scss'


import { QuartzComponentConstructor } from "./types"




export default function Darkmode() {


function Darkmode() {


  return <div class="darkmode">


    <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />


    <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>


@@ -48,3 +49,5 @@




Darkmode.beforeDOMLoaded = darkmodeScript


Darkmode.css = styles




export default (() => Darkmode) satisfies QuartzComponentConstructor




 quartz/components/Head.tsx


@@ -1,7 +1,7 @@


import { resolveToRoot } from "../path"


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"




export default function Head({ fileData, externalResources }: QuartzComponentProps) {


function Head({ fileData, externalResources }: QuartzComponentProps) {


  const slug = fileData.slug!


  const title = fileData.frontmatter?.title ?? "Untitled"


  const description = fileData.description ?? "No description provided"


@@ -9,7 +9,7 @@


  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" />


@@ -28,3 +28,5 @@


    {js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => <script key={resource.src} {...resource} spa-preserve />)}


  </head>


}




export default (() => Head) satisfies QuartzComponentConstructor




 quartz/components/Header.tsx


@@ -1,6 +1,6 @@


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"




export default function Header({ children }: QuartzComponentProps) {


function Header({ children }: QuartzComponentProps) {


  return <header>


    {children}


  </header>


@@ -21,3 +21,5 @@


  flex: auto;


}


`




export default (() => Header) satisfies QuartzComponentConstructor




 quartz/components/PageTitle.tsx


@@ -1,9 +1,11 @@


import { resolveToRoot } from "../path"


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"




export default function({ cfg, fileData }: QuartzComponentProps) {


function PageTitle({ cfg, fileData }: QuartzComponentProps) {


  const title = cfg.siteTitle


  const slug = fileData.slug!


  const baseDir = resolveToRoot(slug)


  return <h1><a href={baseDir}>{title}</a></h1>


}




export default (() => PageTitle) satisfies QuartzComponentConstructor




 quartz/components/ReadingTime.tsx


@@ -1,7 +1,7 @@


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"


import readingTime from "reading-time"




export default function ReadingTime({ fileData }: QuartzComponentProps) {


function ReadingTime({ fileData }: QuartzComponentProps) {


  const text = fileData.text


  const isHomePage = fileData.slug === "index"


  if (text && !isHomePage) {


@@ -18,3 +18,5 @@


  opacity: 0.5;


}


`




export default (() => ReadingTime) satisfies QuartzComponentConstructor




 quartz/components/Spacer.tsx


@@ -1,3 +1,7 @@


export default function() {


import { QuartzComponentConstructor } from "./types"




function Spacer() {


  return <div class="spacer"></div>


}




export default (() => Spacer) satisfies QuartzComponentConstructor




 quartz/components/TableOfContents.tsx


@@ -1,7 +1,7 @@


import { QuartzComponentProps } from "./types"


import { QuartzComponentConstructor, QuartzComponentProps } from "./types"


import style from "./styles/toc.scss"




export default function TableOfContents({ fileData }: QuartzComponentProps) {


function TableOfContents({ fileData }: QuartzComponentProps) {


  if (!fileData.toc) {


    return null


  }


@@ -17,3 +17,5 @@


}




TableOfContents.css = style




export default (() => TableOfContents) satisfies QuartzComponentConstructor




 quartz/components/types.ts


@@ -18,4 +18,4 @@


  afterDOMLoaded?: string,


}




export type QuartzComponentConstructor<Options extends object> = (opts: Options) => QuartzComponent


export type QuartzComponentConstructor<Options extends object | undefined = undefined> = (opts: Options) => QuartzComponent




 quartz/plugins/emitters/contentPage.tsx


@@ -5,9 +5,9 @@


import { GlobalConfiguration } from "../../cfg"


import { QuartzComponent } from "../../components/types"


import { resolveToRoot } from "../../path"


import Header from "../../components/Header"


import HeaderConstructor from "../../components/Header"


import { QuartzComponentProps } from "../../components/types"


import Body from "../../components/Body"


import BodyConstructor from "../../components/Body"




interface Options {


  head: QuartzComponent


@@ -20,6 +20,10 @@


    throw new Error("ContentPage must be initialized with options specifiying the components to use")


  }




  const { head: Head, header, body } = opts


  const Header = HeaderConstructor()


  const Body = BodyConstructor()




  return {


    name: "ContentPage",


    getQuartzComponents() {


@@ -28,7 +32,6 @@


    async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {


      const fps: string[] = []




      const { head: Head, header, body } = opts


      for (const [tree, file] of content) {


        const baseDir = resolveToRoot(file.data.slug!)


        const pageResources: StaticResources = {