Ajustes e criação da tela de projetos

posts/2019-03-24-DotFiles.md → posts/2019-03-24-Dotfiles.md

@@ -1,14 +1,16 @@
 ---
 layout: post
-title: "DotFiles"
+title: "Dotfiles"
+brief: "Repositório dedicado aos meus arquivos de configuração do meu ambiente Desktop"
 date: 2019-03-24 22:00:00 -0300
 tag: [dotfiles]
+front_image: https://raw.githubusercontent.com/SeraphyBR/dotfiles/master/images/screenshots/2.png
+front_color: "#7d7d7dd1"
 project: true
 comments: true
 ---
 
-Bem, não sei se posso considerar isso como um projeto, afinal fiz para mim mesmo,
-assim como esse site, contudo é aquilo com que eu mais tenho passado meu tempo.
+## Dotfiles
 
 -   [Repositório Github](https://github.com/SeraphyBR/DotFiles)
 

src/lib.rs

@@ -15,6 +15,7 @@ use crate::pages::error::ErrorBoundaryPage;
 use crate::pages::home::HomePage;
 use crate::pages::not_found::NotFoundPage;
 use crate::pages::posts::{PostListPage, PostPage};
+use crate::pages::projects::{ProjectPage, ProjectsListPage};
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -49,6 +50,8 @@ pub fn App() -> impl IntoView {
                         <Route path="/" view=HomePage/>
                         <Route path="posts" view=PostListPage/>
                         <Route path="posts/:path" view=PostPage/>
+                        <Route path="projects" view=ProjectsListPage/>
+                        <Route path="projects/:path" view=ProjectPage/>
                         <Route path="about" view=AboutPage/>
                         <Route path="404" view=NotFoundPage/>
                         <Route path="/*" view=NotFoundPage/>

src/markdown_posts.rs

@@ -2,6 +2,6 @@
 pub const FILES: &[(&str, &str)] = &[
     ("2019-02-19-SonhosDoFuturoTec", include_str!(".././posts/2019-02-19-SonhosDoFuturoTec.md")),
     ("2019-02-12-Motivacionais", include_str!(".././posts/2019-02-12-Motivacionais.md")),
-    ("2019-03-24-DotFiles", include_str!(".././posts/2019-03-24-DotFiles.md")),
+    ("2019-03-24-Dotfiles", include_str!(".././posts/2019-03-24-Dotfiles.md")),
     ("2019-02-12-Primeiro-teste", include_str!(".././posts/2019-02-12-Primeiro-teste.md")),
 ];

src/pages/mod.rs

@@ -3,5 +3,6 @@ pub mod error;
 pub mod home;
 pub mod not_found;
 pub mod posts;
+pub mod projects;
 
 mod base;

src/pages/posts.rs

@@ -35,6 +35,17 @@ pub fn PostListPage() -> impl IntoView {
     }
 }
 
+#[component]
+fn PostItem(path: String, metadata: PostMetadata) -> impl IntoView {
+    view! {
+        <li class="tw-vflex tw-gap-4">
+            <A href=path.clone() class="tw-font-bold tw-text-xl hover:tw-text-greenLime">{metadata.title}</A>
+            <p class="tw-font-light tw-text-base">{metadata.brief}</p>
+            <LinkBtn href=path>Ler Mais</LinkBtn>
+        </li>
+    }
+}
+
 #[derive(Params, PartialEq, Clone)]
 struct PostPageUrlParams {
     path: String,
@@ -49,7 +60,10 @@ pub fn PostPage() -> impl IntoView {
 
         let posts = use_posts();
 
-        let post = posts.into_iter().find(|p| p.path == path);
+        let post = posts
+            .into_iter()
+            .filter(|p| !p.metadata.project)
+            .find(|p| p.path == path);
 
         post.map(|p| view! { <PostContentPage post=p/> })
             .or_else(|| Some(view! { <Redirect path="/404"/> }))
@@ -75,14 +89,3 @@ fn PostContentPage(post: PostData) -> impl IntoView {
         </BasePage>
     }
 }
-
-#[component]
-fn PostItem(path: String, metadata: PostMetadata) -> impl IntoView {
-    view! {
-        <li class="tw-vflex tw-gap-4">
-            <A href=path.clone() class="tw-font-bold tw-text-xl hover:tw-text-greenLime">{metadata.title}</A>
-            <p class="tw-font-light tw-text-base">{metadata.brief}</p>
-            <LinkBtn href=path>Ler Mais</LinkBtn>
-        </li>
-    }
-}

src/pages/projects.rs

@@ -0,0 +1,95 @@
+use leptos::*;
+use leptos_router::{use_params, Params, Redirect, A};
+
+use crate::{
+    components::{button::LinkBtn, content::BaseContent},
+    contexts::posts::use_posts,
+    models::posts::{PostData, PostMetadata},
+    pages::base::BasePage,
+};
+
+#[component]
+pub fn ProjectsListPage() -> impl IntoView {
+    let posts = use_posts();
+
+    view! {
+        <BasePage title="Projetos">
+            <div class="tw-vflex tw-justify-center tw-items-center tw-gap-5 tw-text-neutral-800 tw-p-8">
+                <div class="tw-vflex tw-items-center tw-gap-6 tw-pb-12">
+                    <h1 class="tw-text-3xl tw-font-bold">Projetos</h1>
+                    <LinkBtn href="/"><i class="fa fa-home"></i></LinkBtn>
+                </div>
+                <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4">
+                    {
+                        posts.into_iter()
+                            .filter(|p| p.metadata.project)
+                            .map(|p| view! { <ProjectItem path=p.path metadata=p.metadata /> })
+                            .collect_view()
+                    }
+                </div>
+            </div>
+        </BasePage>
+    }
+}
+
+#[component]
+fn ProjectItem(path: String, metadata: PostMetadata) -> impl IntoView {
+    view! {
+        <div class="tw-max-w-sm tw-rounded-xl tw-overflow-hidden tw-shadow-lg">
+            <img class="tw-w-full" src=metadata.front_image alt="Front Image"/>
+            <A href=path class="tw-text-gray-700 hover:tw-text-greenLime">
+                <div class="tw-px-6 tw-py-4">
+                    <div class="tw-font-bold tw-text-xl tw-mb-2">{metadata.title}</div>
+                    <p class="tw-text-base">
+                        {metadata.brief}
+                    </p>
+                </div>
+            </A>
+        </div>
+    }
+}
+
+#[derive(Params, PartialEq, Clone)]
+struct ProjectPageUrlParams {
+    path: String,
+}
+
+#[component]
+pub fn ProjectPage() -> impl IntoView {
+    let params = use_params::<ProjectPageUrlParams>();
+
+    move || {
+        let path = params.get().map(|p| p.path).unwrap_or_default();
+
+        let posts = use_posts();
+
+        let project = posts
+            .into_iter()
+            .filter(|p| p.metadata.project)
+            .find(|p| p.path == path);
+
+        project
+            .map(|p| view! { <ProjectContentPage post=p/> })
+            .or_else(|| Some(view! { <Redirect path="/404"/> }))
+            .into_view()
+    }
+}
+
+#[component]
+fn ProjectContentPage(post: PostData) -> impl IntoView {
+    let bg_img = post.metadata.front_image.map(|bg| format!("url({bg})"));
+
+    view! {
+        <BasePage title=post.metadata.title.clone()>
+            <BaseContent
+                title=post.metadata.title
+                bg_color=post.metadata.front_color
+                bg_img=bg_img
+                created_date=post.metadata.date
+                inner_html=post.content
+                back_href="/projects"
+            >
+            </BaseContent>
+        </BasePage>
+    }
+}