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

holy shit the responsiveness
Some checks failed
test / cargo test (push) Failing after 1m24s
Details

Browse Source
This commit is contained in:
Michal Vanko 2024-09-25 12:55:05 +02:00
parent fc26d77bfc
commit 1eb0f55264
9 changed files with 140 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
axum_server/src/picture_generator/picture_markup_generator.rs
View File

@ -19,9 +19,15 @@ pub fn generate_picture_markup(
width: u32,
height: u32,
alt_text: &str,
class_name: Option<&str>,
generate_image: bool,
) -> Result<String, anyhow::Error> {
let exported_formats = get_export_formats(orig_img_path);
let class_attr = if let Some(class) = class_name {
format!(r#"class="{class}""#)
} else {
"".to_string()
};
if exported_formats.is_empty() {
return Ok(formatdoc!(
@ -29,6 +35,7 @@ pub fn generate_picture_markup(
src="{orig_img_path}"
width="{width}"
height="{height}"
{class_attr}
alt="{alt_text}"
>"#
));
@ -99,6 +106,7 @@ pub fn generate_picture_markup(
width="{width}"
height="{height}"
alt="{alt_text}"
{class_attr}
>"#
);
@ -307,7 +315,14 @@ fn test_generate_picture_markup() {
</picture>"#,
};
assert_eq!(
generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
generate_picture_markup(
orig_img_path,
width,
height,
"Testing image alt",
None,
false
)
.expect("picture markup has to be generated"),
result
);

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

@ -125,8 +125,14 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
);
// Place image into the content with scaled reso to a boundary
let picture_markup =
generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
let picture_markup = generate_picture_markup(
&dest_url,
max_width,
max_height,
&title,
None,
generate_images,
)
.unwrap_or(formatdoc!(
r#"
<img

4
axum_server/styles/input.css
View File

@ -76,10 +76,6 @@ strong {
@apply font-medium;
}
img[height] {
height: revert-layer;
}
.article-body {
h1 {
@apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;

124
axum_server/styles/output.css
View File

@ -654,6 +654,18 @@ video {
grid-row: span 3 / span 3;
}
.float-start {
float: inline-start;
}
.clear-left {
clear: left;
}
.clear-both {
clear: both;
}
.m-0 {
margin: 0px;
}
@ -710,11 +722,6 @@ video {
margin-bottom: 1.25rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -739,6 +746,30 @@ video {
margin-top: 0.75rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.block {
display: block;
}
@ -787,6 +818,18 @@ video {
height: 240px;
}
.h-auto {
height: auto;
}
.h-\[236px\] {
height: 236px;
}
.max-h-\[236px\] {
max-height: 236px;
}
.min-h-full {
min-height: 100%;
}
@ -807,6 +850,11 @@ video {
width: 180px;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.max-w-\[32rem\] {
max-width: 32rem;
}
@ -819,22 +867,6 @@ video {
max-width: 64rem;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-96 {
max-width: 24rem;
}
.max-w-\[30rem\] {
max-width: 30rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-xl {
max-width: 36rem;
}
@ -1161,10 +1193,6 @@ strong {
font-weight: 500;
}
img[height] {
height: revert-layer;
}
.article-body {
h1 {
margin-left: auto;
@ -1808,14 +1836,49 @@ article a:visited {
}
@media (min-width: 640px) {
.sm\:float-none {
float: none;
}
.sm\:clear-none {
clear: none;
}
.sm\:my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.sm\:mx-auto {
margin-left: auto;
margin-right: auto;
.sm\:ml-0 {
margin-left: 0px;
}
.sm\:mb-0 {
margin-bottom: 0px;
}
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:grid {
display: grid;
}
.sm\:grid-flow-col {
grid-auto-flow: column;
}
.sm\:grid-cols-\[max-content_1fr\] {
grid-template-columns: max-content 1fr;
}
.sm\:grid-rows-\[max-content_1fr_max-content\] {
grid-template-rows: max-content 1fr max-content;
}
.sm\:gap-4 {
gap: 1rem;
}
.sm\:py-4 {
@ -1830,11 +1893,6 @@ article a:visited {
margin-bottom: 2rem;
}
.md\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.md\:grid {
display: grid;
}

8
axum_server/templates/components/blog_post_preview.html
View File

@ -1,8 +1,8 @@
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
<aside class="row-span-3 self-center">
<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
{% match post.metadata.thumbnail %}
{% when Some with (orig_path) %}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
{% when None %}
<div>
{% include "components/blog_post_default_thumbnail.html" %}
@ -15,7 +15,7 @@
</h3>
</header>
<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
<footer class="text-sm md:text-base lg:text-lg">
<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
<ul class="inline-block">
{% for tag in post.metadata.tags %}
<li class="inline-block">

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

@ -18,7 +18,7 @@
{% match project.metadata.cover_image %}
{% when Some with (source) %}
{% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
{% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
<figure class="mx-4 my-2 flex justify-center">
{% match project.metadata.link %}
{% when Some with (href) %}

8
axum_server/templates/components/social_card.html
View File

@ -1,15 +1,15 @@
{% macro social_card_start(svg, heading) %}
{% macro social_card_start(svg, heading, img) %}
<section class="border rounded-md bg-pink-200 m-4 p-4">
<section class="border rounded-md bg-pink-200 m-4 p-4 w-fit">
<header class="flex text-center justify-center items-center gap-2 mb-2">
<svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
</svg>
<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
</header>
{% let alt_text = format!("{svg} thumbnail") %}
{% endmacro %}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 420, 200, alt_text, Some("h-auto"), true).unwrap_or("thumbnail not found".to_string())|safe }}
{% macro social_card_end() %}
</section>
{% endmacro %}

52
axum_server/templates/sections/social.html
View File

@ -1,52 +1,12 @@
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
<!-- <script type="text/javascript"> -->
<!-- var options = { -->
<!-- width: "100%", -->
<!-- height: "100%", -->
<!-- channel: "michalvankodev", -->
<!-- parent: ["localhost"] -->
<!-- }; -->
<!-- var player = new Twitch.Player("twitch-player", options); -->
<!-- player.setVolume(0.5); -->
</script>
{% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
<!-- STYLES needed to overwrite tiktok embed css -->
<!-- <blockquote -->
<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
<!-- cite="https://www.tiktok.com/@michalvankodev" -->
<!-- data-unique-id="michalvankodev" -->
<!-- data-embed-from="embed_page" -->
<!-- data-embed-type="creator" -->
<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
<!-- > -->
<!-- <section> -->
<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
<!-- </section> -->
<!-- </blockquote> -->
<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
{% call sc::social_card_end() %}
<section class="flex flex-col items-center">
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/instagram_plain.png") %}
{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
<!-- TODO create our own youtube widget which will populate this window on build -->
<!-- <iframe -->
<!-- class="h-64 aspect-video" -->
<!-- id="ytplayer" -->
<!-- type="text/html" -->
<!-- width="100%" -->
<!-- height="100%" -->
<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
<!-- frameborder="0" -->
<!-- allowfullscreen -->
<!-- ></iframe> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/instagram_plain.png") %}
{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>", "images/social/instagram_plain.png") %}
{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png") %}
</section>

BIN
static/images/social/instagram_plain.png (Stored with Git LFS) Normal file
View File

Binary file not shown.