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

i have no idea how many changes

Browse Source
This commit is contained in:
Michal Vanko 2024-03-13 19:14:10 +01:00
parent 1740bf5a70
commit 0bdd90edbe
14 changed files with 194 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
axum_server/.cargo/config.toml Normal file
View File

@ -0,0 +1,2 @@
[build]
rustflags = ["-Clink-arg=-fuse-ld=lld", "-Ctarget-cpu=native"]

6
axum_server/.zellij/dev-layout.kdl
View File

@ -1,7 +1,4 @@
layout {
pane size=1 borderless=true {
plugin location="zellij:tab-bar"
}
pane split_direction="vertical" focus=true {
pane edit="src/main.rs"
pane split_direction="horizontal" size=60 {
@ -22,4 +19,7 @@ layout {
pane size=2 borderless=true {
plugin location="zellij:status-bar"
}
pane size=1 borderless=true {
plugin location="zellij:tab-bar"
}
}

13
axum_server/Cargo.toml
View File

@ -1,6 +1,3 @@
[build]
rustflags = ["-Z", "threads=8"]
[package]
name = "axum_server"
version = "0.1.0"
@ -23,3 +20,13 @@ tower-http = { version = "0.5.0", features = ["trace", "fs"] }
tower-livereload = "0.9.2"
tracing = "0.1"
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
[build]
rustflags = ["-Z", "threads=8"]
[profile.dev]
debug = true
opt-level = 1
lto = "thin"
panic = "unwind"
strip = false

6
axum_server/justfile
View File

@ -4,6 +4,12 @@ port := env_var_or_default('PORT', '3080')
tailwind:
npx tailwindcss -i ./styles/input.css -o ./styles/output.css --watch
# svg sprite creation
# TODO change route on svetle project deletion
# TODO #directory-swap
svgstore:
npx svgstore -o ../static/svg/icons-sprite.svg ../src/svg/**.svg
server_dev:
cargo watch -x run

3
axum_server/src/main.rs
View File

@ -28,7 +28,8 @@ async fn main() {
// build our application with a single route
let app = router::get_router()
.nest_service("/styles", ServeDir::new("styles"))
.nest_service("/images", ServeDir::new("../static/images"));
.nest_service("/images", ServeDir::new("../static/images"))
.nest_service("/svg", ServeDir::new("../static/svg"));
#[cfg(debug_assertions)]
let app = app.layer(LiveReloadLayer::new());

7
axum_server/src/pages/post.rs
View File

@ -1,4 +1,4 @@
use crate::filters;
use crate::{components::site_header::Link, filters};
use askama::Template;
use axum::{extract::Path, http::StatusCode};
use chrono::{DateTime, Utc};
@ -49,6 +49,9 @@ pub async fn render_post(Path(post_id): Path<String>) -> Result<PostTemplate, St
tags: parsed.metadata.tags,
body: parsed.body,
site_footer,
header_props: HeaderProps::default(),
header_props: HeaderProps::with_back_link(Link {
href: "/blog".to_string(),
label: "All posts".to_string(),
}),
})
}

85
axum_server/styles/output.css
View File

@ -548,6 +548,10 @@ video {
margin: 0.25rem;
}
.m-4 {
margin: 1rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@ -568,6 +572,10 @@ video {
margin-bottom: 0.75rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
@ -588,14 +596,34 @@ video {
display: flex;
}
.hidden {
display: none;
}
.h-0 {
height: 0px;
}
.h-12 {
height: 3rem;
}
.h-6 {
height: 1.5rem;
}
.min-h-full {
min-height: 100%;
}
.w-12 {
width: 3rem;
}
.w-6 {
width: 1.5rem;
}
.flex-grow {
flex-grow: 1;
}
@ -608,16 +636,28 @@ video {
align-content: flex-end;
}
.content-around {
align-content: space-around;
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-around {
justify-content: space-around;
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.rounded {
border-radius: 0.25rem;
}
.border {
border-width: 1px;
}
.border-blue-200 {
@ -635,6 +675,15 @@ video {
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fill-blue-950 {
fill: #172554;
}
.p-3 {
padding: 0.75rem;
}
@ -649,10 +698,19 @@ video {
padding-right: 1.25rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.text-right {
text-align: right;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@ -694,6 +752,10 @@ video {
font-style: italic;
}
.leading-5 {
line-height: 1.25rem;
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
@ -709,6 +771,11 @@ video {
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.text-blue-950 {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
@ -719,11 +786,6 @@ video {
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -833,8 +895,3 @@ video {
.video-embed {
margin: 1rem;
}
.after\:content-\[\'\2c \'\]::after {
--tw-content: ',';
content: var(--tw-content);
}

18
axum_server/templates/components/talent_card.html Normal file
View File

@ -0,0 +1,18 @@
{% macro talent_card(svg, heading, description) %}
<section class="flex border rounded bg-white m-4 p-3">
<aside class="flex justify-center items-center pr-3">
<svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
</svg>
</aside>
<section>
<header>
<h3 class="text-lg font-medium mb-1">{{heading}}</h3>
</header>
<p class="text-sm leading-5 text-gray-800">{{description}}</p>
</section>
</section>
{% endmacro %}

17
axum_server/templates/index.html
View File

@ -1,9 +1,10 @@
{%- import "components/talent_card.html" as tc -%}
{% extends "base.html" %}
{% block title %}Introduction{% endblock %}
{% block content %}
<header class="index-header">
<header class="index-header hidden">
<figure class="profile-pic">
<picture>
<img
@ -21,14 +22,20 @@
</p>
</header>
<h2 class="text-blue-950 font-semibold text-2xl">About me</h2>
<p>
Hey, welcome to my personal website. My name is
Welcome to my personal website. My name is
<strong>Michal&nbsp;Vanko</strong>
and I'm a
<em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
. I'll try to share some stories and opinions about things that I'm interested
in.
</p>
. I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="TODO DISCORD">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
<section class="talent-cards">
{% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
{% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
</section
<section class="twitch-stream-promo">
<h2>Follow my twitch stream</h2>

10
axum_server/templates/post.html
View File

@ -5,13 +5,9 @@
{% block content %}
<article>
<header class="px-4">
<h1 class="text-3xl text-blue-900 mb-3">{{title}}</h1>
<aside class="flex justify-around flex-row">
<section class="">
{% for tag in tags %}
<a href="/blog/tags/{{tag}}" class="text-blue-700">#{{tag}}</a>
{% endfor %}
</section>
<h1 class="text-3xl text-blue-900 mb-3 font-semibold">{{title}}</h1>
<aside class="flex justify-between flex-row">
{% include "post_tag_list.html" %}
<section class="created-at m-1 text-right text-sm text-gray-600">
<span>Published on</span>
<time datetime="{date}"> {{date|pretty_date}} </time>

2
axum_server/templates/post_list.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %} {% block content %} {% if posts.len() == 0 %}
<p class="no-posts">You've found void in the space.</p>
{% else %}
<h1 class="mx-6 mt-3 text-4xl text-blue-900 font-extrabold">
<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
{% if let Some(t) = tag %}
<em>{{t}}</em>
{% else %}

18
axum_server/templates/post_preview_card.html
View File

@ -3,27 +3,17 @@
<h2 class="text-3xl font-semibold text-blue-900">
<a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
</h2>
<aside class="flex justify-between">
{% let tags = post.metadata.tags %}
{% include "post_tag_list.html" %}
<section class="created-at m-1 text-right text-sm text-gray-600">
<span>Published on</span>
<time datetime="{post.metadata.date}"> {{post.metadata.date|pretty_date}} </time>
</section>
</aside>
</header>
<p class="px-5 text-gray-800"> TODO: article preview, maybe implement as a filter?,
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 a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Ald </p>
<hr class="my-3 mx-4 h-0 border-blue-200 bg-blue-800 text-blue-800" />
<footer class="px-4">
<section class="article-tags text-base">
{% if post.metadata.tags.len() > 0 %}
<span class="text-gray-600">Tags:</span>
<ul class="inline">
{% for tag in post.metadata.tags %}
<li class="inline italic text-blue-700 {% if !loop.last %} after:content-[','] {% endif %}">
<a href="/blog/tags/{{tag}}">{{tag}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</footer>
</article>

11
axum_server/templates/post_tag_list.html Normal file
View File

@ -0,0 +1,11 @@
<section class="article-tags text-base">
{% if tags.len() > 0 %}
<ul class="inline">
{% for tag in tags %}
<li class="inline italic text-blue-700">
<a href="/blog/tags/{{tag}}">#{{tag}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</section>

50
axum_server/templates/site_footer.html
View File

@ -1,7 +1,49 @@
{% macro contact_link(svg, title, href, text) %}
<a
class="flex align-center"
href="{{href}}"
title="{{title}}"
>
<svg aria-hidden="true" class="h-6 w-6 fill-blue-950">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
</svg>
<span>{{text}}</span>
</a>
{% endmacro %}
<footer>
{% for post in latest_posts %}
<section>
<h3 class="text-lg text-blue-950">Contact</h3>
<article>{{post.metadata.title}}</article>
{% endfor %}
<ul>
<li>
{% call contact_link("mail", "E-mail address", "mailto: michalvankosk@gmail.com", "michalvankosk@gmail.com") %}
</li>
<li>
{% call contact_link("twitch", "Twitch channel", "https://twitch.tv/michalvankodev", "Twitch") %}
</li>
<li>
{% call contact_link("discord", "Discord channel", "TODO link na discord", "Discord channel") %}
</li>
<li>
{% call contact_link("tiktok", "TikTok channel", "https://tiktok.com/@michalvankodev", "TikTok") %}
</li>
<li>
{% call contact_link("youtube", "YouTube channel", "https://www.youtube.com/@michalvankodev", "YouTube") %}
</li>
<li>
{% call contact_link("twitter", "Twitter profile", "https://twitter.com/michalvankodev", "Twitter") %}
</li>
<li>
{% call contact_link("instagram", "Instagram profile", "https://instagram.com/michalvankodev", "Instagram") %}
</li>
<li>
{% call contact_link("github", "GitHub profile", "https://github.com/michalvankodev", "GitHub") %}
</li>
<li>
{% call contact_link("linkedin", "LinkedIn profile", "https://www.linkedin.com/in/michal-vanko-dev/", "LinkedIn") %}
</li>
</ul>
</footer>