From 85c98fac567947fe4d1034fe3e203f5a477e7dbe Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Fri, 27 Sep 2024 11:52:25 +0200 Subject: [PATCH] showcase page --- .../2020-02-28-how-ive-built-my-web-site.md | 2 +- ...ttempt-at-rusty-game-jam-weekly-25-2022.md | 2 +- _projects/2020-04-04-panoramic.md | 6 +- _projects/2022-05-05-the-expert.md | 10 +-- _projects/2024-08-06-beinsports.md | 7 +- _projects/2024-08-06-ckvive.md | 5 +- _projects/2024-08-06-dev-project-test.md | 4 +- _projects/2024-08-06-docker-presentation.md | 4 +- _projects/2024-08-06-fx-sales.md | 7 +- _projects/2024-08-06-heylady.md | 5 +- _projects/2024-08-06-košice-peace-marathon.md | 4 +- _projects/2024-08-06-livesport-tv.md | 4 +- _projects/2024-08-06-manualogic.md | 8 +- ...-06-renaissance-of-hypermedia-systems-1.md | 4 +- _projects/2024-08-06-responzio.md | 7 +- ...-06-ship-structured-heard-input-process.md | 4 +- _projects/2024-08-06-signal-hub-manager.md | 8 +- _projects/2024-08-06-skosy.md | 4 +- _projects/2024-08-06-spreading-the-web.md | 7 +- _projects/2024-08-06-the-grand-escape.md | 6 +- ...toppable-growth-of-front-end-frameworks.md | 7 +- .../2024-08-06-webassembly-presentation.md | 5 +- axum_server/Cargo.toml | 2 +- axum_server/justfile | 2 +- axum_server/src/pages/mod.rs | 1 + axum_server/src/pages/project_list.rs | 29 +++++++ axum_server/src/post_utils/post_parser.rs | 33 +++++--- axum_server/src/projects/featured_projects.rs | 9 +-- axum_server/src/projects/project_model.rs | 2 +- axum_server/src/router.rs | 2 + axum_server/styles/input.css | 30 ++++--- axum_server/styles/output.css | 79 +++++++++++++------ axum_server/templates/blog_post_list.html | 9 ++- .../components/project_preview_card.html | 4 +- .../templates/components/talent_card.html | 2 +- axum_server/templates/index.html | 3 + axum_server/templates/project_list.html | 24 ++++++ axum_server/templates/sections/showcase.html | 10 ++- axum_server/templates/site_footer.html | 3 +- axum_server/templates/site_header.html | 36 ++++----- static/resources/config.yml | 4 +- 41 files changed, 263 insertions(+), 141 deletions(-) create mode 100644 axum_server/src/pages/project_list.rs create mode 100644 axum_server/templates/project_list.html diff --git a/_posts/blog/2020-02-28-how-ive-built-my-web-site.md b/_posts/blog/2020-02-28-how-ive-built-my-web-site.md index 75ff0b1..3c005f8 100644 --- a/_posts/blog/2020-02-28-how-ive-built-my-web-site.md +++ b/_posts/blog/2020-02-28-how-ive-built-my-web-site.md @@ -117,7 +117,7 @@ For example this is the model of this blog post: Neat part of the _CMS_ are those widgets. In editor they will be presented by appropriate component as well as in the editor preview. I am very satisfied with it and I recommend it. -## What's next +## What's next {#whats-next} I've decided not to wait for perfect product and I want to release this blog as soon as possible. I will have same approach as with other products. Make a **MVP** and then release features as they are done. I've put some features into _Github Projects Board_. I will very likely make a redesign with experimental layout changes. I'd like to experiment with colors and make the blog look distinguishable and personal while maintaining accessibility. diff --git a/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md b/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md index 58576d2..4740c91 100644 --- a/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md +++ b/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md @@ -28,7 +28,7 @@ This week I've attended a [Rusty game jam #2](https://itch.io/jam/rusty-jam-2). ![Egg fetcher game preview](/images/uploads/screenshot-from-2022-06-26-22-37-16.png "Egg fetcher game preview") -[You can check the rusult built with WASM here.](/showcase/egg-fetcher/) +[You can check the result built with WASM here.](/showcase/egg-fetcher/) ## What's up with the weeklys diff --git a/_projects/2020-04-04-panoramic.md b/_projects/2020-04-04-panoramic.md index 3081bc6..97a4e7b 100644 --- a/_projects/2020-04-04-panoramic.md +++ b/_projects/2020-04-04-panoramic.md @@ -1,9 +1,6 @@ --- 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 @@ -14,3 +11,6 @@ tags: - Data analytics featured: false --- +*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. diff --git a/_projects/2022-05-05-the-expert.md b/_projects/2022-05-05-the-expert.md index d917f47..9e18196 100644 --- a/_projects/2022-05-05-the-expert.md +++ b/_projects/2022-05-05-the-expert.md @@ -1,11 +1,6 @@ --- 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 @@ -17,3 +12,8 @@ tags: - GraphQL featured: true --- +_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. diff --git a/_projects/2024-08-06-beinsports.md b/_projects/2024-08-06-beinsports.md index c842852..1ccc491 100644 --- a/_projects/2024-08-06-beinsports.md +++ b/_projects/2024-08-06-beinsports.md @@ -1,12 +1,13 @@ --- 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*" +link: https://www.beinsports.com/en-us cover_image: /images/uploads/bein_logo.af017869.webp classification: website tags: - Freemarker featured: false --- +*beIN Sports* is a global network of sports channels jointly owned +and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media +Networks* diff --git a/_projects/2024-08-06-ckvive.md b/_projects/2024-08-06-ckvive.md index fdbc918..ecfec8a 100644 --- a/_projects/2024-08-06-ckvive.md +++ b/_projects/2024-08-06-ckvive.md @@ -1,11 +1,12 @@ --- 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 +link: https://ckvive.sk/ classification: website tags: - PHP featured: false --- +Websitefor *CK Vive* travel agency with a **custom CMS system** for +managing travel destinations. diff --git a/_projects/2024-08-06-dev-project-test.md b/_projects/2024-08-06-dev-project-test.md index 2b00439..ac79ca8 100644 --- a/_projects/2024-08-06-dev-project-test.md +++ b/_projects/2024-08-06-dev-project-test.md @@ -1,9 +1,9 @@ --- title: dev project test -displayed: true -description: Testing project +displayed: false classification: webapp tags: - Webapp featured: false --- +Testing project diff --git a/_projects/2024-08-06-docker-presentation.md b/_projects/2024-08-06-docker-presentation.md index 30e1cc8..62278af 100644 --- a/_projects/2024-08-06-docker-presentation.md +++ b/_projects/2024-08-06-docker-presentation.md @@ -1,8 +1,6 @@ --- 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: @@ -10,3 +8,5 @@ tags: - Docker featured: false --- +An introduction to Docker containerization technology and how it +differs from virtualization. diff --git a/_projects/2024-08-06-fx-sales.md b/_projects/2024-08-06-fx-sales.md index 23a62f8..86162b7 100644 --- a/_projects/2024-08-06-fx-sales.md +++ b/_projects/2024-08-06-fx-sales.md @@ -1,9 +1,7 @@ --- 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" +link: https://www.caplin.com/business/fx-sales cover_image: /images/uploads/fx_sales_screen2x.png classification: webapp tags: @@ -12,3 +10,6 @@ tags: - Knockout featured: false --- +*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 diff --git a/_projects/2024-08-06-heylady.md b/_projects/2024-08-06-heylady.md index 8cc3452..7d5e9e4 100644 --- a/_projects/2024-08-06-heylady.md +++ b/_projects/2024-08-06-heylady.md @@ -1,8 +1,7 @@ --- title: HeyLady! displayed: true -description: A thriving online community supporting women to learn and practise - speaking English. +link: https://www.heylady.io/ cover_image: /images/uploads/heyladylogo.svg classification: webapp tags: @@ -14,3 +13,5 @@ tags: - PostgreSQL featured: false --- +A thriving online community supporting women to learn and practise +speaking English. diff --git a/_projects/2024-08-06-košice-peace-marathon.md b/_projects/2024-08-06-košice-peace-marathon.md index 0f64b72..7ea17ba 100644 --- a/_projects/2024-08-06-košice-peace-marathon.md +++ b/_projects/2024-08-06-košice-peace-marathon.md @@ -1,8 +1,6 @@ --- 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 @@ -11,3 +9,5 @@ tags: - MySQL featured: false --- +*Košice Peace Marathon* is the oldest marathon in Europe and the +third-oldest in the world. diff --git a/_projects/2024-08-06-livesport-tv.md b/_projects/2024-08-06-livesport-tv.md index 66decdf..076eb6a 100644 --- a/_projects/2024-08-06-livesport-tv.md +++ b/_projects/2024-08-06-livesport-tv.md @@ -1,10 +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 --- +*Livesport.tv* is a network of premium online sports channels, +featuring all the top sports competitions from around the world. diff --git a/_projects/2024-08-06-manualogic.md b/_projects/2024-08-06-manualogic.md index f14d854..10ae2aa 100644 --- a/_projects/2024-08-06-manualogic.md +++ b/_projects/2024-08-06-manualogic.md @@ -1,10 +1,6 @@ --- 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 @@ -12,3 +8,7 @@ tags: - RxJS featured: false --- +*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. diff --git a/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md b/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md index 76e84b0..64862c8 100644 --- a/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md +++ b/_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md @@ -1,8 +1,6 @@ --- 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 @@ -12,3 +10,5 @@ tags: - HTMX featured: true --- +A presentation about hypermedia systems, HTMX, HyperView, and the +HATEOAS principles. 2024 diff --git a/_projects/2024-08-06-responzio.md b/_projects/2024-08-06-responzio.md index fd6530c..9600a62 100644 --- a/_projects/2024-08-06-responzio.md +++ b/_projects/2024-08-06-responzio.md @@ -1,9 +1,7 @@ --- 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." +link: https://www.croptech.com/ cover_image: /images/uploads/responzio.png classification: embedded tags: @@ -12,3 +10,6 @@ tags: - NodeJS featured: false --- +***responzIO*** is a smart, easy-to-use monitoring and automation +system. The ultimate tool for various applications such as hydroponics, +aquariums, and gardens. diff --git a/_projects/2024-08-06-ship-structured-heard-input-process.md b/_projects/2024-08-06-ship-structured-heard-input-process.md index 64e69f4..8e5d22d 100644 --- a/_projects/2024-08-06-ship-structured-heard-input-process.md +++ b/_projects/2024-08-06-ship-structured-heard-input-process.md @@ -1,11 +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 --- +*SHIP* is a web application for **editors** who actively **track +trades offers and bids** on the commodity market. diff --git a/_projects/2024-08-06-signal-hub-manager.md b/_projects/2024-08-06-signal-hub-manager.md index afc27f4..9aed449 100644 --- a/_projects/2024-08-06-signal-hub-manager.md +++ b/_projects/2024-08-06-signal-hub-manager.md @@ -1,13 +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 --- +*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. diff --git a/_projects/2024-08-06-skosy.md b/_projects/2024-08-06-skosy.md index cc16172..37eecc9 100644 --- a/_projects/2024-08-06-skosy.md +++ b/_projects/2024-08-06-skosy.md @@ -1,10 +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 --- +*Skosy* is a web application whose purpose is to **automate the +writing of integration tests** for websites. diff --git a/_projects/2024-08-06-spreading-the-web.md b/_projects/2024-08-06-spreading-the-web.md index f738ecd..65e7cec 100644 --- a/_projects/2024-08-06-spreading-the-web.md +++ b/_projects/2024-08-06-spreading-the-web.md @@ -1,9 +1,7 @@ --- 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 +link: https://michalvankodev.github.io/spreading-the-web cover_image: /images/uploads/screenshot-from-2024-08-06-18-48-02.png classification: presentation tags: @@ -11,3 +9,6 @@ tags: - NodeJS featured: false --- +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 diff --git a/_projects/2024-08-06-the-grand-escape.md b/_projects/2024-08-06-the-grand-escape.md index 670ca42..94aac05 100644 --- a/_projects/2024-08-06-the-grand-escape.md +++ b/_projects/2024-08-06-the-grand-escape.md @@ -1,9 +1,6 @@ --- 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 @@ -12,3 +9,6 @@ tags: - Bevy featured: true --- +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. 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 index bdd9dec..dc69a0a 100644 --- a/_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md +++ b/_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md @@ -1,12 +1,13 @@ --- 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. +link: https://michalvankodev.github.io/unstoppable-growth-of-frontend-frameworks/ classification: presentation tags: - Presentation - NodeJS featured: false --- +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. diff --git a/_projects/2024-08-06-webassembly-presentation.md b/_projects/2024-08-06-webassembly-presentation.md index 40c697d..771936a 100644 --- a/_projects/2024-08-06-webassembly-presentation.md +++ b/_projects/2024-08-06-webassembly-presentation.md @@ -1,8 +1,7 @@ --- title: WebAssembly presentation displayed: true -description: A presentation about what WebAssembly is about and how it might - affect the future of the world. +link: https://michalvankodev.github.io/presentation-webassembly/ cover_image: /images/uploads/screenshot-from-2024-08-06-18-52-41.png classification: presentation tags: @@ -10,3 +9,5 @@ tags: - WebAssembly featured: false --- +A presentation about what WebAssembly is about and how it might +affect the future of the world. diff --git a/axum_server/Cargo.toml b/axum_server/Cargo.toml index 4329f2d..f738b27 100644 --- a/axum_server/Cargo.toml +++ b/axum_server/Cargo.toml @@ -35,7 +35,7 @@ rustflags = ["-Z", "threads=8"] # ] [profile.dev] -debug = false +debug = true opt-level = 0 # codegen-units = 16 # lto = "thin" diff --git a/axum_server/justfile b/axum_server/justfile index 4626a7f..69462b0 100644 --- a/axum_server/justfile +++ b/axum_server/justfile @@ -46,7 +46,7 @@ wait_for_port: # Kill the application running on port kill: - kill $(lsof -t -i:{{port}}) + kill $(pidof axum_server) # Clean the dist folder clean: diff --git a/axum_server/src/pages/mod.rs b/axum_server/src/pages/mod.rs index eca9c52..79db791 100644 --- a/axum_server/src/pages/mod.rs +++ b/axum_server/src/pages/mod.rs @@ -3,3 +3,4 @@ pub mod blog_post_list; pub mod blog_post_page; pub mod contact; pub mod index; +pub mod project_list; diff --git a/axum_server/src/pages/project_list.rs b/axum_server/src/pages/project_list.rs new file mode 100644 index 0000000..22f2f73 --- /dev/null +++ b/axum_server/src/pages/project_list.rs @@ -0,0 +1,29 @@ +use askama::Template; +use axum::http::StatusCode; + +use crate::{ + components::site_header::HeaderProps, + post_utils::{post_listing::get_post_list, post_parser::ParseResult}, + projects::project_model::ProjectMetadata, +}; + +#[derive(Template)] +#[template(path = "project_list.html")] +pub struct ProjectListTemplate { + pub title: String, + pub project_list: Vec>, + pub header_props: HeaderProps, +} + +pub async fn render_projects_list() -> Result { + let mut project_list = get_post_list::("../_projects").await?; + + project_list.retain(|project| project.metadata.displayed); + project_list.reverse(); + + Ok(ProjectListTemplate { + title: "Showcase".to_owned(), + header_props: HeaderProps::default(), + project_list, + }) +} diff --git a/axum_server/src/post_utils/post_parser.rs b/axum_server/src/post_utils/post_parser.rs index a1350d8..b3e3df6 100644 --- a/axum_server/src/post_utils/post_parser.rs +++ b/axum_server/src/post_utils/post_parser.rs @@ -1,3 +1,4 @@ +use core::panic; use std::path::Path; use axum::http::StatusCode; @@ -9,7 +10,7 @@ use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd}; use serde::{de::DeserializeOwned, Deserialize, Deserializer}; use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet}; use tokio::fs; -use tracing::debug; +use tracing::{debug, error, info}; use crate::picture_generator::{ picture_markup_generator::generate_picture_markup, resolutions::get_max_resolution, @@ -89,6 +90,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String { let syntax_set = SyntaxSet::load_defaults_newlines(); let theme_set = ThemeSet::load_defaults(); let theme = theme_set.themes.get("InspiredGitHub").unwrap(); + let mut heading_ended: Option = None; let parser = Parser::new_ext(markdown, options).map(|event| match event { /* @@ -181,14 +183,24 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String { text.to_lowercase() .replace(|c: char| !c.is_alphanumeric(), "-") }); - Event::Html( - formatdoc!( - r##"id="{heading_id}"> - {text} - "## - ) - .into(), - ) + debug!("heading_id: {}", heading_id.clone()); + match heading_ended { + None => { + error!("Heading should have set state"); + panic!("Heading should have set state"); + } + Some(true) => Event::Html(text), + Some(false) => { + heading_ended = Some(true); + Event::Html( + formatdoc!( + r##"id="{heading_id}"> + {text}"## + ) + .into(), + ) + } + } } _ => Event::Text(text), }, @@ -199,7 +211,9 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String { attrs: _, }) => { let id_str = id.map(|id| id.to_string()); + debug!("heading_start: {:?}, level: {}", &id_str, level); text_kind = TextKind::Heading(id_str); + heading_ended = Some(false); Event::Html(format!("<{level} ").into()) } Event::Start(_) => event, @@ -210,6 +224,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String { } Event::End(TagEnd::Heading(heading_level)) => { text_kind = TextKind::Text; + heading_ended = None; Event::End(TagEnd::Heading(heading_level)) } _ => event, diff --git a/axum_server/src/projects/featured_projects.rs b/axum_server/src/projects/featured_projects.rs index 7763bcc..b0c7c71 100644 --- a/axum_server/src/projects/featured_projects.rs +++ b/axum_server/src/projects/featured_projects.rs @@ -1,9 +1,6 @@ use axum::http::StatusCode; -use crate::post_utils::{ - post_listing::get_post_list, - post_parser::{parse_html, ParseResult}, -}; +use crate::post_utils::{post_listing::get_post_list, post_parser::ParseResult}; use super::project_model::ProjectMetadata; @@ -13,10 +10,6 @@ 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, false); - post - }) .collect(); Ok(featured_projects) diff --git a/axum_server/src/projects/project_model.rs b/axum_server/src/projects/project_model.rs index 26a2502..3c56cf1 100644 --- a/axum_server/src/projects/project_model.rs +++ b/axum_server/src/projects/project_model.rs @@ -3,7 +3,6 @@ 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, @@ -18,6 +17,7 @@ pub fn translate_classification(classification: &str) -> &str { "website" => "Web site", "presentation" => "Presentation", "videogame" => "Video game", + "embedded" => "Embedded system", any => any, } } diff --git a/axum_server/src/router.rs b/axum_server/src/router.rs index b812f6f..f7b1e9f 100644 --- a/axum_server/src/router.rs +++ b/axum_server/src/router.rs @@ -3,6 +3,7 @@ use crate::{ pages::{ admin::render_admin, blog_post_list::render_blog_post_list, blog_post_page::render_blog_post, contact::render_contact, index::render_index, + project_list::render_projects_list, }, }; use axum::{extract::MatchedPath, http::Request, routing::get, Router}; @@ -16,6 +17,7 @@ pub fn get_router() -> Router { .route("/blog/tags/:tag", get(render_blog_post_list)) .route("/blog/:post_id", get(render_blog_post)) .route("/contact", get(render_contact)) + .route("/showcase", get(render_projects_list)) .route("/admin", get(render_admin)) .route("/feed.xml", get(render_rss_feed)) .layer( diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css index 08181dd..71ea559 100644 --- a/axum_server/styles/input.css +++ b/axum_server/styles/input.css @@ -150,7 +150,11 @@ strong { ul, ol { - @apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl; + @apply pl-10 pr-6 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl lg:pl-14; + + & p { + @apply px-2; + } } ul { @@ -204,83 +208,83 @@ article a { box-shadow: 0px 0px 0 rgba(0, 255, 255, 0), 0px 0px 0 rgba(255, 0, 255, 0); - transform: translate(0, 0) skew(0deg, 0deg); + transform: translate(0, 0); } 10% { box-shadow: -3px -3px 0 rgba(0, 255, 255, 0.8), 3px 3px 0 rgba(255, 0, 255, 0.8); - transform: translate(-1px, -1px) skew(-0.5deg, -0.5deg); + transform: translate(-1px, -1px); } 15% { box-shadow: 2px -2px 0 rgba(0, 255, 255, 0.6), -2px 2px 0 rgba(255, 0, 255, 0.6); - transform: translate(2px, -2px) skew(0.5deg, 0.5deg); + transform: translate(2px, -2px); } 20% { box-shadow: -1px 1px 0 rgba(0, 255, 255, 0.4), 1px -1px 0 rgba(255, 0, 255, 0.4); - transform: translate(1px, 1px) scale(1.01); + transform: translate(1px, 1px); } 25% { box-shadow: -4px 4px 0 rgba(0, 255, 255, 1), 4px -4px 0 rgba(255, 0, 255, 1); - transform: translate(-2px, 2px) skew(-0.5deg, -0.5deg); + transform: translate(-2px, 2px); } 30% { box-shadow: 3px -3px 0 rgba(0, 255, 255, 0.5), -3px 3px 0 rgba(255, 0, 255, 0.5); - transform: translate(3px, -3px) scale(0.99); + transform: translate(3px, -3px); } 40% { box-shadow: -2px 2px 0 rgba(0, 255, 255, 0.9), 2px -2px 0 rgba(255, 0, 255, 0.9); - transform: translate(-1px, 1px) skew(0.5deg, 0.5deg); + transform: translate(-1px, 1px); } 50% { box-shadow: -1px -2px 0 rgba(0, 255, 255, 0.7), 2px -1px 0 rgba(255, 0, 255, 0.7); - transform: translate(1px, -1px) skew(-0.3deg, 0.3deg); + transform: translate(1px, -1px); } 60% { box-shadow: 2px -2px 0 rgba(0, 255, 255, 0.3), -2px 2px 0 rgba(255, 0, 255, 0.3); - transform: translate(2px, -2px) scale(1.02); + transform: translate(2px, -2px); } 75% { box-shadow: -3px 3px 0 rgba(0, 255, 255, 1), 3px -3px 0 rgba(255, 0, 255, 1); - transform: translate(-3px, 3px) skew(0.5deg, -0.5deg); + transform: translate(-3px, 3px); } 85% { box-shadow: -2px -2px 0 rgba(0, 255, 255, 0.2), 2px 2px 0 rgba(255, 0, 255, 0.2); - transform: translate(-2px, -2px) scale(0.98); + transform: translate(-2px, -2px); } 100% { box-shadow: 0px 0px 0 rgba(0, 255, 255, 0), 0px 0px 0 rgba(255, 0, 255, 0); - transform: translate(0, 0) skew(0deg, 0deg); + transform: translate(0, 0); } } diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index 555786a..f38fa62 100644 --- a/axum_server/styles/output.css +++ b/axum_server/styles/output.css @@ -674,6 +674,10 @@ video { margin: 1.25rem; } +.m-6 { + margin: 1.5rem; +} + .mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; @@ -709,11 +713,26 @@ video { margin-bottom: 0.5rem; } +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -726,6 +745,10 @@ video { margin-bottom: 0.75rem; } +.mb-4 { + margin-bottom: 1rem; +} + .mb-5 { margin-bottom: 1.25rem; } @@ -826,10 +849,6 @@ video { max-width: 64rem; } -.max-w-xl { - max-width: 36rem; -} - .flex-grow { flex-grow: 1; } @@ -884,6 +903,10 @@ video { gap: 0.5rem; } +.gap-6 { + gap: 1.5rem; +} + .self-start { align-self: flex-start; } @@ -1703,8 +1726,11 @@ strong { } ul, ol { - padding-left: 1rem; - padding-right: 1rem; + padding-left: 2.5rem; + } + ul, + ol { + padding-right: 1.5rem; } ul, ol { @@ -1725,6 +1751,12 @@ strong { line-height: 1.75rem; } } + @media (min-width: 1024px) { + ul, + ol { + padding-left: 3.5rem; + } + } @media (min-width: 1024px) { ul, ol { @@ -1734,6 +1766,13 @@ strong { font-weight: 400; } } + ul, + ol { + & p { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + } ul { list-style-type: disc; } @@ -1801,84 +1840,84 @@ article a:visited { box-shadow: 0px 0px 0 rgba(0, 255, 255, 0), 0px 0px 0 rgba(255, 0, 255, 0); - transform: translate(0, 0) skew(0deg, 0deg); + transform: translate(0, 0); } 10% { box-shadow: -3px -3px 0 rgba(0, 255, 255, 0.8), 3px 3px 0 rgba(255, 0, 255, 0.8); - transform: translate(-1px, -1px) skew(-0.5deg, -0.5deg); + transform: translate(-1px, -1px); } 15% { box-shadow: 2px -2px 0 rgba(0, 255, 255, 0.6), -2px 2px 0 rgba(255, 0, 255, 0.6); - transform: translate(2px, -2px) skew(0.5deg, 0.5deg); + transform: translate(2px, -2px); } 20% { box-shadow: -1px 1px 0 rgba(0, 255, 255, 0.4), 1px -1px 0 rgba(255, 0, 255, 0.4); - transform: translate(1px, 1px) scale(1.01); + transform: translate(1px, 1px); } 25% { box-shadow: -4px 4px 0 rgba(0, 255, 255, 1), 4px -4px 0 rgba(255, 0, 255, 1); - transform: translate(-2px, 2px) skew(-0.5deg, -0.5deg); + transform: translate(-2px, 2px); } 30% { box-shadow: 3px -3px 0 rgba(0, 255, 255, 0.5), -3px 3px 0 rgba(255, 0, 255, 0.5); - transform: translate(3px, -3px) scale(0.99); + transform: translate(3px, -3px); } 40% { box-shadow: -2px 2px 0 rgba(0, 255, 255, 0.9), 2px -2px 0 rgba(255, 0, 255, 0.9); - transform: translate(-1px, 1px) skew(0.5deg, 0.5deg); + transform: translate(-1px, 1px); } 50% { box-shadow: -1px -2px 0 rgba(0, 255, 255, 0.7), 2px -1px 0 rgba(255, 0, 255, 0.7); - transform: translate(1px, -1px) skew(-0.3deg, 0.3deg); + transform: translate(1px, -1px); } 60% { box-shadow: 2px -2px 0 rgba(0, 255, 255, 0.3), -2px 2px 0 rgba(255, 0, 255, 0.3); - transform: translate(2px, -2px) scale(1.02); + transform: translate(2px, -2px); } 75% { box-shadow: -3px 3px 0 rgba(0, 255, 255, 1), 3px -3px 0 rgba(255, 0, 255, 1); - transform: translate(-3px, 3px) skew(0.5deg, -0.5deg); + transform: translate(-3px, 3px); } 85% { box-shadow: -2px -2px 0 rgba(0, 255, 255, 0.2), 2px 2px 0 rgba(255, 0, 255, 0.2); - transform: translate(-2px, -2px) scale(0.98); + transform: translate(-2px, -2px); } 100% { box-shadow: 0px 0px 0 rgba(0, 255, 255, 0), 0px 0px 0 rgba(255, 0, 255, 0); - transform: translate(0, 0) skew(0deg, 0deg); + transform: translate(0, 0); } } @@ -1957,10 +1996,6 @@ article a:visited { margin-bottom: 2rem; } - .md\:grid { - display: grid; - } - .md\:h-16 { height: 4rem; } diff --git a/axum_server/templates/blog_post_list.html b/axum_server/templates/blog_post_list.html index f6ab23a..ff182a9 100644 --- a/axum_server/templates/blog_post_list.html +++ b/axum_server/templates/blog_post_list.html @@ -42,15 +42,18 @@ {% endblock %} diff --git a/axum_server/templates/components/project_preview_card.html b/axum_server/templates/components/project_preview_card.html index f66cf0e..debe2cf 100644 --- a/axum_server/templates/components/project_preview_card.html +++ b/axum_server/templates/components/project_preview_card.html @@ -1,4 +1,4 @@ -
+

{% match project.metadata.link %} @@ -11,7 +11,7 @@ {% endmatch %}

- {{project.metadata.description|safe}} + {{project.body|safe}}
diff --git a/axum_server/templates/components/talent_card.html b/axum_server/templates/components/talent_card.html index d57ae14..f7d27a3 100644 --- a/axum_server/templates/components/talent_card.html +++ b/axum_server/templates/components/talent_card.html @@ -1,6 +1,6 @@ {% macro talent_card(svg, heading, description) %} -
+
diff --git a/axum_server/templates/project_list.html b/axum_server/templates/project_list.html new file mode 100644 index 0000000..b491c05 --- /dev/null +++ b/axum_server/templates/project_list.html @@ -0,0 +1,24 @@ +{% extends "base.html" %} +{% block content %} + +
+
+ {% if project_list.len() == 0 %} +

You've found void in the space.

+ {% else %} +

+ Showcase +

+ +
    + {% for project in project_list %} +
  • + {% include "components/project_preview_card.html" %} +
    • + {% endfor %} +
+ {% endif %} +
+ +
+{% endblock %} diff --git a/axum_server/templates/sections/showcase.html b/axum_server/templates/sections/showcase.html index afcb32b..5c25852 100644 --- a/axum_server/templates/sections/showcase.html +++ b/axum_server/templates/sections/showcase.html @@ -1,9 +1,13 @@ -

Showcase

+

Showcase

-
    +
      {% for project in featured_projects %} -
    • +
    • {% include "components/project_preview_card.html" %}
      • {% endfor %}
    + +
    + check out more projects +
    diff --git a/axum_server/templates/site_footer.html b/axum_server/templates/site_footer.html index 7efa999..cc0e2ce 100644 --- a/axum_server/templates/site_footer.html +++ b/axum_server/templates/site_footer.html @@ -1,4 +1,5 @@ -