docs: use Config component instead of raw JSON

This commit is contained in:
Jan De Dobbeleer 2024-11-02 21:46:16 +01:00 committed by Jan De Dobbeleer
parent b3b41fc60d
commit 404f4e0f31
17 changed files with 259 additions and 247 deletions

View file

@ -10,8 +10,6 @@ import Config from "@site/src/components/Config.js";
<Config
data={{
$schema:
"https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
blocks: [
{
type: "prompt",
@ -64,10 +62,14 @@ When you want to join a right and left aligned block with a repeated set of char
to be repeated to this property. Add this property to the _right_ aligned block. This supports the use of
[color overrides][color-overrides].
```json
"alignment": "right",
"filler": "."
```
<Config
data={{
block: {
alignment: "right",
filler: ".",
},
}}
/>
### Overflow

View file

@ -4,6 +4,8 @@ title: Debug prompt
sidebar_label: Debug prompt
---
import Config from "@site/src/components/Config.js";
:::info
This feature only works in `powershell` for the time being.
:::
@ -18,19 +20,15 @@ Environment variables are available, just like the [`console_title_template`][co
You need to extend or create a custom theme with your debug prompt override. For example:
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
...
],
"debug_prompt": {
"background": "transparent",
"foreground": "#ffffff",
"template": "Debugging "
}
}
```
<Config
data={{
debug_prompt: {
background: "transparent",
foreground: "#ffffff",
template: "Debugging ",
},
}}
/>
## Properties

View file

@ -5,6 +5,8 @@ sidebar_label: 👋 Introduction
slug: /
---
import Config from "@site/src/components/Config.js";
Oh My Posh is a custom prompt engine for any shell that has the ability to adjust
the prompt string with a function or variable.
@ -20,24 +22,23 @@ Oh My Posh works exactly like that. Blocks are a combination of one or more segm
The basic layout of the config file is as follows.
```json
{
"blocks": []
}
```
<Config
data={{
"blocks": []
}}
/>
A [block][block] has properties that indicate its position and the [segments][segment] it will render.
```json
{
<Config
data={{
"blocks": [
{
// positioning metadata (not shown)
"segments": []
}
]
}
```
}}
/>
A [segment][segment] renders a single context like showing the current folder, user information or git status
when relevant. It can be styled any way you want, resulting in visualizing the prompt you are looking for.

View file

@ -4,6 +4,8 @@ title: Line error
sidebar_label: Line error
---
import Config from "@site/src/components/Config.js";
:::info
This feature only works in `powershell` for the time being.
:::
@ -25,24 +27,20 @@ You can use go [text/template][go-text-template] templates extended with [sprig]
You need to extend or create a custom theme with your prompt overrides. For example:
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
...
],
"valid_line": {
"background": "transparent",
"foreground": "#ffffff",
"template": "<#e0def4,#286983>\uf42e </><#286983,transparent>\ue0b4</> "
<Config
data={{
valid_line: {
background: "transparent",
foreground: "#ffffff",
template: "<#e0def4,#286983>\uf42e </><#286983,transparent>\ue0b4</> ",
},
"error_line": {
"background": "transparent",
"foreground": "#ffffff",
"template": "<#eb6f92,#286983>\ue009 </><#286983,transparent>\ue0b4</> "
}
}
```
error_line: {
background: "transparent",
foreground: "#ffffff",
template: "<#eb6f92,#286983>\ue009 </><#286983,transparent>\ue0b4</> ",
},
}}
/>
## Properties

View file

@ -4,6 +4,8 @@ title: Secondary prompt
sidebar_label: Secondary prompt
---
import Config from "@site/src/components/Config.js";
:::info
This feature only works in `powershell`, `zsh` and `bash` for the time being.
:::
@ -17,19 +19,15 @@ Environment variables are available, just like the [`console_title_template`][co
You need to extend or create a custom theme with your secondary prompt override. For example:
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
...
],
"secondary_prompt": {
"background": "transparent",
"foreground": "#ffffff",
"template": "-> "
}
}
```
<Config
data={{
secondary_prompt: {
background: "transparent",
foreground: "#ffffff",
template: "-> ",
},
}}
/>
## Properties

View file

@ -12,8 +12,6 @@ understand how to configure a segment.
<Config
data={{
$schema:
"https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
blocks: [
{
segments: [

View file

@ -6,6 +6,7 @@ sidebar_label: Templates
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Config from "@site/src/components/Config.js";
Every segment has a `template` property to tweak the text that is displayed.
Under the hood, this uses go's [text/template][go-text-template] feature extended with [sprig][sprig] and
@ -114,33 +115,32 @@ $env.SET_POSHCONTEXT = {
### Example
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"version": 2,
// highlight-start
"var": {
"Hello": "hello",
"World": "world"
},
// highlight-end
"blocks": [
{
"type": "prompt",
"alignment": "left",
"segments": [
{
"type": "text",
"style": "plain",
"foreground": "p:white",
// highlight-next-line
"template": "{{ .Var.Hello }} {{ .Var.World }} "
}
]
}
]
}
```
<Config
data={{
version: 2,
// highlight-start
var: {
Hello: "hello",
World: "world",
},
// highlight-end
blocks: [
{
type: "prompt",
alignment: "left",
segments: [
{
type: "text",
style: "plain",
foreground: "p:white",
// highlight-next-line
template: "{{ .Var.Hello }} {{ .Var.World }} ",
},
],
},
],
}}
/>
## Template logic
@ -194,9 +194,12 @@ in your template where `.Segment` is the name of the segment you want to use wit
If you want to for example use the [git][git] segment's `.UpstreamGone` property in the [status][status] segment, you can
do so like this:
```json
"template": " {{ if .Segments.Git.UpstreamGone }}\ueb05{{ else if gt .Code 0 }}\uf00d{{ else }}\uf00c{{ end }} "
```
<Config
data={{
template:
" {{ if .Segments.Git.UpstreamGone }}\ueb05{{ else if gt .Code 0 }}\uf00d{{ else }}\uf00c{{ end }} ",
}}
/>
:::caution
For this to work, the segment you refer to needs to be in your config. The above example won't work if
@ -205,45 +208,48 @@ your config does not contain a git segment as Oh My Posh only populates the prop
:::tip
If you have two identical segments for a different purpose, you can make use of the `alias` property on the segment
to distinct between both. For example:
```json
{
"type": "command",
// highlight-next-line
"alias": "Hello",
"style": "plain",
"foreground": "#ffffff",
"properties": {
"command": "echo Hello"
}
},
{
"type": "command",
// highlight-next-line
"alias": "World",
"style": "plain",
"foreground": "#ffffff",
"properties": {
"command": "echo World"
}
},
{
"type": "text",
"style": "plain",
"foreground": "#ffffff",
// highlight-next-line
"template": "{{ .Segments.Hello.Output }} {{ .Segments.World.Output }}"
}
```
to distinct between both.
:::
<Config
data={{
segments: [
{
type: "command",
alias: "Hello",
style: "plain",
foreground: "#ffffff",
properties: {
command: "echo Hello",
},
},
{
type: "command",
alias: "World",
style: "plain",
foreground: "#ffffff",
properties: {
command: "echo World",
},
},
{
type: "text",
style: "plain",
foreground: "#ffffff",
template: "{{ .Segments.Hello.Output }} {{ .Segments.World.Output }}",
},
],
}}
/>
If you want to know if a specific segment is active, you can use the `.Segments.Contains` function, for example:
```json
"template": "{{ if .Segments.Contains \"Git\" }}\ueb05{{ else if gt .Code 0 }}\uf00d{{ else }}\uf00c{{ end }} "
```
<Config
data={{
template:
'{{ if .Segments.Contains "Git" }}\ueb05{{ else if gt .Code 0 }}\uf00d{{ else }}\uf00c{{ end }} ',
}}
/>
## Text decoration

View file

@ -4,15 +4,14 @@ title: Console title
sidebar_label: Console title
---
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"console_title_template": "{{.Folder}}{{if .Root}} :: root{{end}} :: {{.Shell}}",
"blocks": [
...
]
}
```
import Config from "@site/src/components/Config.js";
<Config
data={{
console_title_template:
"{{.Folder}}{{if .Root}} :: root{{end}} :: {{.Shell}}",
}}
/>
### Console Title Template
@ -23,14 +22,14 @@ To learn more about templates and their possibilities, have a look at the [templ
```json
{
"console_title_template": "{{.Folder}}{{if .Root}} :: root{{end}} :: {{.Shell}}",
// outputs:
// when root == false: omp :: zsh
// when root == true: omp :: root :: zsh
"console_title_template": "{{.Folder}}", // outputs: omp
"console_title_template": "{{.Shell}} in {{.PWD}}", // outputs: zsh in /usr/home/omp
"console_title_template": "{{.UserName}}@{{.HostName}} {{.Shell}} in {{.PWD}}", // outputs: MyUser@MyMachine zsh in /usr/home/omp
"console_title_template": "{{.Env.USERDOMAIN}} {{.Shell}} in {{.PWD}}", // outputs: MyCompany zsh in /usr/home/omp
"console_title_template": "{{.Folder}}{{if .Root}} :: root{{end}} :: {{.Shell}}",
// outputs:
// when root == false: omp :: zsh
// when root == true: omp :: root :: zsh
"console_title_template": "{{.Folder}}", // outputs: omp
"console_title_template": "{{.Shell}} in {{.PWD}}", // outputs: zsh in /usr/home/omp
"console_title_template": "{{.UserName}}@{{.HostName}} {{.Shell}} in {{.PWD}}", // outputs: MyUser@MyMachine zsh in /usr/home/omp
"console_title_template": "{{.Env.USERDOMAIN}} {{.Shell}} in {{.PWD}}" // outputs: MyCompany zsh in /usr/home/omp
}
```

View file

@ -6,6 +6,7 @@ sidebar_label: Transient prompt
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Config from "@site/src/components/Config.js";
:::info
This feature only works in `nu`, `fish`, `zsh`, `powershell` (`ConstrainedLanguage` mode unsupported) and `cmd` for the time being.
@ -28,19 +29,15 @@ By enabling Transient Prompt, you can replace the prompt with some other content
You need to extend or create a custom theme with your transient prompt. For example:
```json
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
...
],
"transient_prompt": {
"background": "transparent",
"foreground": "#ffffff",
"template": "{{ .Shell }}> "
}
}
```
<Config
data={{
transient_prompt: {
background: "transparent",
foreground: "#ffffff",
template: "{{ .Shell }}> ",
},
}}
/>
## Properties

View file

@ -6,6 +6,7 @@ sidebar_label: 🤔 FAQ
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Config from "@site/src/components/Config.js";
Before validating anything, make sure you're on the [latest version][latest] of Oh My Posh and your terminal and shell are up-to-date.
@ -100,6 +101,7 @@ but also that one misses certain interesting icons. You can fall back to any the
or make use of a Nerd Font. Have a look at the [font][font] section for more context in case you're using all the right conditions.
### Text decoration styles like bold and dimmed don't work
The text decoration styles are based on your terminal emulator's capabilities.
A quick way to check if your terminal supports a specific style escape sequence is to take a look at the `terminfo` database, on Linux.
@ -118,22 +120,21 @@ the steps [here][export] to export it to a local file so you can adjust the [seg
In the example below, it's assumed that the execution segment's icon `\ueba2` has an unexpected space after it in Windows Terminal.
```json
{
"type": "executiontime",
"template": "\ueba2" // unexpected space
}
```
<Config
data={{
type: "executiontime",
template: "\ueba2", // unexpected space
}}
/>
Adjust it by adding `\u2800` immediately after the icon.
```json
{
"type": "executiontime",
"template": "\ueba2\u2800" // solved
}
```
<Config
data={{
type: "executiontime",
template: "\ueba2\u2800", // solved
}}
/>
### Jetbrains terminals: Icons do not render
@ -156,6 +157,7 @@ conda config --set changeps1 False
```
### Python venv: Prompt changes on activating virtual environment
Virtual environments created with `venv` add the active environment's name to the prompt automatically.
To disable this behaviour, set `VIRTUAL_ENV_DISABLE_PROMPT` environment variable to `1` on your system. Example files:
@ -235,9 +237,10 @@ The issue is that PowerShell on Windows doesn't yet default to UTF-8. Resolve th
If the location contains non-ASCII characters, non-UTF-8 PowerShell may provide a wrong path to Oh My Posh, which can break the initialization.
The scenario for non-ASCII location:
- Your computer has a non-ASCII username.
- Your [config file](./installation/customize.mdx) is under your `$HOME`.
:::
:::
To do so, edit your `$PROFILE`, find the line that initializes Oh My Posh (as highlighted below), and change it to the following:
@ -300,12 +303,13 @@ end
After that, you can use the value in a template. The following replicates the [example in the Fish documentation][fish-mode-prompt]:
```json
{
"type": "text",
"template": "{{ if eq .Env.FISH__BIND_MODE \"default\" }}<red>[N]</>{{ else if eq .Env.FISH__BIND_MODE \"insert\" }}<green>[I]</>{{ else if eq .Env.FISH__BIND_MODE \"replace_one\" }}<green>[R]</>{{ else if eq .Env.FISH__BIND_MODE \"visual\"}}<brmagenta>[V]</>{{ else }}<red>[?]</>{{ end }}"
}
```
<Config
data={{
type: "text",
template:
'{{ if eq .Env.FISH__BIND_MODE "default" }}<red>[N]</>{{ else if eq .Env.FISH__BIND_MODE "insert" }}<green>[I]</>{{ else if eq .Env.FISH__BIND_MODE "replace_one" }}<green>[R]</>{{ else if eq .Env.FISH__BIND_MODE "visual"}}<brmagenta>[V]</>{{ else }}<red>[?]</>{{ end }}',
}}
/>
### Fish: Integrate with `Alt+←` and `Alt+→` Bindings to `prevd` and `nextd`

View file

@ -4,25 +4,28 @@ title: Sitecore
sidebar_label: Sitecore
---
import Config from "@site/src/components/Config.js";
## What
Display current [Sitecore] environment. Will not be active when sitecore.json and user.json don't exist.
## Sample Configuration
```json
{
"type": "sitecore",
"style": "plain",
"foreground": "#000000",
"background": "#FFFFFF",
"template": "Env: {{ .EndpointName }}{{ if .CmHost }} CM: {{ .CmHost }}{{ end }}"
}
```
<Config
data={{
type: "sitecore",
style: "plain",
foreground: "#000000",
background: "#FFFFFF",
template:
"Env: {{ .EndpointName }}{{ if .CmHost }} CM: {{ .CmHost }}{{ end }}",
}}
/>
## Properties
| Name | Type | Default | Description |
| Name | Type | Default | Description |
| ----------------- | :-------: | :-----: | ------------------------------------------------------------------------------- |
| `display_default` | `boolean` | `true` | display the segment or not when the Sitecore environment name matches `default` |

View file

@ -53,9 +53,12 @@ import Config from "@site/src/components/Config.js";
Or display in mmol/l (instead of the default mg/dl) with the following template:
```json
"template": "\ue2a1 {{ if eq (mod .Sgv 18) 0 }}{{divf .Sgv 18}}.0{{ else }} {{ round (divf .Sgv 18) 1 }}{{ end }}{{ .TrendIcon }}"
```
<Config
data={{
template:
"\ue2a1 {{ if eq (mod .Sgv 18) 0 }}{{divf .Sgv 18}}.0{{ else }} {{ round (divf .Sgv 18) 1 }}{{ end }}{{ .TrendIcon }}",
}}
/>
## Properties

View file

@ -213,9 +213,12 @@ New-Alias -Name 'Set-PoshContext' -Value 'Set-PoshGitStatus' -Scope Global -Forc
You can then use the `POSH_GIT_STRING` environment variable in a [text segment][text]:
```json
"template": "{{ if .Env.POSH_GIT_STRING }} {{ .Env.POSH_GIT_STRING }} {{ end }}"
```
<Config
data={{
template:
"{{ if .Env.POSH_GIT_STRING }} {{ .Env.POSH_GIT_STRING }} {{ end }}",
}}
/>
[poshgit]: https://github.com/dahlbyk/posh-git
[templates]: /docs/configuration/templates

View file

@ -66,11 +66,13 @@ setting.
For example, to swap out `C:\Users\Leet\GitHub` with a GitHub icon, you can do the following:
```json
"mapped_locations": {
"C:\\Users\\Leet\\GitHub": "\uF09B"
}
```
<Config
data={{
mapped_locations: {
"C:\\Users\\Leet\\GitHub": "\uF09B",
},
}}
/>
### Notes

View file

@ -136,25 +136,17 @@ If there are no readings available, `.Reading` will be null.
| ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.URL` | `string` | the URL for the batch in the Brewfather app. You can use this to add a hyperlink to the segment if you are using a terminal that supports it. The default template implements this |
Hyperlink formatting example
```json
{
// General format: «text»(link)
"template": "«{{.StatusIcon}} {{if .DaysBottledOrFermented}}{{.DaysBottledOrFermented}}d{{end}} {{.Recipe.Name}}»({{.URL}})"
}
```
### Advanced Templating
The built in template will provides key useful information. However, you can use the properties about the batch
to build your own. For reference, the built-in template looks like this:
```json
{
"template": "{{.StatusIcon}} {{if .DaysBottledOrFermented}}{{.DaysBottledOrFermented}}{{.DayIcon}} {{end}}[{{.Recipe.Name}}]({{.URL}}) {{printf \"%.1f\" .MeasuredAbv}}%{{ if and (.Reading) (eq .Status \"Fermenting\")}}: {{printf \"%.3f\" .Reading.Gravity}} {{.Reading.Temperature}}\u00b0 {{.TemperatureTrendIcon}}{{end}}"
}
```
<Config
data={{
template:
'{{.StatusIcon}} {{if .DaysBottledOrFermented}}{{.DaysBottledOrFermented}}{{.DayIcon}} {{end}}[{{.Recipe.Name}}]({{.URL}}) {{printf "%.1f" .MeasuredAbv}}%{{ if and (.Reading) (eq .Status "Fermenting")}}: {{printf "%.3f" .Reading.Gravity}} {{.Reading.Temperature}}\u00b0 {{.TemperatureTrendIcon}}{{end}}',
}}
/>
### Unit conversion
@ -180,19 +172,21 @@ _(These use the polynomial conversions from [Wikipedia][wikipedia_gravity_page])
#### Example
```json
{
"template": "{{if .Reading}}{{.SGToBrix .Reading.Gravity}}°Bx, {{.DegCToF .Reading.Temperature}}°F{{end}}"
}
```
<Config
data={{
template:
"{{if .Reading}}{{.SGToBrix .Reading.Gravity}}°Bx, {{.DegCToF .Reading.Temperature}}°F{{end}}",
}}
/>
To display gravity as SG in XXXX format (e.g. "1020" instead of "1.020"), use the `mulf` template function
```json
{
"template": "{{if .Reading}}{{.mulf 1000 .Reading.Gravity}}, {{.DegCToF .Reading.Temperature}}°F{{end}}"
}
```
<Config
data={{
template:
"{{if .Reading}}{{.mulf 1000 .Reading.Gravity}}, {{.DegCToF .Reading.Temperature}}°F{{end}}",
}}
/>
[templates]: /docs/configuration/templates
[brewfather]: http://brewfather.app

View file

@ -15,38 +15,41 @@ The free tier for is sufficient. You'll find the API key in your profile setting
## Sample Configuration
import Config from '@site/src/components/Config.js';
import Config from "@site/src/components/Config.js";
<Config data={{
"type": "wakatime",
"style": "powerline",
"powerline_symbol": "\uE0B0",
"foreground": "#ffffff",
"background": "#007acc",
"properties": {
"url": "https://wakatime.com/api/v1/users/current/summaries?start=today&end=today&api_key=API_KEY",
"http_timeout": 500
}
}}/>
<Config
data={{
type: "wakatime",
style: "powerline",
powerline_symbol: "\uE0B0",
foreground: "#ffffff",
background: "#007acc",
properties: {
url: "https://wakatime.com/api/v1/users/current/summaries?start=today&end=today&api_key=API_KEY",
http_timeout: 500,
},
}}
/>
## Properties
| Name | Type | Default | Description |
| --------------- | :-------: | :-----: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `url` | `string` | | The Wakatime [summaries][wk-summaries] URL, including the API key. Example above. |
| `http_timeout` | `int` | `20` | The time (_in milliseconds_, `ms`) it takes to consider an http request as **timed-out**. If no segment is shown, try increasing this timeout. |
| Name | Type | Default | Description |
| -------------- | :------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `url` | `string` | | The Wakatime [summaries][wk-summaries] URL, including the API key. Example above. |
| `http_timeout` | `int` | `20` | The time (_in milliseconds_, `ms`) it takes to consider an http request as **timed-out**. If no segment is shown, try increasing this timeout. |
### Dynamic API Key
If you don't want to include the API key into your configuration, the following modification can be done.
```json
"properties": {
// highlight-next-line
"url": "https://wakatime.com/api/v1/users/current/summaries?start=today&end=today&api_key={{ .Env.WAKATIME_API_KEY }}",
"http_timeout": 500
}
```
<Config
data={{
properties: {
url: "https://wakatime.com/api/v1/users/current/summaries?start=today&end=today&api_key={{ .Env.WAKATIME_API_KEY }}",
http_timeout: 500,
},
}}
/>
:::note
@ -68,8 +71,8 @@ Please refer to the [Environment Variable][templates-environment-variables] page
### Properties
| Name | Type | Description |
| ------------------- | ---------- | ---------------------------------------- |
| Name | Type | Description |
| ------------------ | ---------- | ---------------------------------------- |
| `.CumulativeTotal` | `wtTotals` | object holding total tracked time values |
### wtTotals Properties

View file

@ -5,7 +5,6 @@ module.exports = {
label: "💡 Getting Started",
collapsed: false,
items: [
"introduction",
{
type: "category",
label: "🚀 Get started",
@ -32,6 +31,10 @@ module.exports = {
{
type: "category",
label: "⚙️ Configuration",
link: {
type: 'doc',
id: 'configuration/introduction',
},
items: [
"configuration/general",
"configuration/block",