diff --git a/content/build.md b/content/build.md index cce9b224..1c7b00e8 100644 --- a/content/build.md +++ b/content/build.md @@ -16,10 +16,11 @@ Once you're happy with it, let's see how to [[hosting|deploy Quartz to the web]] > [!hint] Flags and options > For full help options, you can run `npx quartz build --help`. -> +> > Most of these have sensible defaults but you can override them if you have a custom setup: +> > - `-d` or `--directory`: the content folder. This is normally just `content` > - `-v` or `--verbose`: print out extra logging information > - `-o` or `--output`: the output folder. This is normally just `public` > - `--serve`: run a local hot-reloading server to preview your Quartz -> - `--port`: what port to run the local preview server on \ No newline at end of file +> - `--port`: what port to run the local preview server on diff --git a/content/configuration.md b/content/configuration.md index ef0bf9b2..54878522 100644 --- a/content/configuration.md +++ b/content/configuration.md @@ -86,13 +86,13 @@ Each page is composed of multiple different sections which contain `QuartzCompon ```typescript title="quartz/cfg.ts" export interface FullPageLayout { - head: QuartzComponent // single component - header: QuartzComponent[] // laid out horizontally + head: QuartzComponent // single component + header: QuartzComponent[] // laid out horizontally beforeBody: QuartzComponent[] // laid out vertically - pageBody: QuartzComponent // single component - left: QuartzComponent[] // vertical on desktop, horizontal on mobile - right: QuartzComponent[] // vertical on desktop, horizontal on mobile - footer: QuartzComponent // single component + pageBody: QuartzComponent // single component + left: QuartzComponent[] // vertical on desktop, horizontal on mobile + right: QuartzComponent[] // vertical on desktop, horizontal on mobile + footer: QuartzComponent // single component } ``` @@ -101,22 +101,24 @@ These correspond to following parts of the page: ![[quartz-layout.png|800]] > [!note] -> There are two additional layout fields that are *not* shown in the above diagram. +> There are two additional layout fields that are _not_ shown in the above diagram. +> > 1. `head` is a single component that renders the `
` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles. -> 2. `header` is a set of components that are laid out horizontally and appears *before* the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`. +> 2. `header` is a set of components that are laid out horizontally and appears _before_ the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`. Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components. See [a list of all the components](./tags/component) for all available components along with their configuration options. ### Style -Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above. + +Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling. -You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`. +You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`. > [!note] > Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports its styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined. -When you're ready, see how [[build|build and preview]] Quartz locally. \ No newline at end of file +When you're ready, see how [[build|build and preview]] Quartz locally. diff --git a/content/hosting.md b/content/hosting.md index 23c43ece..cf2f2567 100644 --- a/content/hosting.md +++ b/content/hosting.md @@ -12,12 +12,12 @@ However, if you'd like to publish your site to the world, you need a way to host 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**. 3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information: -|Configuration option|Value| -|---|---| -|Production branch|`v4-alpha`| -|Framework preset|`None`| -|Build command|`npx quartz build`| -|Build output directory|`public`| +| Configuration option | Value | +| ---------------------- | ------------------ | +| Production branch | `v4-alpha` | +| Framework preset | `None` | +| Build command | `npx quartz build` | +| Build output directory | `public` | Press "Save and deploy" and Cloudflare should have a deployed version of your site in about a minute. Then, every time you sync your Quartz changes to GitHub, your site should be updated. @@ -80,26 +80,25 @@ jobs: Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `