Merge branch 'main' into renovate/pulldown-cmark-0.x
This commit is contained in:
commit
921b2a493f
76
_posts/blog/2024-10-26-this-site-has-been-rewritten-again.md
Normal file
76
_posts/blog/2024-10-26-this-site-has-been-rewritten-again.md
Normal file
@ -0,0 +1,76 @@
|
||||
---
|
||||
title: This site has been rewritten again
|
||||
segments:
|
||||
- blog
|
||||
- featured
|
||||
published: true
|
||||
date: 2024-11-05T11:26:00.000Z
|
||||
thumbnail: /images/uploads/m-logo.svg
|
||||
tags:
|
||||
- News
|
||||
- Development
|
||||
- Rust
|
||||
notes: Bu
|
||||
---
|
||||
Hey world,
|
||||
|
||||
After a few months of work, I can finally present to you a new style for this site. The style isn't the only thing that changed.
|
||||
I've **completely rewritten** how this site is produced.
|
||||
|
||||
## Motivation
|
||||
|
||||
With the front-end tech world spinning too fast I've noticed this cool little library called *[HTMX](https://htmx.org/)* that takes front-end development back 10 years and provides a completely different look at how web development could've been done.
|
||||
I've also done some experiments with [Qwik](https://qwik.dev/) before, but I'm glad that I've abandoned this route as I would like to write less and less *TypeScript* `||` *Javascript* in the future.
|
||||
After doing last year's [Advent of Code](https://adventofcode.com/) in *OCaml* I've figured that I'd like to use tools that I think make me productive and also provide me help on the path of producing the most safe, predictable and performant code.
|
||||
That's the reason **I've chosen *Rust*** for this site and most of my side projects in the last couple of years.
|
||||
|
||||
## What has changed
|
||||
|
||||
### Tech stack
|
||||
|
||||
I've mentioned *HTMX*, but it only inspired me and I took it a few steps back and I haven't opted for any *JavaScript* included by default. You can find some *JavaScript* on this site but it is only inlined without any build step. However, there still has to be a build step. Instead of setting up *[Vite](https://vite.dev/)* for 5th time. I opted for something classic but still new. I've just found the [just](https://github.com/casey/just) command runner. It is very similar to how many *Makefiles* look, but the API is modern and **written in Rust BTW**. So if any developer wants to look at what commands are being used during the development or deployment, they are all located in [`.justfile`](https://github.com/michalvankodev/michalvankodev-site/blob/main/justfile). All commands are just `bash` commands and some `bash` scripts with few instructions for `just` to combine commands by their dependencies.
|
||||
|
||||
### Templates
|
||||
|
||||
During development, the site is being hosted with [axum Rust web framework](https://github.com/tokio-rs/axum). I want to write my templates in HTML so they can be as easily reused in any other web project with any tech stack. For Rust, there is a **type-safe** Jinja like template parser [Askama](https://github.com/djc/askama) and even though I'm not very confident whether I would use it again, I can still easily migrate to any other template parser there is.
|
||||
|
||||
### Styling
|
||||
|
||||
I've completely redesigned the site. Dodging *TypeScript-based* solutions for <abbr title="Cascade style sheets">CSS</abbr>. Opting for [tailwind](https://tailwindcss.com/) running *just* in the background. The experience with *tailwind* is something that I've never felt previously with any other <abbr title="Cascade style sheets">CSS</abbr> framework before. I'm satisfied with it although it has some downsides, **the productivity hasn't been matched**.
|
||||
|
||||
## What stayed the same
|
||||
|
||||
### All the content
|
||||
|
||||
I haven't even moved the files to a different folder. I've just slightly adjusted the models in the [DecapCMS](https://decapcms.org/) config for [/showcase](/showcase) page. DecapCMS is pretty much just the same Netlify CMS that it has been before the rebranding.
|
||||
I'd like to recommend it as *THE CMS*, but I can't. I like the way how the content is managed, I also like *git-based* workflow for managing content. However, there are many struggles to set it up for use with clients that are not programmers. With more changes to the models you also start to **miss the capability of running migrations** on all files/records. Everyone would be better off just hosting *[Strapi](https://strapi.io/)*. The ecosystem has started to get healthy. Setting up a custom media library is also a thing that has to be considered.
|
||||
|
||||
### Media library hosting
|
||||
|
||||
[Netlify has deprecated](https://answers.netlify.com/t/large-media-feature-deprecated-but-not-removed/100804) its [Large Media](https://docs.netlify.com/git/large-media/setup/) service. I don't mind tracking media with `git` LFS plugin. What I do mind is where I store these assets. \[Github's] free quota is pretty low considering sharing photo galleries. For now, I've moved all assets on my *"powered by"* [selfhosted](https://awesome-selfhosted.net/index.html) server, running my own [Gitea](https://gitea.katelyn.michalvanko.dev/) instance.
|
||||
|
||||
### Static site generation
|
||||
|
||||
The site is still distributed as <abbr title="Static site generation">SSG</abbr> HTML files. You could argue that the logic for generating every page is just like any other <abbr title="Server Side Rendered">SSR</abbr> website.
|
||||
|
||||
For <abbr title="Server side generation">SSG</abbr> I've come up with a `wget` command that downloads all the necessary dependencies for all pages. It is capable of recursively crawling the whole site following all links. It was pretty hard to come up with the correct set of parameters for the `wget` command to be able to produce the same routing capabilities as with the `SSR` running server used during the development. Here I can **praise all the generative AI tools**. You could find multiple prompts asking for an explanation of all the options for `wget` and how I should use them for the desired output in my history.
|
||||
|
||||
The final `wget` command for generating this site looks like this:
|
||||
|
||||
```sh
|
||||
wget --no-convert-links -r -p -E -P dist --no-host-directories localhost:3080
|
||||
```
|
||||
|
||||
You can also [prompt for the explanation](https://lmgpthat.com/render.html?search=wget%20--no-convert-links%20-r%20-p%20-E%20-P%20dist%20--no-host-directories%20localhost%3A3080).
|
||||
|
||||
## Aim for future
|
||||
|
||||
I still have to **write articles**.
|
||||
Many many articles that I haven't yet written down. I did some but haven't published them, and probably I never will. But so many things happened in the meantime. How do you call an update that is old? *"Outofdate"*?
|
||||
It would also be handy to have some article recommendations when you finish reading this article, right?
|
||||
|
||||
I am still gathering feedback for the new design. I am considering many of the suggestions that I get. Our [Discord server](https://discord.gg/2cGg7kwZEh) is getting warm.
|
||||
|
||||
I was also thinking about what would I use for CMS and having a *[SQLite](https://www.sqlite.org/docs.html)* database saved in the repository, it would still count as **git-based management**.
|
||||
|
||||
*'Let your ambition carry you!"*
|
||||
22
_posts/blog/2024-11-06-renaissance-of-hypermedia-systems.md
Normal file
22
_posts/blog/2024-11-06-renaissance-of-hypermedia-systems.md
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Renaissance of Hypermedia Systems
|
||||
segments:
|
||||
- broadcasts
|
||||
- featured
|
||||
published: true
|
||||
date: 2024-11-06T16:20:00.000Z
|
||||
thumbnail: /images/uploads/screenshot-from-2024-08-06-19-01-03.png
|
||||
tags:
|
||||
- Development
|
||||
- HTMX
|
||||
- Hyperview
|
||||
---
|
||||
My goal for this year was to make a presentation. I've told this to my friend Lukáš Orgován and he offered me an opportunity to come present at their workplace with him. This was a great event and I'm so glad I could attend.
|
||||
|
||||
I've chosen a topic very close to my heart and wanted to show a different approach to building mobile and web applications.
|
||||
|
||||
The presentation is in Slovak with English subtitles.
|
||||
|
||||
<div class="video-embed">
|
||||
<iframe height="100%" width="100%" src="https://www.youtube.com/embed/hn7rR9wIfIY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
1
justfile
1
justfile
@ -53,6 +53,7 @@ clean:
|
||||
ssg:
|
||||
- wget --no-convert-links -r -p -E -P dist --no-host-directories 127.0.0.1:{{port}}
|
||||
- wget --no-convert-links --content-on-error -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/not-found
|
||||
- wget --no-convert-links -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/showcase/m-logo-svg
|
||||
find generated_images/ -name "*_og*" -exec cp --parents {} dist/ \;
|
||||
|
||||
# Preview server
|
||||
|
||||
@ -58,3 +58,4 @@ async fn main() {
|
||||
//
|
||||
// TODO view page transitions
|
||||
// TODO cookbook
|
||||
// TODO remove m-logo-svg from justfile and mention it in some article!!! WRITE SOME NEW ARTICLES
|
||||
|
||||
10
src/pages/animated_logo.rs
Normal file
10
src/pages/animated_logo.rs
Normal file
@ -0,0 +1,10 @@
|
||||
use askama::Template;
|
||||
use axum::http::StatusCode;
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "assets/animated_logo.html")]
|
||||
pub struct AnimatedLogoTemplate {}
|
||||
|
||||
pub async fn render_animated_logo() -> Result<AnimatedLogoTemplate, StatusCode> {
|
||||
Ok(AnimatedLogoTemplate {})
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
pub mod admin;
|
||||
pub mod animated_logo;
|
||||
pub mod blog_post_list;
|
||||
pub mod blog_post_page;
|
||||
pub mod broadcast_list;
|
||||
|
||||
@ -23,6 +23,11 @@ pub fn generate_image_with_src(
|
||||
let resolutions = [(width, height, 1.)];
|
||||
|
||||
let exported_formats = get_export_formats(orig_img_path);
|
||||
|
||||
if exported_formats.is_empty() {
|
||||
return Ok(orig_img_path.to_string());
|
||||
}
|
||||
|
||||
let exported_format = *exported_formats.first().unwrap();
|
||||
|
||||
let path_to_generated_arc = Arc::new(path_to_generated);
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
use crate::{
|
||||
feed::render_rss_feed,
|
||||
pages::{
|
||||
admin::render_admin, blog_post_list::render_blog_post_list,
|
||||
blog_post_page::render_blog_post, broadcast_list::render_broadcast_post_list,
|
||||
contact::render_contact, index::render_index, not_found::render_not_found,
|
||||
portfolio::render_portfolio, project_list::render_projects_list,
|
||||
showcase::egg_fetcher::render_egg_fetcher,
|
||||
admin::render_admin, animated_logo::render_animated_logo,
|
||||
blog_post_list::render_blog_post_list, blog_post_page::render_blog_post,
|
||||
broadcast_list::render_broadcast_post_list, contact::render_contact, index::render_index,
|
||||
not_found::render_not_found, portfolio::render_portfolio,
|
||||
project_list::render_projects_list, showcase::egg_fetcher::render_egg_fetcher,
|
||||
},
|
||||
};
|
||||
use axum::{extract::MatchedPath, http::Request, routing::get, Router};
|
||||
@ -23,6 +23,7 @@ pub fn get_router() -> Router {
|
||||
.route("/broadcasts/:post_id", get(render_blog_post))
|
||||
.route("/contact", get(render_contact))
|
||||
.route("/showcase", get(render_projects_list))
|
||||
.route("/showcase/m-logo-svg", get(render_animated_logo))
|
||||
.route("/showcase/:project_slug", get(render_egg_fetcher))
|
||||
.route("/portfolio", get(render_portfolio))
|
||||
.route("/admin", get(render_admin))
|
||||
|
||||
@ -620,6 +620,10 @@ video {
|
||||
size-adjust: 92%;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
@ -632,10 +636,6 @@ video {
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
@ -644,6 +644,10 @@ video {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 2.5rem;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
@ -656,10 +660,6 @@ video {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 2.5rem;
|
||||
}
|
||||
|
||||
.mx-0\.5 {
|
||||
margin-left: 0.125rem;
|
||||
margin-right: 0.125rem;
|
||||
@ -796,18 +796,14 @@ video {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.h-\[256px\] {
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
.h-\[320px\] {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.max-h-\[236px\] {
|
||||
max-height: 236px;
|
||||
}
|
||||
@ -832,10 +828,6 @@ video {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.w-\[256px\] {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.w-\[320px\] {
|
||||
width: 320px;
|
||||
}
|
||||
@ -882,22 +874,10 @@ video {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.auto-cols-auto {
|
||||
grid-auto-columns: auto;
|
||||
}
|
||||
|
||||
.grid-flow-row {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-\[1fr_auto\] {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
@ -2068,10 +2048,6 @@ article a:visited {
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
||||
.sm\:grid-cols-\[1fr_auto\] {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.sm\:grid-rows-\[max-content_1fr_max-content\] {
|
||||
grid-template-rows: max-content 1fr max-content;
|
||||
}
|
||||
|
||||
69
templates/assets/animated_logo.html
Normal file
69
templates/assets/animated_logo.html
Normal file
@ -0,0 +1,69 @@
|
||||
{% include "icons/m-logo-animated.svg" %}
|
||||
<script src="/resources/anime.min.js"></script>
|
||||
<script>
|
||||
var svg = document.getElementById("m-logo")
|
||||
svg.setAttribute("visibility", "visible");
|
||||
var borderTimeline = anime.timeline({
|
||||
duration: 2000,
|
||||
easing: 'easeInOutSine',
|
||||
})
|
||||
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #border-start',
|
||||
strokeDashoffset: [anime.setDashoffset, -310],
|
||||
duration: 2000,
|
||||
easing: 'easeOutExpo',
|
||||
begin: (animation) => {
|
||||
const target = animation.animatables[0].target
|
||||
target.setAttribute("visibility", "visible")
|
||||
}
|
||||
}, 0)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter-start',
|
||||
strokeDashoffset: [anime.setDashoffset, -447.4],
|
||||
easing: 'easeOutExpo',
|
||||
duration: 2000,
|
||||
begin: (animation) => {
|
||||
const target = animation.animatables[0].target
|
||||
target.setAttribute("visibility", "visible")
|
||||
}
|
||||
}, 0)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #border',
|
||||
strokeDashoffset: [anime.setDashoffset, 0],
|
||||
easing: 'easeInOutSine',
|
||||
duration: 2000,
|
||||
complete: (animation) => {
|
||||
//debugger;
|
||||
const target = animation.animatables[0].target
|
||||
target.setAttribute("fill", "url('#bg-gradient')")
|
||||
var bgAnimationTimeline = anime.timeline()
|
||||
bgAnimationTimeline.add({
|
||||
targets: '#m-logo #bg-gradient #bg-stop',
|
||||
offset: "0%",
|
||||
stopColor: "rgba(216, 246, 255, 1)",
|
||||
easing: 'easeInQuint',
|
||||
duration: 123,
|
||||
})
|
||||
bgAnimationTimeline.add({
|
||||
targets: '#m-logo #bg-gradient #bg-stop',
|
||||
offset: "100%",
|
||||
easing: 'easeOutExpo',
|
||||
duration: 333,
|
||||
})
|
||||
}
|
||||
}, 160)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter',
|
||||
strokeDashoffset: [anime.setDashoffset, 0],
|
||||
easing: 'easeInOutSine',
|
||||
duration: 1800,
|
||||
}, 160)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter',
|
||||
easing: 'easeInOutSine',
|
||||
duration: 333,
|
||||
fill: "#32a8eb",
|
||||
strokeWidth: "0",
|
||||
})
|
||||
</script>
|
||||
@ -11,6 +11,7 @@
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
visibility="hidden"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
@ -57,11 +58,13 @@
|
||||
stroke="#32a8eb"
|
||||
stroke-width="8"
|
||||
stroke-linejoin="round"
|
||||
visibility="hidden"
|
||||
sodipodi:nodetypes="csc" />
|
||||
<path
|
||||
d="M 507.76664,507.59022 C 453.73997,452.69049 121.4145,522.45057 289.19959,354.47858 c 10.11721,-10.12848 19.63171,-17.88383 30.25282,-22.95349 6.77433,-3.23351 15.74106,-4.08485 28.19639,-5.03375"
|
||||
id="m-letter-start"
|
||||
stroke="#32a8eb"
|
||||
stroke-width="2"
|
||||
visibility="hidden"
|
||||
sodipodi:nodetypes="cssc" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
@ -44,6 +44,8 @@
|
||||
{% include "icons/m-logo-animated.svg" %}
|
||||
<script src="/resources/anime.min.js"></script>
|
||||
<script>
|
||||
var svg = document.getElementById("m-logo")
|
||||
svg.setAttribute("visibility", "visible");
|
||||
var borderTimeline = anime.timeline({
|
||||
duration: 2000,
|
||||
easing: 'easeInOutSine',
|
||||
@ -53,13 +55,21 @@
|
||||
targets: '#m-logo #border-start',
|
||||
strokeDashoffset: [anime.setDashoffset, -310],
|
||||
duration: 2000,
|
||||
easing: 'easeOutExpo'
|
||||
easing: 'easeOutExpo',
|
||||
begin: (animation) => {
|
||||
const target = animation.animatables[0].target
|
||||
target.setAttribute("visibility", "visible")
|
||||
}
|
||||
}, 0)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter-start',
|
||||
strokeDashoffset: [anime.setDashoffset, -447.4],
|
||||
easing: 'easeOutExpo',
|
||||
duration: 2000,
|
||||
begin: (animation) => {
|
||||
const target = animation.animatables[0].target
|
||||
target.setAttribute("visibility", "visible")
|
||||
}
|
||||
}, 0)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #border',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user