* fix(flex): respect DesktopOnly and MobileOnly components
* Use classNames util function
* fix(ofm): allow wikilink alias to be empty (#1984)
This is in line with Obsidian's behavior.
* fix(style): Katex adding scrollbars on non-overflowing content (#1989)
* feat(i18n): Bahasa Indonesia translations (#1981)
* fix(a11y): increased content-meta text contrast (#1980)
* fix(analytics): streamline posthog script loading and event capturing (#1974)
* css: adjust color blend for search bg
* feat(links): added ofm option to style unresolved or broken links differently (#1992)
* feat: add option to disable broken wikilinks
* fix(style): update hover color for broken links and introduce new class
* feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown
* chore(deps): replace `chalk` and `rimraf` with builtin functions (#1879)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* chore(deps): bump the production-dependencies group across 1 directory with 9 updates (#1996)
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
* Node 22 (#1997)
* docs: showcase housekeeping
* docs: fix explorernode references (closes#1985)
* fix: tz-less date parse in local tz instead of utc (closes#1615)
* docs: added note to not forget to add https:// to the plausible-host (for #1337) (#2000)
* docs: added note to not forget to add https:// to the plausible-host (for #1337)
* Update docs/configuration.md
---------
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Updated documentation
---------
Co-authored-by: Nizav <106657905+Ni-zav@users.noreply.github.com>
Co-authored-by: Aswanth <aswanth366@gmail.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
Co-authored-by: Keisuke ANDO <g.kei0429@gmail.com>
Co-authored-by: fl0werpowers <47599466+fl0werpowers@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sebastian Moser <64004956+c2vi@users.noreply.github.com>
* docs: added note to not forget to add https:// to the plausible-host (for #1337)
* Update docs/configuration.md
---------
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* feat: add option to disable broken wikilinks
* fix(style): update hover color for broken links and introduce new class
* feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown
* doc(favicon): add documentation of favicon plugin
* doc(favicon): add missing link to configuration page
* fix(favicon): build on public folder don't created
* fix(popover): automatically position heading links at heading
* Impement linking of blockreferences
* Popover fixes
* id mapping
* Remove excess regexes
* Updated blockref
* Remove linker element
* Restore the docs to their former glory
* Move the hash out of the loop
* Redundant
* Redundant
* Restore docs
* Remove log
* Let it const
* Fix(RecentNotes): Prevent folder pages from always appearing first
Pass prioritizeFolders=false to byDateAndAlphabetical in RecentNotes to sort strictly by date/alphabetical order, fixing issue #1901.
* refactor: split sorting functions for clarity
- Split byDateAndAlphabetical into two separate functions\n- byDateAndAlphabetical: sorts strictly by date and alphabetically\n- byDateAndAlphabeticalFolderFirst: sorts with folders first\n- Updated RecentNotes to use date-only sorting
* Fix(PageList): keep byDateAndAlphabeticalFolderFirst as the default sorting order for PageList
* fix(ogImage): update socialImage path to include base URL if defined
* feat(path): add function to check if a file path is absolute
* fix(ogImage): handle absolute paths for user defined og image paths
* docs(CustomOgImages): update socialImage property to accept full URLs
* fix(ogImage): typo
* fix(ogImage): improve user-defined OG image path handling
* Update docs/plugins/CustomOgImages.md
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Update quartz/plugins/emitters/ogImage.tsx
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* refactor(path): remove isAbsoluteFilePath function
* fix(ogImage): update user-defined OG image path handling to support relative URLs
* feat(ogImage): enhance user-defined OG image path handling with absolute URL support
* refactor(ogImage): remove debug log for ogImagePath
* feat(path): add isAbsoluteURL function and corresponding tests
* refactor(path): remove unused URL import for isomorphic compatibility
---------
Co-authored-by: Karim H <karimh96@hotmail.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* fix(transformer): find last modified date form commit on submodule
when the content folder has a submodule git, the relative path start in content folder and not root folder of quartz
* fix(transformer): use path.relative for improved path handling in last modified date calculation
* fix(transformer): keep find file from relative path of repo workdir
* fix(transformer): use variable for repository workdir
use default value if repo.workdir is undefined to user fullFp value
* fix(explorer): vertically center the Explorer toggle under mobile view
* Added a separate title font configuration
* Added googleSubFontHref function
* Applied --titleFont to PageTitle
* Made googleFontHref return array of URLs
* Dealing with empty and undefined title
* Minor update
* Dealing with empty and undefined title
* Refined font inclusion logic
* Adopted the googleFontHref + googleFontSubsetHref method
* Adaptively include font subset for PageTitle
* Restored default config
* Minor changes on configuration docs
* Formatted source code
* checkpoint
* make emitters async generators
* fix
* custom font spec
* replace spinner, use disk cache for fonts
* use readline instead
* make og images look nice
* start work on client side explorer
* fix tests
* fmt
* generic test flag
* add prenav hook
* add highlight class
* make flex more consistent, remove transition
* open folders that are prefixes of current path
* make mobile look nice
* more style fixes
* Added to the documentation which values of frontmatter are referenced.
* The source code I was looking at seemed to be out of date and the wrong listings were corrected.
* The list of frontmatter was moved to Frontmatter.md and a link was added.
On the surface it seems that only google and plausible scripts handle
the SPA correctly - but I don't know if maybe others handle
window.history API themselves somehow or something like that.
However, I am trying out goatcounter and in it's docs I see that it
does no special SPA handling, so this has to be fixed.
Just doing the dynamic script thing on every nav seems to do the trick.
The script is not "spa-preserve" so they wouldn't accumulate - and when
I tried the "spa-preserve" + call goatcounter api route it didn't quite
work, they actually did accumulate
With markdownLinkResolution: "shortest", aka "+/- how Obsidian does it"
and given pages A and nested/B which has an alias Z, if you try to link
from A using [[Z]] it wouldn't work and get 404.
This is caused by alias slugs (nested/Z in this case, emitted by
AliasRedirects) not being present in the `allSlugs` list which is used
by the link transformer.
The fix is to compute the alias slugs in the frontmatter transformer
and add them to `allSlugs` there.
Also we store them in file data to avoid recomputing them when emitting
alias redirect pages.
Fixes#904
Note: given how currently the markdown/html transformers are ordered
this doesn't really work.
Given pages A and nested/B which has an alias Z, here's the order which
currently happens:
md-transformers(A) => html-transformers(A) =>
md-transformers(B) => html-transformers(B)
Since the nested/Z slug will get added when md-transformers(B) are run,
but the slugs are used by html-transformers(A) when resolving it's
links - the link [[Z]] in A will still 404
A fix for this is to split the parser into two stages - first apply the
md-transformers to all files, and only then apply html-transformers to
all files.
I did just that in a different commit, which is needed for this one to
work correctly.
A final breadcrumb has an empty href, linking to the current page, but
the relative url normalization method missed those, making the link
appear broken in search previews and popovers.
Fixes#1690
If there is no `npm.exe` on the system, but
instead an `npm.cmd`, then node won't find
the `npm` executable when calling `spawnSync`.
This occurs frequently when using node package
managers on Windows.
See the node documentation for `.bat` and `.cmd`
files here.
<https://nodejs.org/api/child_process.html#spawning-bat-and-cmd-files-on-windows>.
* [OFM] Allow for dashes in custom callout label
For compatibility with Obsidian's behavior, a custom callout like
[!see-also] is possible. Previously, this was parsed by Quartz as a
callout “see” with metadata “-also”. Instead, this is should be a
callout “see-also” with title “See also” (capitalization + replace
dashes by spaces).
* prettier
* feat: add a config option for a pageTitleSuffix
* Run Prettier on Head.tsx
* Make pageTitleSuffix optional
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
---------
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
* Responsive design grid
* Addressed PR feedback
* Bump Quartz version 4.3.1 => 4.4.0
* Moved page-header into center
* Updated docs with new layouts
* Sync updated version number with package-lock
* Table of Content scrollbar auto
* Reset node_modules
* Updated layout images
* Fixed tablet layout
* Finilazed layout images
* FIX: Reload graph after a theme change
* FIX: Reload graph after a theme change - comment updated
* FIX: Reload graph after a theme change - comment updated
* FIX: Reload graph after a theme change
* fix: Reload graph after a theme change
* Use a `<button>` for theme toggle
* docs: Adds back Xinyang's cs garden to showcase (#1323)
adding back my garden which was deleted from the cleanup showcase
* feat(toc,explorer): add accessibility for toggle (#1327)
* Restore focus highlight on explorer toggle button.
Remove `unset: all` declaration causing `outline`
property to be unset. This allows the default
browser focus highlight to be shown.
* Fix semantics of expandable sections (explorer, toc).
This adds the appropriate aria attributes for the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-image-description/#javascriptandcsssourcecode) and uses `visibility: hidden` to remove the hidden elements from the focus order without disrupting the animations. Further work is needed on the tree view nodes.
* Run prettier for SCSS files.
* feat: custom global latex macros (closes#1325)
* chore: ts fixes
* docs: recommend at least node 20 in gh
* fix: unmemoize explorer on rebuild (closes#1077)
* fix: pass buildId to worker
* Fix theme button DOM hierarchy and styles
* Restore functionality of theme button
* `aria-label` on theme svgs so their accessible labels are included in button content
---------
Co-authored-by: Xinyang Yu <47915643+xy-241@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Add a wrapper span to dates in PageList.
This means there is a placeholder when date is not specified, so the values in grid-template-columns always line up correctly.
* Use a <div> instead -- better practice to stick to block elements.
* Use a `<button>` for search
* Fix search button styles to match preexisting styling
* Remove additional native button properties.
* Invoke search button on click or keyboard.
* Reorganize search button DOM hierarchy
* Restore focus to the search button when exiting the search overlay
* Run prettier on Search.tsx
* Restore focus highlight on explorer toggle button.
Remove `unset: all` declaration causing `outline`
property to be unset. This allows the default
browser focus highlight to be shown.
* Fix semantics of expandable sections (explorer, toc).
This adds the appropriate aria attributes for the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-image-description/#javascriptandcsssourcecode) and uses `visibility: hidden` to remove the hidden elements from the focus order without disrupting the animations. Further work is needed on the tree view nodes.
* Run prettier for SCSS files.
- [Major] Changed `hash` passed to `querySelector` to `decodeURIComponent(hash)` to fix the issue where non-English anchors were not correctly positioning the popover content to the corresponding title.
- [Minor] Updated the type hint from `HTMLLinkElement` to `HTMLAnchorElement` as the passed element is an `<a>` element, not a `<link>` element (reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement).
* replace .gitlab-ci.yml example with more reliable and faster ci job
* literally removing 1 space, inside a code block, in docs, just to make prettier not cry
simplifies slug from FullSlug to SimpleSlug before storing it in the visited pages list in memory
this leads to "index" page and "folder/index", "tags/tag/index" being stored a "/", "folder/" and "tags/tag/" respectively in the list of visited pages.
this ensures that the homepage is rightfully coloured as a visited page in the "color" function of the graph
@ -47,6 +48,10 @@ In addition to those I cited, here are other resources I find useful.
* [Jisho](https://jisho.org/), an online dictionary
* [Tatoeba](https://tatoeba.org), for its sentences database
### Apps
- [Anki](https://apps.ankiweb.net/), the spaced repetition software
## Any errors?
If you find any error, please do contact me! I wrote the examples by myself, so they might not be accurate. You can find my website in the footer of any page of this website. Thanks!
> Why did you turn on the AC? It's not that hot right now.
## わずかに
Means "slightly", "only", "a little". Used at the beginning of a phrase to indicate a particularly small amount of something.
> [!info] Example
> いつでも{隣|となり}の{人|ひと}の{音|おと}が==わずかに=={聞|き}こえます。
> You can always hear the neighbours a little bit.
## No matter how
### どんなに~ても
@ -71,6 +79,42 @@ Means "no matter what".
> ==どうしても=={花火|はなび}に行きたい。
> No matter what, I want to go see the fireworks.
## At least
### 少なくとも
{少|すく}なくとも means "at least". Implies an obligation.
> [!info] Example
> ==少なくとも==もっと{三人|さんにん}が{必要|ひつよう}です。
> At least three more people are required.
### せめて
Means "at least". Implies a request.
> [!info] Example
> ==せめて=={週|しゅう}に{一度|いちど}{勉強|べんきょう}してください。
> Please study at least once a week.
## だけましだ
<divclass="usage">
<divclass="left">
<p><spanclass="box">V</span></p>
<p><spanclass="box">い-Adj</span></p>
<p><spanclass="box">な-Adj + な</span></p>
<p><spanclass="box">N + である</span></p>
</div>
<pclass="right">+ だけましだ</p>
</div>
Means "should be grateful for", "at least", "better than". Means that while something is not good, or not as good as one wishes, it's still better than nothing or an alternative.
> [!info] Examples
> {給料|きゅうりょう}がちょっとすくない、{就職|しゅうしょく}==だけましだ==。
> The salary is a little low, but at least I found a job.
## Very
### てしょうがない・てしかたがない
@ -85,13 +129,11 @@ Means "no matter what".
</div>
Means both "extremely" and "can't be helped".
See [[Can't help - doesn't matter#てしょうがない・てしかたがない]]
> [!info] Example
> {今日|きょう}は{暑|あつ}く==てしょうがない==。
> Today is extremely hot.
>
> {隣|となり}の{会話|かいわ}は{聞|き}き==ってしょうがない==。
> I can't help but to listen to the conversion next door.
### なかなか
@ -148,7 +190,7 @@ Means "as much as possible". なるべく is a bit softer than できるだけ.
</div>
Means "so much... that".
Adjectives nominalized can be used as nouns. See [[Transformation#~さ adjective as noun]] and [[Transformation#~み adjective as noun]].
Nominalized adjectives can be used as nouns. See [[Transformation#~さ adjective as noun]] and [[Transformation#~み adjective as noun]].
> [!info] Example
> おいしさの==あまり==、このレストラン{毎日|まいにち}行きたい。
@ -176,3 +218,61 @@ Means "so much... that". A version of あまり that can also be used with adjec
に{相|そう}{違|い}ない means "certain that". It is very formal.
> [!info] Example
> 彼女は{必|かなら}ず{悲|かな}しい==に相違ない==。
> I'm certain that she's sad.
## Uncertain: というものではない
Means "there is no guarantee that", "not necessarily".
> [!info] Example
> {高|}い{商品|しょうひん}を{買|か}って{良質|りょうしつ}==というものではない==。
> Buying a product that is expensive does not guarantee that it is of good quality.
## Not always: とは限らない
<divclass="usage">
@ -41,23 +65,22 @@
<pclass="right">+ わけがない</p>
</div>
Means that there is no way, "impossible".
Means that there is no way, "impossible". The nuance is that the way of doing is unknown, thus impossible for the subject. But someone else might know.
It can also mean that the will to do is not present, especially with する.
> [!info] Example
> {全部|ぜんぶ}食べられる==わけがない==よ!
> It is impossible to eat it all!
> もうこんな時間。帰り==わけがない==。
> It's already this late. I have no way to go back home (I don't know how).
### ようがない・ようもない
🛠 Todo: understand the nuance between わけがない and ようがない.
🛠 Todo: understand the nuance between ようがない and ようもない.
~{様|よう}がない means that there is no way, "impossible".
Works by removing ~ます from a verb and adding ようがない・ようもない.
The nuance it that it is impossible in general. With する, it can mean the same as わけがない, i.e. "I don't know how to".
> [!info] Example
> もうこんな時間。帰り==ようがない==。
> It's already this late. I have no way to go back home.
@ -130,6 +130,54 @@ It focuses on the end of the action rather than the process.
> この13時間{飛行|ひこう}で{座|すわ}り==っぱなし==でした。
> I sat the entire time on this 13 hours flight.
## ~かねる
~かねる means "unable to do", due to an external circumstance. It is polite.
> [!info] Example
> ごめんなさい、それをでき==かねます==。
> I'm sorry, I cannot do that.
## ~っこない
~っこない means that something is not possible.
> [!info] Example
> {全然|ぜんぜん}{勉強|べんきょう}しなかった。。。{合格|ごうかく}し==っこない==よ。
> I did not study at all... There's no way I'll pass.
## ~抜く
~{抜|ぬ}く means to do something to the end, or completely. The nuance is that someone tried hard and has made an effort to achieve this result.
> [!info] Example
> それは{毎日|まいにち}やり==抜く=={無理|むり}ですよ。
> You cannot do this every day.
## ~給え
~{給|たま}え is used for a light order. It is used by someone of higher rank to someone of lower rank.
> [!info] Example
> ここに{座|すわ}り==給え==。
> Seat here.
## ~つつ(も)
~つつ means that something happens at the same time as another action. Adding も adds the meaning of "even": "even while doing".
> [!info] Example
> 食べ==つつ==、飲みましょう。
> While eating, let's drink.
## ~つつある
~つつある means that something is in an ongoing process or action, in a similar manner as てくる.
> [!info] Example
> {雪|ゆき}が{降|ふ}り==つつある==。
> It is snowing.
## ~込む
~{込|こ}む has multiple meanings depending on the verb. Sometimes it is idiomatic and so it cannot exactly be guessed. However, there are some broad categories.
Means "as", "in the role of". The と particle implies a result.
More used for objective judgments.
Used with nouns.
> [!info] Example
> {厳|きび}しいのに{先生|せんせい}==としては==あまり{良|よ}くない。
> Because he is strict, he's not a very good teacher.
> 彼はカメラマン==としては==いい{仕事|しごと}をする。
> As a cameraman, he does a good job.
## にしては
🛠 Todo: nuance.
Means "considering", "for". The に particle implies a simultaneous existence.
More used to give personal opinions.
The difference with としては resides in the fact that this is used to make a contrast between the general image associated with something and what we're describing.
Used with verbs and nouns.
> [!info] Example
> 田中さんは{父|ちち}==にしては=={最低|さいてい}です。
> As a father, Tanaka-san is the worst.
> このカバンは安い==にしては==悪くない。
> This bag might be cheap, it is not bad.
## としても
🛠 Todo: nuance.
Means "assuming", "even if".
Means "assuming", "even if". It has the same meaning as [[TeF (4) - even if#Even if ても・でも]], but bolder.
> [!info] Example
> 私==としても==出来ます。
@ -36,13 +29,11 @@ Means "assuming", "even if".
## にしても
🛠 Todo: nuance.
Means "even if", "even though".
Means "even if", "even though". It has the same meaning as [[🔰 Particles (1)#も]], but bolder. In some rare written cases, it has the same meaning as としても.
> I brush my teeth twice a day as recommended by my dentist.
## に伴って
### に伴って
に{伴|ともな}って also has the meaning of a an instantaneous change: when the first part changes, the second part also changes instantly. The first part is the reason of it changing.
@ -93,11 +84,11 @@ This form also has the meaning of "in accordance to". It doesn't express change.
> As the Olympics are held, transportations cost have increased.
## と共に
### と共に
と{共|とも}に has 3 other meanings.
### Almost at the same time
#### Almost at the same time
It is also used for two actions that happens at approximately the same time. The two actions do not have to be related. They also don't have to be specifically about change.
@ -105,7 +96,7 @@ It is also used for two actions that happens at approximately the same time. The
> {鳥|とり}は{鳴|な}き{声|ごえ}をする==と共に=={風|かぜ}が{吹|ふ}く。
> The bird sings and the wind blows.
### Together with
#### Together with
It can also mean "together with". It is much more formal than {一緒|いっしょ}に.
@ -113,7 +104,7 @@ It can also mean "together with". It is much more formal than {一緒|いっし
> My mother can speak Portuguese as well as Spanish.
## おまけに
Means "in addition". Used for emphasis for similar qualities (positive, negative). Used orally.
> [!info] Examples
> {暑|あつ}くて==おまけに==エアコンが{壊|こわ}れてしまった。
> It was hot, and to make matters worse, the air conditioning broke.
## しかも
Means "moreover", "what's more". Talks about a same subject, for objective information, implying that A and B exist at the same time. It is similar to おまけに, but used for writing.
> [!info] Examples
> このレストランはとても{美味|おい}しいね。==しかも==、{安|やす}いよ!
> This restaurant is delicious. What's more, it's cheap!
## 上に
<divclass="usage">
<divclass="left">
<p><spanclass="box">V</span></p>
<p><spanclass="box">い-Adj</span></p>
<p><spanclass="box">な-Adj + な</span></p>
<p><spanclass="box">N + の</span></p>
</div>
<pclass="right">+ 上(に)</p>
</div>
{上|うえ}に means "and also", "in addition", "as well". Used with similar qualities (positive with positive, negative with negative).
> [!info] Examples
> この{家|いえ}は{狭|せま}い==上に=={家賃|やちん}は{高|たか}すぎる。
> This house is small, and the rent is too expensive.
## その上
その{上|うえ} means "besides", "in addition". Means the same as 上に, but with two separate sentences.
> [!info] Examples
> この{家|いえ}は{狭|せま}い。==その上==、{家賃|やちん}は{高|たか}すぎる。
> This house is small. In addition, the rent is too expensive.
## に加えて
に{加|くわ}えて means "in addition to". It is formal, and often used in business settings.
Used with nouns.
> [!info] Examples
> {今年|ことし}はピンポン==に加えて==バドミントンを{教|おし}えます。
> This year, I'll be teaching badminton in addition to ping pong.
## Not only, but also
### はもちろん
<divclass="usage">
<divclass="">
<p><spanclass="box">N</span></p>
</div>
<pclass="r">+ はもちろん + </p>
<divclass="">
<p><spanclass="box">phrase</span></p>
</div>
<pclass="r">+ も・さえ</p>
</div>
Means "not only but also", "not to mention". The most common form.
> [!info] Examples
> このゲームセンターにはゲーム==はもちろん==ボウリング==も==あります。
> This game center not only has games but also bowling.
### はもとより
Means "not only but also". Similar meaning than はもちろん. Conveys a sense of continuity. Used mostly in writing.
Used with nouns.
> [!info] Examples
> {雪|ゆき}が{多|おお}いので、{電車|でんしゃ}==はもとより==タクシーもない。
> There is so much snow that there are no trains, let alone taxis.
> Please bring a pencil and an eraser to the exam.
### て connecting
Used for a list that is exhaustive. Connects verbs.
@ -72,6 +81,15 @@ Used with nouns.
> お金がないのでカフェ**や**レストラン==など=={払|はら}えない。
> I can't pay things like cafes or restaurant (etc.) because I have no money.
### といった
Used to describe typical examples: "things as", "like", "such as". It is casual. It has the same meaning as など.
Used with nouns.
> [!info] Examples
> フランスとカナダ==といった=={国|くに}はフランス{語|ご}を{話|はな}す。
> Countries such as France and Canada speak French.
### とか~とか
Used for a list that is unexhaustive. Translates to "and", "among other things". More casual than や. Ending a sentence with とか can soften the meaning. Can also be used to quote someone.
@ -127,70 +145,34 @@ It can be used to emphasize something when used at the end of a sentence.
> 言ってない==し==!
> I never said that!
### やら~やら
<divclass="usage">
<divclass="left">
<p><spanclass="box">V</span></p>
<p><spanclass="box">い-Adj</span></p>
<p><spanclass="box">N</span></p>
</div>
<pclass="right">+ やら + B + やら</p>
</div>
This form is unexhaustive and can be translated as "and", "among other things".
Means "even if", "even though". It has the same meaning as [[#て-form even if]].
> [!info] Example
> {今|いま}で行==ったって==、{間|ま}に{合|あ}わない。
> Even if you go now, you won't make it in time.
## それでも
@ -17,7 +35,12 @@ Means "but still", "even so", "anyway".
> 雨が{降|ふ}っていた、==それでも==出かけていた。
> It was raining, but I still went out.
## くせに
## のに
Means "although", "even tough". Cannot be an hypothesis, must be a confirmed fact. This, it works with past tense.
See [[Connectors#のに#Even tough]].
## くせに・くせして
<divclass="usage">
<divclass="left">
@ -26,14 +49,36 @@ Means "but still", "even so", "anyway".
<p><spanclass="box">な-Adj + な</span></p>
<p><spanclass="box">N + の</span></p>
</div>
<pclass="right">+ くせに</p>
<pclass="right">+ くせに・くせして</p>
</div>
Means "despite", "even tough". Has a negative connotation.
Means "despite", "even tough". Has a negative connotation when a situation is not what was expected. Regularly used to talk about characteristics. Like のに, cannot be an hypothesis.
くせして is more familiar than くせに.
> [!info] Example
> {掃除|そうじ}すると言った==くせに==、まだ{汚|きたな}いよ。
> You said you would clean it up, but it's still dirty.
>
> {子供|こども}の==くせに==、{数学|すうがく}が{得意|とくい}です。
> Despite a child, he is good at math.
## ながらも
Means "even while", "despite". It is used to express that while something is one state, something else. Cannot be used for an hypothesis: it is something that is happening right now.
See also [[Time - during#ながら]].
> [!info] Example
> {病気|びょうき}==ながらも==、パーティーに行くつもりです。
> Although I am sick, I'm planning to go to party.
## Summing up
* ==ても==, ==「と・に」しても==, ==たって== and ==それでも== have the same meaning.
* ==「と・に」しても== have a bolder meaning.
* ==それでも== breaks up the phrase.
* ==のに== cannot be used for conditional situations.
* ==くせに== talks about disappointment or characteristics.
* ==ながらも== talks about something happening right now.
## たとえ~ても
@ -53,24 +98,6 @@ Means "even if X is the case". Used to present possibilities.
> ==たとえ=={疲|つか}れ==ても==、もうちょっと{起|お}きている。
> Even if I'm tired, I'll stay up a little longer.
It is a polite request that is translated as "please do". See Conjugation [[Basics]] ("command").
It is a polite request that is translated as "please do".
In casual speech, can be shortened to て.
> [!info] Example
@ -49,8 +49,17 @@ It is used with verbs by removing the ます and adding なさい. In casual con
## ように言う
<divclass="usage">
<pclass="r">V +</p>
<divclass="">
<p><spanclass="box">ように</span></p>
</div>
<pclass="r">+ V 「言う・命じる・頼む・...」</p>
</div>
It means "to tell", "to request", "to order".
It is form by added ように{言|い}う to a verb. The verb {頼|たの}む can be used for requests, while {命|めい}じる can be used for order. The verb {言|い}う can tell the three meanings depending on the tone.
The verb {頼|たの}む can be used for requests, while {命|めい}じる can be used for order. The verb {言|い}う can tell the three meanings depending on the tone. Other similar verbs can be used ({注意|ちゅうい}する, {進|すす}む, etc).
@ -73,6 +73,14 @@ Used with verbs that expresses change.
> {禁煙|きんえん}の{場所|ばしょ}は{増|ふ}えている==一方です==。
> The number of places where smoking is prohibited keeps increasing.
## ばかりだ
Means "to continue to", in a negative direction. Used with verbs in the dictionary form (る), that describe a form of change. Can also be used as ばっかり, ばっか, ばかし, and ばっかし instead of ばかり.
@ -37,7 +37,7 @@ Can also be used to talk about a distance between two physical places or the tim
A first meaning is similar to {間|あいだ} (while), but with intentionality.
> [!info] Example
> 電車に{乗|の}った==間に==、本を読みました。
> 電車に{乗|の}っている==間に==、本を読みました。
> While I was on the train, I read a book.
A second meaning is a statement of something that happened during a time period, independently of your actions.
@ -56,7 +56,7 @@ Contrary to 間, it doesn't include the whole time period. So 間に means that
<pclass="r"> + ながら + ...</p>
</div>
Means "while", "simultaneously". The difference with ついでに is that here the main action is the second one.
Means "while", "simultaneously". The difference with ついでに is that here the main action is the second one. Happens at the same time.
> [!info] Example
> {歩|ある}き==ながら=={電話|でん|わ}を見ています。
@ -73,12 +73,30 @@ Means "while", "simultaneously". The difference with ついでに is that here t
<pclass="right">+ ついでに</p>
</div>
Means "while", "at the same time". The difference with ながら is that here the main action is the first one.
Means "while", "at the same time". The difference with ながら is that here the main action is the first one. An opportunity of doing something during the occurrence of the first one (but not for the entire time).
> [!info] Example
> スーパーに行く==ついでに==、おにぎりを{買|か}ってくれませんか。
> While you're going to the supermarket, could you bring onigiri?
## と同時に
<divclass="usage">
<divclass="left">
<p><spanclass="box">V (る)</span></p>
<p><spanclass="box">い-Adj</span></p>
<p><spanclass="box">な-Adj + である</span></p>
<p><spanclass="box">N</span></p>
</div>
<pclass="right">+ と同時に</p>
</div>
と{同時|どうじ}に means "at the same time as", "while". Contrary to ながら, it is used for something that happens at a precise moment, not during the whole time.
> [!info] Example
> {電車|でんしゃ}に{乗|の}っている==と同時に==、おじいさんが{落|お}ちた。
> While on the train, an old man fell off.
## 中
{中|ちゅう}・{中|じゅう} means different things depending on its pronunciation:
@ -110,6 +128,25 @@ Means "while". The nuance is that the time is optimal and should be taken advant
> {晴|は}れる==うちに=={散歩|さんぽ}しましょう。
> Let's take a walk while the weather is nice.
## 限り
<divclass="usage">
<divclass="left">
<p><spanclass="box">V (る・た・ない・ている・)</span></p>
<p><spanclass="box">N + である</span></p>
</div>
<pclass="right">+ 限り</p>
</div>
{限|かぎ}り means "as long as", "while". Also means "limited to".
@ -25,10 +25,11 @@ The following sections will go into detail for what methods can be implemented f
-`BuildCtx` is defined in `quartz/ctx.ts`. It consists of
-`argv`: The command line arguments passed to the Quartz [[build]] command
-`cfg`: The full Quartz [[configuration]]
-`allSlugs`: a list of all the valid content slugs (see [[paths]] for more information on what a `ServerSlug` is)
-`allSlugs`: a list of all the valid content slugs (see [[paths]] for more information on what a slug is)
-`StaticResources` is defined in `quartz/resources.tsx`. It consists of
-`css`: a list of URLs for stylesheets that should be loaded
-`css`: a list of CSS style definitions that should be loaded. A CSS style is described with the `CSSResource` type which is also defined in `quartz/resources.tsx`. It accepts either a source URL or the inline content of the stylesheet.
-`js`: a list of scripts that should be loaded. A script is described with the `JSResource` type which is also defined in `quartz/resources.tsx`. It allows you to define a load time (either before or after the DOM has been loaded), whether it should be a module, and either the source URL or the inline content of the script.
-`additionalHead`: a list of JSX elements or functions that return JSX elements to be added to the `<head>` tag of the page. Functions receive the page's data as an argument and can conditionally render elements.
## Transformers
@ -37,7 +38,7 @@ Transformers **map** over content, taking a Markdown file and outputting modifie
An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. It can optionally implement a `partialEmit` function for incremental builds.
- `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
- `partialEmit` is an optional function that enables incremental builds. It receives information about which files have changed (`changeEvents`) and can selectively rebuild only the necessary files. This is useful for optimizing build times in development mode. If `partialEmit` is undefined, it will default to the `emit` function.
- `getQuartzComponents` declares which Quartz components the emitter uses to construct its pages.
Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `write` function in `quartz/plugins/emitters/helpers.ts` if you are creating files that contain text. `write` has the following signature:
@ -234,7 +249,7 @@ export type WriteOptions = (data: {
// the build context
ctx: BuildCtx
// the name of the file to emit (not including the file extension)
This part of the configuration concerns anything that can affect the whole site. The following is a list breaking down all the things you can configure:
- `pageTitle`: title of the site. This is also used when generating the [[RSS Feed]] for your site.
- `pageTitleSuffix`: a string added to the end of the page title. This only applies to the browser tab title, not the title shown at the top of the page.
- `enableSPA`: whether to enable [[SPA Routing]] on your site.
- `enablePopovers`: whether to enable [[popover previews]] on your site.
- `analytics`: what to use for analytics on your site. Values can be
- `null`: don't use analytics;
- `{ provider: 'google', tagId: '<your-google-tag>' }`: use Google Analytics;
- `{ provider: 'plausible' }` (managed) or `{ provider: 'plausible', host: '<your-plausible-host>' }` (self-hosted): use [Plausible](https://plausible.io/);
- `{ provider: 'plausible' }` (managed) or `{ provider: 'plausible', host: 'https://<your-plausible-host>' }` (self-hosted, make sure to include the `https://` protocol prefix): use [Plausible](https://plausible.io/);
- `{ provider: 'tinylytics', siteId: '<your-site-id>' }`: use [Tinylytics](https://tinylytics.app/);
- `{ provider: 'cabin' }` or `{ provider: 'cabin', host: 'https://cabin.example.com' }` (custom domain): use [Cabin](https://withcabin.com);
- `{provider: 'clarity', projectId: '<your-clarity-id-code'}`: use [Microsoft clarity](https://clarity.microsoft.com/). The project id can be found on top of the overview page.
- `locale`: used for [[i18n]] and date formatting
- `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
- This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.
@ -38,11 +41,12 @@ This part of the configuration concerns anything that can affect the whole site.
- `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
- `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
- `theme`: configure how the site looks.
- `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
- `cdnCaching`: if `true` (default), use Google CDN to cache the fonts. This will generally be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
- `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
- `header`: Font to use for headers
- `code`: Font for inline and block quotes.
- `body`: Font for everything
- `title`: font for the title of the site (optional, same as `header` by default)
- `header`: font to use for headers
- `code`: font for inline and block quotes
- `body`: font for everything
- `colors`: controls the theming of the site.
- `light`: page background
- `lightgray`: borders
@ -52,6 +56,7 @@ This part of the configuration concerns anything that can affect the whole site.
- `secondary`: link colour, current [[graph view|graph]] node
- `tertiary`: hover states and visited [[graph view|graph]] nodes
- `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]]
- `textHighlight`: markdown highlighted text background
## Plugins
@ -99,8 +104,30 @@ transformers: [
]
```
Some plugins are included by default in the[ `quartz.config.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz.config.ts), but there are more available.
Some plugins are included by default in the [`quartz.config.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz.config.ts), but there are more available.
You can see a list of all plugins and their configuration options [[tags/plugin|here]].
If you'd like to make your own plugins, see the [[making plugins|making custom plugins]] guide.
## Fonts
Fonts can be specified as a `string` or a `FontSpecification`:
Quartz uses [rehype-citation](https://github.com/timlrx/rehype-citation) to support parsing of a BibTex bibliography file.
Under the default configuration, a citation key `[@templeton2024scaling]` will be exported as `(Templeton et al., 2024)`.
> [!example]- BibTex file
>
> ```bib title="bibliography.bib"
> @article{templeton2024scaling,
> title={Scaling Monosemanticity: Extracting Interpretable Features from Claude 3 Sonnet},
> author={Templeton, Adly and Conerly, Tom and Marcus, Jonathan and Lindsey, Jack and Bricken, Trenton and Chen, Brian and Pearce, Adam and Citro, Craig and Ameisen, Emmanuel and Jones, Andy and Cunningham, Hoagy and Turner, Nicholas L and McDougall, Callum and MacDiarmid, Monte and Freeman, C. Daniel and Sumers, Theodore R. and Rees, Edward and Batson, Joshua and Jermyn, Adam and Carter, Shan and Olah, Chris and Henighan, Tom},
> By default, the references will be included at the end of the file. To control where the references to be included, uses `[^ref]`
>
> Refer to `rehype-citation` docs for more information.
## Customization
Citation parsing is a functionality of the [[plugins/Citations|Citation]] plugin. **This plugin is not enabled by default**. See the plugin page for customization options.
Quartz emits an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
> [!info]
> After deploying, the generated RSS link will be available at `https://${baseUrl}/index.xml` by default.
>
> The `index.xml` path can be customized by passing the `rssSlug` option to the [[ContentIndex]] plugin.
## Configuration
This functionality is provided by the [[ContentIndex]] plugin. See the plugin page for customization options.
[Roam Research](https://roamresearch.com) is a note-taking tool that organizes your knowledge graph in a unique and interconnected way.
Quartz supports transforming the special Markdown syntax from Roam Research (like `{{[[components]]}}` and other formatting) into
regular Markdown via the [[RoamFlavoredMarkdown]] plugin.
```typescript title="quartz.config.ts"
plugins: {
transformers: [
// ...
Plugin.RoamFlavoredMarkdown(),
Plugin.ObsidianFlavoredMarkdown(),
// ...
],
},
```
> [!warning]
> As seen above placement of `Plugin.RoamFlavoredMarkdown()` within `quartz.config.ts` is very important. It must come before `Plugin.ObsidianFlavoredMarkdown()`.
## Customization
This functionality is provided by the [[RoamFlavoredMarkdown]] plugin. See the plugin page for customization options.
@ -9,6 +9,7 @@ A backlink for a note is a link from another note to that note. Links in the bac
## Customization
- Removing backlinks: delete all usages of `Component.Backlinks()` from `quartz.layout.ts`.
- Hide when empty: hide `Backlinks` if given page doesn't contain any backlinks (default to `true`). To disable this, use `Component.Backlinks({ hideWhenEmpty: false })`.
Quartz also has the ability to hook into various providers to enable readers to leave comments on your site.
![[giscus-example.png]]
As of today, only [Giscus](https://giscus.app/) is supported out of the box but PRs to support other providers are welcome!
## Providers
### Giscus
First, make sure that the [[setting up your GitHub repository|GitHub]] repository you are using for your Quartz meets the following requirements:
1. The**repository is[public](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/setting-repository-visibility#making-a-repository-public)**, otherwise visitors will not be able to view the discussion.
2. The**[giscus](https://github.com/apps/giscus)app is installed**, otherwise visitors will not be able to comment and react.
3. The**Discussions feature is turned on**by[enabling it for your repository](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository).
Then, use the [Giscus site](https://giscus.app/#repository) to figure out what your `repoId` and `categoryId` should be. Make sure you select `Announcements` for the Discussion category.
![[giscus-repo.png]]
![[giscus-discussion.png]]
After entering both your repository and selecting the discussion category, Giscus will compute some IDs that you'll need to provide back to Quartz. You won't need to manually add the script yourself as Quartz will handle that part for you but will need these values in the next step!
![[giscus-results.png]]
Finally, in `quartz.layout.ts`, edit the `afterBody` field of `sharedPageComponents` to include the following options but with the values you got from above:
```ts title="quartz.layout.ts"
afterBody: [
Component.Comments({
provider: 'giscus',
options: {
// from data-repo
repo: 'jackyzha0/quartz',
// from data-repo-id
repoId: 'MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg',
// from data-category
category: 'Announcements',
// from data-category-id
categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
// from data-lang
lang: 'en'
}
}),
],
```
### Customization
Quartz also exposes a few of the other Giscus options as well and you can provide them the same way `repo`, `repoId`, `category`, and `categoryId` are provided.
```ts
type Options = {
provider: "giscus"
options: {
repo: `${string}/${string}`
repoId: string
category: string
categoryId: string
// Url to folder with custom themes
// defaults to 'https://${cfg.baseUrl}/static/giscus'
// where to put the comment input box relative to the comments
// defaults to 'bottom'
inputPosition?: "top" | "bottom"
// set your preference language here
// defaults to 'en'
lang?: string
}
}
```
#### Custom CSS theme
Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
```ts
afterBody: [
Component.Comments({
provider: 'giscus',
options: {
// Other options
themeUrl: "https://example.com/static/giscus", // corresponds to quartz/static/giscus/
lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/giscus/
darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/giscus/
}
}),
],
```
#### Conditionally display comments
Quartz can conditionally display the comment box based on a field `comments` in the frontmatter. By default, all pages will display comments, to disable it for a specific page, set `comments` to `false`.
folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click)
folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open")
useSavedState: true, // whether to use local storage to save "state" (which folders are opened) of explorer
// Sort order: folders first, then files. Sort folders and files alphabetically
@ -45,26 +43,30 @@ Want to customize it even more?
- Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
- (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
- Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
@ -100,41 +101,23 @@ For more information on how to use `sort`, `filter` and `map`, you can check [Ar
Type definitions look like this:
```ts
sortFn: (a: FileNode, b: FileNode) => number
filterFn: (node: FileNode) => boolean
mapFn: (node: FileNode) => void
type SortFn = (a: FileTrieNode, b: FileTrieNode) => number
type FilterFn = (node: FileTrieNode) => boolean
type MapFn = (node: FileTrieNode) => void
```
> [!tip]
> You can check if a `FileNode` is a folder or a file like this:
>
> ```ts
> if (node.file) {
> // node is a file
> } else {
> // node is a folder
> }
> ```
## Basic examples
These examples show the basic usage of `sort`, `map` and `filter`.
### Use `sort` to put files first
Using this example, the explorer will alphabetically sort everything, but put all **files** above all **folders**.
Using this example, the explorer will alphabetically sort everything.
```ts title="quartz.layout.ts"
Component.Explorer({
sortFn: (a, b) => {
if ((!a.file && !b.file) || (a.file && b.file)) {
return a.displayName.localeCompare(b.displayName)
}
if (a.file && !b.file) {
return -1
} else {
return 1
}
},
})
```
@ -147,42 +130,47 @@ Using this example, the display names of all `FileNodes` (folders + files) will
Component.Explorer({
mapFn: (node) => {
node.displayName = node.displayName.toUpperCase()
return node
},
})
```
### Remove list of elements (`filter`)
Using this example, you can remove elements from your explorer by providing an array of folders/files using the `omit` set.
Using this example, you can remove elements from your explorer by providing an array of folders/files to exclude.
Note that this example filters on the title but you can also do it via slug or any other field available on `FileTrieNode`.
```ts title="quartz.layout.ts"
Component.Explorer({
filterFn: (node) => {
// set containing names of everything you want to filter out
const omit = new Set(["authoring content", "tags", "hosting"])
return !omit.has(node.name.toLowerCase())
const omit = new Set(["authoring content", "tags", "advanced"])
// can also use node.slug or by anything on node.data
// note that node.data is only present for files that exist on disk
// (e.g. implicit folder nodes that have no associated index.md)
return !omit.has(node.displayName.toLowerCase())
},
})
```
You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.
### Remove files by tag
You can access the frontmatter of a file by `node.file?.frontmatter?`. This allows you to filter out files based on their frontmatter, for example by their tags.
You can access the tags of a file by `node.data.tags`.
> export const sortFn: Options["sortFn"] = (a, b) => {
> // implement your function here
> }
> ```
>
> You can then import them like this:
>
> ```ts title="quartz.layout.ts"
> import { mapFn, filterFn, sortFn } from "./functions.ts"
> Component.Explorer({
> mapFn: mapFn,
> filterFn: filterFn,
> sortFn: sortFn,
> // ... your other options
> mapFn,
> filterFn,
> sortFn,
> })
> ```
@ -227,93 +213,11 @@ To add emoji prefixes (📁 for folders, 📄 for files), you could use a map fu
```ts title="quartz.layout.ts"
Component.Explorer({
mapFn: (node) => {
// dont change name of root node
if (node.depth > 0) {
// set emoji for file/folder
if (node.file) {
node.displayName = "📄 " + node.displayName
} else {
if (node.isFolder) {
node.displayName = "📁 " + node.displayName
}
} else {
node.displayName = "📄 " + node.displayName
}
},
})
```
### Putting it all together
In this example, we're going to customize the explorer by using functions from examples above to [[#Add emoji prefix | add emoji prefixes]], [[#remove-list-of-elements-filter| filter out some folders]] and [[#use-sort-to-put-files-first | sort with files above folders]].
```ts title="quartz.layout.ts"
Component.Explorer({
filterFn: sampleFilterFn,
mapFn: sampleMapFn,
sortFn: sampleSortFn,
order: ["filter", "sort", "map"],
})
```
Notice how we customized the `order` array here. This is done because the default order applies the `sort` function last. While this normally works well, it would cause unintended behavior here, since we changed the first characters of all display names. In our example, `sort` would be applied based off the emoji prefix instead of the first _real_ character.
To fix this, we just changed around the order and apply the `sort` function before changing the display names in the `map` function.
### Use `sort` with pre-defined sort order
Here's another example where a map containing file/folder names (as slugs) is used to define the sort order of the explorer in quartz. All files/folders that aren't listed inside of `nameOrderMap` will appear at the top of that folders hierarchy level.
It's also worth mentioning, that the smaller the number set in `nameOrderMap`, the higher up the entry will be in the explorer. Incrementing every folder/file by 100, makes ordering files in their folders a lot easier. Lastly, this example still allows you to use a `mapFn` or frontmatter titles to change display names, as it uses slugs for `nameOrderMap` (which is unaffected by display name changes).
```ts title="quartz.layout.ts"
Component.Explorer({
sortFn: (a, b) => {
const nameOrderMap: Record<string, number> = {
"poetry-folder": 100,
"essay-folder": 200,
"research-paper-file": 201,
"dinosaur-fossils-file": 300,
"other-folder": 400,
}
let orderA = 0
let orderB = 0
if (a.file && a.file.slug) {
orderA = nameOrderMap[a.file.slug] || 0
} else if (a.name) {
orderA = nameOrderMap[a.name] || 0
}
if (b.file && b.file.slug) {
orderB = nameOrderMap[b.file.slug] || 0
} else if (b.name) {
orderB = nameOrderMap[b.name] || 0
}
return orderA - orderB
},
})
```
For reference, this is how the quartz explorer window would look like with that example:
```
📖 Poetry Folder
📑 Essay Folder
⚗️ Research Paper File
🦴 Dinosaur Fossils File
🔮 Other Folder
```
And this is how the file structure would look like:
@ -30,4 +30,4 @@ As with folder listings, you can also provide a description and title for a tag
## Customization
The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.
Quartz allows you to define a custom sort ordering for content on both page types. The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.
@ -13,9 +13,7 @@ There may be some notes you want to avoid publishing as a website. Quartz suppor
If you'd like to only publish a select number of notes, you can instead use [[ExplicitPublish]] which will filter out all notes except for any that have `publish: true` in the frontmatter.
> [!warning]
> Regardless of the filter plugin used, **all non-markdown files will be emitted and available publically in the final build.** This includes files such as images, voice recordings, PDFs, etc. One way to prevent this and still be able to embed local images is to create a folder specifically for public media and add the following two patterns to the ignorePatterns array.
>
> `"!(PublicMedia)**/!(*.md)", "!(*.md)"`
> Regardless of the filter plugin used, **all non-markdown files will be emitted and available publically in the final build.** This includes files such as images, voice recordings, PDFs, etc.
## `ignorePatterns`
@ -28,7 +26,7 @@ Common examples include:
-`some/folder`: exclude the entire of `some/folder`
-`*.md`: exclude all files with a `.md` extension
-`!*.md` exclude all files that _don't_ have a `.md` extension
-`!(*.md)` exclude all files that _don't_ have a `.md` extension. Note that negations _must_ parenthesize the rest of the pattern!
-`**/private`: exclude any files or folders named `private` at any level of nesting
Reader Mode is a feature that allows users to focus on the content by hiding the sidebars and other UI elements. When enabled, it provides a clean, distraction-free reading experience.
## Configuration
Reader Mode is enabled by default. To disable it, you can remove the component from your layout configuration in `quartz.layout.ts`:
```ts
// Remove or comment out this line
Component.ReaderMode(),
```
## Usage
The Reader Mode toggle appears as a button with a book icon. When clicked:
- Sidebars are hidden
- Hovering over the content area reveals the sidebars temporarily
Unlike Dark Mode, Reader Mode state is not persisted between page reloads but is maintained during SPA navigation within the site.
## Customization
You can customize the appearance of Reader Mode through CSS variables and styles. The component uses the following classes:
-`.readermode`: The toggle button
-`.readerIcon`: The book icon
-`[reader-mode="on"]`: Applied to the root element when Reader Mode is active
A lot of social media platforms can display a rich preview for your website when sharing a link (most notably, a cover image, a title and a description).
Quartz can also dynamically generate and use new cover images for every page to be used in link previews on social media for you.
## Showcase
After enabling the [[CustomOgImages]] emitter plugin, the social media link preview for [[authoring content | Authoring Content]] looks like this:
This functionality is provided by the [[CustomOgImages]] plugin. See the plugin page for customization options.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.