Skip to content

Edited blog posts #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
de-soot merged 1 commit into from
Feb 10, 2025
Merged

Edited blog posts #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions _posts/2024-05-24-giscus-comments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Comments on Github Pages with Giscus
title: Comments on Github Pages with giscus
date: 2024-05-24
categories: comments, giscus, github pages, github discussions, static websites
permalink: /giscus-comments
---

I added a commenting feature for the blog using [giscus][giscus]. Basically, it uses [Github Discussions][discussions-docs] to store comments instead of storing it in its own database on the web server. Since this website is hosted on [Github Pages][pages-docs] and Pages only supports static websites, it cannot host its own databases to store things such as comments.
I added a commenting feature for the blog using [giscus][giscus]. Basically, it uses [Github Discussions][discussions-docs] to store comments instead of storing it in its own database on the web server. Since this website is hosted on [Github Pages][pages-docs] and Pages only supports static websites, it cannot host its own databases to store things such as comments. This guide explains how to add giscus comments to statically-hosted websites, and some quirks and caveats with using Github Discussions as a database for your comments.

# Try it

You can test it out yourself in the comments on blog post below by signing into your github account and commenting, or you can comment on the repository's Github Discussions directly and it will show up on the comments section on the website similarly.
You can test it out yourself on this blog post in the comments below by signing into your Github account and commenting, or you can comment on the repository's Github Discussions directly and it will show up on the comments section on the website similarly.

# Add it to your own Github Pages website

Expand All @@ -20,8 +20,6 @@ You can test it out yourself in the comments on blog post below by signing into

3) After you have done so, you can simply copy and paste it into your webpage!

---

# Note

Giscus finds and links the comments to the Github Discussions by searching through and matching URLs, path names, titles, and other such metadata. If you try to change a page's title without editing the associated Github Discussion accordingly, it may lead to giscus not being able to find and link it to the Github Discussion (this is especially noticible if you set the `<script>`'s `data-strict` attribute value to `"1"`), and hence Giscus will create a new Github Discussion.
Expand Down
24 changes: 13 additions & 11 deletions _posts/2024-09-07-dark-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
---
layout: post
title: Dark Mode with CSS @media Queries
title: Dark Mode without Javascript
date: 2024-09-07
categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static websites
categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static site generators, system default
permalink: /dark-mode
---

This guide explains why and how to easily make a dark theme for your website using CSS `@media` queries.

Alternative title: System default theme for websites

# Why Dark Mode

For users visiting a website in a dark room at night, it would be less straining for their eyes if the webpage was displayed in a darker colour to match the environment, which is what [dark mode][dark-mode] does.
Expand All @@ -19,7 +23,7 @@ From [MDN Web Docs][mdn]:

## For Non-Static-Site-Generator Websites

There also exists a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
There is also a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.

### External Style Sheet

Expand Down Expand Up @@ -75,11 +79,11 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
</html>
```

## For Static-Site-Generator Websites
## For Static Site Generator Websites

It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme's CSS style sheet.
It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, as you have to override the theme's CSS style sheet.

There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyll][css-blog] you can follow to create your SCSS file and after which you should get something that resembles this:
There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyll][css-blog] you can follow to create your SCSS file, and after which you should get something resembling this:

```css
---
Expand All @@ -104,7 +108,7 @@ And you should get something like this after adding the dark mode code.
}
```

For other static-site-generator websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
For other static site generator websites, you can refer to the official documentation found online for information on how to override your theme's style-sheet.

# Configure Giscus Theme

Expand All @@ -124,11 +128,9 @@ To set `giscus` comments to match the website if you have done the CSS `@media`

# Why Not Use a Toggleable Button Instead

Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to.

This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, if they did not toggle it to dark mode the last time they visited, or if your website does not store cookies about their previously toggled theme.
Most likely those who prefer only using one theme will set it in their browser settings, so it would be redundant to have them click another button to toggle the theme on a website.

You can also include the button to toggle themes on the website alongside defaulting it if you want, but I find this an unnecessary use of [Javascript][js].
Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically switch to their system default or preferred browser theme.

# Conclusion

Expand Down
52 changes: 35 additions & 17 deletions _posts/2024-09-07-justify-text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,64 @@
layout: post
title: Justify and Hyphenate Text on Websites using CSS
date: 2024-09-07
categories: justify, text-align, jekyll, css
categories: justify, text-align, jekyll, css, static site generator
permalink: /justify-text
---

You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because I have justified the text on my website using CSS.
This blog guide goes into why and how to justify and hyphenate text on your website without Javascript.

# How to Justify
# For Static-Site-Generator Websites

It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, you will have to override the theme's CSS style sheet.

It is actually pretty simple --- to justify your body text, just add this to your CSS style sheet:
There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyll][css-blog] you can follow to create your SCSS file, and after which you should get something resembling this:

```css
body {
text-align: justify;
}
---
---

@import "minima"; /* replace minima inside the quotes with your Jekyll theme */
```

This will justify your text so it all aligns neatly without jagged edges.
After this, you can follow all the steps below the same way as it would be done if you were using CSS in a non-static-site-generator instead of SCSS in a static site generator.

# How to Hyphenate
# Why Justify Text

Although there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation is a built-in functionality in CSS and it is widely supported by browsers.
It is more of an aesthetic preference than anything. This jaggedness generally does not bother people that much because they have grown used to the popular left-aligned style of text on the web and probably do not know justification even exists on the web, only on printed books and newspapers. But it just looks better to me when all lines are the same length and the right side of text is not jagged. Justifcation is a way of acheiving that aesthetic goal without cutting words off abruptly.

To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:
# How to Justify

It is actually pretty simple. To justify your body text, just add this to your CSS style sheet:

```css
body {
hyphens: auto
text-align: justify;
}
```

# Why Hyphenate

So now your text wraps words using hyphens, but why do we need to use hyphens that ruin the perfect edges that justifying makes?

Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out the whitespace between words --- which can create and worsen an undesirable effect commonly referred to as 'rivers of white', which is known to trip up dyslexic readers and decrease accessibility.
Text justification can make your paragraphs look tidier, but it has the side-effect of awkwardly stretching out the whitespace between words, which can create and worsen an undesirable effect commonly referred to as 'rivers of white'. This effect is known to make text harder for dyslexic readers to read, decreasing accessibility.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Typographic_river_marking.svg/1280px-Typographic_river_marking.svg.png" alt="Image from Wikipedia with visual marking around an example of a 'rivers of white' effect.">

This is also a common reason as to why justification is generally [not][applewood] [recommended][max] for text output on the web.
This is why justification is generally [not][applewood] [recommended][max] for text output on the web.

By hyphenating, even though it does not solve the problem completely, it will reduce this effect significantly while keeping text not jagged.

By hyphenating, even though it does not solve it completely, it will reduce the effect dramatically.
Hyphenating text will cut off some words at the end of lines (indicated by an auto-inserted hyphen), but it will do it with an algorithm that tries to make it seamless.

# How to Hyphenate

Although there is a way to hyphenate with Javascript using [Hyphenopoly.js][hyphenopoly], there already is a built-in functionality in CSS to do this and it is [widely supported by browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens).

To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:

```css
body {
hyphens: auto
}
```

# Other Blogs That Justify

Expand All @@ -66,6 +83,7 @@ f you found this blog post useful, leave a comment down below! Also read how to
[applewood]: https://applewoodinteractive.com/accessibility/rivers-of-white-why-you-should-never-justify-your-text
[pubdeliver]: https://publicdelivery.org
[hyphenopoly]: https://mnater.github.io/Hyphenopoly
[css-blog]: https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll

<script src="https://giscus.app/client.js"
data-repo="de-soot/de-soot.github.io"
Expand Down
4 changes: 3 additions & 1 deletion _posts/2025-02-20-groff-apa.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ categories: groff, ms, refer, macro, tmac, APA, style guide, pdf
permalink: /groff-apa
---

This guide explains why and how I used groff with the ms and refer macros to write my college essay in Neovim.

# Table of Contents <a name=tableofcontents></a>

1. [Table of Contents](/groff-apa#tableofcontents)
Expand Down Expand Up @@ -457,7 +459,7 @@ Below is a list explaining what each of the optional arguments mean:

# Conclusion <a name=conclusion></a>

If you found this helpful in any way or have any questions, feel free to leave a comment below.
If you found this helpful in any way or have any questions, feel free to leave a comment below. Also read my [previous guide](/justify-text) on how I justify and hyphenate the text on this website.

<script src="https://giscus.app/client.js"
data-repo="de-soot/de-soot.github.io"
Expand Down
36 changes: 19 additions & 17 deletions _site/dark-mode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Dark Mode with CSS @media Queries | de_soot</title>
<title>Dark Mode without Javascript | de_soot</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Dark Mode with CSS @media Queries" />
<meta property="og:title" content="Dark Mode without Javascript" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Why Dark Mode" />
<meta property="og:description" content="Why Dark Mode" />
<meta name="description" content="This guide explains why and how to easily make a dark theme for your website using CSS @media queries." />
<meta property="og:description" content="This guide explains why and how to easily make a dark theme for your website using CSS @media queries." />
<link rel="canonical" href="http://localhost:4000/dark-mode" />
<meta property="og:url" content="http://localhost:4000/dark-mode" />
<meta property="og:site_name" content="de_soot" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-09-07T00:00:00+08:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Dark Mode with CSS @media Queries" />
<meta property="twitter:title" content="Dark Mode without Javascript" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"Why Dark Mode","headline":"Dark Mode with CSS @media Queries","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"This guide explains why and how to easily make a dark theme for your website using CSS @media queries.","headline":"Dark Mode without Javascript","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
<body><header class="site-header" role="banner">
Expand All @@ -40,14 +40,18 @@
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">Dark Mode with CSS @media Queries</h1>
<h1 class="post-title p-name" itemprop="name headline">Dark Mode without Javascript</h1>
<p class="post-meta">
<time class="dt-published" datetime="2024-09-07T00:00:00+08:00" itemprop="datePublished">Sep 7, 2024
</time></p>
</header>

<div class="post-content e-content" itemprop="articleBody">
<h1 id="why-dark-mode">Why Dark Mode</h1>
<p>This guide explains why and how to easily make a dark theme for your website using CSS <code class="language-plaintext highlighter-rouge">@media</code> queries.</p>

<p>Alternative title: System default theme for websites</p>

<h1 id="why-dark-mode">Why Dark Mode</h1>

<p>For users visiting a website in a dark room at night, it would be less straining for their eyes if the webpage was displayed in a darker colour to match the environment, which is what <a href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a> does.</p>

Expand All @@ -62,7 +66,7 @@ <h1 id="how-to-do-it">How to do it</h1>

<h2 id="for-non-static-site-generator-websites">For Non-Static-Site-Generator Websites</h2>

<p>There also exists a <a href="https://youtu.be/g85LQVp0hGM">video guide by Eric Murphy on Youtube</a> if you prefer to follow along with a video.</p>
<p>There is also a <a href="https://youtu.be/g85LQVp0hGM">video guide by Eric Murphy on Youtube</a> if you prefer to follow along with a video.</p>

<h3 id="external-style-sheet">External Style Sheet</h3>

Expand Down Expand Up @@ -115,11 +119,11 @@ <h3 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h3>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<h2 id="for-static-site-generator-websites">For Static-Site-Generator Websites</h2>
<h2 id="for-static-site-generator-websites">For Static Site Generator Websites</h2>

<p>It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme’s CSS style sheet.</p>
<p>It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, as you have to override the theme’s CSS style sheet.</p>

<p>There is a <a href="https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll">blog post by Tom Kadwill on how to override your CSS styles in Jekyll</a> you can follow to create your SCSS file and after which you should get something that resembles this:</p>
<p>There is a <a href="https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll">blog post by Tom Kadwill on how to override your CSS styles in Jekyll</a> you can follow to create your SCSS file, and after which you should get something resembling this:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">---</span>
<span class="nt">---</span>
Expand All @@ -142,7 +146,7 @@ <h2 id="for-static-site-generator-websites">For Static-Site-Generator Websites</
<span class="p">}</span>
</code></pre></div></div>

<p>For other static-site-generator websites, you can refer to the official documentation found online for information on how to override your theme’s CSS.</p>
<p>For other static site generator websites, you can refer to the official documentation found online for information on how to override your theme’s style-sheet.</p>

<h1 id="configure-giscus-theme">Configure Giscus Theme</h1>

Expand All @@ -161,11 +165,9 @@ <h1 id="configure-giscus-theme">Configure Giscus Theme</h1>

<h1 id="why-not-use-a-toggleable-button-instead">Why Not Use a Toggleable Button Instead</h1>

<p>Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser’s preferred theme to.</p>

<p>This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, if they did not toggle it to dark mode the last time they visited, or if your website does not store cookies about their previously toggled theme.</p>
<p>Most likely those who prefer only using one theme will set it in their browser settings, so it would be redundant to have them click another button to toggle the theme on a website.</p>

<p>You can also include the button to toggle themes on the website alongside defaulting it if you want, but I find this an unnecessary use of <a href="https://www.javascript.com">Javascript</a>.</p>
<p>Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically switch to their system default or preferred browser theme.</p>

<h1 id="conclusion">Conclusion</h1>

Expand Down
Loading