Skip to content

docs: add missing v-pre directive to Tera {{ }} expressions#8659

Merged
jdx merged 1 commit into
jdx:mainfrom
eitamal:docs/add-missing-vpre
Mar 20, 2026
Merged

docs: add missing v-pre directive to Tera {{ }} expressions#8659
jdx merged 1 commit into
jdx:mainfrom
eitamal:docs/add-missing-vpre

Conversation

@eitamal

@eitamal eitamal commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

Several places in the documentation refer to Tera templates (e.g. {{ foo }}), which clash with Vue templates. Most of the places have been escaped correctly, using the v-pre directive, but not all of them. This PR aims to fill that gap (though I might have missed some). It's pretty simple, but here's a breakdown of what I've done:

  • Single instance Tera templates - for these instances, I've removed the backticks and wrapped them with <code v-pre> tags. For example, the following:
You can use the template `{{ foo }}`

becomes:

You can use the template <code v-pre>{{ foo }}</code>
  • Multi-instance Tera templates - since these instances included a few at a time, I've opted to wrap them with the ::: v-pre custom containers from vitepress, mostly so it's still easy to read in an editor. For example, the following:
You can use these templates: `{{foo}}`, `{{bar}}`, or `{{baz}}`

becomes:

::: v-pre
You can use these templates: `{{foo}}`, `{{bar}}`, or `{{baz}}`
:::
  • Missing curly-brace - while looking for more instances of missing v-pres, I've stumbled upon a line that missing one of the closing curly-braces, in docs/templates.md, which I've fixed. It's not really related to the issue of this PR, but it seemed too small to go in a different one.

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request improves the documentation by resolving conflicts between Tera template syntax ({{ }}) and Vue's template interpretation. By consistently applying v-pre directives, either through inline <code v-pre> tags or block-level ::: v-pre containers, the documentation now accurately displays Tera examples as literal text, enhancing clarity and preventing unintended Vue compilation.

Highlights

  • Single Instance Tera Templates: Wrapped individual {{ ... }} expressions with ` tags to prevent Vue from interpreting them as its own template syntax.
  • Multi-Instance Tera Templates: Enclosed sections containing multiple Tera template examples within ::: v-pre custom containers for improved readability and correct rendering in the documentation.
  • Typo Fix: Corrected a missing closing curly brace in a Tera template example found in docs/templates.md.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@greptile-apps

greptile-apps Bot commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This is a documentation-only PR that fixes missing v-pre directives across several docs pages, preventing VitePress/Vue from misinterpreting Tera template expressions (e.g. {{ foo }}) as Vue template interpolations. It also fixes a pre-existing single-character typo (missing }) in docs/templates.md.

Key changes:

  • docs/contributing.md, docs/dev-tools/backends/http.md, docs/dev-tools/backends/s3.md — Single-occurrence Tera expressions replaced from plain backtick spans to <code v-pre>…</code> tags.
  • docs/dev-tools/backends/forgejo.md, docs/dev-tools/backends/github.md, docs/dev-tools/backends/gitlab.md — Paragraphs with multiple Tera expressions wrapped in ::: v-pre / ::: custom containers.
  • docs/templates.md — Corrected a missing closing } in the concatenation operator example: {{ "hello " ~ 'world' ~ \!` }{{ "hello " ~ 'world' ~ `!` }}`.

All escaping techniques used (<code v-pre>, <span v-pre>, ::: v-pre) are valid VitePress patterns per the official escaping guide. The changes are consistent, low-risk, and the typo fix is a clear improvement.

Confidence Score: 5/5

  • This PR is safe to merge — all changes are documentation-only fixes with no functional code impact.
  • Every change is a targeted, mechanical escaping fix in Markdown documentation files. The three escaping strategies used (<code v-pre>, <span v-pre>, ::: v-pre) are all documented and valid VitePress patterns. The typo correction in templates.md is unambiguously correct. No logic, configuration, or runtime code is touched.
  • No files require special attention.

Important Files Changed

Filename Overview
docs/templates.md Fixed a missing closing curly brace } in the concatenation example (line 91), which was a pre-existing typo. No other issues found.
docs/dev-tools/backends/forgejo.md Added ::: v-pre container around the bin_path description paragraph to prevent Vue template processing of {{ }} expressions; also added a trailing newline before the <Settings> component tag.
docs/dev-tools/backends/github.md Same ::: v-pre container fix as forgejo.md for the bin_path description paragraph, plus trailing newline before <Settings>.
docs/dev-tools/backends/gitlab.md Same ::: v-pre container fix as forgejo.md/github.md for the bin_path description paragraph, plus trailing newline before <Settings>.
docs/dev-tools/backends/http.md Replaced inline backtick-wrapped {{version}} with <code v-pre>{{version}}</code> in the bin_path description paragraph.
docs/dev-tools/backends/s3.md Replaced inline backtick-wrapped {{ version }} with <code v-pre>{{ version }}</code> in the url description paragraph.
docs/contributing.md Replaced inline backtick-wrapped {{version}} with <code v-pre>{{version}}</code> in the test pattern description.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Tera `{{ }}` expression\nin prose documentation"] --> B{How many\noccurrences\nin the paragraph?}
    B -- "Single" --> C["Replace backtick span\nwith `<code v-pre>…</code>`"]
    B -- "Multiple" --> D["Wrap paragraph in\n`::: v-pre` / `:::` container"]
    C --> E["VitePress renders correctly\nwithout Vue interpolation"]
    D --> E
    E --> F["Docs build succeeds ✓"]
Loading

Last reviewed commit: "docs: add missing `v..."

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adds the v-pre directive to Tera template expressions in several documentation files to prevent them from being interpreted by Vue. The changes use <code v-pre> for single instances and ::: v-pre containers for paragraphs with multiple instances. A missing closing curly brace in a code example in docs/templates.md is also fixed. The changes are consistent with the pull request's goal of improving documentation rendering.


### `bin_path`

::: v-pre

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this right? looks wrong to me

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vitepress is new to me, but I think it's right. I just followed the escaping documentation: https://vuejs.github.io/vitepress/v1/guide/using-vue#escaping

The idea was to use a single v-pre rather than one for each template expression, which can be achieved using a span with v-pre over multiple expressions or the vitepress custom container that I used here.

I'm happy to change it to <code v-pre> for each expression or a single/multiple span(s), if the container approach doesn't work for you. Otherwise, what is it about it that looks wrong?

I've been using mise for a while now and I love it. So, I'm just happy to at least try and help improve it if I can, but I don't want to become a burden. 🙂

Also, here's a side-by-side to show the fix:
image

(Left is mise.jdx.dev)

@jdx jdx merged commit a76ff84 into jdx:main Mar 20, 2026
36 checks passed
@eitamal eitamal deleted the docs/add-missing-vpre branch March 21, 2026 06:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants