From 6dc6a581e3a4210a1add25cb3089a194fc3495b9 Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Tue, 6 Aug 2024 22:45:30 +0200 Subject: [PATCH] Projects moved and finished to showcase on index --- _projects/2020-04-04-panoramic.md | 16 ++++ _projects/2022-05-05-the-expert.md | 19 ++++ _projects/2024-08-06-beinsports.md | 12 +++ _projects/2024-08-06-ckvive.md | 11 +++ _projects/2024-08-06-dev-project-test.md | 9 ++ _projects/2024-08-06-docker-presentation.md | 12 +++ _projects/2024-08-06-fx-sales.md | 14 +++ _projects/2024-08-06-heylady.md | 16 ++++ _projects/2024-08-06-košice-peace-marathon.md | 13 +++ _projects/2024-08-06-livesport-tv.md | 10 ++ _projects/2024-08-06-manualogic.md | 14 +++ ...-06-renaissance-of-hypermedia-systems-1.md | 14 +++ _projects/2024-08-06-responzio.md | 14 +++ ...-06-ship-structured-heard-input-process.md | 11 +++ _projects/2024-08-06-signal-hub-manager.md | 13 +++ _projects/2024-08-06-skosy.md | 10 ++ _projects/2024-08-06-spreading-the-web.md | 13 +++ _projects/2024-08-06-the-grand-escape.md | 14 +++ ...toppable-growth-of-front-end-frameworks.md | 12 +++ .../2024-08-06-webassembly-presentation.md | 12 +++ axum_server/src/featured_projects.rs | 10 +- axum_server/src/pages/project.rs | 11 +++ axum_server/src/post_parser.rs | 64 ++++++------- axum_server/src/project_list.rs | 42 --------- axum_server/styles/output.css | 19 ++++ .../components/project_preview_card.html | 41 ++++++--- static/images/uploads/bein_logo.af017869.webp | Bin 0 -> 34134 bytes static/images/uploads/ck_vive_logo.svg | 86 ++++++++++++++++++ static/images/uploads/docker-use-cases.png | 3 + static/images/uploads/fx_sales_screen2x.png | 3 + static/images/uploads/heyladylogo.svg | 13 +++ static/images/uploads/logo.png | 3 + .../screenshot-from-2024-08-06-18-22-52.png | 3 + .../screenshot-from-2024-08-06-18-48-02.png | 3 + .../screenshot-from-2024-08-06-18-52-41.png | 3 + .../screenshot-from-2024-08-06-19-01-03.png | 3 + static/resources/config.yml | 6 ++ 37 files changed, 482 insertions(+), 90 deletions(-) create mode 100644 _projects/2020-04-04-panoramic.md create mode 100644 _projects/2022-05-05-the-expert.md create mode 100644 _projects/2024-08-06-beinsports.md create mode 100644 _projects/2024-08-06-ckvive.md create mode 100644 _projects/2024-08-06-dev-project-test.md create mode 100644 _projects/2024-08-06-docker-presentation.md create mode 100644 _projects/2024-08-06-fx-sales.md create mode 100644 _projects/2024-08-06-heylady.md create mode 100644 _projects/2024-08-06-košice-peace-marathon.md create mode 100644 _projects/2024-08-06-livesport-tv.md create mode 100644 _projects/2024-08-06-manualogic.md create mode 100644 _projects/2024-08-06-renaissance-of-hypermedia-systems-1.md create mode 100644 _projects/2024-08-06-responzio.md create mode 100644 _projects/2024-08-06-ship-structured-heard-input-process.md create mode 100644 _projects/2024-08-06-signal-hub-manager.md create mode 100644 _projects/2024-08-06-skosy.md create mode 100644 _projects/2024-08-06-spreading-the-web.md create mode 100644 _projects/2024-08-06-the-grand-escape.md create mode 100644 _projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md create mode 100644 _projects/2024-08-06-webassembly-presentation.md delete mode 100644 axum_server/src/project_list.rs create mode 100644 static/images/uploads/bein_logo.af017869.webp create mode 100644 static/images/uploads/ck_vive_logo.svg create mode 100644 static/images/uploads/docker-use-cases.png create mode 100644 static/images/uploads/fx_sales_screen2x.png create mode 100644 static/images/uploads/heyladylogo.svg create mode 100644 static/images/uploads/logo.png create mode 100644 static/images/uploads/screenshot-from-2024-08-06-18-22-52.png create mode 100644 static/images/uploads/screenshot-from-2024-08-06-18-48-02.png create mode 100644 static/images/uploads/screenshot-from-2024-08-06-18-52-41.png create mode 100644 static/images/uploads/screenshot-from-2024-08-06-19-01-03.png diff --git a/_projects/2020-04-04-panoramic.md b/_projects/2020-04-04-panoramic.md new file mode 100644 index 0000000..3081bc6 --- /dev/null +++ b/_projects/2020-04-04-panoramic.md @@ -0,0 +1,16 @@ +--- +title: Panoramic +displayed: true +description: "*Panoramic* was a company focused on building a web application + for data scientists to be able to create and share models and graphs in + between each other." +classification: webapp +tags: + - Webapp + - Node.js + - TypeScript + - React + - GraphQL + - Data analytics +featured: false +--- diff --git a/_projects/2022-05-05-the-expert.md b/_projects/2022-05-05-the-expert.md new file mode 100644 index 0000000..d917f47 --- /dev/null +++ b/_projects/2022-05-05-the-expert.md @@ -0,0 +1,19 @@ +--- +title: The Expert +displayed: true +description: _The Expert_ is a digital platform that connects clients to + interior designers around the world. For experts, it allows **managing** their + **portfolio and profile** and **schedule** in which they are open for + **consultations**. Clients are able to view their profiles and book + consultations. +link: https://www.theexpert.com/ +cover_image: /images/uploads/the-expert-logo.svg +classification: webapp +tags: + - Node.js + - PostgreSQL + - TypeScript + - React + - GraphQL +featured: true +--- diff --git a/_projects/2024-08-06-beinsports.md b/_projects/2024-08-06-beinsports.md new file mode 100644 index 0000000..c842852 --- /dev/null +++ b/_projects/2024-08-06-beinsports.md @@ -0,0 +1,12 @@ +--- +title: beinSports +displayed: true +description: "*beIN Sports* is a global network of sports channels jointly owned + and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media + Networks*" +cover_image: /images/uploads/bein_logo.af017869.webp +classification: website +tags: + - Freemarker +featured: false +--- diff --git a/_projects/2024-08-06-ckvive.md b/_projects/2024-08-06-ckvive.md new file mode 100644 index 0000000..fdbc918 --- /dev/null +++ b/_projects/2024-08-06-ckvive.md @@ -0,0 +1,11 @@ +--- +title: CK Vive +displayed: true +description: Websitefor *CK Vive* travel agency with a **custom CMS system** for + managing travel destinations. +cover_image: /images/uploads/ck_vive_logo.svg +classification: website +tags: + - PHP +featured: false +--- diff --git a/_projects/2024-08-06-dev-project-test.md b/_projects/2024-08-06-dev-project-test.md new file mode 100644 index 0000000..2b00439 --- /dev/null +++ b/_projects/2024-08-06-dev-project-test.md @@ -0,0 +1,9 @@ +--- +title: dev project test +displayed: true +description: Testing project +classification: webapp +tags: + - Webapp +featured: false +--- diff --git a/_projects/2024-08-06-docker-presentation.md b/_projects/2024-08-06-docker-presentation.md new file mode 100644 index 0000000..30e1cc8 --- /dev/null +++ b/_projects/2024-08-06-docker-presentation.md @@ -0,0 +1,12 @@ +--- +title: Docker +displayed: false +description: An introduction to Docker containerization technology and how it + differs from virtualization. +cover_image: /images/uploads/docker-use-cases.png +classification: presentation +tags: + - Presentation + - Docker +featured: false +--- diff --git a/_projects/2024-08-06-fx-sales.md b/_projects/2024-08-06-fx-sales.md new file mode 100644 index 0000000..23a62f8 --- /dev/null +++ b/_projects/2024-08-06-fx-sales.md @@ -0,0 +1,14 @@ +--- +title: FX Sales +displayed: true +description: "*Caplin FX Sales* allows sales people to **trade on behalf of + their clients**. This needs to be an efficient workflow providing all the + relevant information to the sales user" +cover_image: /images/uploads/fx_sales_screen2x.png +classification: webapp +tags: + - Webapp + - React + - Knockout +featured: false +--- diff --git a/_projects/2024-08-06-heylady.md b/_projects/2024-08-06-heylady.md new file mode 100644 index 0000000..8cc3452 --- /dev/null +++ b/_projects/2024-08-06-heylady.md @@ -0,0 +1,16 @@ +--- +title: HeyLady! +displayed: true +description: A thriving online community supporting women to learn and practise + speaking English. +cover_image: /images/uploads/heyladylogo.svg +classification: webapp +tags: + - Webapp + - React + - GraphQL + - TypeScript + - NodeJS + - PostgreSQL +featured: false +--- diff --git a/_projects/2024-08-06-košice-peace-marathon.md b/_projects/2024-08-06-košice-peace-marathon.md new file mode 100644 index 0000000..0f64b72 --- /dev/null +++ b/_projects/2024-08-06-košice-peace-marathon.md @@ -0,0 +1,13 @@ +--- +title: Košice Peace Marathon +displayed: true +description: "*Košice Peace Marathon* is the oldest marathon in Europe and the + third-oldest in the world." +link: https://www.kosicemarathon.com/ +cover_image: /images/uploads/screenshot-from-2024-08-06-18-22-52.png +classification: website +tags: + - PHP + - MySQL +featured: false +--- diff --git a/_projects/2024-08-06-livesport-tv.md b/_projects/2024-08-06-livesport-tv.md new file mode 100644 index 0000000..66decdf --- /dev/null +++ b/_projects/2024-08-06-livesport-tv.md @@ -0,0 +1,10 @@ +--- +title: Livesport.tv +displayed: false +description: "*Livesport.tv* is a network of premium online sports channels, + featuring all the top sports competitions from around the world." +classification: website +tags: + - Freemarker +featured: false +--- diff --git a/_projects/2024-08-06-manualogic.md b/_projects/2024-08-06-manualogic.md new file mode 100644 index 0000000..f14d854 --- /dev/null +++ b/_projects/2024-08-06-manualogic.md @@ -0,0 +1,14 @@ +--- +title: Manualogic +displayed: false +description: "*Manualogic* is a **single-page application** for product manual + creators. It contains **custom web editor** and management system of + **translatable pages, books** and **products.** Its main goal is to enable + customers to get manuals of their products in digital form." +classification: webapp +tags: + - Webapp + - Angular + - RxJS +featured: false +--- diff --git a/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md b/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md new file mode 100644 index 0000000..76e84b0 --- /dev/null +++ b/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md @@ -0,0 +1,14 @@ +--- +title: Renaissance of hypermedia systems +displayed: true +description: A presentation about hypermedia systems, HTMX, HyperView, and the + HATEOAS principles. 2024 +link: https://michalvankodev.github.io/presentation-renaissance-of-hypermedia-systems/#/intro +cover_image: /images/uploads/screenshot-from-2024-08-06-19-01-03.png +classification: presentation +tags: + - Webdev + - Mobile + - HTMX +featured: true +--- diff --git a/_projects/2024-08-06-responzio.md b/_projects/2024-08-06-responzio.md new file mode 100644 index 0000000..fd6530c --- /dev/null +++ b/_projects/2024-08-06-responzio.md @@ -0,0 +1,14 @@ +--- +title: responzIO +displayed: true +description: "***responzIO*** is a smart, easy-to-use monitoring and automation + system. The ultimate tool for various applications such as hydroponics, + aquariums, and gardens." +cover_image: /images/uploads/responzio.png +classification: embedded +tags: + - Webapp + - Embedded + - NodeJS +featured: false +--- diff --git a/_projects/2024-08-06-ship-structured-heard-input-process.md b/_projects/2024-08-06-ship-structured-heard-input-process.md new file mode 100644 index 0000000..64e69f4 --- /dev/null +++ b/_projects/2024-08-06-ship-structured-heard-input-process.md @@ -0,0 +1,11 @@ +--- +title: SHIP (Structured heard input process) +displayed: true +description: "*SHIP* is a web application for **editors** who actively **track + trades offers and bids** on the commodity market." +classification: webapp +tags: + - Webapp + - Angular +featured: false +--- diff --git a/_projects/2024-08-06-signal-hub-manager.md b/_projects/2024-08-06-signal-hub-manager.md new file mode 100644 index 0000000..afc27f4 --- /dev/null +++ b/_projects/2024-08-06-signal-hub-manager.md @@ -0,0 +1,13 @@ +--- +title: Signal Hub Manager +displayed: true +description: "*Signal Hub* is an end-to-end **Big Data analytics platform** for + large enterprises. It accelerates the process of extracting insights and + intelligence from large volumes of data, including data of different types and + in different formats." +classification: webapp +tags: + - Webapp + - React +featured: false +--- diff --git a/_projects/2024-08-06-skosy.md b/_projects/2024-08-06-skosy.md new file mode 100644 index 0000000..cc16172 --- /dev/null +++ b/_projects/2024-08-06-skosy.md @@ -0,0 +1,10 @@ +--- +title: Skosy +displayed: false +description: "*Skosy* is a web application whose purpose is to **automate the + writing of integration tests** for websites." +classification: webapp +tags: + - Webapp +featured: false +--- diff --git a/_projects/2024-08-06-spreading-the-web.md b/_projects/2024-08-06-spreading-the-web.md new file mode 100644 index 0000000..f738ecd --- /dev/null +++ b/_projects/2024-08-06-spreading-the-web.md @@ -0,0 +1,13 @@ +--- +title: Spreading the Web +displayed: true +description: A presentation about the rising number of use cases for utilizing + web technologies outside of the web platform such as native mobile + applications and robotics. 2015 +cover_image: /images/uploads/screenshot-from-2024-08-06-18-48-02.png +classification: presentation +tags: + - Presentation + - NodeJS +featured: false +--- diff --git a/_projects/2024-08-06-the-grand-escape.md b/_projects/2024-08-06-the-grand-escape.md new file mode 100644 index 0000000..670ca42 --- /dev/null +++ b/_projects/2024-08-06-the-grand-escape.md @@ -0,0 +1,14 @@ +--- +title: The Grand Escape +displayed: true +description: A videogame where you need to steer your boat to avoid obstacles + and enemy bullets. The difficulty will be increased after a certain time and + new enemies will be spawned to make your escape harder. +link: https://michalvankodev.itch.io/the-grand-escape +cover_image: /images/uploads/logo.png +classification: videogame +tags: + - Rust + - Bevy +featured: true +--- diff --git a/_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md b/_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md new file mode 100644 index 0000000..bdd9dec --- /dev/null +++ b/_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md @@ -0,0 +1,12 @@ +--- +title: Unstoppable growth of front-end frameworks +displayed: true +description: A simple summary of the web front-end evolution. Describes how and + why new tools in the NodeJS ecosystem improve & why there is still something + to explore. +classification: presentation +tags: + - Presentation + - NodeJS +featured: false +--- diff --git a/_projects/2024-08-06-webassembly-presentation.md b/_projects/2024-08-06-webassembly-presentation.md new file mode 100644 index 0000000..40c697d --- /dev/null +++ b/_projects/2024-08-06-webassembly-presentation.md @@ -0,0 +1,12 @@ +--- +title: WebAssembly presentation +displayed: true +description: A presentation about what WebAssembly is about and how it might + affect the future of the world. +cover_image: /images/uploads/screenshot-from-2024-08-06-18-52-41.png +classification: presentation +tags: + - Presentation + - WebAssembly +featured: false +--- diff --git a/axum_server/src/featured_projects.rs b/axum_server/src/featured_projects.rs index 99a1719..f881690 100644 --- a/axum_server/src/featured_projects.rs +++ b/axum_server/src/featured_projects.rs @@ -1,4 +1,8 @@ -use crate::{pages::project::ProjectMetadata, post_list::get_post_list, post_parser::ParseResult}; +use crate::{ + pages::project::ProjectMetadata, + post_list::get_post_list, + post_parser::{parse_html, ParseResult}, +}; use axum::http::StatusCode; pub async fn get_featured_projects() -> Result>, StatusCode> { @@ -7,6 +11,10 @@ pub async fn get_featured_projects() -> Result> let featured_projects = project_list .into_iter() .filter(|post| post.metadata.featured) + .map(|mut post| { + post.metadata.description = parse_html(&post.metadata.description); + post + }) .collect(); Ok(featured_projects) diff --git a/axum_server/src/pages/project.rs b/axum_server/src/pages/project.rs index 1db4a97..26a2502 100644 --- a/axum_server/src/pages/project.rs +++ b/axum_server/src/pages/project.rs @@ -9,4 +9,15 @@ pub struct ProjectMetadata { pub cover_image: Option, pub tags: Vec, pub featured: bool, + pub link: Option, +} + +pub fn translate_classification(classification: &str) -> &str { + match classification { + "webapp" => "Web application", + "website" => "Web site", + "presentation" => "Presentation", + "videogame" => "Video game", + any => any, + } } diff --git a/axum_server/src/post_parser.rs b/axum_server/src/post_parser.rs index 26e95f4..99e66c7 100644 --- a/axum_server/src/post_parser.rs +++ b/axum_server/src/post_parser.rs @@ -40,7 +40,7 @@ pub async fn parse_post<'de, Metadata: DeserializeOwned>( .parse_with_struct::(&file_contents) .ok_or_else(|| { tracing::error!("Failed to parse metadata"); - return StatusCode::INTERNAL_SERVER_ERROR; + StatusCode::INTERNAL_SERVER_ERROR })?; let body = parse_html(&metadata.content); @@ -52,14 +52,14 @@ pub async fn parse_post<'de, Metadata: DeserializeOwned>( .ok_or(StatusCode::INTERNAL_SERVER_ERROR)? .to_owned(); - return Ok(ParseResult { + Ok(ParseResult { body, metadata: metadata.data, slug: filename, - }); + }) } -fn parse_html(markdown: &str) -> String { +pub fn parse_html(markdown: &str) -> String { let mut options = Options::empty(); options.insert(Options::ENABLE_TABLES); options.insert(Options::ENABLE_FOOTNOTES); @@ -68,45 +68,45 @@ fn parse_html(markdown: &str) -> String { options.insert(Options::ENABLE_SMART_PUNCTUATION); options.insert(Options::ENABLE_HEADING_ATTRIBUTES); - let parser = Parser::new_ext(&markdown, options).map(|event| match event { - Event::Start(ref tag) => match tag { - // Parsing images considers `alt` attribute as inner `Text` event - // Therefore the `[alt]` is rendered in html as subtitle - // and the `[](url "title")` `title` is rendered as `alt` attribute - Tag::Image { - link_type, - dest_url, - title, - id, - } => { - println!( - "Image link_type: {:?} url: {} title: {} id: {}", - link_type, dest_url, title, id - ); - // TODO src set - Event::Html( - format!( - r#"
+ let parser = Parser::new_ext(markdown, options).map(|event| match event { + /* + Parsing images considers `alt` attribute as inner `Text` event + Therefore the `[alt]` is rendered in html as subtitle + and the `[](url "title")` `title` is rendered as `alt` attribute + */ + Event::Start(Tag::Image { + link_type, + dest_url, + title, + id, + }) => { + println!( + "Image link_type: {:?} url: {} title: {} id: {}", + link_type, dest_url, title, id + ); + // TODO src set + Event::Html( + format!( + r#"
{alt}
"#, - alt = title, - src = dest_url, - ) - .into(), + alt = title, + src = dest_url, ) - } - _ => event, - }, + .into(), + ) + } + Event::Start(_) => event, Event::End(TagEnd::Image) => Event::Html("
".into()), _ => event, }); - // Write to String buffer. + // Write to String buffer let mut html = String::new(); pulldown_cmark::html::push_html(&mut html, parser); - return html; + html } diff --git a/axum_server/src/project_list.rs b/axum_server/src/project_list.rs deleted file mode 100644 index 7a871d5..0000000 --- a/axum_server/src/project_list.rs +++ /dev/null @@ -1,42 +0,0 @@ -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>, StatusCode> { - // let path = "../_posts/blog/"; - let mut dir = read_dir(path) - .await - .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?; - let mut posts: Vec> = 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::(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); -} diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index 320c219..9b34ebc 100644 --- a/axum_server/styles/output.css +++ b/axum_server/styles/output.css @@ -624,6 +624,16 @@ video { margin-bottom: 1.5rem; } +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -644,6 +654,10 @@ video { margin-top: 0.75rem; } +.mt-1 { + margin-top: 0.25rem; +} + .block { display: block; } @@ -892,6 +906,11 @@ video { line-height: 1.25rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .font-bold { font-weight: 700; } diff --git a/axum_server/templates/components/project_preview_card.html b/axum_server/templates/components/project_preview_card.html index a630454..3edb8fc 100644 --- a/axum_server/templates/components/project_preview_card.html +++ b/axum_server/templates/components/project_preview_card.html @@ -1,34 +1,45 @@ -
+
-

- {{project.metadata.title}} +

+ {% match project.metadata.link %} + {% when Some with (href) %} + + {{project.metadata.title}} + + {% when None %} + {{project.metadata.title}} + {% endmatch %}

-

- 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

+

+ {{project.metadata.description|safe}} +

{% match project.metadata.cover_image %} {% when Some with (source) %} -
- +
+ {% match project.metadata.link %} + {% when Some with (href) %} + + + + {% when None %} + + {% endmatch %} - -
{% when None %} {% endmatch %} -