ui stuff

Cargo.lock

@@ -779,7 +779,7 @@ dependencies = [
  "futures-sink",
  "futures-util",
  "http 1.0.0",
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "slab",
  "tokio",
  "tokio-util",
@@ -980,9 +980,9 @@ dependencies = [
 
 [[package]]
 name = "indexmap"
-version = "2.1.0"
+version = "2.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d530e1a18b1cb4c484e6e34556a0d948706958449fca0cab753d649f2bce3d1f"
+checksum = "433de089bd45971eecf4668ee0ee8f4cec17db4f8bd8f7bc3197a6ce37aa7d9b"
 dependencies = [
  "equivalent",
  "hashbrown 0.14.3",
@@ -1110,7 +1110,7 @@ dependencies = [
  "futures",
  "getrandom",
  "html-escape",
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "itertools",
  "js-sys",
  "leptos_reactive",
@@ -1136,7 +1136,7 @@ checksum = "273d7f2f1823a70944a72c8b47f925c489e38f6121808cd4c7f759b1b5efd5e6"
 dependencies = [
  "anyhow",
  "camino",
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "parking_lot",
  "proc-macro2",
  "quote",
@@ -1190,7 +1190,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3f6ae4f0934d77239f57dec8b438a2c7e8662a46c4704fed8d831f5329c6fcfb"
 dependencies = [
  "cfg-if",
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "leptos",
  "tracing",
  "wasm-bindgen",
@@ -1206,7 +1206,7 @@ dependencies = [
  "base64",
  "cfg-if",
  "futures",
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "js-sys",
  "paste",
  "pin-project",
@@ -1626,11 +1626,11 @@ dependencies = [
 
 [[package]]
 name = "pulldown-cmark"
-version = "0.9.3"
+version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77a1a2f1f0a7ecff9c31abbe177637be0e97a0aef46cf8738ece09327985d998"
+checksum = "80eb9f69aec5cd8828765a75f739383fbbe3e8b9d84370bde1cc90487700794a"
 dependencies = [
- "bitflags 1.3.2",
+ "bitflags 2.4.2",
  "getopts",
  "memchr",
  "unicase",
@@ -2263,7 +2263,7 @@ version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d34d383cd00a163b4a5b85053df514d45bc330f6de7737edfe0a93311d1eaa03"
 dependencies = [
- "indexmap 2.1.0",
+ "indexmap 2.2.1",
  "serde",
  "serde_spanned",
  "toml_datetime",

app/src/components.rs

@@ -1,2 +1,2 @@
-pub mod article;
+pub mod ui;
 pub mod slingshot;

app/src/components/article.rs

@@ -1,41 +0,0 @@
-use crate::components::slingshot::*;
-use leptos::*;
-use serde::{Deserialize, Serialize};
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct ArticleData {
-    pub content_type: String,
-    pub title: String,
-    pub date: String, // make datetime?
-    pub content: String,
-}
-
-#[component]
-pub fn ArticleBuilder() -> impl IntoView {
-    let data_resource = create_local_resource(
-        || (),
-        |_| async move { slingshot("./public/blog".to_string()).await },
-    );
-
-    let articles_view = move || {
-        data_resource.and_then(|data| {
-            data.iter()
-                .map(|article| view! { <Article data=article.clone()/> })
-                .collect_view()
-        })
-    };
-
-    articles_view
-}
-
-#[component]
-pub fn Article(data: ArticleData) -> impl IntoView {
-    view! {
-        <article class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl rounded-lg">
-            <h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">{&data.title}</h1>
-            <hr class="opacity-50"/>
-            <span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>
-            <div inner_html=&data.content></div>
-        </article>
-    }
-}

app/src/components/slingshot.rs

@@ -1,6 +1,13 @@
-use crate::components::article::ArticleData;
 use leptos::*;
-use serde::Deserialize;
+use serde::*;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ArticleData {
+    pub content_type: String,
+    pub title: String,
+    pub date: String, // make datetime?
+    pub content: String,
+}
 
 #[derive(Deserialize)]
 struct ArticleFrontmatter {
@@ -30,7 +37,7 @@ pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError>
                     if let Some(front_code) = front_raw.code_block {
                         let toml: ArticleFrontmatter = toml::from_str(&front_code.source)?;
 
-                        println!("{} {}", &toml.date, &toml.title);
+                        // println!("{} {}", &toml.date, &toml.title);
                         articles.push(ArticleData {
                             content_type: toml.content_type,
                             title: toml.title,
@@ -43,6 +50,6 @@ pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError>
         }
     }
 
-    println!("iran");
+    // println!("iran");
     Ok(articles)
 }

app/src/components/ui.rs

@@ -0,0 +1,73 @@
+//
+// Pile of UI stuff
+//
+
+use crate::components::slingshot::*;
+use leptos::*;
+
+#[component]
+pub fn Article(data: ArticleData) -> impl IntoView {
+    view! {
+        <Container>
+            <article>
+                <h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">
+                    {&data.title}
+                </h1>
+                <hr class="opacity-50"/>
+                <span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>
+                <div inner_html=&data.content></div>
+            </article>
+        </Container>
+    }
+}
+
+#[component]
+pub fn ArticleBuilder() -> impl IntoView {
+    let data_resource = create_local_resource(
+        || (),
+        |_| async move { slingshot("./public/blog".to_string()).await },
+    );
+
+    let articles_view = move || {
+        data_resource.and_then(|data| {
+            data.iter()
+                .map(|article| view! { <Article data=article.clone()/> })
+                .collect_view()
+        })
+    };
+
+    articles_view
+}
+
+#[component]
+pub fn Card(children: Children) -> impl IntoView {
+    view! {
+        <div class="p-7 my-5 mx-2 w-80 rounded-lg shadow-inner min-w-3/12 max-w-3/12 bg-zinc-900 shadow-zinc-950">
+            <h1 class="text-2xl font-light text-orange-600 max-6-xs">
+                "Card Header"
+            </h1>
+            <hr class="opacity-50"/>
+            <p class="text-center">
+                "[image]"
+            </p>
+            {children()}
+            <p class="text-right">
+                <a class="text-orange-300 hover:underline" href="https://lickmysa.cc" >Read more...</a>
+            </p>
+        </div>
+    }
+}
+
+#[component]
+pub fn CardHolder(children: Children) -> impl IntoView {
+    view! { <div class="flex flex-wrap place-content-evenly mx-auto w-11/12">{children()}</div> }
+}
+
+#[component]
+pub fn Container(children: Children) -> impl IntoView {
+    view! {
+        <div class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl rounded-lg shadow-inner bg-zinc-900 shadow-zinc-950">
+            {children()}
+        </div>
+    }
+}

app/src/routes/blog.rs

@@ -1,5 +1,4 @@
-use crate::components::article::*;
+use crate::components::ui::*;
-use crate::components::slingshot::*;
 use crate::error_template::*;
 use leptos::*;
 

app/src/routes/home.rs

@@ -1,11 +1,9 @@
-use crate::components::article::*;
+use crate::components::ui::*;
-use crate::components::slingshot::*;
 use crate::error_template::*;
 use leptos::*;
 
 #[component]
 pub fn Home() -> impl IntoView {
-
     view! {
         <Suspense fallback=move || {
             view! { <p>"Loading..."</p> }
@@ -13,7 +11,26 @@ pub fn Home() -> impl IntoView {
             <ErrorBoundary fallback=|errors| {
                 view! { <ErrorTemplate errors=errors/> }
             }>
-                "Hello again"
+                <h1>Latest Stuff or whatever</h1>
+
+                <CardHolder>
+                    <Card>
+                        <p>{"home1"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"home2"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"home3"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"home4"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"home5"}</p>
+                    </Card>
+                </CardHolder>
+
             </ErrorBoundary>
         </Suspense>
     }

app/src/routes/projects.rs

@@ -1,11 +1,10 @@
-// use crate::components::article::*;
+use crate::components::ui::*;
 // use crate::components::slingshot::*;
 use crate::error_template::*;
 use leptos::*;
 
 #[component]
 pub fn Projects() -> impl IntoView {
-
     view! {
         <Suspense fallback=move || {
             view! { <p>"Loading..."</p> }
@@ -13,7 +12,25 @@ pub fn Projects() -> impl IntoView {
             <ErrorBoundary fallback=|errors| {
                 view! { <ErrorTemplate errors=errors/> }
             }>
-                "Projects"
+
+                <CardHolder>
+                    <Card>
+                        <p>{"project1"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"project2"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"project3"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"project4"}</p>
+                    </Card>
+                    <Card>
+                        <p>{"project5"}</p>
+                    </Card>
+                </CardHolder>
+
             </ErrorBoundary>
         </Suspense>
     }

style/tailwind.css

@@ -24,7 +24,7 @@ nav li:has(> a[aria-current="page"]) {
 }
 
 /* Shadows don't work inline for some reason */
-article {
+container-lg {
   @apply bg-zinc-900 shadow-inner shadow-zinc-950;
 }