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

Simplify the docs landing page #517

Merged
merged 4 commits into from
Feb 22, 2025
Merged

Simplify the docs landing page #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6bec2bb
Simplify the landing page
temeddix Feb 22, 2025
ab533b1
Organize CSS
temeddix Feb 22, 2025
e55c836
Update source suffix
temeddix Feb 22, 2025
0da48c3
Restore the introduction as a separate page
temeddix Feb 22, 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
12 changes: 12 additions & 0 deletions documentation/source/_templates/icon_pair.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<style>
.icon-box {
width: 100px;
height: 100px;
background-color: hsla(0, 0%, 50%, 20%);
padding: 10px;
border-radius: 4px;
}
</style>

<img src="/_static/rust_icon.svg" class="icon-box" alt="Rust Icon" />
<img src="/_static/flutter_icon.svg" class="icon-box" alt="Flutter Icon" />
257 changes: 36 additions & 221 deletions documentation/source/_templates/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<title>Rinf</title>
<style>
/*Furo*/
.content {
margin: auto;
flex: 1;
}
.mobile-header {
position: absolute;
visibility: hidden;
.article-container {
flex: 1;
}
#furo-main-content {
height: 100%;
width: 100%;
}
.sidebar-drawer {
position: absolute;
Expand All @@ -15,247 +18,59 @@
position: absolute;
visibility: hidden;
}
.outermost {
padding: 0px 24px 0px;
text-align: center;
}
.front-panel {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100svh;
.mobile-header {
position: absolute;
visibility: hidden;
}
.rows {
</style>

<style>
/*Content*/
.outermost {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
.columns {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.semi-transparent {
opacity: 0.6;
text-align: center;
}
.preview-image {
border-radius: 2.5%;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4);
margin-bottom: 24px;
width: 400px;
max-width: 60svw !important;
max-width: 60svw;
outline: 1px solid rgba(122, 122, 122, 1);
outline-offset: -1px;
filter: grayscale();
margin: 24px 0px;
margin: 24px;
}
.web-title {
font-weight: bold;
.project-title {
margin: 0em;
font-size: 2.4em;
font-weight: 200;
}
.spacing {
height: 120px;
}
.guide-box {
max-width: min(36em, 80svw);
min-width: 18em;
margin: 0em auto;
padding: 16px;
text-align: left;
flex: 1;
}
.platform-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
max-width: 500px;
gap: 8px;
margin: 0px auto;
padding: 4px;
}
.platform-box {
height: fit-content;
margin: 4px;
padding: 16px;
background-color: rgba(127, 127, 127, 0.08);
border-radius: 4px;
text-align: left;
}
.repeated-box {
width: 100%;
height: fit-content;
margin: 8px;
padding: 24px 40px;
text-align: left;
background-color: rgba(127, 127, 127, 0.08);
border-radius: 4px;
.project-info {
opacity: 0.6;
}
.lang-icon {
margin-top: 30px;
width: 120px;
padding: 16px;
background-color: rgba(127, 127, 127, 0.08);
border-radius: 4px;
.spacing {
height: 48px;
}
</style>

<div class="outermost">
<div class="front-panel">
<div class="spacing"></div>
<div>
<a
href="https://rinf-demo.cunarist.com"
target="_blank"
title="Visit demo"
>
<img
src="_static/preview.webp"
loop
class="preview-image"
draggable="false"
/>
</a>
</div>
<div>
<p class="web-title">Rinf</p>
<p class="semi-transparent"><strong>RUST IN FLUTTER</strong></p>
</div>
<div class="spacing"></div>
</div>
<div class="spacing"></div>
<div>
<div class="columns">
<div class="guide-box">
<img class="lang-icon" src="_static/flutter_icon.svg" />
<h4>Flutter for Aesthetics</h4>
<p>
While Rust is a powerful language for high-performance native
programming, its ecosystem for building graphical user interfaces is
far from being mature. Though Rust already has some GUI frameworks,
they don't compete with extensive support and smooth development
experience that Flutter provides. It's only Flutter that compiles to
all 6 major platforms from a single codebase.
</p>
<p>
Flutter is a powerful and versatile framework that has gained immense
popularity for building cross-platform applications with stunning user
interfaces. It provides declarative pattern, beautiful widgets, hot
reload, convenient debugging tools, and dedicated packages for user
interfaces right out-of-the-box.
</p>
</div>
<div class="guide-box">
<img class="lang-icon" src="_static/rust_icon.svg" />
<h4>Rust for Performance</h4>
<p>
While Dart excels as an amazing object-oriented language for GUI apps,
it may not always meet demanding performance requirements, and it may
lack advanced data manipulation packages. This is where
<a
href="https://programming-language-benchmarks.vercel.app/dart-vs-rust"
>Rust</a
>
steps in, offering an incredible speed advantage of roughly 2-40 times
faster than Dart, alongside the ability to leverage multiple threads
and various crates that get the job done.
</p>
<p>
Rust has garnered a devoted following, being
<a
href="https://survey.stackoverflow.co/2022#section-most-loved-dreaded-and-wanted-programming-scripting-and-markup-languages"
>the most loved programming language</a
>
on Stack Overflow. Rust's simplicity, memory safety, superior
performance, vibrant community, and robust tooling support contribute
to its growing popularity and ensures high productivity.
</p>
</div>
</div>
<a href="https://rinf-demo.cunarist.com" target="_blank" title="Visit demo">
<img
src="/_static/preview.webp"
loop
class="preview-image"
draggable="false"
/>
</a>
</div>
<div class="spacing"></div>
<div>
<h4>Cross-platform</h4>
<div class="platform-grid">
<div class="platform-box"><h6>✅ Linux</h6></div>
<div class="platform-box"><h6>✅ Android</h6></div>
<div class="platform-box"><h6>✅ Windows</h6></div>
<div class="platform-box"><h6>✅ macOS</h6></div>
<div class="platform-box"><h6>✅ iOS</h6></div>
<div class="platform-box"><h6>✅ Web</h6></div>
</div>
<p class="project-title">Rinf</p>
<p class="project-info"><strong>RUST IN FLUTTER</strong></p>
</div>
<div class="spacing"></div>
<div>
<h4>Streamlined</h4>
<div class="columns">
<div class="repeated-box">
<h6>Truly easy</h6>
<p>It only takes about a minute or two to fully setup your app.</p>
</div>
<div class="repeated-box">
<h6>Efficient</h6>
<p>
All communication occurs solely through native FFI. There are no
webviews, web servers, hidden threads, or unnecessary memory copying
that might cause performance overhead. This setup acts as a very thin
wrapper around Dart and Rust.
</p>
</div>
<div class="repeated-box">
<h6>Minimal</h6>
<p>
This is not a bulky framework that requires you to install so many
dependencies and use complicated CLI commands. Just focus on your code
using your preferred Flutter and Rust libraries.
</p>
</div>
<div class="repeated-box">
<h6>Scalable</h6>
<p>
Creating hundreds or even thousands of message APIs between Dart and
Rust feels smooth and clean. Additionally, you have the flexibility to
utilize any number of Rust library crates, perhaps including those you
might have been working on.
</p>
</div>
<div class="repeated-box">
<h6>High-level interface</h6>
<p>
No messing with sensitive build files, no concerns about memory
safety. Stay with Dart and Rust that you're familiar with.
</p>
</div>
<div class="repeated-box">
<h6>Well maintained</h6>
<p>
Our automated workflows including build tests are always kept passing,
thanks to the main branch protection rule. Also, the number of
external dependencies is kept as low as possible and documentations
are thoughtfully organized.
</p>
</div>
<div class="repeated-box">
<h6>Convenient debugging</h6>
<p>
All the debugging functionalities are provided by default, without the
need for dealing with browsers or mobile emulators. Also, the whole
Rust logic is automatically restarted on Dart's hot restart.
</p>
</div>
<div class="repeated-box">
<h6>Reliable</h6>
<p>
Each component is supported by huge communities, ensuring a strong
emphasis on future safety. You can easily assure your team of
stability since this framework's underlying concept is fairly simple.
</p>
</div>
</div>
</div>
<div class="spacing"></div>
</div>
2 changes: 1 addition & 1 deletion documentation/source/conf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
# https://www.sphinx-doc.org/en/master/usage/configuration.html#general-configuration

extensions = ["myst_parser"]
source_suffix = {".rst": "restructuredtext", ".md": "markdown"}
source_suffix = {".md": "markdown"}
templates_path = ["_templates"]
exclude_patterns = []

Expand Down
1 change: 1 addition & 0 deletions documentation/source/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
:maxdepth: 1
:hidden:

introduction.md
installing-components.md
applying-template.md
running-and-building.md
Expand Down
52 changes: 52 additions & 0 deletions documentation/source/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Introduction

## Why Rinf?

Rinf combines Flutter's UI ease with Rust's speed, enabling efficient, scalable cross-platform apps.

```{eval-rst}
.. raw:: html
:file: _templates/icon_pair.html
```

### Flutter for Aesthetics

Flutter provides a mature and efficient ecosystem for building cross-platform graphical user interfaces. It compiles to all six major platforms and offers:

- Declarative UI pattern
- Beautiful widgets
- Hot reload for rapid development
- Dedicated debugging tools
- Comprehensive UI packages

### Rust for Performance

While Dart is excellent for UI, Rust excels in performance-critical tasks. Rust offers:

- 2-40x speed advantage over Dart
- Memory safety without garbage collection
- Multi-threading support
- Access to a vast ecosystem of crates
- A highly loved and robust community

### Benefits

- **Easy setup** – Setup takes only a minute or two.
- **Efficient** – Uses native FFI with no webviews, servers, or extra memory copying.
- **Minimal** – No bulky framework, just Flutter and Rust with minimal dependencies.
- **Scalable** – Easily handle hundreds or thousands of message APIs.
- **High-level interface** – No need to modify build files or worry about memory safety.
- **Well maintained** – Automated tests, low dependencies, and clear documentation.
- **Convenient debugging** – No browsers or emulators; Rust logic restarts on hot restart.
- **Reliable** – Backed by strong communities and a simple, future-proof design.

## Cross-Platform Compatibility

Rinf enables seamless development across major platforms:

- ✅ Linux
- ✅ Android
- ✅ Windows
- ✅ macOS
- ✅ iOS
- ✅ Web
Loading