sharang/certifai
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Activity

Compare commits

base: sharang:b8aad0e23c60aad0fc7f714016d49b57ec265322
Branches Tags
sharang:main sharang:feat/compliance-scanner-link sharang:feat/litellm-usage-stats sharang:feat/keycloak-theme-social-footer sharang:feat/CAI-2 sharang:feat/CAI-4 sharang:feat/CAI-1
...
compare: sharang:f102d96c09e00e5335f25553abbb5089b1129039
Branches Tags
sharang:main sharang:feat/compliance-scanner-link sharang:feat/litellm-usage-stats sharang:feat/keycloak-theme-social-footer sharang:feat/CAI-2 sharang:feat/CAI-4 sharang:feat/CAI-1

4 Commits
b8aad0e23c ... f102d96c09

Author SHA1 Message Date
Sharang Parnerkar
f102d96c09 feat: added AGENTS.md 2026-02-15 23:38:13 +01:00
Sharang Parnerkar
c44177cbc2 feat: added cargo and clippy 2026-02-15 23:37:58 +01:00
Sharang Parnerkar
73ad7bd16d feat: added gitignore 2026-02-15 23:37:42 +01:00
Sharang Parnerkar
421f99537e feat: added server and web base code 2026-02-15 23:37:25 +01:00
22 changed files with 4807 additions and 0 deletions
Expand all files Collapse all files

7
.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
# Generated by Cargo
# will have compiled files and executables
/target
.DS_Store
# These are backup files generated by rustfmt
**/*.rs.bk

265
AGENTS.md Normal file
View File

@@ -0,0 +1,265 @@
You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone
Provide concise code examples with detailed descriptions
# Dioxus Dependency
You can add Dioxus to your `Cargo.toml` like this:
```toml
[dependencies]
dioxus = { version = "0.7.1" }
[features]
default = ["web", "webview", "server"]
web = ["dioxus/web"]
webview = ["dioxus/desktop"]
server = ["dioxus/server"]
```
# Launching your application
You need to create a main function that sets up the Dioxus runtime and mounts your root component.
```rust
use dioxus::prelude::*;
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
rsx! { "Hello, Dioxus!" }
}
```
Then serve with `dx serve`:
```sh
curl -sSL http://dioxus.dev/install.sh | sh
dx serve
```
# UI with RSX
```rust
rsx! {
div {
class: "container", // Attribute
color: "red", // Inline styles
width: if condition { "100%" }, // Conditional attributes
"Hello, Dioxus!"
}
// Prefer loops over iterators
for i in 0..5 {
div { "{i}" } // use elements or components directly in loops
}
if condition {
div { "Condition is true!" } // use elements or components directly in conditionals
}
{children} // Expressions are wrapped in brace
{(0..5).map(|i| rsx! { span { "Item {i}" } })} // Iterators must be wrapped in braces
}
```
# Assets
The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project.
```rust
rsx! {
img {
src: asset!("/assets/image.png"),
alt: "An image",
}
}
```
## Styles
The `document::Stylesheet` component will inject the stylesheet into the `<head>` of the document
```rust
rsx! {
document::Stylesheet {
href: asset!("/assets/styles.css"),
}
}
```
# Components
Components are the building blocks of apps
* Component are functions annotated with the `#[component]` macro.
* The function name must start with a capital letter or contain an underscore.
* A component re-renders only under two conditions:
1. Its props change (as determined by `PartialEq`).
2. An internal reactive state it depends on is updated.
```rust
#[component]
fn Input(mut value: Signal<String>) -> Element {
rsx! {
input {
value,
oninput: move |e| {
*value.write() = e.value();
},
onkeydown: move |e| {
if e.key() == Key::Enter {
value.write().clear();
}
},
}
}
}
```
Each component accepts function arguments (props)
* Props must be owned values, not references. Use `String` and `Vec<T>` instead of `&str` or `&[T]`.
* Props must implement `PartialEq` and `Clone`.
* To make props reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` props will automatically re-run when the prop changes.
# State
A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun.
## Local State
The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value.
Use `use_memo` to create a memoized value that recalculates when its dependencies change. Memos are useful for expensive calculations that you don't want to repeat unnecessarily.
```rust
#[component]
fn Counter() -> Element {
let mut count = use_signal(|| 0);
let mut doubled = use_memo(move || count() * 2); // doubled will re-run when count changes because it reads the signal
rsx! {
h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal
h2 { "Doubled: {doubled}" }
button {
onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter
"Increment"
}
button {
onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal
"Increment with with_mut"
}
}
}
```
## Context API
The Context API allows you to share state down the component tree. A parent provides the state using `use_context_provider`, and any child can access it with `use_context`
```rust
#[component]
fn App() -> Element {
let mut theme = use_signal(|| "light".to_string());
use_context_provider(|| theme); // Provide a type to children
rsx! { Child {} }
}
#[component]
fn Child() -> Element {
let theme = use_context::<Signal<String>>(); // Consume the same type
rsx! {
div {
"Current theme: {theme}"
}
}
}
```
# Async
For state that depends on an asynchronous operation (like a network request), Dioxus provides a hook called `use_resource`. This hook manages the lifecycle of the async task and provides the result to your component.
* The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated
* The `Resource` object returned can be in several states when read:
1. `None` if the resource is still loading
2. `Some(value)` if the resource has successfully loaded
```rust
let mut dog = use_resource(move || async move {
// api request
});
match dog() {
Some(dog_info) => rsx! { Dog { dog_info } },
None => rsx! { "Loading..." },
}
```
# Routing
All possible routes are defined in a single Rust `enum` that derives `Routable`. Each variant represents a route and is annotated with `#[route("/path")]`. Dynamic Segments can capture parts of the URL path as parameters by using `:name` in the route string. These become fields in the enum variant.
The `Router<Route> {}` component is the entry point that manages rendering the correct component for the current URL.
You can use the `#[layout(NavBar)]` to create a layout shared between pages and place an `Outlet<Route> {}` inside your layout component. The child routes will be rendered in the outlet.
```rust
#[derive(Routable, Clone, PartialEq)]
enum Route {
#[layout(NavBar)] // This will use NavBar as the layout for all routes
#[route("/")]
Home {},
#[route("/blog/:id")] // Dynamic segment
BlogPost { id: i32 },
}
#[component]
fn NavBar() -> Element {
rsx! {
a { href: "/", "Home" }
Outlet<Route> {} // Renders Home or BlogPost
}
}
#[component]
fn App() -> Element {
rsx! { Router::<Route> {} }
}
```
```toml
dioxus = { version = "0.7.1", features = ["router"] }
```
# Fullstack
Fullstack enables server rendering and ipc calls. It uses Cargo features (`server` and a client feature like `web`) to split the code into a server and client binaries.
```toml
dioxus = { version = "0.7.1", features = ["fullstack"] }
```
## Server Functions
Use the `#[post]` / `#[get]` macros to define an `async` function that will only run on the server. On the server, this macro generates an API endpoint. On the client, it generates a function that makes an HTTP request to that endpoint.
```rust
#[post("/api/double/:path/&query")]
async fn double_server(number: i32, path: String, query: i32) -> Result<i32, ServerFnError> {
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
Ok(number * 2)
}
```
## Hydration
Hydration is the process of making a server-rendered HTML page interactive on the client. The server sends the initial HTML, and then the client-side runs, attaches event listeners, and takes control of future rendering.
### Errors
The initial UI rendered by the component on the client must be identical to the UI rendered on the server.
* Use the `use_server_future` hook instead of `use_resource`. It runs the future on the server, serializes the result, and sends it to the client, ensuring the client has the data immediately for its first render.
* Any code that relies on browser-specific APIs (like accessing `localStorage`) must be run *after* hydration. Place this code inside a `use_effect` hook.

4053
Cargo.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
Cargo.toml Normal file
View File

@@ -0,0 +1,9 @@
[workspace]
resolver = "2"
members = ["packages/web", "packages/api"]
[workspace.dependencies]
dioxus = { version = "0.7.1" }
# workspace
api = { path = "packages/api" }

8
clippy.toml Normal file
View File

@@ -0,0 +1,8 @@
await-holding-invalid-types = [
"generational_box::GenerationalRef",
{ path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
"generational_box::GenerationalRefMut",
{ path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
"dioxus_signals::WriteLock",
{ path = "dioxus_signals::WriteLock", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
]

10
packages/api/Cargo.toml Normal file
View File

@@ -0,0 +1,10 @@
[package]
name = "api"
version = "0.1.0"
edition = "2021"
[dependencies]
dioxus = { workspace = true, features = ["fullstack"] }
[features]
server = ["dioxus/server"]

13
packages/api/README.md Normal file
View File

@@ -0,0 +1,13 @@
# API
This crate contains all shared fullstack server functions. This is a great place to place any server-only logic you would like to expose in multiple platforms like a method that accesses your database or a method that sends an email.
This crate will be built twice:
1. Once for the server build with the `dioxus/server` feature enabled
2. Once for the client build with the client feature disabled
During the server build, the server functions will be collected and hosted on a public API for the client to call. During the client build, the server functions will be compiled into the client build.
## Dependencies
Most server dependencies (like sqlx and tokio) will not compile on client platforms like WASM. To avoid building server dependencies on the client, you should add platform specific dependencies under the `server` feature in the [Cargo.toml](../Cargo.toml) file. More details about managing server only dependencies can be found in the [Dioxus guide](https://dioxuslabs.com/learn/0.7/guides/fullstack/managing_dependencies#adding-server-only-dependencies).

8
packages/api/src/lib.rs Normal file
View File

@@ -0,0 +1,8 @@
//! This crate contains all shared fullstack server functions.
use dioxus::prelude::*;
/// Echo the user input on the server.
#[post("/api/echo")]
pub async fn echo(input: String) -> Result<String, ServerFnError> {
Ok(input)
}

13
packages/web/Cargo.toml Normal file
View File

@@ -0,0 +1,13 @@
[package]
name = "web"
version = "0.1.0"
edition = "2021"
[dependencies]
dioxus = { workspace = true, features = ["router", "fullstack"] }
dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false }
[features]
default = []
web = ["dioxus/web"]
server = ["dioxus/server"]

30
packages/web/README.md Normal file
View File

@@ -0,0 +1,30 @@
# Development
The web crate defines the entrypoint for the web app along with any assets, components and dependencies that are specific to web builds. The web crate starts out something like this:
```
web/
├─ assets/ # Assets used by the web app - Any platform specific assets should go in this folder
├─ src/
│ ├─ main.rs # The entrypoint for the web app.It also defines the routes for the web platform
│ ├─ views/ # The views each route will render in the web version of the app
│ │ ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
│ │ ├─ blog.rs # The component that will render at the /blog/:id route
│ │ ├─ home.rs # The component that will render at the / route
├─ Cargo.toml # The web crate's Cargo.toml - This should include all web specific dependencies
```
## Dependencies
Since you have fullstack enabled, the web crate will be built two times:
1. Once for the server build with the `server` feature enabled
2. Once for the client build with the `web` feature enabled
You should make all web specific dependencies optional and only enabled in the `web` feature. This will ensure that the server builds don't pull in web specific dependencies which cuts down on build times significantly.
### Serving Your Web App
You can start your web app with the following command:
```bash
dx serve
```

8
packages/web/assets/blog.css Normal file
View File

@@ -0,0 +1,8 @@
#blog {
margin-top: 50px;
}
#blog a {
color: #ffffff;
margin-top: 50px;
}

87
packages/web/assets/dx-components-theme.css Normal file
View File

@@ -0,0 +1,87 @@
/* This file contains the global styles for the styled dioxus components. You only
* need to import this file once in your project root.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
body {
color: var(--secondary-color-4);
font-family: Inter, sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 400;
}
html[data-theme="dark"] {
--dark: initial;
--light: ;
}
html[data-theme="light"] {
--dark: ;
--light: initial;
}
@media (prefers-color-scheme: dark) {
:root {
--dark: initial;
--light: ;
}
}
@media (prefers-color-scheme: light) {
:root {
--dark: ;
--light: initial;
}
}
:root {
/* Primary colors */
--primary-color: var(--dark, #000) var(--light, #fff);
--primary-color-1: var(--dark, #0e0e0e) var(--light, #fbfbfb);
--primary-color-2: var(--dark, #0a0a0a) var(--light, #fff);
--primary-color-3: var(--dark, #141313) var(--light, #f8f8f8);
--primary-color-4: var(--dark, #1a1a1a) var(--light, #f8f8f8);
--primary-color-5: var(--dark, #262626) var(--light, #f5f5f5);
--primary-color-6: var(--dark, #232323) var(--light, #e5e5e5);
--primary-color-7: var(--dark, #3e3e3e) var(--light, #b0b0b0);
/* Secondary colors */
--secondary-color: var(--dark, #fff) var(--light, #000);
--secondary-color-1: var(--dark, #fafafa) var(--light, #000);
--secondary-color-2: var(--dark, #e6e6e6) var(--light, #0d0d0d);
--secondary-color-3: var(--dark, #dcdcdc) var(--light, #2b2b2b);
--secondary-color-4: var(--dark, #d4d4d4) var(--light, #111);
--secondary-color-5: var(--dark, #a1a1a1) var(--light, #848484);
--secondary-color-6: var(--dark, #5d5d5d) var(--light, #d0d0d0);
/* Highlight colors */
--focused-border-color: var(--dark, #2b7fff) var(--light, #2b7fff);
--primary-success-color: var(--dark, #02271c) var(--light, #ecfdf5);
--secondary-success-color: var(--dark, #b6fae3) var(--light, #10b981);
--primary-warning-color: var(--dark, #342203) var(--light, #fffbeb);
--secondary-warning-color: var(--dark, #feeac7) var(--light, #f59e0b);
--primary-error-color: var(--dark, #a22e2e) var(--light, #dc2626);
--secondary-error-color: var(--dark, #9b1c1c) var(--light, #ef4444);
--contrast-error-color: var(--dark, var(--secondary-color-3)) var(--light, var(--primary-color));
--primary-info-color: var(--dark, var(--primary-color-5)) var(--light, var(--primary-color));
--secondary-info-color: var(--dark, var(--primary-color-7)) var(--light, var(--secondary-color-3));
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
:not(:hover) {
scrollbar-color: rgb(0 0 0 / 0%) rgb(0 0 0 / 0%);
}
:hover {
scrollbar-color: var(--secondary-color-2) rgb(0 0 0 / 0%);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
:root::-webkit-scrollbar-track {
background: transparent;
}
}

BIN
packages/web/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

6
packages/web/assets/main.css Normal file
View File

@@ -0,0 +1,6 @@
body {
background-color: #0f1116;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}

2
packages/web/src/components/mod.rs Normal file
View File

@@ -0,0 +1,2 @@
// AUTOGENERATED Components module
pub mod toast;

15
packages/web/src/components/toast/component.rs Normal file
View File

@@ -0,0 +1,15 @@
use dioxus::prelude::*;
use dioxus_primitives::toast::{self, ToastProviderProps};
#[component]
pub fn ToastProvider(props: ToastProviderProps) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: asset!("./style.css") }
toast::ToastProvider {
default_duration: props.default_duration,
max_toasts: props.max_toasts,
render_toast: props.render_toast,
{props.children}
}
}
}

2
packages/web/src/components/toast/mod.rs Normal file
View File

@@ -0,0 +1,2 @@
mod component;
pub use component::*;

185
packages/web/src/components/toast/style.css Normal file
View File

@@ -0,0 +1,185 @@
.toast-container {
position: fixed;
z-index: 9999;
right: 20px;
bottom: 20px;
max-width: 350px;
}
.toast-list {
display: flex;
flex-direction: column-reverse;
padding: 0;
margin: 0;
gap: 0.75rem;
}
.toast-item {
display: flex;
}
.toast {
z-index: calc(var(--toast-count) - var(--toast-index));
display: flex;
overflow: hidden;
width: 18rem;
height: 4rem;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border: 1px solid var(--light, var(--primary-color-6))
var(--dark, var(--primary-color-7));
border-radius: 0.5rem;
margin-top: -4rem;
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
filter: var(--light, none)
var(
--dark,
brightness(calc(0.5 + 0.5 * (1 - ((var(--toast-index) + 1) / 4))))
);
opacity: calc(1 - var(--toast-hidden));
transform: scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
--toast-hidden: calc(min(max(0, var(--toast-index) - 2), 1));
}
.toast-container:not(:hover, :focus-within)
.toast[data-toast-even]:not([data-top]) {
animation: slide-up-even 0.2s ease-out;
}
.toast-container:not(:hover, :focus-within)
.toast[data-toast-odd]:not([data-top]) {
animation: slide-up-odd 0.2s ease-out;
}
@keyframes slide-up-even {
from {
transform: translateY(0.5rem)
scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
}
to {
transform: translateY(0)
scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
}
}
@keyframes slide-up-odd {
from {
transform: translateY(0.5rem)
scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
}
to {
transform: translateY(0)
scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
}
}
.toast[data-top] {
animation: slide-in 0.2s ease-out;
}
.toast-container:hover .toast[data-top],
.toast-container:focus-within .toast[data-top] {
animation: slide-in 0 ease-out;
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(100%)
scale(
calc(110% - var(--toast-index) * 5%),
calc(110% - var(--toast-index) * 2%)
);
}
to {
opacity: 1;
transform: translateY(0)
scale(
calc(100% - var(--toast-index) * 5%),
calc(100% - var(--toast-index) * 2%)
);
}
}
.toast-container:hover .toast,
.toast-container:focus-within .toast {
margin-top: var(--toast-padding);
filter: brightness(1);
opacity: 1;
transform: scale(calc(100%));
}
.toast[data-type="success"] {
background-color: var(--primary-success-color);
color: var(--secondary-success-color);
}
.toast[data-type="error"] {
background-color: var(--primary-error-color);
color: var(--contrast-error-color);
}
.toast[data-type="warning"] {
background-color: var(--primary-warning-color);
color: var(--secondary-warning-color);
}
.toast[data-type="info"] {
background-color: var(--primary-info-color);
color: var(--secondary-info-color);
}
.toast-content {
flex: 1;
margin-right: 8px;
transition: filter 0.2s ease;
}
.toast-title {
margin-bottom: 4px;
color: var(--secondary-color-4);
font-weight: 600;
}
.toast-description {
color: var(--secondary-color-3);
font-size: 0.875rem;
}
.toast-close {
align-self: flex-start;
padding: 0;
border: none;
margin: 0;
background: none;
color: var(--secondary-color-3);
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.toast-close:hover {
color: var(--secondary-color-1);
}

45
packages/web/src/main.rs Normal file
View File

@@ -0,0 +1,45 @@
use dioxus::prelude::*;
use views::{Blog, Home};
mod views;
#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
enum Route {
#[layout(WebNavbar)]
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}
const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
// Build cool things ✌️
rsx! {
// Global app resources
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "stylesheet", href: MAIN_CSS }
Router::<Route> {}
}
}
/// A web-specific Router around the shared `Navbar` component
/// which allows us to use the web-specific `Route` enum.
#[component]
fn WebNavbar() -> Element {
rsx! {
Outlet::<Route> {}
}
}

30
packages/web/src/views/blog.rs Normal file
View File

@@ -0,0 +1,30 @@
use crate::Route;
use dioxus::prelude::*;
const BLOG_CSS: Asset = asset!("/assets/blog.css");
#[component]
pub fn Blog(id: i32) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: BLOG_CSS}
div {
id: "blog",
// Content
h1 { "This is blog #{id}!" }
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
// Navigation links
Link {
to: Route::Blog { id: id - 1 },
"Previous"
}
span { " <---> " }
Link {
to: Route::Blog { id: id + 1 },
"Next"
}
}
}
}

6
packages/web/src/views/home.rs Normal file
View File

@@ -0,0 +1,6 @@
use dioxus::prelude::*;
#[component]
pub fn Home() -> Element {
rsx! {}
}

5
packages/web/src/views/mod.rs Normal file
View File

@@ -0,0 +1,5 @@
mod home;
pub use home::Home;
mod blog;
pub use blog::Blog;