`. - `language`: `"en" | "de"` ([Any other language needs translations](https://pholio.lukaloehr.com/docs/configuration.md)), default `"en"`. Interface language and default search tokenizer. - `logo_size`: `number`, default `24`. Logo width and height in pixels. - `theme.palette`: `array`, deprecated. An old key, shown struck through. ```text <TypeTable> <TypeProp name="title" type="string" required> Site name, shown in the header and in `<title>`. </TypeProp> <TypeProp name="language" type=""en" | "de"" default=""en"" typeDescription="Any other language needs translations" typeDescriptionLink="/docs/configuration"> Interface language and default search tokenizer. </TypeProp> <TypeProp name="logo_size" type="number" default="24"> Logo width and height in pixels. </TypeProp> <TypeProp name="theme.palette" type="array" deprecated> An old key, shown struck through. </TypeProp> </TypeTable> ``` ## Images ### Screenshot with a dark variant `Screenshot` shows `dark` in the dark color scheme and `src` in the light one. Switch the theme to see both. ![Markdown goes through pholio build and comes out as a static site](https://pholio.lukaloehr.com/docs/assets/components/pipeline-light.svg) ```text <Screenshot src="./assets/components/pipeline-light.svg" dark="./assets/components/pipeline-dark.svg" alt="Markdown goes through pholio build and comes out as a static site" /> ``` ### Image zoom `ImageZoom` opens the image enlarged on click. This SVG follows the color scheme by itself, so one file works in light and dark. ![The build pipeline, enlarged on click](https://pholio.lukaloehr.com/docs/assets/components/pipeline.svg) ```text <ImageZoom src="./assets/components/pipeline.svg" alt="The build pipeline, enlarged on click" width="720" height="200" /> ``` ### Markdown image A plain Markdown image renders as one bordered image, sized from the file. ![The build pipeline](https://pholio.lukaloehr.com/docs/assets/components/pipeline.svg) ```text ![The build pipeline](./assets/components/pipeline.svg) ``` ## Code blocks ### Title and line numbers ```ts title="search.ts" import { createSearch } from './search.js'; const search = createSearch(index); const hits = search.query('install'); ``` ````text ```ts title="search.ts" lineNumbers import { createSearch } from './search.js'; const search = createSearch(index); const hits = search.query('install'); ``` ```` ### Line numbers from another start ```php return [ 'title' => 'My docs', ]; ``` ````text ```php lineNumbers=40 return [ 'title' => 'My docs', ]; ``` ```` ### Highlighted lines and words ```js const hits = search.query('install'); render(hits); search.query('theme'); ``` ````text ```js const hits = search.query('install'); render(hits); search.query('theme'); ``` ```` ### Focus ```css .nd-card { border-radius: 12px; padding: 16px; } ``` ````text ```css .nd-card { border-radius: 12px; padding: 16px; } ``` ```` ### Added and removed lines ```yaml title="config.yaml" theme: hotkey: d hotkey: k ``` ````text ```yaml title="config.yaml" theme: hotkey: d hotkey: k ``` ```` ### Diff language ```diff - 'language' => 'en', + 'language' => 'de', 'title' => 'Handbuch', ``` ````text ```diff - 'language' => 'en', + 'language' => 'de', 'title' => 'Handbuch', ``` ```` ### Code tabs Consecutive code blocks with a `tab` attribute are merged into one tab group. #### Build ```bash pholio build ``` #### Check ```bash pholio check ``` #### Dev ```bash pholio dev ``` ````text ```bash tab="Build" pholio build ``` ```bash tab="Check" pholio check ``` ```bash tab="Dev" pholio dev ``` ```` ### Code as tag content `DynamicCodeBlock` takes its code verbatim from the tag's content. ```json { "title": "Pholio", "pages": ["index", "components"] } ``` ```text <DynamicCodeBlock lang="json"> { "title": "Pholio", "pages": ["index", "components"] } </DynamicCodeBlock> ``` ## Tables Columns align left, center or right. | Command | Writes | Exit code | | :--- | :---: | ---: | | `build` | the site | 0 | | `check` | nothing | 1 on differences | | `dev` | the site, with drafts | 0 | ```text | Command | Writes | Exit code | | :--- | :---: | ---: | | `build` | the site | 0 | | `check` | nothing | 1 on differences | | `dev` | the site, with drafts | 0 | ``` ## Text ### Emphasis, code and links **Bold**, *italic*, ***both***, ~~strikethrough~~, `inline code`, an [internal link](https://pholio.lukaloehr.com/docs/configuration.md) and an [external link](https://commonmark.org). ```text **Bold**, *italic*, ***both***, ~~strikethrough~~, `inline code`, an [internal link](/docs/configuration) and an [external link](https://commonmark.org). ``` ### Hard line breaks Two trailing spaces end a line\ without starting a new paragraph. ```text Two trailing spaces end a line·· without starting a new paragraph. ``` The `··` above stands for the two trailing spaces. ### Blockquote > Write the page you wish you had found the first time. ```text > Write the page you wish you had found the first time. ``` ### Lists 1. Ordered lists count themselves. 2. They nest: - an unordered item - another one 3. And continue afterwards. - [x] Task lists - [ ] with open items ```text 1. Ordered lists count themselves. 2. They nest: - an unordered item - another one 3. And continue afterwards. - [x] Task lists - [ ] with open items ``` ### Footnotes Search runs in a Web Worker[^worker] and needs no backend[^backend]. ```text Search runs in a Web Worker[^worker] and needs no backend[^backend]. [^worker]: So typing never blocks the page. [^backend]: The index is a static JSON file. ``` The footnotes are collected at the end of the page. ### Horizontal rule --- ```text --- ``` ## Headings Headings `##` to `####` get anchors and appear in the table of contents. Hover one to copy its link. #### A fourth-level heading ```text ## Headings #### A fourth-level heading ``` ## Banner A `Banner` is an announcement bar across the top of the page, so it sits outside this showcase. Its source looks like this: ```text <Banner id="release" variant="rainbow"> Pholio 0.1.0 is out. </Banner> ``` [^worker]: So typing never blocks the page. [^backend]: The index is a static JSON file. ## Related topics - [Pholio](https://pholio.lukaloehr.com/docs/index.md) - [Getting started](https://pholio.lukaloehr.com/docs/getting-started.md) - [Content format](https://pholio.lukaloehr.com/docs/content-format.md) - [Configuration](https://pholio.lukaloehr.com/docs/configuration.md) - [Agents](https://pholio.lukaloehr.com/docs/agents.md) - [Architecture](https://pholio.lukaloehr.com/docs/architecture.md) - [Roadmap](https://pholio.lukaloehr.com/docs/roadmap.md) - Previous: [Content format](https://pholio.lukaloehr.com/docs/content-format.md) - Next: [Configuration](https://pholio.lukaloehr.com/docs/configuration.md)

> Documentation index: https://pholio.lukaloehr.com/docs/llms.txt, a list of every page in this documentation. # Components > Every component and Markdown feature Pholio renders, each followed by its source. This page uses every component tag and every Markdown construct Pholio accepts. Each example shows the rendered result first and the source that produced it underneath. The attributes are listed in [Content format](https://pholio.lukaloehr.com/docs/content-format.md). ```text ``` ## Callouts A callout has a `type` and an optional `title`; its body is Markdown. Without a type it is `info`. > **Info** > > A callout without a type or a title. > **Info:** Info > > Background information that helps but isn't required. > **Warning:** Warning > > Something that can go wrong if the reader skips it. > **Error:** Error > > Something destructive that can't be undone. > **Success:** Success > > What the reader sees when everything worked. > **Idea:** Idea > > A suggestion worth trying. > **Tip:** Tip > > `tip` is an alias for `info`. > **Warning:** Warn > > `warn` is an alias for `warning`. > **Info:** Custom icon > > `icon` replaces the type's icon with any lucide icon. ```text A callout without a type or a title. Background information that helps but isn't required. Something that can go wrong if the reader skips it. Something destructive that can't be undone. What the reader sees when everything worked. A suggestion worth trying. `tip` is an alias for `info`. `warn` is an alias for `warning`. `icon` replaces the type's icon with any lucide icon. ``` ## Cards Cards group links. Each card can carry a lucide icon; a card without `href` is static. - [Getting started](https://pholio.lukaloehr.com/docs/getting-started.md): Install Pholio and build a first site. - [Configuration](https://pholio.lukaloehr.com/docs/configuration.md): Every key of pholio.config.php. - **Static**: A card without a link or an icon. - **With an icon**: A static card with an icon. ```text ``` ## Tabs `items` lists the labels, separated by `|`; each `Tab` names its label in `value`. `defaultIndex` picks the tab that starts open, `updateAnchor` writes the choice into the URL hash. ### macOS Run the installer in Terminal. ### Linux Run the installer in any shell. ### Windows Use WSL and run the installer there. ```text Run the installer in Terminal. Run the installer in any shell. Use WSL and run the installer there. ``` ### Grouped tabs Tabs with the same `groupId` switch together; `persist` remembers the choice across pages and visits. #### curl ```bash curl -fsSL https://pholio.lukaloehr.com/install.sh | sh ``` #### Git ```bash git clone https://github.com/luka-loehr/pholio.git ``` #### curl The installer links `pholio` into `~/.local/bin`. #### Git Run `php bin/pholio` from the clone. ````text ```bash curl -fsSL https://pholio.lukaloehr.com/install.sh | sh ``` ```bash git clone https://github.com/luka-loehr/pholio.git ``` The installer links `pholio` into `~/.local/bin`. Run `php bin/pholio` from the clone. ```` ## Steps Each `Step` is numbered; a heading inside it becomes the step's title. ### 1. Create a project ```bash pholio init my-docs ``` ### 2. Write a page Add a Markdown file below `content/`. ### 3. Build ```bash pholio build my-docs ``` ````text ### Create a project ```bash pholio init my-docs ``` ### Write a page Add a Markdown file below `content/`. ### Build ```bash pholio build my-docs ``` ```` ## Accordions With `type="single"` one item is open at a time; `defaultValue` opens items at the start. With `type="multiple"` any number can be open at once. ### What does Pholio need? PHP 8.2 with `mbstring` and `ctype`. Nothing else. ### Where does the output run? On any static host. An `.htaccess` for Apache is written alongside. ### Search Built at compile time, ranked in the browser. ### Agents Every page also exists as Markdown, listed in `llms.txt`. ```text PHP 8.2 with `mbstring` and `ctype`. Nothing else. On any static host. An `.htaccess` for Apache is written alongside. Built at compile time, ranked in the browser. Every page also exists as Markdown, listed in `llms.txt`. ``` ## Files A file tree with nested folders. `defaultOpen` expands a folder, `disabled` keeps it closed, `icon` sets a file's icon. - my-docs/ - pholio.config.php - content/ - index.md - meta.json - guide/ - installation.md - assets/ - public/ ```text ``` ## Type table Options of an API, with types, defaults and expandable descriptions. - `title`: `string`, required. Site name, shown in the header and in ``. - `language`: `"en" | "de"` ([Any other language needs translations](https://pholio.lukaloehr.com/docs/configuration.md)), default `"en"`. Interface language and default search tokenizer. - `logo_size`: `number`, default `24`. Logo width and height in pixels. - `theme.palette`: `array`, deprecated. An old key, shown struck through. ```text <TypeTable> <TypeProp name="title" type="string" required> Site name, shown in the header and in `<title>`. </TypeProp> <TypeProp name="language" type=""en" | "de"" default=""en"" typeDescription="Any other language needs translations" typeDescriptionLink="/docs/configuration"> Interface language and default search tokenizer. </TypeProp> <TypeProp name="logo_size" type="number" default="24"> Logo width and height in pixels. </TypeProp> <TypeProp name="theme.palette" type="array" deprecated> An old key, shown struck through. </TypeProp> </TypeTable> ``` ## Images ### Screenshot with a dark variant `Screenshot` shows `dark` in the dark color scheme and `src` in the light one. Switch the theme to see both. ![Markdown goes through pholio build and comes out as a static site](https://pholio.lukaloehr.com/docs/assets/components/pipeline-light.svg) ```text <Screenshot src="./assets/components/pipeline-light.svg" dark="./assets/components/pipeline-dark.svg" alt="Markdown goes through pholio build and comes out as a static site" /> ``` ### Image zoom `ImageZoom` opens the image enlarged on click. This SVG follows the color scheme by itself, so one file works in light and dark. ![The build pipeline, enlarged on click](https://pholio.lukaloehr.com/docs/assets/components/pipeline.svg) ```text <ImageZoom src="./assets/components/pipeline.svg" alt="The build pipeline, enlarged on click" width="720" height="200" /> ``` ### Markdown image A plain Markdown image renders as one bordered image, sized from the file. ![The build pipeline](https://pholio.lukaloehr.com/docs/assets/components/pipeline.svg) ```text ![The build pipeline](./assets/components/pipeline.svg) ``` ## Code blocks ### Title and line numbers ```ts title="search.ts" import { createSearch } from './search.js'; const search = createSearch(index); const hits = search.query('install'); ``` ````text ```ts title="search.ts" lineNumbers import { createSearch } from './search.js'; const search = createSearch(index); const hits = search.query('install'); ``` ```` ### Line numbers from another start ```php return [ 'title' => 'My docs', ]; ``` ````text ```php lineNumbers=40 return [ 'title' => 'My docs', ]; ``` ```` ### Highlighted lines and words ```js const hits = search.query('install'); render(hits); search.query('theme'); ``` ````text ```js const hits = search.query('install'); render(hits); search.query('theme'); ``` ```` ### Focus ```css .nd-card { border-radius: 12px; padding: 16px; } ``` ````text ```css .nd-card { border-radius: 12px; padding: 16px; } ``` ```` ### Added and removed lines ```yaml title="config.yaml" theme: hotkey: d hotkey: k ``` ````text ```yaml title="config.yaml" theme: hotkey: d hotkey: k ``` ```` ### Diff language ```diff - 'language' => 'en', + 'language' => 'de', 'title' => 'Handbuch', ``` ````text ```diff - 'language' => 'en', + 'language' => 'de', 'title' => 'Handbuch', ``` ```` ### Code tabs Consecutive code blocks with a `tab` attribute are merged into one tab group. #### Build ```bash pholio build ``` #### Check ```bash pholio check ``` #### Dev ```bash pholio dev ``` ````text ```bash tab="Build" pholio build ``` ```bash tab="Check" pholio check ``` ```bash tab="Dev" pholio dev ``` ```` ### Code as tag content `DynamicCodeBlock` takes its code verbatim from the tag's content. ```json { "title": "Pholio", "pages": ["index", "components"] } ``` ```text <DynamicCodeBlock lang="json"> { "title": "Pholio", "pages": ["index", "components"] } </DynamicCodeBlock> ``` ## Tables Columns align left, center or right. | Command | Writes | Exit code | | :--- | :---: | ---: | | `build` | the site | 0 | | `check` | nothing | 1 on differences | | `dev` | the site, with drafts | 0 | ```text | Command | Writes | Exit code | | :--- | :---: | ---: | | `build` | the site | 0 | | `check` | nothing | 1 on differences | | `dev` | the site, with drafts | 0 | ``` ## Text ### Emphasis, code and links **Bold**, *italic*, ***both***, ~~strikethrough~~, `inline code`, an [internal link](https://pholio.lukaloehr.com/docs/configuration.md) and an [external link](https://commonmark.org). ```text **Bold**, *italic*, ***both***, ~~strikethrough~~, `inline code`, an [internal link](/docs/configuration) and an [external link](https://commonmark.org). ``` ### Hard line breaks Two trailing spaces end a line\ without starting a new paragraph. ```text Two trailing spaces end a line·· without starting a new paragraph. ``` The `··` above stands for the two trailing spaces. ### Blockquote > Write the page you wish you had found the first time. ```text > Write the page you wish you had found the first time. ``` ### Lists 1. Ordered lists count themselves. 2. They nest: - an unordered item - another one 3. And continue afterwards. - [x] Task lists - [ ] with open items ```text 1. Ordered lists count themselves. 2. They nest: - an unordered item - another one 3. And continue afterwards. - [x] Task lists - [ ] with open items ``` ### Footnotes Search runs in a Web Worker[^worker] and needs no backend[^backend]. ```text Search runs in a Web Worker[^worker] and needs no backend[^backend]. [^worker]: So typing never blocks the page. [^backend]: The index is a static JSON file. ``` The footnotes are collected at the end of the page. ### Horizontal rule --- ```text --- ``` ## Headings Headings `##` to `####` get anchors and appear in the table of contents. Hover one to copy its link. #### A fourth-level heading ```text ## Headings #### A fourth-level heading ``` ## Banner A `Banner` is an announcement bar across the top of the page, so it sits outside this showcase. Its source looks like this: ```text <Banner id="release" variant="rainbow"> Pholio 0.1.0 is out. </Banner> ``` [^worker]: So typing never blocks the page. [^backend]: The index is a static JSON file. ## Related topics - [Pholio](https://pholio.lukaloehr.com/docs/index.md) - [Getting started](https://pholio.lukaloehr.com/docs/getting-started.md) - [Content format](https://pholio.lukaloehr.com/docs/content-format.md) - [Configuration](https://pholio.lukaloehr.com/docs/configuration.md) - [Agents](https://pholio.lukaloehr.com/docs/agents.md) - [Architecture](https://pholio.lukaloehr.com/docs/architecture.md) - [Roadmap](https://pholio.lukaloehr.com/docs/roadmap.md) - Previous: [Content format](https://pholio.lukaloehr.com/docs/content-format.md) - Next: [Configuration](https://pholio.lukaloehr.com/docs/configuration.md)