docs: fix outdated v4 references in documentation

docs/features/Latex.md

@@ -70,10 +70,9 @@ For example:
 
 ### Using mhchem
 
-Add the following import to the top of `quartz/plugins/transformers/latex.ts` (before all the other
+If you are using the community Latex plugin, you can add `mhchem` support by forking the plugin repository and adding the following import to the top of `src/index.ts` (before all the other imports):
-imports):
 
-```ts title="quartz/plugins/transformers/latex.ts"
+```ts title="src/index.ts"
 import "katex/contrib/mhchem"
 ```
 

docs/features/i18n.md

@@ -10,7 +10,7 @@ The locale field generally follows a certain format: `{language}-{REGION}`
 - `{REGION}` is usually a [2-letter uppercase region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
 
 > [!tip] Interested in contributing?
-> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v4/quartz/i18n/locales)! To contribute a translation, do the following things:
+> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v5/quartz/i18n/locales)! To contribute a translation, do the following things:
 >
 > 1. In the `quartz/i18n/locales` folder, copy the `en-US.ts` file.
 > 2. Rename it to `{language}-{REGION}.ts` so it matches a locale of the format shown above.

docs/layout-components.md

@@ -4,6 +4,9 @@ title: Higher-Order Layout Components
 
 Quartz provides several higher-order components that help with layout composition and responsive design. These components wrap other components to add additional functionality or modify their behavior.
 
+> [!note]
+> In the examples below, `Component.` refers to internal layout utilities (imported from `./quartz/components`), while `Plugin.` refers to community plugins (imported from `./.quartz/plugins`). See [[layout]] for more details.
+
 ## `Flex` Component
 
 The `Flex` component creates a [flexible box layout](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) that can arrange child components in various ways. It's particularly useful for creating responsive layouts and organizing components in rows or columns.
@@ -31,10 +34,10 @@ type FlexConfig = {
 Component.Flex({
   components: [
     {
-      Component: Component.Search(),
+      Component: Plugin.Search(),
       grow: true, // Search will grow to fill available space
     },
-    { Component: Component.Darkmode() }, // Darkmode keeps its natural size
+    { Component: Plugin.Darkmode() }, // Darkmode keeps its natural size
   ],
   direction: "row",
   gap: "1rem",
@@ -67,7 +70,7 @@ The `DesktopOnly` component is the counterpart to `MobileOnly`. It makes its chi
 ### Example Usage
 
 ```typescript
-Component.DesktopOnly(Component.TableOfContents())
+Component.DesktopOnly(Plugin.TableOfContents())
 ```
 
 ## `ConditionalRender` Component
@@ -85,7 +88,7 @@ type ConditionalRenderConfig = {
 
 ```typescript
 Component.ConditionalRender({
-  component: Component.Search(),
+  component: Plugin.Search(),
   condition: (props) => props.displayClass !== "fullpage",
 })
 ```
@@ -94,7 +97,7 @@ The example above would only render the Search component when the page is not in
 
 ```typescript
 Component.ConditionalRender({
-  component: Component.Breadcrumbs(),
+  component: Plugin.Breadcrumbs(),
   condition: (page) => page.fileData.slug !== "index",
 })
 ```

docs/plugins/TableOfContents.md

@@ -17,7 +17,7 @@ This plugin accepts the following configuration options:
 - `collapseByDefault`: If `true`, the TOC will start in a collapsed state. Default is `false`.
 
 > [!warning]
-> This plugin needs the `Component.TableOfContents` component in `quartz.layout.ts` to determine where to display the TOC. Without it, nothing will be displayed. They should always be added or removed together.
+> This plugin needs the `Plugin.TableOfContents` component in `quartz.layout.ts` to determine where to display the TOC. Without it, nothing will be displayed. They should always be added or removed together.
 
 ## API