From 3d64333b4f03fd1af6022dc2d9608eb4f2fc31e3 Mon Sep 17 00:00:00 2001 From: ari melody Date: Mon, 23 Jun 2025 20:38:28 +0100 Subject: [PATCH] blog sidebar, some cosmetic changes --- public/img/blog/bluesky-dark.svg | 1 + public/img/blog/bluesky-light.svg | 1 + public/img/blog/boost-dark.svg | 1 + public/img/blog/boost-light.svg | 1 + public/img/blog/comment-dark.svg | 1 + public/img/blog/comment-light.svg | 1 + public/img/blog/copy-link-dark.svg | 1 + public/img/blog/copy-link-light.svg | 1 + public/img/blog/like-dark.svg | 1 + public/img/blog/like-light.svg | 1 + public/script/blog.js | 11 ++- public/style/blog.css | 99 ++++++++++++++++-------- public/style/main.css | 23 ++++++ view/blog.go | 49 ++---------- view/blog.html | 114 +++++++++++++++++++++------- 15 files changed, 202 insertions(+), 104 deletions(-) create mode 100644 public/img/blog/bluesky-dark.svg create mode 100644 public/img/blog/bluesky-light.svg create mode 100644 public/img/blog/boost-dark.svg create mode 100644 public/img/blog/boost-light.svg create mode 100644 public/img/blog/comment-dark.svg create mode 100644 public/img/blog/comment-light.svg create mode 100644 public/img/blog/copy-link-dark.svg create mode 100644 public/img/blog/copy-link-light.svg create mode 100644 public/img/blog/like-dark.svg create mode 100644 public/img/blog/like-light.svg diff --git a/public/img/blog/bluesky-dark.svg b/public/img/blog/bluesky-dark.svg new file mode 100644 index 0000000..e3fe1a9 --- /dev/null +++ b/public/img/blog/bluesky-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/bluesky-light.svg b/public/img/blog/bluesky-light.svg new file mode 100644 index 0000000..f0eea97 --- /dev/null +++ b/public/img/blog/bluesky-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/boost-dark.svg b/public/img/blog/boost-dark.svg new file mode 100644 index 0000000..7d0a7bb --- /dev/null +++ b/public/img/blog/boost-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/boost-light.svg b/public/img/blog/boost-light.svg new file mode 100644 index 0000000..be2d14f --- /dev/null +++ b/public/img/blog/boost-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/comment-dark.svg b/public/img/blog/comment-dark.svg new file mode 100644 index 0000000..79f0de5 --- /dev/null +++ b/public/img/blog/comment-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/comment-light.svg b/public/img/blog/comment-light.svg new file mode 100644 index 0000000..2e3e8f7 --- /dev/null +++ b/public/img/blog/comment-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/copy-link-dark.svg b/public/img/blog/copy-link-dark.svg new file mode 100644 index 0000000..5155a70 --- /dev/null +++ b/public/img/blog/copy-link-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/copy-link-light.svg b/public/img/blog/copy-link-light.svg new file mode 100644 index 0000000..b6fa5a6 --- /dev/null +++ b/public/img/blog/copy-link-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/like-dark.svg b/public/img/blog/like-dark.svg new file mode 100644 index 0000000..634bf6f --- /dev/null +++ b/public/img/blog/like-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/blog/like-light.svg b/public/img/blog/like-light.svg new file mode 100644 index 0000000..fb5c7ea --- /dev/null +++ b/public/img/blog/like-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/script/blog.js b/public/script/blog.js index 6b9fee4..4f96ab6 100644 --- a/public/script/blog.js +++ b/public/script/blog.js @@ -1,4 +1,4 @@ -document.addEventListener('DOMContentLoaded', () => { +document.addEventListener('readystatechange', () => { document.querySelectorAll('.comment-hover').forEach((/** @type {HTMLDivElement} */ comment) => { /** @type {HTMLLinkElement} */ const commentBody = comment.querySelector('a.comment-body'); @@ -16,4 +16,13 @@ document.addEventListener('DOMContentLoaded', () => { comment.style.cursor = 'pointer'; comment.role = 'link'; }); + + document.getElementById('blog-copy-link').addEventListener('click', event => { + event.preventDefault(); + if (navigator.clipboard === undefined) { + console.error("clipboard is not supported by this browser!"); + return; + } + navigator.clipboard.writeText(location.protocol + "//" + location.host + location.pathname); + }); }); diff --git a/public/style/blog.css b/public/style/blog.css index 19d87b4..7f57d68 100644 --- a/public/style/blog.css +++ b/public/style/blog.css @@ -10,6 +10,62 @@ main { margin: 0 auto 1rem auto; } +#blog-sidebar { + position: fixed; + width: 3em; + padding: 3em; + transform: translate(-9em, -1em); + overflow: clip; + opacity: .5; + transition: opacity .2s; +} +#blog-sidebar:hover { + opacity: 1; +} + +#blog-sidebar ul { + margin: 0; + padding: .3em; + list-style: none; + display: flex; + flex-direction: column; + gap: .3em; + border-radius: 4px; + border: 1px solid var(--on-background); + box-shadow: 4px 4px 4px #0001; +} + +#blog-sidebar a { + width: 35px; + height: 35px; + display: block; + padding: .2em; + border-radius: 2px; + text-decoration: none; +} +#blog-sidebar a:hover { + background: #0001; +} +#blog-sidebar a:active { + background: #0002; +} + +#blog-sidebar a img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +#blog-sidebar span { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5em; +} + .blog p:hover, .comment p:hover { background: inherit; @@ -76,7 +132,7 @@ article.blog { /* COMMENTS */ -.interactions { +#interactions { margin: 1em 0; display: flex; flex-direction: row; @@ -94,8 +150,8 @@ article.blog { font-weight: 600; } -.interactions .likes, -.interactions .reposts { +#interactions .likes, +#interactions .reposts { padding: 0 .5em; min-width: fit-content; font-family: monospace; @@ -106,49 +162,26 @@ article.blog { text-wrap: nowrap; } -.interactions .likes { +#interactions .likes { border-color: var(--on-background); } -.interactions .reposts { +#interactions .reposts { border-color: var(--on-background); } .comment-callout { - padding: 1em; - background: var(--background-alt); - border-radius: 2px; - border: 1px solid #8884; + padding-bottom: 1em; text-align: center; -} -.comment-callout:hover { - background: var(--background-alt); + border-radius: 2px; + border-bottom: 1px solid #8884; } -.btn.bluesky, -.btn.mastodon { - font-family: monospace; - text-wrap: nowrap; - text-decoration: none; - transition-property: color background-color; - transition-duration: .1s; -} - -.btn.bluesky { +.bluesky { color: var(--bluesky); - border-color: var(--bluesky); -} -.btn.bluesky:hover { - background-color: var(--bluesky); - color: #fff; } -.btn.mastodon { +.mastodon { color: var(--mastodon); - border-color: var(--mastodon); -} -.btn.mastodon:hover { - background-color: var(--mastodon); - color: #fff; } .comment { diff --git a/public/style/main.css b/public/style/main.css index 680ee2b..7d73f24 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -141,8 +141,23 @@ a#backtotop:hover { } } +.light-only { + display: none; +} + +.dark-only { + display: inherit; +} @media (prefers-color-scheme: light) { + .light-only { + display: inherit; + } + + .dark-only { + display: none; + } + a.link-button:hover { box-shadow: none; } @@ -161,6 +176,14 @@ a#backtotop:hover { } @media (prefers-color-scheme: dark) { + .light-only { + display: none; + } + + .dark-only { + display: inherit; + } + body.crt { text-shadow: 0 0 3em; } diff --git a/view/blog.go b/view/blog.go index 1f3bb1d..73095b0 100644 --- a/view/blog.go +++ b/view/blog.go @@ -39,62 +39,25 @@ func BlogHandler(app *model.AppState) http.Handler { AuthorID: "ari", Markdown: ` -**i'm ari!** +**i'm ari!** (she/her) 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪 -she/her 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪 +welcome to my blog! i'm a musician, developer, streamer, youtuber, and probably a bunch of other things i forgot to mention! -you're very welcome to take a look around my little space on the internet here, or explore any of the other parts i inhabit! -if you're looking to support me financially, that's so cool of you!! if you like, you can buy some of my music over on bandcamp so you can at least get something for your money. thank you very much either way!! 💕 - -for anything else, you can reach me for any and all communications through ari@arimelody.me. if your message contains anything beyond a silly gag, i strongly recommend encrypting your message using my public pgp key, listed below! - -thank you for stopping by- i hope you have a lovely rest of your day! 💫 - -## metadata - -**my colours 🌈** - -- primary: #b7fd49 -- secondary: #f8e05b -- tertiary: #f788fe - -**my keys 🔑** - -- pgp: [[link]](/keys/ari%20melody_0x92678188_public.asc) -- ssh (ed25519): [[link]](/keys/id_ari_ed25519.pub) - -**where to find me 🛰️** - -- youtube -- twitch -- spotify -- bandcamp -- github - -**projects i've worked on 🛠️** - -- catdance -- pride flag -- ipaddrgen -- impact meme -- OpenTerminal -- Silver.js - -### code block test +## code block test ~~~ c #include int main(int argc, char *argv[]) { - printf("hello world!~\n"); - return 0; + printf("hello world!~\n"); + return 0; } ~~~ -### aridoodle +## aridoodle this is `+"`"+`aridoodle`+"`"+`. please take care of her. diff --git a/view/blog.html b/view/blog.html index eb8c4a1..ea10bbe 100644 --- a/view/blog.html +++ b/view/blog.html @@ -18,39 +18,99 @@ {{define "content"}}
- +
+ + 🔁 {{.Reposts}} +
-
+

+ join the conversation on + Bluesky 🦋 + + +

-
- - 🔁 {{.Reposts}} -
- -

- join the conversation on - Bluesky 🦋 - - -

- -
- {{range .Comments}} - {{template "comment" .}} +
+ {{range .Comments}} + {{template "comment" .}} + {{end}} +
{{end}} -
- + +
{{end}} @@ -59,7 +119,7 @@
- {{.Post.Author.DisplayName}}'s avatar + {{.Post.Author.DisplayName}}'s avatar {{.Post.Author.DisplayName}} @{{.Post.Author.Handle}}