actually feed articles properly

This commit is contained in:
Adam 2024-01-15 16:58:26 -05:00
parent 99467057cf
commit 6c8bc1ae27
5 changed files with 39 additions and 43 deletions

View file

@ -2,40 +2,17 @@ use crate::components::slingshot::*;
use leptos::*;
#[component]
pub fn Article() -> impl IntoView {
let data = create_resource(
|| (),
|_| async move {
logging::log!("loading data from slingshot");
slingshot().await
},
);
pub fn Article(data: ArticleData) -> impl IntoView {
view! {
<Transition>
<article class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl bg-opacity-10 rounded-md bg-zinc-700 shadow-1g">
<h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">
{move || match data.get() {
None => "Loading...".to_string(),
Some(data) => data.unwrap().title,
}}
{&data.title}
</h1>
<hr class="opacity-50"/>
<span class="pt-0 pb-3.5 text-xs opacity-50 m-t">
{move || match data.get() {
None => "Loading...".to_string(),
Some(data) => data.unwrap().date,
}}
</span>
<div>
{move || match data.get() {
None => "Loading...".to_string(),
Some(data) => data.unwrap().content,
}}
</div>
<span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>
<div>{&data.content}</div>
</article>
</Transition>
}

View file

@ -1,5 +1,12 @@
use leptos::*;
use serde::{Serialize, Deserialize};
use serde::{Deserialize, Serialize};
use std::time::Duration;
use std::thread::sleep;
pub fn fetch(path: &str) -> String {
format!("https://dennis.doordesk.net/{path}")
}
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct ArticleData {
@ -18,5 +25,6 @@ pub async fn slingshot() -> Result<ArticleData, ServerFnError> {
content: String::from("Testicles"),
};
sleep(Duration::from_secs(1));
Ok(data)
}

View file

@ -1,34 +1,29 @@
use crate::error_template::{AppError, ErrorTemplate};
//use crate::routes::{blog::*, home::*, projects::*};
use leptos::*;
use leptos_meta::*;
use leptos_router::*;
pub mod error_template;
pub mod components;
pub mod error_template;
pub mod routes;
use crate::routes::{home::*, blog::*, projects::*};
// use crate::routes::{blog::*, home::*, projects::*};
use crate::routes::home::Home;
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/pkg/doordesk.css"/>
// sets the document title
<Title text="doordesk"/>
// content for this welcome page
<Router fallback=|| {
let mut outside_errors = Errors::default();
outside_errors.insert_with_default_key(AppError::NotFound);
view! { <ErrorTemplate outside_errors/> }.into_view()
}>
<nav class="bg-gradient-to-b from-zinc-800 to-zinc-900 shadow-lg sticky top-0">
<nav class="sticky top-0 bg-gradient-to-b shadow-lg from-zinc-800 to-zinc-900">
<ul class="container flex items-center p-3">
<li class="mx-1.5 sm:mx-6">"DoorDesk"</li>
<li class="mx-1.5 sm:mx-6">
@ -42,16 +37,19 @@ pub fn App() -> impl IntoView {
<li class="mx-1.5 sm:mx-6">
<A href="/projects">"Projects"</A>
</li>
<li class="mx-1.5 sm:mx-6">
<a href="https://git.doordesk.net">"Git"</a>
</li>
</ul>
</nav>
<main>
<Routes>
<Route path="" view=Home/>
<Route path="blog" view=Blog/>
<Route path="projects" view=Projects/>
// <Route path="blog" view=Blog/>
// <Route path="projects" view=Projects/>
</Routes>
</main>
<p class="text-center hover:rotate-180 duration-200 w-8 m-auto">
<p class="m-auto w-8 text-center duration-200 hover:rotate-180">
<a href="https://open.spotify.com/playlist/3JRNw9gpt1w5ptsw8uDeYc?si=8f7e4191113f41f9">
":)"
</a>

View file

@ -1,3 +1,3 @@
pub mod home;
pub mod blog;
pub mod projects;
// pub mod blog;
// pub mod projects;

View file

@ -1,7 +1,20 @@
use crate::components::article::*;
use crate::components::slingshot::*;
use leptos::*;
#[component]
pub fn Home() -> impl IntoView {
view! { <Article/> }
let data_resource = create_local_resource(|| (), |_| async move { slingshot().await });
view! {
<Suspense fallback=move || {
view! { <p>"Loading..."</p> }
}>
{move || match data_resource.get() {
None => view! { <p>"Loading..."</p> }.into_view(),
Some(data) => view! { <Article data=data.unwrap()/> }.into_view(),
}}
</Suspense>
}
}