From 25a77a78981676ff8d0f11091821d34fc5602f0e Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Fri, 16 Aug 2024 18:32:59 -0300 Subject: [PATCH 01/16] vscode: Add tasks and taskrunnercodeplus extension recommendation Signed-off-by: Matheus Castello --- .vscode/extensions.json | 5 +++-- .vscode/tasks.json | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 .vscode/tasks.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json index e094a86..dcbb818 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ - "eliostruyf.vscode-front-matter" + "eliostruyf.vscode-front-matter", + "microhobby.taskrunnercodeplus" ] -} \ No newline at end of file +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..8b4a11d --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,32 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "start-hugo", + "command": "docker", + "type": "shell", + "args": [ + "run", + "--rm", + "-it", + "-v", + "${workspaceFolder}:/src", + "-p", + "1313:1313", + "klakegg/hugo:ext-alpine", + "server" + ], + "problemMatcher": [ + "$tsc" + ], + "presentation": { + "reveal": "always" + }, + "icon": { + "id": "run", + "color": "terminal.ansiBlue" + }, + "group": "none" + } + ] +} From 3d8b558f73159024524acca6d1fcad079c39c18a Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Fri, 16 Aug 2024 18:52:51 -0300 Subject: [PATCH 02/16] layout: Add profile image to article page This commit adds a profile image to the article page. The image is fetched from GitHub's API using the user ID provided in the front matter of the article. The image is displayed before the article date and author name. Signed-off-by: Matheus Castello --- layouts/_default/single.html | 6 +++++- static/css/main.css | 8 +++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 0ec44c3..03f905e 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,7 +2,11 @@

{{ .Title }}

-

{{ .Date.Format "January 02, 2006" }}
Written by {{ .Params.Author }}

+

+
+ {{ .Date.Format "January 02, 2006" }}
+ Written by {{ .Params.Author }} +

{{ .Content }}

SHARE

diff --git a/static/css/main.css b/static/css/main.css index b3812da..cb2dda0 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -336,6 +336,12 @@ footer { margin-top: 3rem; } +.profile-img { + width: 62px; + height: 62px; + border-radius: 50%; +} + @media only screen and (max-width: 600px) { .navbar-logo img { height: 50px; @@ -386,7 +392,7 @@ footer { #article-page { padding: 1rem; - + font-size: 16px; max-width: 100%; } From 98b117b4586005f790a4ac9b50c6cd243e250d28 Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Sat, 17 Aug 2024 14:41:22 -0300 Subject: [PATCH 03/16] layouts: add box shadow to nav and footer when the user scrolls Signed-off-by: Matheus Castello --- layouts/_default/baseof.html | 4 +++- layouts/_default/single.html | 4 ++++ layouts/partials/footer.html | 4 ++-- static/css/main.css | 24 +++++++++++++++++++++--- static/js/main.js | 18 ++++++++++++++++++ 5 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 static/js/main.js diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1760d7a..637a067 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -21,4 +21,6 @@ {{ partial "footer.html" . }} - \ No newline at end of file + + + diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 03f905e..9840237 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -38,4 +38,8 @@

{{ .Title }}

+ +
+
+
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 05d9fef..6f7b6da 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,3 @@ -
+
© Torizon {{ time.Now.Year }} -
\ No newline at end of file +
diff --git a/static/css/main.css b/static/css/main.css index cb2dda0..24bd577 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -8,10 +8,15 @@ body { font-family: 'Open Sans', sans-serif; } +header { + background-color: #00508d; +} + nav { font-family: 'Courier New', Courier, monospace; - background-color: #fff; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + background-color: #00508db6; + backdrop-filter: blur(2px); + transition: box-shadow 0.5s ease-in-out; position: fixed; top: 0; left: 0; @@ -19,6 +24,10 @@ nav { z-index: 99999; } +.nav-scrolled { + box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5); +} + nav .container { display: flex; justify-content: space-between; @@ -323,11 +332,20 @@ th { } footer { - background-color: #333; + background-color: #00508db6; + backdrop-filter: blur(2px); padding: 1rem; margin-top: 2rem; color: white; text-align: center; + position: fixed; + bottom: 0; + width: 100%; + transition: box-shadow 0.5s ease-in-out; +} + +.footer-scrolled { + box-shadow: 0 -5px 7px rgba(0, 0, 0, 0.5); } #inline-share { diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..dab19f3 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,18 @@ +/** + * Add the nav and footer box shadow when the user scrolls down + */ +window.addEventListener('scroll', () => { + const nav = document.querySelector('nav'); + const footer = document.querySelector('footer'); + const maxScrollY = document.documentElement.scrollHeight - window.innerHeight; + + if (window.scrollY >= (maxScrollY - footer.offsetHeight)) { + footer.classList.remove('footer-scrolled'); + } else if (window.scrollY > 0) { + nav.classList.add('nav-scrolled'); + footer.classList.add('footer-scrolled'); + } else { + nav.classList.remove('nav-scrolled'); + footer.classList.add('footer-scrolled'); + } +}); From aa4656e0e605f4aba20034b8111ff08a9f770750 Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Sat, 17 Aug 2024 14:41:49 -0300 Subject: [PATCH 04/16] vscode: tasks: Add description Signed-off-by: Matheus Castello --- .vscode/tasks.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 8b4a11d..0bdd14c 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -3,6 +3,8 @@ "tasks": [ { "label": "start-hugo", + "detail": "Start the Hugo server to be used as a development server", + "hide": false, "command": "docker", "type": "shell", "args": [ From 34f304459a2f09b71fcbfec18d7aa5f2fb0508a4 Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Sat, 17 Aug 2024 14:46:38 -0300 Subject: [PATCH 05/16] layouts: single: add condition to show profile image Let's do not mess with the blog style if the user does not want, set, the user id to show the profile image. Signed-off-by: Matheus Castello --- layouts/_default/single.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9840237..f2ec6b8 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,9 @@

{{ .Title }}

-
+ {{ if .Params.userId }} +
+ {{ end }} {{ .Date.Format "January 02, 2006" }}
Written by {{ .Params.Author }}

From a8e3956652754fca8a7a9ac81cb923b81a7b7203 Mon Sep 17 00:00:00 2001 From: Matheus Castello Date: Sat, 17 Aug 2024 15:30:48 -0300 Subject: [PATCH 06/16] assets: Fix image logo alignment and add options to change it Signed-off-by: Matheus Castello --- layouts/partials/header.html | 4 ++-- static/img/logo.png | Bin 911981 -> 816057 bytes static/img/logoOldButModern.png | Bin 0 -> 815987 bytes static/img/logoOldComputer.png | Bin 0 -> 816365 bytes 4 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 static/img/logoOldButModern.png create mode 100644 static/img/logoOldComputer.png diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a17342e..07108b0 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,7 +1,7 @@