Skip to content

Commit 0bb1ea3

Browse files
committed
Initial version of about page
Signed-off-by: Nico Burns <nico@nicoburns.com>
1 parent 8e491e3 commit 0bb1ea3

File tree

7 files changed

+231
-6
lines changed

7 files changed

+231
-6
lines changed
File renamed without changes.

src/components/page.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ pub fn Page(
6767
// }
6868
// }
6969
nav {
70-
a { href: "/", "About" }
70+
a { href: "/about", "About" }
7171
a { href: "/status", "Status" }
7272
a {
7373
class: "nav-icon",

src/components/section.rs

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ use dioxus_html_macro::html;
55
use string_cache::DefaultAtom;
66

77
#[derive(Debug, Clone, Copy, PartialEq)]
8+
#[allow(dead_code)]
89
pub enum SectionLevel {
910
H2,
1011
H3,
@@ -13,6 +14,19 @@ pub enum SectionLevel {
1314
H6,
1415
}
1516

17+
#[component]
18+
pub fn AnchorHeader(level: SectionLevel, target: &'static str, children: Element) -> Element {
19+
rsx!({
20+
match level {
21+
SectionLevel::H2 => html!(<h2><a style="color: inherit" href="#{target}" id="{target}">{children}</a></h2>),
22+
SectionLevel::H3 => html!(<h3><a style="color: inherit" href="#{target}" id="{target}">{children}</a></h3>),
23+
SectionLevel::H4 => html!(<h4><a style="color: inherit" href="#{target}" id="{target}">{children}</a></h4>),
24+
SectionLevel::H5 => html!(<h5><a style="color: inherit" href="#{target}" id="{target}">{children}</a></h5>),
25+
SectionLevel::H6 => html!(<h6><a style="color: inherit" href="#{target}" id="{target}">{children}</a></h6>),
26+
}
27+
})
28+
}
29+
1630
#[component]
1731
pub fn Section(
1832
heading: String,
@@ -34,8 +48,8 @@ pub fn Section(
3448
section {
3549
"data-toc-section": true,
3650
id: match (section_key, subsection_key) {
37-
(Some(key), Some(subkey)) => "section-{ key }-subsection-{ subkey }",
38-
(Some(key), None) => "section-{ key }",
51+
(Some(_key), Some(_subkey)) => "section-{ _key }-subsection-{ _subkey }",
52+
(Some(_key), None) => "section-{ _key }",
3953
_ => "",
4054
},
4155
{

src/main.rs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ use axum::{
88
use dashmap::DashMap;
99
use dioxus::prelude::*;
1010
use dioxus_html_macro::html;
11-
use routes::{CssSupportPage, ElementSupportPage, EventSupportPage, GettingStartedPage, HomePage};
11+
use routes::{AboutPage, CssSupportPage, ElementSupportPage, EventSupportPage, GettingStartedPage, HomePage};
1212
use std::{
1313
net::{IpAddr, SocketAddr},
1414
sync::LazyLock,
@@ -28,6 +28,7 @@ async fn main() {
2828
// build our application with a route
2929
let app = Router::new()
3030
.route("/", get(|| dx_route_cached(|| html!(<HomePage />))))
31+
.route("/about", get(|| dx_route_cached(|| html!(<AboutPage />))))
3132
.route("/status", get(|| async { Redirect::to("/status/css") }))
3233
.route(
3334
"/status/css",

src/routes/about.rs

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
use dioxus::prelude::*;
2+
3+
use crate::components::AnchorHeader;
4+
use crate::components::Page;
5+
use crate::components::SectionLevel::*;
6+
7+
#[component]
8+
pub fn AboutPage() -> Element {
9+
rsx! {
10+
Page {
11+
title: "About".into(),
12+
13+
h1 { "About" }
14+
15+
p {
16+
class: "introduction",
17+
"Blitz is an open source web engine written in Rust with a focus on modularity, embeddibilty, and API flexibility."
18+
}
19+
20+
AnchorHeader {
21+
level: H2,
22+
target: "vision",
23+
"Vision"
24+
}
25+
26+
p {
27+
"By taking a modular approach to development with an emphasis on clean module boundaries and sharing code, Blitz aims to:"
28+
}
29+
30+
ol {
31+
li {
32+
dangerous_inner_html: r#"
33+
<b>Power <a href="https://github.com/DioxusLabs/dioxus/tree/main/packages/native" target="_blank">Dioxus Native</a></b> (and perhaps other UI toolkits) - ...
34+
"#
35+
}
36+
li {
37+
p {
38+
dangerous_inner_html: r#"
39+
<b>Enable "alternative" web engine use cases</b>. Including:
40+
"#
41+
}
42+
// p {
43+
// "Alternative use cases may include:"
44+
// }
45+
ul {
46+
style: "margin-bottom: 12px;",
47+
li {
48+
style: "margin-bottom: 6px",
49+
dangerous_inner_html: r#"
50+
Rendering ePUB, HTML Email, Markdown and other non-web HTML formats.<br />
51+
<span style="font-size: 0.9em;color: #666">(see the <a href="https://github.com/DioxusLabs/blitz/tree/main/apps/readme">readme app</a> for markdown)</span>
52+
"#
53+
}
54+
li {
55+
style: "margin-bottom: 6px",
56+
dangerous_inner_html: r#"
57+
Rendering HTML to image (PNG, JPEG, or even SVG)<br />
58+
<span style="font-size: 0.9em;color: #666">
59+
(see <a href="https://github.com/Jamedjo/himg">himg</a> or the
60+
<a href="https://github.com/DioxusLabs/blitz/blob/main/examples/screenshot.rs">screenshot example</a>
61+
for examples of rendering to image).
62+
</span>
63+
"#
64+
}
65+
li {
66+
style: "margin-bottom: 6px",
67+
dangerous_inner_html: r#"
68+
Rendering HTML to PDF
69+
"#
70+
}
71+
li {
72+
style: "margin-bottom: 6px",
73+
dangerous_inner_html: r#"
74+
Embedded “mini html” engines within wider UI toolkits.
75+
"#
76+
}
77+
li {
78+
style: "margin-bottom: 6px",
79+
dangerous_inner_html: r#"
80+
Clients for alternative content (e.g. a Gopher / Gemini) or alternative scripting environments such as
81+
a native HTMX client, or a web client with Python-based scripting.
82+
"#
83+
}
84+
}
85+
}
86+
li {
87+
style: "margin-bottom: 12px",
88+
dangerous_inner_html: r#"
89+
<b>Provide a new alternative to existing web engines.</b> - In this regard Blitz aims competes with the likes of Servo, Ladybird, and Flow. This is a longer term aim. C
90+
"#
91+
}
92+
li {
93+
dangerous_inner_html: r#"
94+
<b>Create a healthier, more competitive browser ecosystem by lowering the barrier to entry for creating new browser engines.</b>
95+
- The web specification is nowTraditional browser engines are largely monolithic: while some components may be made available as reusable
96+
libraries – commonly the JavaScript engine (V8, SpiderMonkey, etc) or rendering backend (Skia, WebRender, etc) – for the most part core
97+
components like style, layout, DOM and networking are tightly coupled to the rest of the browser. This means that any
98+
"#
99+
}
100+
}
101+
102+
AnchorHeader {
103+
level: H2,
104+
target: "strategy",
105+
"Strategy"
106+
}
107+
108+
p {
109+
"Blitz is deliberately focussing on (1) and (2) from above and avoiding trying to build an \"entire web browser\" at once."
110+
}
111+
p {
112+
"
113+
and focussing on two targeted subsets: 1. being an excellent
114+
application runtime (for Dioxus Native) and 2. HTML-and-CSS-only rendering. By deferring work on complex features like JavaScript execution,
115+
browser-grade network caching and security, and process-isolation we hope to be able to bring Blitz to a useful, production-ready state (for the
116+
features it supports) much sooner. And we hope that "
117+
}
118+
119+
AnchorHeader {
120+
level: H2,
121+
target: "comparison-to-other-projects",
122+
"Blitz compared to other projects"
123+
}
124+
125+
p {
126+
127+
}
128+
129+
AnchorHeader {
130+
level: H4,
131+
target: "comparison-to-ui-toolkit",
132+
"Compared to UI toolkits"
133+
}
134+
135+
ul {
136+
li {
137+
dangerous_inner_html: r#"
138+
<b><a href="https://flutter.dev/" target="_blank">Flutter</a> / <a href="http://reactnative.dev" target="_blank">React Native</a> / <a href="https://lynxjs.org/" target="_blank">LynxJS</a></b>
139+
-
140+
"#
141+
}
142+
li {
143+
dangerous_inner_html: r#"
144+
<b><a href="https://ultralig.ht/">Ultralight</a> / <a href="https://sciter.com/">Sciter</a> / <a href="https://github.com/litehtml/litehtml">litehtml</a></b>
145+
- Blitz, Ultralight and Sciter are all lightweight engines with strong support for customisation and integration into a wider rendering engine.
146+
Ultralight is a WebKit fork whereas Blitz and Sciter are their own engines (Sciter currently has better support for older CSS2 styles/layout,
147+
Blitz has better support for modern standards like Flexbox and CSS Grid). Ultralight and Sciter have a proprietary licences whereas Blitz
148+
is open source.
149+
"#
150+
}
151+
li {
152+
dangerous_inner_html: r#"
153+
<b><a href="https://github.com/nicbarker/clay" target="_blank">Clay</a></b> - Clay is a lightweight C library that inspired Blitz
154+
"#
155+
}
156+
}
157+
158+
AnchorHeader {
159+
level: H4,
160+
target: "comparison-to-browsers",
161+
"Compared to browser engines"
162+
}
163+
164+
ul {
165+
li {
166+
dangerous_inner_html: r#"
167+
<p>
168+
<b><a href="https://servo.org" target="_blank">Servo</a> / <a href="https://ladybird.org" target="_blank">Ladybird</a></b>
169+
- Blitz, Servo and Ladybird all aim to provide high quality implementations of web standards (both modern and legacy) that
170+
can compete with those in Gecko/Webkit/Blink.
171+
</p>
172+
<p>
173+
Servo and Ladybird are focussed on creating a “complete” web engine that competes directly with top-tier engines.
174+
Blitz would also like to compete on those terms eventually, but has more of a focus on “alternative” use cases which may
175+
only need part of a web engine, and benefit from flexible APIs that allow the engine to be customised and extended.
176+
</p>
177+
<p>
178+
Blitz can be used in many scenarios in which Servo and Ladybird are unsuitable. For example, if you want to bring your own renderer
179+
or scripting engine.
180+
</p>
181+
<p>
182+
Additionally, Blitz is a less established project at an earlier stage of development than Servo / Ladybird
183+
</p>
184+
"#
185+
}
186+
li {
187+
dangerous_inner_html: r#"
188+
<p>
189+
<b><a href="https://www.ekioh.com/flow-browser/" target="_blank">Ekioh Flow</a></b>
190+
- Flow is another "challenger browser" similar to Servo and Ladybird, and more mature than either. It is also more similar to Blitz in terms of being embeddable.
191+
However, it is neither free nor open source, and is only available under a commericial license.
192+
</p>
193+
"#
194+
}
195+
li {
196+
dangerous_inner_html: r#"
197+
<b>Gecko (Firefox) / WebKit (Safari) / Blink (Chrome)</b> - These engines are much more complete than Blitz. Blitz may be able to
198+
compete with them eventually, but is unlikely to be able do so anytime soon.
199+
"#
200+
}
201+
}
202+
203+
204+
205+
}
206+
}
207+
}

src/routes.rs renamed to src/routes/mod.rs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ pub use support_matrix::*;
33
mod getting_started;
44
pub use getting_started::*;
55
mod home;
6-
pub use home::*;
6+
pub use home::*;
7+
mod about;
8+
pub use about::*;

src/routes/support_matrix.rs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ pub fn StatusTabs(current_tab: &'static str) -> Element {
6060

6161
rsx!(
6262
div {
63+
style: "margin-top: 48px",
6364
class: "tab-container",
6465
for tab in TABS {
6566
a {
@@ -79,7 +80,7 @@ pub fn StatusTabs(current_tab: &'static str) -> Element {
7980
#[component]
8081
pub fn StatusHeader() -> Element {
8182
rsx!(
82-
h1 { "Status" }
83+
h1 { "Status" }
8384
p {
8485
class: "introduction",
8586
dangerous_inner_html: r#"

0 commit comments

Comments
 (0)