feat: Website 2.0 post
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
6160c8d80b
commit
4d69028485
|
|
@ -1,8 +1,7 @@
|
|||
+++
|
||||
title = "Website 2.0"
|
||||
description = "The long-awaited website rewrite using the new static site generator - Zola."
|
||||
date = 2023-11-09
|
||||
draft = true
|
||||
date = 2023-12-14
|
||||
[taxonomies]
|
||||
tags = ["Devlog", "Website", "Duckquill"]
|
||||
[extra]
|
||||
|
|
@ -11,37 +10,37 @@ toc = true
|
|||
|
||||
## Backstory
|
||||
|
||||
It's been around 3 months since the last post, all this time I was procrastinating, doing some side-projects, learning Blender, and... rewriting my website from scratch!
|
||||
It's been about 4 months since the last post, all this time I've been procrastinating, doing some side projects, learning Blender, and... rewriting my website from scratch!
|
||||
|
||||
## The Rewrite
|
||||
|
||||
The first rewrite attempt happend pretty much immediately after publishing the [previous devlog](@/blog/site-and-blog-devlog/index.md), I thought using Hugo was a good idea, but I was horribly wrong. I lost my sanity on the day 3, while having no progress made. I asked some people about using Hugo and their reaction were something like "Oh God, use anything but Hugo, you will regret using it", and it was true.
|
||||
The first rewrite attempt happened pretty much right after I published the [previous devlog](@/blog/site-and-blog-devlog/index.md), I thought using Hugo was a good idea, but I was horribly wrong. I lost my mind on the third day without making any progress. I asked some people about using Hugo and their reaction was something like "Oh God, use anything but Hugo, you will regret using it", and it was true.
|
||||
|
||||
I then tried Zola which at first seemed like a worse Jekyll, but actually it were Jekyll 2.0.
|
||||
I then tried Zola, which at first seemed like a worse Jekyll with some features missing, but after trying it out it was actually Jekyll 2.0.
|
||||
|
||||
B-but why move from Jekyll in the first place?
|
||||
|
||||
Well... there were a few reasons for this, like speed, ruby-dependency hell, broken internal linking and the need of third-party plugins for basic functionality, but the last straw was...
|
||||
Well... there were a few reasons for this, like speed, Ruby dependency hell, broken internal linking and the need for third-party plugins for basic functionality, but the last straw was...
|
||||
|
||||
### Jekyll Issues
|
||||
|
||||
One of the most recent issues with Jekyll were Dart Sass support that wasn't working because of outdated dependencies in the official Jekyll Docker image. On the other hand Zola is modern, fast, has all the needed features, uses up-to-date Sass compiler, has a good support of creating and using themes (will get to that later) and uses 🦀 which is the best lang on the planet (/s, kinda).
|
||||
One of the recent issues with Jekyll was that Dart Sass support didn't work due to outdated dependencies in the official Jekyll Docker image. On the other hand, Zola is modern, fast, has all the features I need, uses the Dart Sass compiler, has good support for creating and using themes (more on that later), and uses 🦀, which is the best lang on the planet (/s, sort of).
|
||||
|
||||
### New Code Base
|
||||
### New Codebase
|
||||
|
||||
The other major change is that the "Home", "Design Showcase", and "Info" pages were moved away from using the separate repo and codebase to be part of the same website; it's confusing so here's a table of how it were:
|
||||
The other major change is that the "Home", "Design Showcase", and "Info" pages have been moved away from using the separate repo and codebase to being part of the same website; it's confusing, so here's a table of how it used to be:
|
||||
|
||||
| Page | Repo |
|
||||
|-------|---------------|
|
||||
| ----- | ------------- |
|
||||
| Home | `pages` |
|
||||
| Info | `pages` |
|
||||
| Works | `pages` |
|
||||
| Blog | `blog-source` |
|
||||
|
||||
Now everything is in the `website` repo, uses the same stylesheet and templates:
|
||||
Now everything is in the `website` repo, using the same stylesheet and templates:
|
||||
|
||||
| Page | Repo |
|
||||
|-------|-----------|
|
||||
| ----- | --------- |
|
||||
| Home | `website` |
|
||||
| Info | `website` |
|
||||
| Works | `website` |
|
||||
|
|
@ -49,29 +48,33 @@ Now everything is in the `website` repo, uses the same stylesheet and templates:
|
|||
|
||||
### Look and Feel
|
||||
|
||||
Almost every single style and template were redone, resulting in a much nicer look and feel, some notable ones are:
|
||||
Almost every single style and template has been reworked, resulting in a much nicer look and feel, some notable ones are:
|
||||
|
||||
- New floating navigation bar, with icons!
|
||||
- Brand new navigation bar!
|
||||
- Primary color is now used to tint the background (bye boring gray!)
|
||||
- CRT style is now used for ASCII, replacing the old "gradient from opaque to transparent"
|
||||
- Header 1 style is now different from other headers; it's big, **bold**, and has purple dot at the end
|
||||
- Code blocks now use Solarized syntax highlighting theme instead of GitHub one, it changes from light to dark variant depending on current color scheme
|
||||
- CRT style is now used for ASCII, replacing the old "opaque to transparent gradient".
|
||||
- Header 1 style is now different from other headers; it's big and **bold**
|
||||
- Quotations and horizontal rules now have slightly rounded corners
|
||||
- Code blocks now use Solarized syntax highlighting theme instead of GitHub's; it changes from light to dark variant depending on current color scheme
|
||||
- Source Code Pro font is now used for code blocks instead of system one
|
||||
- New, animated 404 image
|
||||
- Tags are now displayed alongside the date, both in the post list and in the post itself
|
||||
- Posts now can be filtered by a tag, so e.g you can only filter posts containing the `Devlog` tag
|
||||
- Tags are now displayed next to the date, both in the post list and in the post itself. Check out this neat effect on hover!
|
||||
- Posts can now can be filtered by a tag, e.g you can filter only posts containing the `Devlog` tag
|
||||
- New post navigation (previous/next post links at the end of the post)
|
||||
- And more! ([initial migration commit](https://git.exozy.me/daudix/website/commit/0323f9658345ec5f254e24b4385c31ebe9a69f15), ~2500 changes!)
|
||||
|
||||
### Reborn Duckquill
|
||||
|
||||
About Duckquill, it transformed from a Jekyll template to a proper Zola theme, what's good about themes is that you can easily update and non-destructively tweak them by overriding some configs and files.
|
||||
Now to the Duckquill, it's been transformed from a Jekyll template to a proper Zola theme, the good thing about themes is that you can easily update and non-destructively tweak them by overriding some configuration variables and files.
|
||||
|
||||
Duckquill powers this website and can be used by anyone, although I use some additional styles specific to this website.
|
||||
Duckquill powers this website, but can be used by anyone, although I use some additional styles unique to this website.
|
||||
|
||||
Duckquill is listed on [Zola themes page](https://www.getzola.org/themes/duckquill/), of which I'm quite proud of ^^
|
||||
It's listed on the [Zola themes page](https://www.getzola.org/themes/duckquill/), of which I'm quite proud of ^^
|
||||
|
||||
## Conclusion
|
||||
|
||||
It's been an interesting journey for sure; trying using Hugo, losing sanity, regretting life choices, learning new SSG, burning out, coming back, learning Sass, HTML and Tera (a bit like Liquid), Procrastinating, coming back, rewriting half of the styles, and finally submitting the theme to Zola themes website (not exactly in this order). All this, in my opinion, were worth it.
|
||||
It's been an interesting journey for sure; trying to use Hugo, losing my mind, regretting life choices, learning new SSG, burning out, coming back, learning Sass, HTML, and Tera (a bit like Liquid), procrastinating, coming back, rewriting half of the styles, and finally submitting the theme to the Zola themes website (not exactly in that order). All this, in my opinion, was worth it.
|
||||
|
||||
My plan now is to write a few shorter posts and not focus on the website much anymore, since it's a wormhole I can't leave.
|
||||
My plan now is to write a few posts and focus less on the website, since it's a wormhole I can't leave.
|
||||
|
||||
Shout out to [Hari Rana](https://tesk.page) for helping to improve the accessibility of the site by pointing out contrast issues, as well as some style change suggestions.
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
|||
:root {
|
||||
--bg-color: #{$bg-color-l};
|
||||
--crt-bg: #{$crt-bg};
|
||||
--glow: #{$glow};
|
||||
--nav-bg: #{$nav-bg-l};
|
||||
--primary-color-alpha: #{$primary-color-alpha};
|
||||
--primary-color: #{$primary-color};
|
||||
--glow: #{$glow};
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -71,27 +71,27 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
|||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--fg05);
|
||||
box-shadow: 0 0 0 8px var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
box-shadow: 0 0 0 8px var(--fg-muted-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
section#original-icons {
|
||||
background-color: rgba(98, 160, 234, 0.5);
|
||||
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
||||
background-image: radial-gradient(circle, var(--fg-muted-1) 1px, transparent 1px);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
section#redrawn-icons {
|
||||
background-color: rgba(87, 227, 137, 0.5);
|
||||
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
||||
background-image: radial-gradient(circle, var(--fg-muted-1) 1px, transparent 1px);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
section#wallpapers {
|
||||
background-color: rgba(255, 163, 72, 0.5);
|
||||
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
||||
background-image: radial-gradient(circle, var(--fg-muted-1) 1px, transparent 1px);
|
||||
background-size: 1rem 1rem;
|
||||
|
||||
img {
|
||||
|
|
|
|||
Loading…
Reference in a new issue