Skip to content

Commit 27a3af4

Browse files
committed
feat: add hyperlinks example
1 parent 8f62a3f commit 27a3af4

4 files changed

Lines changed: 137 additions & 0 deletions

File tree

examples/Cargo.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ members = [
88
"colors_rgb",
99
"demo",
1010
"demo2",
11+
"hyperlinks",
1112
"minimal",
1213
"pong",
1314
"shared",

examples/hyperlinks/Cargo.toml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[package]
2+
name = "hyperlinks"
3+
version = "0.1.0"
4+
edition = "2021"
5+
publish = false
6+
7+
[dependencies]
8+
ratzilla.workspace = true
9+
console_error_panic_hook.workspace = true

examples/hyperlinks/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, user-scalable=no"
8+
/>
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css"
12+
/>
13+
<title>Ratzilla Hyperlinks</title>
14+
<style>
15+
body {
16+
margin: 0;
17+
width: 100%;
18+
height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
align-content: center;
24+
background-color: #121212;
25+
}
26+
27+
pre {
28+
font-family: "Fira Code", monospace;
29+
font-size: 16px;
30+
margin: 0;
31+
}
32+
</style>
33+
</head>
34+
<body></body>
35+
</html>

examples/hyperlinks/src/main.rs

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
use std::io;
2+
3+
use ratzilla::{
4+
ratatui::{
5+
layout::{Alignment, Constraint, Layout, Rect},
6+
prelude::{Color, Stylize, Terminal},
7+
widgets::{Block, BorderType, Clear, Paragraph},
8+
},
9+
widgets::Hyperlink,
10+
DomBackend, WebRenderer,
11+
};
12+
13+
fn main() -> io::Result<()> {
14+
std::panic::set_hook(Box::new(console_error_panic_hook::hook));
15+
16+
let terminal = Terminal::new(DomBackend::new()?)?;
17+
terminal.draw_web(|frame| {
18+
frame.render_widget(Clear, frame.area());
19+
20+
let [card] = Layout::vertical([Constraint::Length(9)])
21+
.flex(ratzilla::ratatui::layout::Flex::Center)
22+
.areas(frame.area());
23+
let [card] = Layout::horizontal([Constraint::Length(44)])
24+
.flex(ratzilla::ratatui::layout::Flex::Center)
25+
.areas(card);
26+
27+
frame.render_widget(
28+
Block::bordered()
29+
.border_type(BorderType::Rounded)
30+
.title(" Aliasable Hyperlinks ".bold())
31+
.border_style(Color::LightGreen),
32+
card,
33+
);
34+
35+
let inner = card.inner(ratzilla::ratatui::layout::Margin {
36+
vertical: 1,
37+
horizontal: 2,
38+
});
39+
let [intro, docs, repo, plain] = Layout::vertical([
40+
Constraint::Length(2),
41+
Constraint::Length(1),
42+
Constraint::Length(1),
43+
Constraint::Length(1),
44+
])
45+
.spacing(0)
46+
.areas(inner);
47+
48+
frame.render_widget(
49+
Paragraph::new("DOM links use native browser anchors.")
50+
.alignment(Alignment::Left),
51+
intro,
52+
);
53+
render_link(
54+
frame,
55+
docs,
56+
"Docs: ",
57+
Hyperlink::with_label(
58+
"Ratatui rendering guide".black().on_cyan().bold(),
59+
"https://ratatui.rs/concepts/rendering/under-the-hood/",
60+
),
61+
);
62+
render_link(
63+
frame,
64+
repo,
65+
"Repo: ",
66+
Hyperlink::with_label(
67+
"ratzilla on GitHub".black().on_yellow().italic(),
68+
"https://github.com/ratatui/ratzilla",
69+
),
70+
);
71+
render_link(
72+
frame,
73+
plain,
74+
"Website: ",
75+
Hyperlink::new("https://ratatui.rs".light_cyan().underlined()),
76+
);
77+
});
78+
Ok(())
79+
}
80+
81+
fn render_link(
82+
frame: &mut ratzilla::ratatui::Frame<'_>,
83+
area: Rect,
84+
label: &str,
85+
link: Hyperlink<'_>,
86+
) {
87+
let [prefix, suffix] =
88+
Layout::horizontal([Constraint::Length(label.len() as u16), Constraint::Min(0)])
89+
.areas(area);
90+
frame.render_widget(Paragraph::new(label), prefix);
91+
frame.render_widget(link, suffix);
92+
}

0 commit comments

Comments
 (0)