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

contact page

Browse Source
This commit is contained in:
Michal Vanko 2024-04-25 23:05:47 +02:00
parent 72c7c5d512
commit 76085120c1
6 changed files with 195 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
axum_server/src/pages/contact.rs Normal file
View File

@ -0,0 +1,87 @@
use askama::Template;
use axum::http::StatusCode;
use crate::components::{
site_footer::{render_site_footer, SiteFooter},
site_header::HeaderProps,
};
pub struct ContactLink {
pub href: String,
pub title: String,
pub label: String,
pub svg: String,
}
#[derive(Template)]
#[template(path = "contact.html")]
pub struct ContactPageTemplate {
pub title: String,
pub site_footer: SiteFooter,
pub header_props: HeaderProps,
pub links: Vec<ContactLink>,
}
pub async fn render_contact() -> Result<ContactPageTemplate, StatusCode> {
let site_footer = tokio::spawn(render_site_footer());
let site_footer = site_footer
.await
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
let links = vec![
ContactLink {
href: "mailto: michalvankosk@gmail.com".to_string(),
label: "michalvankosk@gmail.com".to_string(),
title: "E-mail address".to_string(),
svg: "mail".to_string(),
},
ContactLink {
href: "https://twitch.tv/michalvankodev".to_string(),
label: "Twitch".to_string(),
title: "Twitch channel".to_string(),
svg: "twitch".to_string(),
},
ContactLink {
href: "https://tiktok.com/@michalvankodev".to_string(),
label: "TikTok".to_string(),
title: "TikTok channel".to_string(),
svg: "tiktok".to_string(),
},
ContactLink {
href: "https://www.youtube.com/@michalvankodev".to_string(),
label: "YouTube".to_string(),
title: "YouTube channel".to_string(),
svg: "youtube".to_string(),
},
ContactLink {
href: "https://instagram.com/michalvankodev".to_string(),
label: "Instagram".to_string(),
title: "Instagram profile".to_string(),
svg: "instagram".to_string(),
},
ContactLink {
href: "https://instagram.com/michalvankodev".to_string(),
label: "GitHub".to_string(),
title: "Github profile".to_string(),
svg: "github".to_string(),
},
ContactLink {
href: "https://www.linkedin.com/in/michal-vanko-dev/".to_string(),
label: "LinkedIn".to_string(),
title: "LinkedIn profile".to_string(),
svg: "linkedin".to_string(),
},
ContactLink {
href: "https://discord.gg/2cGg7kwZEh".to_string(),
label: "Discord".to_string(),
title: "Discord channel".to_string(),
svg: "discord".to_string(),
},
];
Ok(ContactPageTemplate {
title: "Contact".to_owned(),
site_footer,
header_props: HeaderProps::default(),
links,
})
}

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

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

6
axum_server/src/router.rs
View File

@ -1,6 +1,9 @@
use crate::{
feed::render_rss_feed,
pages::{index::render_index, post::render_post, post_list::render_post_list},
pages::{
contact::render_contact, index::render_index, post::render_post,
post_list::render_post_list,
},
};
use axum::{extract::MatchedPath, http::Request, routing::get, Router};
use tower_http::trace::TraceLayer;
@ -12,6 +15,7 @@ pub fn get_router() -> Router {
.route("/blog", get(render_post_list))
.route("/blog/tags/:tag", get(render_post_list))
.route("/blog/:post_id", get(render_post))
.route("/contact", get(render_contact))
.route("/feed.xml", get(render_rss_feed))
.layer(
TraceLayer::new_for_http().make_span_with(|request: &Request<_>| {

81
axum_server/styles/output.css
View File

@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/
/*
@ -211,6 +211,8 @@ textarea {
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
@ -234,9 +236,9 @@ select {
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
@ -492,6 +494,10 @@ video {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
@ -542,6 +548,10 @@ video {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.m-1 {
@ -572,6 +582,21 @@ video {
margin-bottom: 0.75rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -632,6 +657,10 @@ video {
flex-direction: row;
}
.place-content-center {
place-content: center;
}
.content-end {
align-content: flex-end;
}
@ -656,15 +685,28 @@ video {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@ -698,6 +740,21 @@ video {
padding-right: 1.25rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.pr-3 {
padding-right: 0.75rem;
}
@ -795,6 +852,12 @@ video {
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);
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.article-body {
h1 {
margin-top: 0.5rem;
@ -895,3 +958,13 @@ video {
.video-embed {
margin: 1rem;
}
.hover\:bg-blue-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}
.hover\:bg-pink-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}

25
axum_server/templates/contact.html Normal file
View File

@ -0,0 +1,25 @@
{% extends "base.html" %}
{% block content %}
<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
Contact
</h1>
<ul class="mx-6">
{% for link in links %}
<li class="my-6">
<a
class="flex border-2 place-content-center items-center rounded-full border-blue-500 py-5 hover:bg-pink-200 transition-colors"
href="{{link.href}}"
title="{{link.title}}"
>
<svg aria-hidden="true" class="h-6 w-6 fill-blue-950 mx-2">
<use xlink:href="/svg/icons-sprite.svg#{{link.svg}}" />
</svg>
<span class="text-lg font-semibold">{{link.label}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endblock %}

47
axum_server/templates/site_footer.html
View File

@ -1,49 +1,2 @@
{% 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>
<section>
<h3 class="text-lg text-blue-950">Contact</h3>
<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>