Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: viewport horizontal scroll, gutter, highlight examples #1304

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+36 −30
Open

docs: viewport horizontal scroll, gutter, highlight examples #1304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1132e34
docs: horizontal scroll examples
caarlos0 Feb 3, 2025
eabe93e
docs: gutter, highlight
caarlos0 Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions examples/chat/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ func initialModel() model {
vp := viewport.New(30, 5)
vp.SetContent(`Welcome to the chat room!
Type a message and press Enter to send.`)
vp.KeyMap.Left.SetEnabled(false)
vp.KeyMap.Right.SetEnabled(false)
Comment on lines +58 to +59
Copy link
Member Author

Choose a reason for hiding this comment

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

not sure if this should be disabled by default?

Copy link
Member

Choose a reason for hiding this comment

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

hmm good question. I'd look at existing tools like less and more


ta.KeyMap.InsertNewline.SetEnabled(false)

Expand Down
3 changes: 1 addition & 2 deletions examples/glamour/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@ const content = `
| Banana Split | $5 | A classic |
| Cream Puff | $3 | Pretty creamy! |

All our dishes are made in-house by Karen, our chef. Most of our ingredients
are from our garden or the fish market down the street.
All our dishes are made in-house by Karen, our chef. Most of our ingredients are from our garden or the fish market down the street.

Some famous people that have eaten here lately:

Expand Down
8 changes: 4 additions & 4 deletions examples/go.mod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ go 1.21
toolchain go1.22.5

require (
github.com/charmbracelet/bubbles v0.20.0
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2
github.com/charmbracelet/bubbletea v1.2.0
github.com/charmbracelet/glamour v0.8.0
github.com/charmbracelet/harmonica v0.2.0
github.com/charmbracelet/lipgloss v1.0.0
github.com/charmbracelet/lipgloss v1.0.1-0.20250121132900-022e96717265
github.com/charmbracelet/x/exp/teatest v0.0.0-20240521184646-23081fb03b28
github.com/fogleman/ease v0.0.0-20170301025033-8da417bf1776
github.com/lucasb-eyer/go-colorful v1.2.0
Expand All @@ -22,8 +22,8 @@ require (
github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
github.com/aymanbagabas/go-udiff v0.2.0 // indirect
github.com/aymerick/douceur v0.2.0 // indirect
github.com/charmbracelet/x/ansi v0.6.0 // indirect
github.com/charmbracelet/x/exp/golden v0.0.0-20240815200342-61de596daa2b // indirect
github.com/charmbracelet/x/ansi v0.8.0 // indirect
github.com/charmbracelet/x/exp/golden v0.0.0-20241011142426-46044092ad91 // indirect
github.com/charmbracelet/x/term v0.2.1 // indirect
github.com/dlclark/regexp2 v1.11.0 // indirect
github.com/dustin/go-humanize v1.0.1 // indirect
Expand Down
16 changes: 8 additions & 8 deletions examples/go.sum
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,18 @@ github.com/aymanbagabas/go-udiff v0.2.0 h1:TK0fH4MteXUDspT88n8CKzvK0X9O2xu9yQjWp
github.com/aymanbagabas/go-udiff v0.2.0/go.mod h1:RE4Ex0qsGkTAJoQdQQCA0uG+nAzJO/pI/QwceO5fgrA=
github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
github.com/charmbracelet/bubbles v0.20.0 h1:jSZu6qD8cRQ6k9OMfR1WlM+ruM8fkPWkHvQWD9LIutE=
github.com/charmbracelet/bubbles v0.20.0/go.mod h1:39slydyswPy+uVOHZ5x/GjwVAFkCsV8IIVy+4MhzwwU=
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2 h1:tKL2AWN8NbkUvejlspc7XIZygsng59voDXlxpfW2CW8=
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2/go.mod h1:Zotyd8CRrGE7bJVol81jumtVG2WvU/ysXnLXFCCD9Z4=
github.com/charmbracelet/glamour v0.8.0 h1:tPrjL3aRcQbn++7t18wOpgLyl8wrOHUEDS7IZ68QtZs=
github.com/charmbracelet/glamour v0.8.0/go.mod h1:ViRgmKkf3u5S7uakt2czJ272WSg2ZenlYEZXT2x7Bjw=
github.com/charmbracelet/harmonica v0.2.0 h1:8NxJWRWg/bzKqqEaaeFNipOu77YR5t8aSwG4pgaUBiQ=
github.com/charmbracelet/harmonica v0.2.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
github.com/charmbracelet/lipgloss v1.0.0 h1:O7VkGDvqEdGi93X+DeqsQ7PKHDgtQfF8j8/O2qFMQNg=
github.com/charmbracelet/lipgloss v1.0.0/go.mod h1:U5fy9Z+C38obMs+T+tJqst9VGzlOYGj4ri9reL3qUlo=
github.com/charmbracelet/x/ansi v0.6.0 h1:qOznutrb93gx9oMiGf7caF7bqqubh6YIM0SWKyA08pA=
github.com/charmbracelet/x/ansi v0.6.0/go.mod h1:KBUFw1la39nl0dLl10l5ORDAqGXaeurTQmwyyVKse/Q=
github.com/charmbracelet/x/exp/golden v0.0.0-20240815200342-61de596daa2b h1:MnAMdlwSltxJyULnrYbkZpp4k58Co7Tah3ciKhSNo0Q=
github.com/charmbracelet/x/exp/golden v0.0.0-20240815200342-61de596daa2b/go.mod h1:wDlXFlCrmJ8J+swcL/MnGUuYnqgQdW9rhSD61oNMb6U=
github.com/charmbracelet/lipgloss v1.0.1-0.20250121132900-022e96717265 h1:pezCx+0ILRh9K7dj+D/DJ2rToW9ZHa7owZdgPn264gQ=
github.com/charmbracelet/lipgloss v1.0.1-0.20250121132900-022e96717265/go.mod h1:QRGthpgH59/perglqXZC8xPHqDGZ9BB45ChJCFEWEMI=
github.com/charmbracelet/x/ansi v0.8.0 h1:9GTq3xq9caJW8ZrBTe0LIe2fvfLR/bYXKTx2llXn7xE=
github.com/charmbracelet/x/ansi v0.8.0/go.mod h1:wdYl/ONOLHLIVmQaxbIYEC/cRKOQyjTkowiI4blgS9Q=
github.com/charmbracelet/x/exp/golden v0.0.0-20241011142426-46044092ad91 h1:payRxjMjKgx2PaCWLZ4p3ro9y97+TVLZNaRZgJwSVDQ=
github.com/charmbracelet/x/exp/golden v0.0.0-20241011142426-46044092ad91/go.mod h1:wDlXFlCrmJ8J+swcL/MnGUuYnqgQdW9rhSD61oNMb6U=
github.com/charmbracelet/x/exp/teatest v0.0.0-20240521184646-23081fb03b28 h1:sOWKNRjt8uOEVgPiJVIJCse1+mUDM2F/vYY6W0Go640=
github.com/charmbracelet/x/exp/teatest v0.0.0-20240521184646-23081fb03b28/go.mod h1:l1w+LTJZCCozeGzMEWGxRw6Mo2DfcZUvupz8HGubdes=
github.com/charmbracelet/x/term v0.2.1 h1:AQeHeLZ1OqSXhrAWpYUtZyX1T3zVxfpZuEQMIQaGIAQ=
Expand Down
23 changes: 9 additions & 14 deletions examples/pager/artichoke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
Glow
====
# Glow

A casual introduction. 你好世界!

## Let’s talk about artichokes

The _artichoke_ is mentioned as a garden plant in the 8th century BC by Homer
**and** Hesiod. The naturally occurring variant of the artichoke, the cardoon,
which is native to the Mediterranean area, also has records of use as a food
among the ancient Greeks and Romans. Pliny the Elder mentioned growing of
_carduus_ in Carthage and Cordoba.
The _artichoke_ is mentioned as a garden plant in the 8th century BC by Homer **and** Hesiod. The naturally occurring variant of the artichoke, the cardoon, which is native to the Mediterranean area, also has records of use as a food among the ancient Greeks and Romans. Pliny the Elder mentioned growing of _carduus_ in Carthage and Cordoba.

> He holds him with a skinny hand,
> ‘There was a ship,’ quoth he.
Expand All @@ -25,20 +20,20 @@ _carduus_ in Carthage and Cordoba.
1. Carrots
1. Celery
1. Tacos
* Soft
* Hard
- Soft
- Hard
1. Cucumber

## Things to eat today

* [x] Carrots
* [x] Ramen
* [ ] Currywurst
- [x] Carrots
- [x] Ramen
- [ ] Currywurst

### Power levels of the aforementioned foods

| Name | Power | Comment |
| --- | --- | --- |
| ---------- | ----- | ---------------- |
| Carrots | 9001 | It’s over 9000?! |
| Ramen | 9002 | Also over 9000?! |
| Currywurst | 10000 | What?! |
Expand All @@ -63,6 +58,6 @@ main =
map hello [ "artichoke", "alcachofa" ] & intercalculate "\n" & putStrLn
```

***
---

_Alcachofa_, if you were wondering, is artichoke in Spanish.
8 changes: 7 additions & 1 deletion examples/pager/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ package main
import (
"fmt"
"os"
"regexp"
"strings"

"github.com/charmbracelet/bubbles/viewport"
Expand Down Expand Up @@ -62,7 +63,12 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
// here.
m.viewport = viewport.New(msg.Width, msg.Height-verticalMarginHeight)
m.viewport.YPosition = headerHeight
m.viewport.LeftGutterFunc = viewport.LineNumberGutter(lipgloss.NewStyle())
m.viewport.SetContent(m.content)
m.viewport.SetHighlights(regexp.MustCompile("arti").FindAllStringIndex(m.content, -1))
m.viewport.HighlightStyle = lipgloss.NewStyle().Underline(true)
m.viewport.SelectedHighlightStyle = lipgloss.NewStyle().Underline(true)
m.viewport.HighlightNext()
m.ready = true
} else {
m.viewport.Width = msg.Width
Expand Down Expand Up @@ -91,7 +97,7 @@ func (m model) headerView() string {
}

func (m model) footerView() string {
info := infoStyle.Render(fmt.Sprintf("%3.f%%", m.viewport.ScrollPercent()*100))
info := infoStyle.Render(fmt.Sprintf("%3.f%%:%3.f%%", m.viewport.ScrollPercent()*100, m.viewport.HorizontalScrollPercent()*100))
line := strings.Repeat("─", max(0, m.viewport.Width-lipgloss.Width(info)))
return lipgloss.JoinHorizontal(lipgloss.Center, line, info)
}
Expand Down
3 changes: 2 additions & 1 deletion go.mod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module github.com/charmbracelet/bubbletea
go 1.18

require (
github.com/charmbracelet/lipgloss v1.0.0
github.com/charmbracelet/lipgloss v1.0.1-0.20250121132900-022e96717265
github.com/charmbracelet/x/ansi v0.8.0
github.com/charmbracelet/x/term v0.2.1
github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f
Expand All @@ -16,6 +16,7 @@ require (

require (
github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2 // indirect
github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
github.com/mattn/go-isatty v0.0.20 // indirect
github.com/mattn/go-runewidth v0.0.16 // indirect
Expand Down
3 changes: 3 additions & 0 deletions go.sum
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
github.com/aymanbagabas/go-osc52/v2 v2.0.1 h1:HwpRHbFMcZLEVr42D4p7XBqjyuxQH5SMiErDT4WkJ2k=
github.com/aymanbagabas/go-osc52/v2 v2.0.1/go.mod h1:uYgXzlJ7ZpABp8OJ+exZzJJhRNQ2ASbcXHWsFqH8hp8=
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2 h1:tKL2AWN8NbkUvejlspc7XIZygsng59voDXlxpfW2CW8=
github.com/charmbracelet/bubbles v0.20.1-0.20250123163325-afe305ca65b2/go.mod h1:Zotyd8CRrGE7bJVol81jumtVG2WvU/ysXnLXFCCD9Z4=
github.com/charmbracelet/lipgloss v1.0.0 h1:O7VkGDvqEdGi93X+DeqsQ7PKHDgtQfF8j8/O2qFMQNg=
github.com/charmbracelet/lipgloss v1.0.0/go.mod h1:U5fy9Z+C38obMs+T+tJqst9VGzlOYGj4ri9reL3qUlo=
github.com/charmbracelet/lipgloss v1.0.1-0.20250121132900-022e96717265/go.mod h1:QRGthpgH59/perglqXZC8xPHqDGZ9BB45ChJCFEWEMI=
github.com/charmbracelet/x/ansi v0.8.0 h1:9GTq3xq9caJW8ZrBTe0LIe2fvfLR/bYXKTx2llXn7xE=
github.com/charmbracelet/x/ansi v0.8.0/go.mod h1:wdYl/ONOLHLIVmQaxbIYEC/cRKOQyjTkowiI4blgS9Q=
github.com/charmbracelet/x/term v0.2.1 h1:AQeHeLZ1OqSXhrAWpYUtZyX1T3zVxfpZuEQMIQaGIAQ=
Expand Down
Loading