showcase projects loading and displaying

axum_server/src/components/site_footer.rs

@@ -1,6 +1,10 @@
 use askama::Template;
 
-use crate::{pages::post::PostMetadata, post_list::get_post_list, post_parser::ParseResult};
+use crate::{
+    pages::post::{PostMetadata, BLOG_POST_PATH},
+    post_list::get_post_list,
+    post_parser::ParseResult,
+};
 
 #[derive(Template)]
 #[template(path = "site_footer.html")]
@@ -9,7 +13,9 @@ pub struct SiteFooter {
 }
 
 pub async fn render_site_footer() -> SiteFooter {
-    let mut post_list = get_post_list::<PostMetadata>().await.unwrap_or(vec![]);
+    let mut post_list = get_post_list::<PostMetadata>(BLOG_POST_PATH)
+        .await
+        .unwrap_or(vec![]);
     post_list.sort_by_key(|post| post.metadata.date);
     post_list.reverse();
 

axum_server/src/featured_posts.rs

@@ -1,8 +1,12 @@
-use crate::{pages::post::PostMetadata, post_list::get_post_list, post_parser::ParseResult};
+use crate::{
+    pages::post::{PostMetadata, BLOG_POST_PATH},
+    post_list::get_post_list,
+    post_parser::ParseResult,
+};
 use axum::http::StatusCode;
 
 pub async fn get_featured_posts() -> Result<Vec<ParseResult<PostMetadata>>, StatusCode> {
-    let post_list = get_post_list::<PostMetadata>().await?;
+    let post_list = get_post_list::<PostMetadata>(BLOG_POST_PATH).await?;
 
     let featured_posts = post_list
         .into_iter()

axum_server/src/featured_projects.rs

@@ -0,0 +1,13 @@
+use crate::{pages::project::ProjectMetadata, post_list::get_post_list, post_parser::ParseResult};
+use axum::http::StatusCode;
+
+pub async fn get_featured_projects() -> Result<Vec<ParseResult<ProjectMetadata>>, StatusCode> {
+    let project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
+
+    let featured_projects = project_list
+        .into_iter()
+        .filter(|post| post.metadata.featured)
+        .collect();
+
+    Ok(featured_projects)
+}

axum_server/src/feed.rs

@@ -3,10 +3,13 @@ use axum::response::IntoResponse;
 use chrono::Utc;
 use rss::{ChannelBuilder, GuidBuilder, Item, ItemBuilder};
 
+use crate::pages::post::BLOG_POST_PATH;
 use crate::{pages::post::PostMetadata, post_list::get_post_list};
 
 pub async fn render_rss_feed() -> Result<impl IntoResponse, StatusCode> {
-    let mut post_list = get_post_list::<PostMetadata>().await.unwrap_or(vec![]);
+    let mut post_list = get_post_list::<PostMetadata>(BLOG_POST_PATH)
+        .await
+        .unwrap_or(vec![]);
     post_list.sort_by_key(|post| post.metadata.date);
     post_list.reverse();
 

axum_server/src/main.rs

@@ -5,10 +5,13 @@ use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod components;
 mod featured_posts;
+mod featured_projects;
 mod feed;
 mod filters;
 mod pages;
 mod post_list;
+// mod project_list;
+// TODO make post and project modules
 mod post_parser;
 mod router;
 mod tag_list;

axum_server/src/pages/index.rs

@@ -8,11 +8,13 @@ use crate::{
         site_header::HeaderProps,
     },
     featured_posts::get_featured_posts,
+    featured_projects::get_featured_projects,
     post_parser::ParseResult,
     tag_list::get_popular_blog_tags,
 };
 
 use super::post::PostMetadata;
+use super::project::ProjectMetadata;
 
 #[derive(Template)]
 #[template(path = "index.html")]
@@ -21,12 +23,14 @@ pub struct IndexTemplate {
     header_props: HeaderProps,
     blog_tags: Vec<String>,
     featured_posts: Vec<ParseResult<PostMetadata>>,
+    featured_projects: Vec<ParseResult<ProjectMetadata>>,
 }
 
 pub async fn render_index() -> Result<IndexTemplate, StatusCode> {
     let site_footer = tokio::spawn(render_site_footer());
     let blog_tags = tokio::spawn(get_popular_blog_tags());
     let featured_posts = tokio::spawn(get_featured_posts());
+    let featured_projects = tokio::spawn(get_featured_projects());
 
     let blog_tags = blog_tags
         .await
@@ -40,10 +44,16 @@ pub async fn render_index() -> Result<IndexTemplate, StatusCode> {
         .await
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)??;
 
+    let featured_projects = featured_projects
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)??;
+    // TODO convert projects into cms
+
     Ok(IndexTemplate {
         site_footer,
         header_props: HeaderProps::default(),
         blog_tags,
         featured_posts,
+        featured_projects,
     })
 }

axum_server/src/pages/mod.rs

@@ -3,3 +3,4 @@ pub mod contact;
 pub mod index;
 pub mod post;
 pub mod post_list;
+pub mod project;

axum_server/src/pages/post.rs

@@ -12,6 +12,8 @@ use crate::{
     post_parser::{deserialize_date, parse_post},
 };
 
+pub const BLOG_POST_PATH: &str = "../_posts/blog";
+
 #[derive(Deserialize, Debug)]
 pub struct PostMetadata {
     pub layout: String,

axum_server/src/pages/post_list.rs

@@ -11,7 +11,7 @@ use crate::{
     post_parser::ParseResult,
 };
 
-use super::post::PostMetadata;
+use super::post::{PostMetadata, BLOG_POST_PATH};
 
 #[derive(Template)]
 #[template(path = "post_list.html")]
@@ -28,7 +28,7 @@ pub async fn render_post_list(tag: Option<Path<String>>) -> Result<PostListTempl
     let tag = tag.map(|Path(tag)| tag);
 
     let site_footer = tokio::spawn(render_site_footer());
-    let mut post_list = get_post_list::<PostMetadata>().await?;
+    let mut post_list = get_post_list::<PostMetadata>(BLOG_POST_PATH).await?;
     post_list.sort_by_key(|post| post.metadata.date);
     post_list.reverse();
 

axum_server/src/pages/project.rs

@@ -0,0 +1,12 @@
+use serde::Deserialize;
+
+#[derive(Deserialize, Debug)]
+pub struct ProjectMetadata {
+    pub title: String,
+    pub description: String,
+    pub classification: String,
+    pub displayed: bool,
+    pub cover_image: Option<String>,
+    pub tags: Vec<String>,
+    pub featured: bool,
+}

axum_server/src/post_list.rs

@@ -6,8 +6,9 @@ use tracing::info;
 use crate::post_parser::{parse_post, ParseResult};
 
 pub async fn get_post_list<'de, Metadata: DeserializeOwned>(
+    path: &str,
 ) -> Result<Vec<ParseResult<Metadata>>, StatusCode> {
-    let path = "../_posts/blog/";
+    // let path = "../_posts/blog/";
     let mut dir = read_dir(path)
         .await
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;

axum_server/src/project_list.rs

@@ -0,0 +1,42 @@
+use std::path::Path;
+
+use axum::http::StatusCode;
+use serde::de::DeserializeOwned;
+use tokio::fs::read_dir;
+use tracing::info;
+
+use crate::post_parser::{parse_post, ParseResult};
+
+pub async fn get_post_list<'de, Metadata: DeserializeOwned>(
+    path: &Path,
+) -> Result<Vec<ParseResult<Metadata>>, StatusCode> {
+    // let path = "../_posts/blog/";
+    let mut dir = read_dir(path)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let mut posts: Vec<ParseResult<Metadata>> = Vec::new();
+
+    while let Some(file) = dir
+        .next_entry()
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+    {
+        let file_path = file.path();
+        let file_path_str = file_path.to_str().unwrap();
+        info!(":{}", file_path_str);
+        let post = parse_post::<Metadata>(file_path_str).await?;
+        posts.push(post);
+    }
+
+    if std::env::var("TARGET")
+        .unwrap_or_else(|_| "DEV".to_owned())
+        .eq("PROD")
+    {
+        posts = posts
+            .into_iter()
+            .filter(|post| !post.slug.starts_with("dev"))
+            .collect()
+    }
+
+    return Ok(posts);
+}

axum_server/src/tag_list.rs

@@ -1,4 +1,7 @@
-use crate::{pages::post::PostMetadata, post_list::get_post_list};
+use crate::{
+    pages::post::{PostMetadata, BLOG_POST_PATH},
+    post_list::get_post_list,
+};
 use axum::http::StatusCode;
 use std::collections::HashMap;
 use tracing::debug;
@@ -6,7 +9,7 @@ use tracing::debug;
 pub async fn get_popular_blog_tags() -> Result<Vec<String>, StatusCode> {
     const TAGS_LENGTH: usize = 7;
 
-    let post_list = get_post_list::<PostMetadata>().await?;
+    let post_list = get_post_list::<PostMetadata>(BLOG_POST_PATH).await?;
     let tags_sum = post_list
         .into_iter()
         .flat_map(|post| post.metadata.tags)

axum_server/styles/output.css

@@ -619,6 +619,11 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }

axum_server/templates/components/post_preview.html

@@ -1,5 +1,6 @@
 <article class="grid grid-cols-[1fr_2fr] grid-flow-col gap-4">
 	<aside class="row-span-3">
+		<!-- TODO <figure> -->
 	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#mail" />
 	  </svg>

axum_server/templates/components/project_preview_card.html

@@ -0,0 +1,37 @@
+<article>
+  <header class="px-4 mb-3"> 
+    <h2 class="text-3xl font-semibold text-blue-900">
+     {{project.metadata.title}}
+    </h2>
+    <p class="px-5 text-gray-800">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
+  </header>
+  <!-- <hr class="border-blue-950 my-5"> -->
+
+  {% match project.metadata.cover_image %}
+  {% when Some with (source) %}
+  <figure>
+    <!-- <img src="{{source}}" /> -->
+		<!-- TODO <figure> -->
+	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
+	    <use xlink:href="/svg/icons-sprite.svg#mail" />
+	  </svg>
+
+  </figure>
+  {% when None %}
+  {% endmatch %}
+
+
+	<footer class="text-sm">
+    <h3 class="text-3xl font-semibold text-blue-900">
+     TODO classification
+    </h3>
+    <ul class="inline-block">
+     {% for tag in project.metadata.tags %}
+      <li class="inline-block">
+        {{tag}}
+      </li>
+      {% endfor %}
+    </ul>
+	</footer>
+</article>

axum_server/templates/index.html

@@ -116,27 +116,20 @@
 
 </section>
 
-<section class="twitch-stream-promo">
+<hr class="border-blue-950 m-5">
-  <h2>Follow my twitch stream</h2>
+
-  <div class="twitch-embed">
+<section id="showcase">
-    <div class="twitch-video">
+  <h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2>
-      <!-- <iframe -->
+
-        <!-- title="My twitch channel" -->
+  <ul class="mx-5">
-        <!-- src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false" -->
+   {% for project in featured_projects %}
-        <!-- loading="lazy" -->
+    <li class="my-2">
-        <!-- frameborder="0" -->
+      {% include "components/project_preview_card.html" %}
-        <!-- scrolling="no" -->
+    </li>
-        <!-- allowfullscreen -->
+   {% endfor %}
-        <!-- height="100%" -->
+  </ul>
-        <!-- width="100%" -->
+
-        <!-- class="embed" -->
-      <!-- /> -->
-    </div>
-    <aside>
-      Come hang out and chat with me <strong>every Tuesday and Thursday</strong>
-      afternoon central Europe time. I stream working on my side-projects and talking
-      anything about the developer lifestyle.
-    </aside>
-  </div>
 </section>
+
+
 {% endblock %}

static/resources/config.yml

@@ -98,22 +98,12 @@ collections:
                   default: true,
                 }
               - { label: Description, name: description, widget: markdown }
-              - label: Image
-                name: image
-                widget: object
-                fields:
               - {
-                      label: Source,
+                  label: Cover image,
-                      name: source,
+                  name: cover_image,
                   widget: image,
                   required: false,
                 }
-                  - {
-                      label: Image description,
-                      name: image_description,
-                      widget: string,
-                      required: false,
-                    }
           - label: Presentations
             name: presentations
             widget: list
@@ -139,3 +129,44 @@ collections:
                   default: true,
                 }
               - { label: Description, name: description, widget: markdown }
+  - name: 'projects' # Used in routes, e.g., /admin/collections/blog
+    label: 'Showcase projects' # Used in the UI
+    folder: '_projects/' # The path to the folder where the documents are stored
+    create: true # Allow users to create new documents in this collection
+    slug: '{{year}}-{{month}}-{{day}}-{{slug}}' # Filename template, e.g., YYYY-MM-DD-title.md
+    fields: # The fields for each document, usually in front matter
+      - { label: Project name, name: title, widget: string }
+      - {
+          label: Displayed,
+          name: displayed,
+          widget: boolean,
+          default: true,
+        }
+      - { label: Description, name: description, widget: markdown }
+      - {
+          label: Cover image,
+          name: cover_image,
+          widget: image,
+          required: false,
+        }
+      - {
+          label: Classification,
+          name: classification,
+          widget: 'select',
+          options: [
+            { label: 'Web application', value: 'webapp' },
+            { label: 'Web-site', value:  'website' },
+            { label: 'Video Game', value: 'videogame' },
+            { label: 'Embedded system', value: 'embedded' },
+            { label: 'Presentation', value: 'presentation' },
+          ],
+          default: 'webapp'
+        }
+      - {
+          label: 'Tags',
+          name: 'tags',
+          widget: 'list',
+          default: ['Webapp'],
+          required: false,
+        }
+      - { label: 'Featured', name: 'featured', widget: "boolean", default: false }