diff --git a/blog/site-update-2021-12-19.markdown b/blog/site-update-2021-12-19.markdown new file mode 100644 index 0000000..ad05335 --- /dev/null +++ b/blog/site-update-2021-12-19.markdown @@ -0,0 +1,139 @@ +--- +title: "Site Updates: Better Contrast Ratio and Using Xeact" +date: 2021-12-19 +--- + +Happy holidays all! As the year rolls to a close I wanted to take a moment to +let you know of some improvements that I've done over the year to try and make +the reading experience as best as it can be. + +## Better Contrast Ratio + +Over the years I have gotten reports that my site is hard to read. I've been +taking them seriously but I have never really been sure what to do about them. I +think I have found the core of the problem and I have changed the site's +contrast ratio to hopefully have more contrast between the text of the website +and the background. + +Here are some comparisons to before and after the change: + +
+
+ This is what my site looked like before I made the changes (dark mode). +
+ +
+ +
+ This is what my site looks like after I made the changes (dark mode). +
+ +
+ +
+ This is what my site looked like before I made the changes (light mode). +
+ +
+ +
+ This is what my site looks like after I made the changes (light mode). +
+
+ +Hopefully this should improve the contrast ratio a lot more. I've always wanted +this website to look a lot like [my emacs +config](https://cdn.christine.website/file/christine-static/blog/Screenshot+from+2021-12-19+12-06-39.png), +but these changes should hopefully reach a balance of readability and stylistic +choices to get across the vision I have for my website. + +## Using Xeact + + + +I want to use [Xeact](https://christine.website/blog/xeact-0.0.69-2021-11-18) +more in my website. I am trying to hit a balance of avoiding structural +JavaScript while also allowing me to experiment with new and interesting ways of +doing things. To this end I have created a custom HTML element that allows me to +embed the little conversation fragments that I feel makes this blog unique. They +are currently done by [a horrific hack I made to my markdown +parser](https://github.com/Xe/site/blob/540ae4a3a9735d3f55ebceb1d271e472cd7f950e/src/app/markdown.rs#L38-L65). +This also makes it hard for me to put links in the little conversation +fragments, so when you see me do that, that's because I've written something of +this form: + +```markdown +[This is a test with a link.](conversation://Mara/hacker) +``` + +[This is a test with a link.](conversation://Mara/hacker) + +This has become an unworkable mess. With the [html +component](https://github.com/Xe/site/blob/540ae4a3a9735d3f55ebceb1d271e472cd7f950e/static/js/conversation.js) +I made recently, I can instead write things that look like this: + +```markdown + +This is a test [with a link](https://zombo.com). + +``` + + + +This is a test [with a link](https://zombo.com). + + + +This lets me use Xeact in a way that allows me to enhance the experience of +using my website as well as my experience in writing it. I don't really like how +this adds JavaScript into the mix for rendering the page. I have tried to avoid +it, but this is getting unworkable for me. When I get things to the point that I +feel more comfortable with making it the default option (this may involve some +custom hacking to the CSS to make it degrade more gracefully, I don't know what +I'm doing here), I will use it more as my main way to write these asides. Until +then, I can deal with the link syntax form. I may end up writing something to +munge things into place. + +This also depends on you having modern JavaScript support. I can't change +anything about that without introducing pain and suffering to my development +workflow. + + + +This also breaks people reading the RSS feed, but it's already been [pretty darn +broken](https://github.com/Xe/site/issues/388) already. Worst case this makes +people a bit confused with the RSS feed, but until I can find a good workaround +I think I can tolerate this weirdness. + +I am not good with CSS. + + + +## Server-side Syntax Highlighting + +You may have noticed that code syntax highlighting has a notably different color +scheme to it compared to the rest of the blog as of late. This is not on +accident. I used to use [Prism](https://prismjs.com/) to do this on the client +side. This worked great, but Prism is a huge (near 1 MB) download. I really want +to avoid wasting bandwidth, so I added this at the markdown rendering step with +[syntect](https://docs.rs/syntect/latest/syntect/). The theme I use +(base16-mocha) is not perfectly aligned with my editor, but this is as close as +I can get with their default themes until I have the energy to port gruvbox into +this. + +Hopefully this should work in the RSS feed too. + +--- + +Have a good rest of the year and stay safe! I'm gonna try and take a load off +over the holidays, so I may end up posting less frequently. 2021 has been a lot. + +[Please get vaccinated. I want to be able to travel for conventions without it +being so scary all the time.](conversation://Cadey/enby) diff --git a/css/gruvbox-dark.css b/css/gruvbox-dark.css index 974ff10..dee993e 100644 --- a/css/gruvbox-dark.css +++ b/css/gruvbox-dark.css @@ -1,8 +1,8 @@ .gruvbox-dark { - background-color: #282828; - color: #ebdbb2 + background-color: #1d2021; + color: #f9f5d7 } .gruvbox-dark h1, @@ -171,8 +171,8 @@ @media (prefers-color-scheme: light) { .gruvbox-dark { - background-color: #fbf1c7; - color: #282828; + background-color: #f9f5d7; + color: #1d2021; } .gruvbox-dark h1 a:hover, .gruvbox-dark h2 a:hover, diff --git a/css/shim.css b/css/shim.css index 2654330..16b9d8c 100644 --- a/css/shim.css +++ b/css/shim.css @@ -53,3 +53,13 @@ img { /* content: "<"attr(name)">"; */ /* font-weight: bold; */ /* } */ + +.warning { + background-color: #282828; +} + +@media (prefers-color-scheme: light) { + .warning { + background-color: #fbf1c7; + } +} diff --git a/css/snow.css b/css/snow.css index 81834c4..cdca39e 100644 --- a/css/snow.css +++ b/css/snow.css @@ -12,12 +12,12 @@ } .snowframe { - background-color: #282828; + background-color: #1d2021; } @media (prefers-color-scheme: light) { .snowframe { - background-color: #fbf1c7; + background-color: #f9f5d7; } } diff --git a/static/js/conversation.js b/static/js/conversation.js index bdce9ad..d20865f 100644 --- a/static/js/conversation.js +++ b/static/js/conversation.js @@ -1,8 +1,8 @@ import { g, h, x } from "./xeact.min.js"; import { div, span } from "./xeact-html.min.js"; -const mkConversation = (who, mood, message) => - h("div", {className: "conversation gruvbox-dark"}, [ +export const mkConversation = (who, mood, message, extraClasses = "") => + h("div", {className: "conversation gruvbox-dark " + extraClasses}, [ h("div", {className: "conversation-picture conversation-smol"}, [ h("picture", {}, [ h("source", {type: "image/avif", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.avif`}), diff --git a/static/js/hnwarn.js b/static/js/hnwarn.js new file mode 100644 index 0000000..b2bfeae --- /dev/null +++ b/static/js/hnwarn.js @@ -0,0 +1,38 @@ +import { g, x, r, t } from "./xeact.min.js"; +import { div, ahref, br } from "./xeact-html.min.js"; +import { mkConversation } from "./conversation.js"; + +const addNag = () => { + let root = g("refererNotice"); + x(root); + root.appendChild( + div( + {style: "padding:1em"}, + mkConversation("Cadey", "coffee", [ + t("Thank you for reading this article. If you have any questions or thoughts about its contents, please comment civilly on it and remember the human on the other side of the screen. Due to facts and circumstances surrounding our fundamentally subjective reality, I may experience things differently than you do. If this is somehow unacceptable to you, please feel free to "), + ahref("https://zombo.com", "go somewhere else"), + t(". Have a good day and be well!") + ], "warning"), + br(), + br() + ) + ); +}; + +r(() => { + switch (document.referrer) { + case "https://news.ycombinator.com/": + addNag(); + break; + case "https://www.reddit.com/": + addNag(); + break; + case "https://old.reddit.com/": + addNag(); + break; + case "https://reddit.com/": + addNag(); + break; + } +}); + diff --git a/static/js/sw.js b/static/js/sw.js index df5bb0d..72aaad6 100755 --- a/static/js/sw.js +++ b/static/js/sw.js @@ -5,7 +5,7 @@ self.addEventListener('install', function (event) { event.waitUntil(preLoad()); }); -const cacheName = "cache-xesite-2.3.0-3"; +const cacheName = "cache-xesite-2.3.0-4"; var preLoad = function () { console.log('[PWA Builder] Install Event processing'); diff --git a/templates/blogpost.rs.html b/templates/blogpost.rs.html index 808c873..03e05c1 100644 --- a/templates/blogpost.rs.html +++ b/templates/blogpost.rs.html @@ -24,6 +24,8 @@ } + + } +
+ +

@post.front_matter.title

A @post.read_time_estimate_minutes minute read. @@ -147,4 +152,5 @@ @} @} + @:footer_html()