askama: welcome view
This commit is contained in:
parent
2a6d62d74b
commit
c5185fdcbe
6 changed files with 75 additions and 54 deletions
|
|
@ -44,9 +44,8 @@ async fn main() -> io::Result<()> {
|
||||||
|
|
||||||
async fn welcome() -> impl IntoResponse {
|
async fn welcome() -> impl IntoResponse {
|
||||||
let fact = views::get_cat_fact().await;
|
let fact = views::get_cat_fact().await;
|
||||||
Html(ssr::render(move || {
|
|
||||||
leptos::view! { <WelcomePage fact /> }
|
views::askama::WelcomeTemplate { fact }
|
||||||
}))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn log_source(
|
async fn log_source(
|
||||||
|
|
|
||||||
13
src/views/askama.rs
Normal file
13
src/views/askama.rs
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
use askama_axum::Template;
|
||||||
|
|
||||||
|
#[derive(Template)]
|
||||||
|
#[template(path = "welcome.html")]
|
||||||
|
pub struct WelcomeTemplate {
|
||||||
|
pub fact: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl WelcomeTemplate {
|
||||||
|
pub fn new(fact: String) -> WelcomeTemplate {
|
||||||
|
WelcomeTemplate { fact }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
use futures::TryFutureExt;
|
use futures::TryFutureExt;
|
||||||
use serde::Deserialize;
|
use serde::Deserialize;
|
||||||
|
|
||||||
|
pub mod askama;
|
||||||
pub mod base_page;
|
pub mod base_page;
|
||||||
pub mod links;
|
pub mod links;
|
||||||
pub mod welcome;
|
|
||||||
|
|
||||||
pub use base_page::*;
|
pub use base_page::*;
|
||||||
pub use links::*;
|
pub use links::*;
|
||||||
pub use welcome::*;
|
|
||||||
|
|
||||||
#[derive(Debug, Deserialize)]
|
#[derive(Debug, Deserialize)]
|
||||||
pub struct CatFact {
|
pub struct CatFact {
|
||||||
|
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
use leptos::{component, view, IntoView};
|
|
||||||
|
|
||||||
use crate::HtmxPage;
|
|
||||||
|
|
||||||
// {https://api.thecatapi.com/v1/images/search?size=small&format=src}
|
|
||||||
// {https://cataas.com/cat?width=250&height=250}
|
|
||||||
#[component]
|
|
||||||
pub fn WelcomePage(fact: String) -> impl IntoView {
|
|
||||||
view! {
|
|
||||||
<HtmxPage>
|
|
||||||
<div class="form-wrapper">
|
|
||||||
<WelcomeView fact />
|
|
||||||
</div>
|
|
||||||
</HtmxPage>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn WelcomeView(fact: String) -> impl IntoView {
|
|
||||||
view! {
|
|
||||||
<form
|
|
||||||
id="form"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-post="/upload"
|
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
class="column-container"
|
|
||||||
>
|
|
||||||
<div class="cat-img-wrapper">
|
|
||||||
<img
|
|
||||||
class="cat-img"
|
|
||||||
src="https://api.thecatapi.com/v1/images/search?size=small&format=src"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file"
|
|
||||||
name="file"
|
|
||||||
data-multiple-caption="{{count}} files selected"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
<label for="file">"Select Files"</label>
|
|
||||||
|
|
||||||
<input type="submit" value="Get Link~" />
|
|
||||||
<p id="cat-fact">{fact}</p>
|
|
||||||
<progress id="progress" class="htmx-indicator" value="0" max="100"></progress>
|
|
||||||
</form>
|
|
||||||
<script src="/scripts/loading_progress.js" />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
21
templates/base.html
Normal file
21
templates/base.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Nyazoom</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link href="/css/main.css" rel="stylesheet" />
|
||||||
|
<link href="/css/link.css" rel="stylesheet" />
|
||||||
|
<script src="/scripts/file_label.js"></script>
|
||||||
|
<script src="/scripts/link.js"></script>
|
||||||
|
<script
|
||||||
|
src="https://unpkg.com/htmx.org@2.0.2"
|
||||||
|
integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>NyaZoom<sup>2</sup></h1>
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
templates/welcome.html
Normal file
38
templates/welcome.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="form-wrapper">
|
||||||
|
<form
|
||||||
|
id="form"
|
||||||
|
hx-swap="outerHTML"
|
||||||
|
hx-post="/upload"
|
||||||
|
hx-encoding="multipart/form-data"
|
||||||
|
class="column-container"
|
||||||
|
>
|
||||||
|
<div class="cat-img-wrapper">
|
||||||
|
<img
|
||||||
|
class="cat-img"
|
||||||
|
src="https://api.thecatapi.com/v1/images/search?size=small&format=src"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="file"
|
||||||
|
name="file"
|
||||||
|
data-multiple-caption="{count} files selected"
|
||||||
|
multiple
|
||||||
|
/>
|
||||||
|
<label for="file">Select Files</label>
|
||||||
|
|
||||||
|
<input type="submit" value="Get Link~" />
|
||||||
|
<p id="cat-fact">{{ fact }}</p>
|
||||||
|
<progress
|
||||||
|
id="progress"
|
||||||
|
class="htmx-indicator"
|
||||||
|
value="0"
|
||||||
|
max="100"
|
||||||
|
></progress>
|
||||||
|
</form>
|
||||||
|
<script src="/scripts/loading_progress.js"></script>
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
||||||
Loading…
Reference in a new issue