mooooar moooar pretty fixes
Some checks failed
test / cargo test (push) Failing after 1m4s

This commit is contained in:
Michal Vanko 2024-09-20 11:51:29 +02:00
parent f3c4df4458
commit 377aee315e
12 changed files with 84 additions and 71 deletions

View File

@ -35,6 +35,7 @@ async fn main() {
.nest_service("/fonts", ServeDir::new("../static/fonts")) .nest_service("/fonts", ServeDir::new("../static/fonts"))
.nest_service("/generated_images", ServeDir::new("generated_images")) .nest_service("/generated_images", ServeDir::new("generated_images"))
.nest_service("/svg", ServeDir::new("../static/svg")) .nest_service("/svg", ServeDir::new("../static/svg"))
// TODO manifest logos have bad link, #directory-swap
.nest_service( .nest_service(
"/config.yml", "/config.yml",
ServeDir::new("../static/resources/config.yml"), ServeDir::new("../static/resources/config.yml"),
@ -53,11 +54,10 @@ async fn main() {
// TODO Socials // TODO Socials
// - fotos // - fotos
// TODO Colors
// Text slate, and gray should be somehow customised
// TODO print css and other 404 css linked in base.html
// TODO go live pipeline // TODO go live pipeline
// TODO after release // TODO after release
// Remove old web completely
// Restructure repository
// - contact // - contact
// - projects page // - projects page
// - linktree page // - linktree page

View File

@ -22,13 +22,24 @@ pub fn generate_picture_markup(
generate_image: bool, generate_image: bool,
) -> Result<String, anyhow::Error> { ) -> Result<String, anyhow::Error> {
let exported_formats = get_export_formats(orig_img_path); let exported_formats = get_export_formats(orig_img_path);
if exported_formats.is_empty() {
return Ok(formatdoc!(
r#"<img
src="{orig_img_path}"
width="{width}"
height="{height}"
alt="{alt_text}"
>"#
));
}
let path_to_generated = get_generated_file_name(orig_img_path); let path_to_generated = get_generated_file_name(orig_img_path);
// TODO This should get removed when we move the project structure #move // TODO This should get removed when we move the project structure #directory-swap
let dev_only_img_path = let disk_img_path =
Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path)); Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
let orig_img_dimensions = image_dimensions(&dev_only_img_path)?; let orig_img_dimensions = image_dimensions(&disk_img_path)?;
let resolutions = get_resolutions(orig_img_dimensions, width, height); let resolutions = get_resolutions(orig_img_dimensions, width, height);
let path_to_generated_arc = Arc::new(path_to_generated); let path_to_generated_arc = Arc::new(path_to_generated);
@ -40,8 +51,8 @@ pub fn generate_picture_markup(
if generate_image { if generate_image {
rayon::spawn(move || { rayon::spawn(move || {
let orig_img = ImageReader::open(&dev_only_img_path) let orig_img = ImageReader::open(&disk_img_path)
.with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path)) .with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
.unwrap() .unwrap()
.decode() .decode()
.unwrap(); .unwrap();

View File

@ -80,6 +80,10 @@ strong {
@apply font-medium; @apply font-medium;
} }
img[height] {
height: revert-layer;
}
.article-body { .article-body {
h1 { 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; @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;
@ -114,7 +118,7 @@ strong {
} }
table { table {
@apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base lg:text-xl lg:my-8; @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
} }
thead { thead {

View File

@ -807,10 +807,6 @@ video {
width: 180px; width: 180px;
} }
.w-full {
width: 100%;
}
.max-w-maxindex { .max-w-maxindex {
max-width: 100rem; max-width: 100rem;
} }
@ -828,6 +824,11 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.break-inside-avoid {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.grid-flow-col { .grid-flow-col {
grid-auto-flow: column; grid-auto-flow: column;
} }
@ -914,6 +915,11 @@ video {
border-color: rgb(11 39 70 / var(--tw-border-opacity)); border-color: rgb(11 39 70 / var(--tw-border-opacity));
} }
.border-slate-300 {
--tw-border-opacity: 1;
border-color: rgb(203 213 225 / var(--tw-border-opacity));
}
.bg-blue-100 { .bg-blue-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(225 239 253 / var(--tw-bg-opacity)); background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@ -938,11 +944,6 @@ video {
fill: #0b2746; fill: #0b2746;
} }
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.p-0 { .p-0 {
padding: 0px; padding: 0px;
} }
@ -1083,21 +1084,16 @@ video {
color: rgb(11 39 70 / var(--tw-text-opacity)); color: rgb(11 39 70 / var(--tw-text-opacity));
} }
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-pink-950 { .text-pink-950 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(80 2 56 / var(--tw-text-opacity)); color: rgb(80 2 56 / var(--tw-text-opacity));
} }
.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.text-slate-800 { .text-slate-800 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity)); color: rgb(30 41 59 / var(--tw-text-opacity));
@ -1107,11 +1103,6 @@ video {
text-decoration-line: none; text-decoration-line: none;
} }
.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);
}
.transition-colors { .transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1140,6 +1131,10 @@ strong {
font-weight: 500; font-weight: 500;
} }
img[height] {
height: revert-layer;
}
.article-body { .article-body {
h1 { h1 {
margin-left: auto; margin-left: auto;
@ -1505,7 +1500,7 @@ strong {
} }
table { table {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity)); border-color: rgb(226 232 240 / var(--tw-border-opacity));
} }
table { table {
font-size: 0.875rem; font-size: 0.875rem;
@ -1927,3 +1922,9 @@ strong {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
} }
} }
@media print {
.print\:hidden {
display: none;
}
}

View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %} {{title}} @michalvankodev {% endblock %}</title> <title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" /> <meta name="theme-color" content="#333333" />
@ -13,16 +13,13 @@
rel="alternate" rel="alternate"
type="application/rss+xml" type="application/rss+xml"
title="RSS feed for latest posts" title="RSS feed for latest posts"
href="https://michalvanko.dev/feed.xml" href="/feed.xml"
/> />
<!-- Tailwind output file --> <!-- Tailwind output file -->
<link rel="stylesheet" href="/styles/output.css" /> <link rel="stylesheet" href="/styles/output.css" />
<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/fonts.css" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/prism.css" />
<link rel="icon" type="image/svg+xml" href="/m-logo.svg" /> <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
<link rel="icon" type="image/png" href="/m-logo-192.png" /> <link rel="icon" type="image/png" href="/m-logo-192.png" />

View File

@ -8,7 +8,7 @@
<h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1> <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
<aside class="flex justify-between flex-row"> <aside class="flex justify-between flex-row">
{% include "post_tag_list.html" %} {% include "post_tag_list.html" %}
<section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg"> <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
<span>Published on</span> <span>Published on</span>
<time datetime="{date}"> {{date|pretty_date}} </time> <time datetime="{date}"> {{date|pretty_date}} </time>
</section> </section>

View File

@ -25,13 +25,13 @@
</ul> </ul>
</section> </section>
<hr class="border-blue-950 m-5 md:my-8"> <hr class="border-slate-300 m-5 md:my-8">
<ul class="mx-5"> <ul class="mx-5">
{% for post in posts %} {% for post in posts %}
<li> <li>
{% include "components/blog_post_preview.html" %} {% include "components/blog_post_preview.html" %}
<hr class="border-blue-950 my-5 md:my-8"> <hr class="border-slate-300 my-5 md:my-8">
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

View File

@ -1,4 +1,4 @@
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-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"> <aside class="row-span-3 self-center">
{% match post.metadata.thumbnail %} {% match post.metadata.thumbnail %}
{% when Some with (orig_path) %} {% when Some with (orig_path) %}
@ -14,7 +14,7 @@
<a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a> <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
</h3> </h3>
</header> </header>
<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section> <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">
<ul class="inline-block"> <ul class="inline-block">
{% for tag in post.metadata.tags %} {% for tag in post.metadata.tags %}

View File

@ -1,4 +1,4 @@
<article class="border rounded-md bg-white m-4 p-4"> <article class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
<header class="px-4 mb-3"> <header class="px-4 mb-3">
<h2 class="text-xl font-semibold text-blue-900 md:text-2xl"> <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
{% match project.metadata.link %} {% match project.metadata.link %}
@ -18,16 +18,17 @@
{% match project.metadata.cover_image %} {% match project.metadata.cover_image %}
{% when Some with (source) %} {% when Some with (source) %}
<figure class="mx-4 my-2"> {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
<figure class="mx-4 my-2 flex justify-center">
{% match project.metadata.link %} {% match project.metadata.link %}
{% when Some with (href) %} {% when Some with (href) %}
<a href="{{href}}"> <a href="{{href}}">
<img src="{{source}}" class="object-contain w-full aspect-video"/> {{picture|safe}}
</a> </a>
{% when None %} {% when None %}
<img src="{{source}}" /> {{picture|safe}}
{% endmatch %} {% endmatch %}
<!-- TODO <figure> --> <!-- TODO <figure> generate_image -->
</figure> </figure>
{% when None %} {% when None %}
{% endmatch %} {% endmatch %}

View File

@ -10,7 +10,7 @@
<header> <header>
<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3> <h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
</header> </header>
<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p> <p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
</section> </section>
</section> </section>

View File

@ -7,23 +7,22 @@
{% block content %} {% block content %}
<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto"> <section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
<section id="about-me"> <section id="about-me">
<header class="index-header hidden"> <!-- <header class="index-header hidden"> -->
<figure class="profile-pic"> <!-- <figure class="profile-pic"> -->
<picture> <!-- <picture> -->
<img <!-- <img -->
alt="Portrait" <!-- alt="Portrait" -->
{# TODO generate `srcset` for optimal image #} <!-- {# TODO Take a new photo #} -->
{# TODO Take a new photo #} <!-- src="/images/profile-portugal-landscape.jpg" -->
src="/images/profile-portugal-landscape.jpg" <!-- /> -->
/> <!-- </picture> -->
</picture> <!-- </figure> -->
</figure>
<p class="motto"> <!-- <p class="motto"> -->
<cite>“Let your ambition carry you.”</cite> <!-- <cite>“Let your ambition carry you.”</cite> -->
<span class="cite-owner">- La Flame</span> <!-- <span class="cite-owner">- La Flame</span> -->
</p> <!-- </p> -->
</header> <!-- </header> -->
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2> <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
@ -52,13 +51,13 @@
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
<hr class="border-blue-950 m-5"> <hr class="border-slate-300 m-5">
<ul class="mx-5"> <ul class="mx-5">
{% for post in featured_blog_posts %} {% for post in featured_blog_posts %}
<li> <li>
{% include "components/blog_post_preview.html" %} {% include "components/blog_post_preview.html" %}
<hr class="border-blue-950 my-5 md:my-8"> <hr class="border-slate-300 my-5 md:my-8">
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -68,7 +67,7 @@
{% include "sections/social.html" %} {% include "sections/social.html" %}
</section> </section>
<hr class="border-blue-950 m-5 lg:hidden"> <hr class="border-slate-300 m-5 lg:hidden">
<section id="showcase" class="col-span-2"> <section id="showcase" class="col-span-2">
{% include "sections/showcase.html" %} {% include "sections/showcase.html" %}

View File

@ -3,7 +3,7 @@
{% match header_props.back_link %} {% match header_props.back_link %}
{% when Some with (link) %} {% when Some with (link) %}
<a <a
class="px-3 py-2 text-lg font-medium" class="px-3 py-2 text-lg font-medium print:hidden"
href="{{link.href}}" href="{{link.href}}"
> >
{{link.label}} {{link.label}}
@ -16,5 +16,5 @@
</a> </a>
</aside> </aside>
</nav> </nav>
<hr class="border-blue-950 mx-5"> <hr class="border-slate-300 mx-5">
</header> </header>