michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

showcase page
Some checks failed
test / cargo test (push) Failing after 1m12s
Details

Browse Source
This commit is contained in:
Michal Vanko
2024-09-27 11:52:25 +02:00
parent f62673d6a7
commit 85c98fac56
41 changed files with 263 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
axum_server/Cargo.toml
View File

@ -35,7 +35,7 @@ rustflags = ["-Z", "threads=8"]
# ]
[profile.dev]
debug = false
debug = true
opt-level = 0
# codegen-units = 16
# lto = "thin"

2
axum_server/justfile
View File

@ -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:

1
axum_server/src/pages/mod.rs
View File

@ -3,3 +3,4 @@ pub mod blog_post_list;
pub mod blog_post_page;
pub mod contact;
pub mod index;
pub mod project_list;

29
axum_server/src/pages/project_list.rs Normal file
View File

@ -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<ParseResult<ProjectMetadata>>,
pub header_props: HeaderProps,
}
pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
let mut project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
project_list.retain(|project| project.metadata.displayed);
project_list.reverse();
Ok(ProjectListTemplate {
title: "Showcase".to_owned(),
header_props: HeaderProps::default(),
project_list,
})
}

33
axum_server/src/post_utils/post_parser.rs
View File

@ -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<bool> = 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,

9
axum_server/src/projects/featured_projects.rs
View File

@ -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<Vec<ParseResult<ProjectMetadata>>
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)

2
axum_server/src/projects/project_model.rs
View File

@ -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<String>,
@ -18,6 +17,7 @@ pub fn translate_classification(classification: &str) -> &str {
"website" => "Web site",
"presentation" => "Presentation",
"videogame" => "Video game",
"embedded" => "Embedded system",
any => any,
}
}

2
axum_server/src/router.rs
View File

@ -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(

30
axum_server/styles/input.css
View File

@ -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);
}
}

79
axum_server/styles/output.css
View File

@ -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;
}

9
axum_server/templates/blog_post_list.html
View File

@ -42,15 +42,18 @@
</section> <!-- /#socials -->
<section id="showcase" class="hidden lg:block">
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
<ul class="">
<ul class="mx-6">
{% for project in featured_projects %}
<li class="my-2">
<li class="my-4">
{% include "components/project_preview_card.html" %}
</li>
{% endfor %}
</ul>
<section class="text-center my-3 md:text-lg">
<a href="/showcase">check out more projects</a>
</section>
</section> <!-- /#showcase -->
</section> <!-- /#blog-container -->
{% endblock %}

4
axum_server/templates/components/project_preview_card.html
View File

@ -1,4 +1,4 @@
<section class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
<section class="border rounded-md bg-white p-4 break-inside-avoid">
<header class="px-4 mb-3">
<h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
{% match project.metadata.link %}
@ -11,7 +11,7 @@
{% endmatch %}
</h2>
<section class="description text-slate-800 my-2 md:text-xl text-justify">
{{project.metadata.description|safe}}
{{project.body|safe}}
</section>
</header>
<!-- <hr class="border-blue-950 my-5"> -->

2
axum_server/templates/components/talent_card.html
View File

@ -1,6 +1,6 @@
{% macro talent_card(svg, heading, description) %}
<section class="flex border rounded bg-white m-4 p-3 max-w-xl">
<section class="flex border rounded bg-white m-4 p-3 max-w-[32rem]">
<aside class="flex justify-center items-center pr-3">
<svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />

3
axum_server/templates/index.html
View File

@ -61,6 +61,9 @@
</li>
{% endfor %}
</ul>
<section class="text-center my-3 md:text-lg">
<a href="/blog">see all blog posts</a>
</section>
</section>
<section id="socials">

24
axum_server/templates/project_list.html Normal file
View File

@ -0,0 +1,24 @@
{% extends "base.html" %}
{% block content %}
<section id="project-list-container" class="max-w-maxindex mx-auto">
<section id="project-list">
{% if project_list.len() == 0 %}
<p class="no-posts">You've found void in the space.</p>
{% else %}
<h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
Showcase
</h1>
<ul class="m-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
{% for project in project_list %}
<li>
{% include "components/project_preview_card.html" %}
</li>
{% endfor %}
</ul>
{% endif %}
</section> <!-- /#project-list -->
</section> <!-- /#project-list-container -->
{% endblock %}

10
axum_server/templates/sections/showcase.html
View File

@ -1,9 +1,13 @@
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
<ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
<ul class="mx-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
{% for project in featured_projects %}
<li class="my-2">
<li>
{% include "components/project_preview_card.html" %}
</li>
{% endfor %}
</ul>
<section class="text-center my-3 md:text-lg">
<a href="/showcase">check out more projects</a>
</section>

3
axum_server/templates/site_footer.html
View File

@ -1,4 +1,5 @@
<footer>
<footer class="my-4">
<hr class="mb-4 border-slate-300 mx-5">
<p
class="text-center"
xmlns:cc="http://creativecommons.org/ns#"

36
axum_server/templates/site_header.html
View File

@ -1,20 +1,20 @@
<header class="min-h-full bg-blue-50 mb-5">
<nav class="flex">
{% match header_props.back_link %}
{% when Some with (link) %}
<a
class="px-3 py-2 text-lg font-medium print:hidden"
href="{{link.href}}"
>
{{link.label}}
</a>
{% when None %}
{% endmatch %}
<aside class="flex logo-section flex-grow justify-end content-end">
<a class="logo p-3 text-base" href="/">
@michalvankodev
</a>
</aside>
</nav>
<hr class="border-slate-300 mx-5">
<nav class="flex">
{% match header_props.back_link %}
{% when Some with (link) %}
<a
class="px-3 py-2 text-lg font-medium print:hidden"
href="{{link.href}}"
>
{{link.label}}
</a>
{% when None %}
{% endmatch %}
<aside class="flex logo-section flex-grow justify-end content-end">
<a class="logo p-3 text-base" href="/">
@michalvankodev
</a>
</aside>
</nav>
<hr class="border-slate-300 mx-5">
</header>