Merge branch 'main' into main

.github/workflows/blog.yml

@@ -1,4 +1,4 @@
-name: Build Site
+name: Blog
 
 on:
   push:
@@ -59,10 +59,10 @@ jobs:
     steps:
     - uses: actions/checkout@v1
 
-    - run: curl -L https://git.io/misspell | bash
+    - name: Typo Check
-      name: "Install misspell"
+      uses: crate-ci/typos@v1.1.9
-    - run: bin/misspell -error blog/content
+      with:
-      name: "Check for common typos"
+        files: blog
 
   deploy_site:
     name: "Deploy Generated Site"

blog/config.toml

@@ -6,6 +6,7 @@ highlight_code = true
 highlight_theme = "visual-studio-dark"
 generate_feed = true
 feed_filename = "rss.xml"
+compile_sass = true
 
 languages = [
     { code = "zh-CN" }, # Chinese (simplified)

blog/content/edition-1/extra/naked-exceptions/02-better-exception-messages/index.md

@@ -628,7 +628,7 @@ bitflags! {
 
 - When the `PROTECTION_VIOLATION` flag is set, the page fault was caused e.g. by a write to a read-only page. If it's not set, it was caused by accessing a non-present page.
 - The `CAUSED_BY_WRITE` flag specifies if the fault was caused by a write (if set) or a read (if not set).
-- The `USER_MODE` flag is set when the fault occurred in non-priviledged mode.
+- The `USER_MODE` flag is set when the fault occurred in non-privileged mode.
 - The `MALFORMED_TABLE` flag is set when the page table entry has a 1 in a reserved field.
 - When the `INSTRUCTION_FETCH` flag is set, the page fault occurred while fetching the next instruction.
 

blog/content/edition-1/extra/naked-exceptions/03-returning-from-exceptions/index.md

@@ -426,7 +426,7 @@ The page fault is gone and we see the _“It did not crash”_ message again!
 So the page fault occurred because our exception handler didn't preserve the scratch register `rax`. Our new `handler!` macro fixes this problem by saving all scratch registers (including `rax`) before calling exception handlers. Thus, `rax` still contains the valid memory address when `rust-main` continues execution.
 
 ## Multimedia Registers
-When we discussed calling conventions above, we assummed that a x86_64 CPU only has the following 16 registers: `rax`, `rbx`, `rcx`, `rdx`, `rsi`, `rdi`, `rsp`, `rbp`, `r8`, `r9`, `r10`, `r11`.`r12`, `r13`, `r14`, and `r15`. These registers are called _general purpose registers_ since each of them can be used for arithmetic and load/store instructions.
+When we discussed calling conventions above, we assumed that a x86_64 CPU only has the following 16 registers: `rax`, `rbx`, `rcx`, `rdx`, `rsi`, `rdi`, `rsp`, `rbp`, `r8`, `r9`, `r10`, `r11`.`r12`, `r13`, `r14`, and `r15`. These registers are called _general purpose registers_ since each of them can be used for arithmetic and load/store instructions.
 
 However, modern CPUs also have a set of _special purpose registers_, which can be used to improve performance in several use cases. On x86_64, the most important set of special purpose registers are the _multimedia registers_. These registers are larger than the general purpose registers and can be used to speed up audio/video processing or matrix calculations. For example, we could use them to add two 4-dimensional vectors _in a single CPU instruction_:
 

blog/content/edition-1/posts/08-kernel-heap/index.md

@@ -415,7 +415,7 @@ pub fn init(boot_info: &BootInformation) {
 We've just moved the code to a new function. However, we've sneaked some improvements in:
 
 - An additional `.filter(|s| s.is_allocated())` in the calculation of `kernel_start` and `kernel_end`. This ignores all sections that aren't loaded to memory (such as debug sections). Thus, the kernel end address is no longer artificially increased by such sections.
-- We use the `start_address()` and `end_address()` methods of `boot_info` instead of calculating the adresses manually.
+- We use the `start_address()` and `end_address()` methods of `boot_info` instead of calculating the addresses manually.
 - We use the alternate `{:#x}` form when printing kernel/multiboot addresses. Before, we used `0x{:x}`, which leads to the same result. For a complete list of these “alternate” formatting forms, check out the [std::fmt documentation].
 
 [std::fmt documentation]: https://doc.rust-lang.org/nightly/std/fmt/index.html#sign0

blog/content/edition-1/posts/09-handling-exceptions/index.md

@@ -379,7 +379,7 @@ Note how this solution requires no `unsafe` blocks or `unwrap` calls.
 
 > ##### Aside: How does the `lazy_static!` macro work?
 >
-> The macro generates a `static` of type `Once<Idt>`. The [`Once`][spin::Once] type is provided by the `spin` crate and allows deferred one-time initialization. It is implemented using an [`AtomicUsize`] for synchronization and an [`UnsafeCell`] for storing the (possibly unitialized) value. So this solution also uses `unsafe` behind the scenes, but it is abstracted away in a safe interface.
+> The macro generates a `static` of type `Once<Idt>`. The [`Once`][spin::Once] type is provided by the `spin` crate and allows deferred one-time initialization. It is implemented using an [`AtomicUsize`] for synchronization and an [`UnsafeCell`] for storing the (possibly uninitialized) value. So this solution also uses `unsafe` behind the scenes, but it is abstracted away in a safe interface.
 
 [spin::Once]: https://docs.rs/spin/0.4.5/spin/struct.Once.html
 [`AtomicUsize`]: https://doc.rust-lang.org/nightly/core/sync/atomic/struct.AtomicUsize.html

blog/content/edition-2/posts/07-hardware-interrupts/index.fa.md

@@ -251,7 +251,7 @@ extern "x86-interrupt" fn timer_interrupt_handler(
 
 ### پیکربندی تایمر
 
-تایمر سخت افزاری که ما از آن استفاده می کنیم ، _Progammable Interval Timer_ یا به اختصار PIT نامیده می شود. همانطور که از نام آن مشخص است ، می توان فاصله بین دو وقفه را پیکربندی کرد. ما در اینجا به جزئیات نمی پردازیم زیرا به زودی به [تایمر APIC] سوییچ خواهیم کرد، اما ویکی OSDev مقاله مفصلی درباره [پیکربندی PIT] دارد.
+تایمر سخت افزاری که ما از آن استفاده می کنیم ، _Programmable Interval Timer_ یا به اختصار PIT نامیده می شود. همانطور که از نام آن مشخص است ، می توان فاصله بین دو وقفه را پیکربندی کرد. ما در اینجا به جزئیات نمی پردازیم زیرا به زودی به [تایمر APIC] سوییچ خواهیم کرد، اما ویکی OSDev مقاله مفصلی درباره [پیکربندی PIT] دارد.
 
 [تایمر APIC]: https://wiki.osdev.org/APIC_timer
 [پیکربندی PIT]: https://wiki.osdev.org/Programmable_Interval_Timer

blog/content/edition-2/posts/07-hardware-interrupts/index.md

@@ -246,7 +246,7 @@ When we now execute `cargo run` we see dots periodically appearing on the screen
 
 ### Configuring the Timer
 
-The hardware timer that we use is called the _Progammable Interval Timer_ or PIT for short. Like the name says, it is possible to configure the interval between two interrupts. We won't go into details here because we will switch to the [APIC timer] soon, but the OSDev wiki has an extensive article about the [configuring the PIT].
+The hardware timer that we use is called the _Programmable Interval Timer_ or PIT for short. Like the name says, it is possible to configure the interval between two interrupts. We won't go into details here because we will switch to the [APIC timer] soon, but the OSDev wiki has an extensive article about the [configuring the PIT].
 
 [APIC timer]: https://wiki.osdev.org/APIC_timer
 [configuring the PIT]: https://wiki.osdev.org/Programmable_Interval_Timer

blog/content/status-update/2019-12-02.md

@@ -15,7 +15,7 @@ We also have other news: We plan to add [Experimental Support for Community Tran
 
 ## `bootloader`
 
-- [Change the way the kernel entry point is called to honor alignement ABI](https://github.com/rust-osdev/bootloader/pull/81) by [@GuillaumeDIDIER](https://github.com/GuillaumeDIDIER) (published as version 0.8.2)
+- [Change the way the kernel entry point is called to honor alignment ABI](https://github.com/rust-osdev/bootloader/pull/81) by [@GuillaumeDIDIER](https://github.com/GuillaumeDIDIER) (published as version 0.8.2)
 - [Add support for Github Actions](https://github.com/rust-osdev/bootloader/pull/82)
 - [Remove unnecessary `extern C` on panic handler to fix not-ffi-safe warning](https://github.com/rust-osdev/bootloader/pull/85) by [@cmsd2](https://github.com/cmsd2) (published as version 0.8.3)
 

blog/static/css/edition-2/main.css

@@ -1,472 +0,0 @@
-h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
-  padding: 0;
-  color: #a0565c;
-  font-size: 95%;
-  background-color: inherit;
-}
-
-.masthead-title {
-  font-size: 1.25rem;
-  display: inline;
-}
-
-.masthead p {
-  font-size: 1.25rem;
-  display: inline;
-  margin: 0;
-  margin-left: 1rem;
-  padding: 0;
-  line-height: 1;
-}
-
-.front-page-introduction {
-  margin-bottom: 2rem;
-}
-
-.navigation {
-  float: right;
-}
-
-.navigation img {
-  height: 1em;
-  vertical-align: baseline;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-}
-
-main img {
-  max-width: 100%;
-  margin: auto;
-}
-
-.post {
-  margin-bottom: 2em;
-}
-
-.post:last-child {
-  margin-bottom: 0em;
-}
-
-.frontpage-section {
-  margin-bottom: 2rem;
-}
-
-.posts {
-  padding: 1.5rem 1rem 0.5rem 1rem;
-  border-radius: 10px;
-  margin-bottom: 2rem;
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-}
-
-.posts.neutral {
-  border: 2px solid #999;
-}
-
-.posts.subscribe {
-  border: 2px solid #aaa;
-}
-
-.posts.edition-1 {
-  border: 2px solid #aaa;
-  background-color: #99ff0022;
-}
-
-.posts.bare-bones {
-  border: 2px solid #66f;
-}
-
-.posts.memory-management {
-  border: 2px solid #fc0
-}
-
-.posts.interrupts {
-  border: 2px solid #f66;
-}
-
-.posts.multitasking {
-  border: 2px solid #556b2f;
-}
-
-.posts hr {
-  margin: 2rem 0;
-}
-
-.post-summary {
-  margin-bottom: 1rem;
-}
-
-.post-summary p {
-  display: inline;
-}
-
-.read-more {
-  margin-left: 5px;
-}
-
-.no-translation {
-  margin-top: .3rem;
-  color: #999999;
-}
-
-.post-category {
-  margin-right: 0.5rem;
-  text-transform: uppercase;
-  font-size: 0.8rem;
-  text-align: right;
-}
-
-.post-category.bare-bones {
-  color: #55d;
-}
-
-.post-category.memory-management {
-  color: #990;
-}
-
-.post-category.interrupts {
-  color: #f33;
-}
-
-.post-category.multitasking {
-  color: #556b2f;
-}
-
-.post-footer-support {
-  margin-top: 2rem;
-}
-
-.PageNavigation {
-  font-size: 0.9em;
-  display: table;
-  width: 100%;
-  overflow: hidden;
-}
-
-.PageNavigation a {
-  display: table-cell;
-}
-
-.PageNavigation .previous {
-  text-align: left;
-}
-
-.PageNavigation .next {
-  text-align: right;
-}
-
-footer.footer {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.footnotes {
-  font-size: 85%;
-}
-
-.footnotes li {
-  margin-bottom: 1rem;
-}
-
-sup, sub {
-  line-height: 0;
-}
-
-a.anchorjs-link:hover {
-    text-decoration: none;
-}
-
-#toc-aside {
-  display: none;
-}
-
-#toc-inline summary {
-  margin-bottom: .2rem;
-}
-
-aside#all-posts-link {
-  font-size: 90%;
-  margin-top: 0.5rem;
-}
-
-@media (min-width: 80rem) {
-  #toc-inline {
-    display: none;
-  }
-
-  #toc-aside {
-    display: block;
-    width: 12rem;
-    position: sticky;
-    float: left;
-    top: 3.5rem;
-    margin-top: -4rem;
-    margin-left: -15rem;
-    font-size: 90%;
-    line-height: 1.2;
-  }
-
-  #toc-aside li > a, #toc-aside h2 {
-    opacity: .5;
-    transition: opacity .5s;
-  }
-
-  #toc-aside:hover li > a, #toc-aside:hover h2 {
-    opacity: 1;
-  }
-
-  #toc-aside li.active > a {
-    font-weight: bold;
-  }
-
-  #toc-aside h2 {
-    font-size: 110%;
-    margin-bottom: .2rem;
-  }
-
-  #toc-aside ol {
-    margin: 0 0 .2rem 0;
-    padding: 0 0 0 1rem;
-    list-style:none;
-  }
-
-  #toc-aside ol li a:before {
-    content: "";
-    border-color: transparent #008eef;
-    border-style: solid;
-    border-width: 0.35em 0 0.35em 0.45em;
-    display: block;
-    height: 0;
-    width: 0;
-    left: -1em;
-    top: 0.9em;
-    position: relative;
-  }
-
-  #toc-aside.coarse li ol {
-    display: none;
-  }
-
-  aside.page-aside-right {
-    position: absolute;
-    min-width: 11rem;
-    max-width: 17rem;
-    top: 4rem;
-    margin-left: 45rem;
-    margin-right: 2rem;
-    font-size: 90%;
-  }
-
-  aside.page-aside-right .block {
-    margin-bottom: 1.5rem;
-  }
-
-  aside.page-aside-right h2 {
-    font-size: 110%;
-    margin-bottom: .2rem;
-  }
-
-  aside.page-aside-right ul {
-    margin: 0 0 .2rem 0;
-    padding: 0 0 0 1rem;
-  }
-
-  aside.page-aside-right ul li {
-    margin-top: .5rem;
-  }
-
-  #language-selector li {
-    margin-top: 0;
-  }
-
-  aside#all-posts-link {
-    position: fixed;
-    top: 1.25rem;
-    margin-top: 0;
-    margin-left: -15rem;
-  }
-}
-
-aside.page-aside-right time {
-  color: #9a9a9a;
-}
-
-a code {
-  color: #268bd2;
-}
-
-a.zola-anchor {
-  opacity: 0;
-  position: absolute;
-  margin-left: -1.5em;
-  padding-right: 1em;
-  font-size: 0.6em;
-  vertical-align: baseline;
-  line-height: 2em;
-}
-
-:hover>a.zola-anchor {
-  opacity: 1;
-  text-decoration: none;
-}
-
-a.zola-anchor:hover {
-  text-decoration: none;
-}
-
-div.note {
-  padding: .7rem 1rem;
-  margin: 1rem .2rem;
-  border: 2px solid #6ad46a;
-  border-radius: 5px;
-  background-color: #99ff991f;
-}
-
-div.note p:last-child {
-  margin-bottom: 0;
-}
-
-div.warning {
-  padding: .7rem 1rem;
-  margin: 1rem .2rem;
-  border: 2px solid orange;
-  border-radius: 5px;
-  background-color: #ffa50022;
-}
-
-div.warning p:last-child {
-  margin-bottom: 0;
-}
-
-form.subscribe {
-  margin: 1rem;
-}
-
-div.subscribe-fields {
-  display: flex;
-}
-
-form.subscribe input {
-  padding: .5rem;
-  border: 1px solid #e5e5e5;
-}
-
-form.subscribe input[type=email] {
-  flex: 1;
-}
-
-form.subscribe input[type=submit] {
-  padding: .25rem .5rem;
-  cursor: pointer;
-}
-
-/* Asides */
-aside.post_aside {
-  font-style: italic;
-  padding: 0rem 1rem 0rem;
-  margin: .8rem 0;
-  border-left: .1rem solid #e5e5e5;
-  border-right: .1rem solid #e5e5e5;
-}
-
-details summary {
-  cursor: pointer;
-}
-
-details summary h3, details summary h4, details summary h5, details summary h6 {
-  display: inline;
-}
-
-.gh-repo-box {
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
-  padding: 16px;
-  margin-top: 0.5rem;
-  color: #586069;
-  font-size: 80%;
-}
-
-.gh-repo-box .repo-link {
-  color: #0366d6;
-  font-weight: 600;
-  font-size: 120%;
-}
-
-.gh-repo-box .subtitle {
-  margin-bottom: 16px;
-}
-
-.gh-repo-box .stars-forks {
-  margin-bottom: 0;
-}
-
-.gh-repo-box .stars-forks a {
-  color: #586069;
-}
-
-.gh-repo-box .stars-forks a:hover {
-  color: #0366d6;
-  text-decoration: none;
-}
-
-.gh-repo-box .stars-forks svg {
-  vertical-align: text-bottom;
-  fill: currentColor;
-}
-
-.gh-repo-box .stars {
-  display: inline-block;
-}
-
-.gh-repo-box .forks {
-  display: inline-block;
-  margin-left: 16px;
-}
-
-.gh-repo-box .sponsor {
-  display: inline-block;
-  margin-left: 16px;
-}
-
-.hidden {
-  display: none;
-}
-
-.toc-comments-link {
-  margin-top: .5rem;
-}
-
-h5 {
-  font-style: italic;
-  font-size: 0.9rem;
-}
-.gray {
-  color: gray;
-}
-
-a strong {
-  color: #268bd2;
-}
-
-.right-to-left {
-	direction: rtl;
-	font-family: Vazir;
-}
-
-.left-to-right, .right-to-left pre, .right-to-left table, .right-to-left[id="toc-aside"] {
-	direction: ltr;
-}
-
-.status-update-list li {
-  margin-bottom: .5rem;
-}
-
-#comments {
-  visibility: hidden;
-}
-
-.comment-directly-on-github {
-  margin-top: 1rem;
-}

blog/static/css/edition-2/poole.css

@@ -1,406 +0,0 @@
-/*
- *                        ___
- *                       /\_ \
- *  _____     ___     ___\//\ \      __
- * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
- * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
- *  \ \ ,__/\ \____/\ \____//\____\ \____\
- *   \ \ \/  \/___/  \/___/ \/____/\/____/
- *    \ \_\
- *     \/_/
- *
- * Designed, built, and released under MIT license by @mdo. Learn more at
- * https://github.com/poole/poole.
- */
-
-
-/*
- * Contents
- *
- * Body resets
- * Custom type
- * Messages
- * Container
- * Masthead
- * Posts and pages
- * Pagination
- * Reverse layout
- * Themes
- */
-
-
-/*
- * Body resets
- *
- * Update the foundational and global aspects of the page.
- */
-
-* {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-}
-
-body {
-  color: #515151;
-  background-color: #fff;
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-}
-
-/* No `:visited` state is required by default (browsers will use `a`) */
-a {
-  color: #268bd2;
-  text-decoration: none;
-}
-/* `:focus` is linked to `:hover` for basic accessibility */
-a:hover,
-a:focus {
-  text-decoration: underline;
-}
-
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
-  margin-bottom: .5rem;
-  font-weight: bold;
-  line-height: 1.25;
-  color: #313131;
-  text-rendering: optimizeLegibility;
-}
-h1 {
-  font-size: 2rem;
-}
-h2 {
-  margin-top: 1rem;
-  font-size: 1.5rem;
-}
-h3 {
-  margin-top: 1.5rem;
-  font-size: 1.25rem;
-}
-h4, h5, h6 {
-  margin-top: 1rem;
-  font-size: 1rem;
-}
-
-/* Body text */
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-strong {
-  color: #303030;
-}
-
-
-/* Lists */
-ul, ol, dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-/* Nested lists */
-li ul, li ol, li dl {
-  margin-bottom: 0;
-}
-
-li ul + p, li ol + p, li dl + p {
-  margin-top: 1rem;
-}
-
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-bottom: .5rem;
-}
-
-/* Misc */
-hr {
-  position: relative;
-  margin: 1.5rem 0;
-  border: 0;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #fff;
-}
-
-abbr {
-  font-size: 85%;
-  font-weight: bold;
-  color: #555;
-  text-transform: uppercase;
-}
-abbr[title] {
-  cursor: help;
-  border-bottom: 1px dotted #e5e5e5;
-}
-
-/* Code */
-code,
-pre {
-  font-family: Menlo, Monaco, Consolas, monospace;
-}
-code {
-  padding: .25em .5em;
-  font-size: 85%;
-  color: #bf616a;
-  background-color: #f9f9f9;
-  border-radius: 3px;
-}
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  padding: .5rem;
-  font-size: .85rem;
-  line-height: 1.4;
-  white-space: pre;
-  overflow: auto;
-  word-wrap: normal;
-  background-color: #f9f9f9;
-}
-pre code {
-  padding: 0;
-  font-size: 100%;
-  color: inherit;
-  background-color: transparent;
-}
-.highlight {
-  margin-bottom: 1rem;
-  border-radius: 4px;
-}
-.highlight pre {
-  margin-bottom: 0;
-}
-
-/* Quotes */
-blockquote {
-  padding: .5rem 1rem;
-  margin: .8rem 0;
-  color: #7a7a7a;
-  border-left: .25rem solid #e5e5e5;
-}
-blockquote p:last-child {
-  margin-bottom: 0;
-}
-@media (min-width: 30rem) {
-  blockquote {
-    padding-right: 5rem;
-    padding-left: 1.25rem;
-  }
-}
-
-img {
-  display: block;
-  margin: 0 0 1rem;
-  border-radius: 5px;
-  max-width: 100%;
-  color: grey;
-  font-style: italic;
-}
-
-/* Tables */
-table {
-  margin-bottom: 1rem;
-  width: 100%;
-  border: 1px solid #e5e5e5;
-  border-collapse: collapse;
-}
-td,
-th {
-  padding: .25rem .5rem;
-  border: 1px solid #e5e5e5;
-}
-tbody tr:nth-child(odd) td,
-tbody tr:nth-child(odd) th {
-  background-color: #f9f9f9;
-}
-
-
-/*
- * Custom type
- *
- * Extend paragraphs with `.lead` for larger introductory text.
- */
-
-.lead {
-  font-size: 1.25rem;
-  font-weight: 300;
-}
-
-
-/*
- * Messages
- *
- * Show alert messages to users. You may add it to single elements like a `<p>`,
- * or to a parent if there are multiple elements to show.
- */
-
-.message {
-  margin-bottom: 1rem;
-  padding: 1rem;
-  color: #717171;
-  background-color: #f9f9f9;
-}
-
-
-/*
- * Container
- *
- * Center the page content.
- */
-
-.container {
-  max-width: 45rem;
-  padding-left:  1rem;
-  padding-right: 1rem;
-  margin-left:  auto;
-  margin-right: auto;
-}
-
-
-/*
- * Masthead
- *
- * Super small header above the content for site name and short description.
- */
-
-.masthead {
-  padding-top:    1rem;
-  padding-bottom: 1rem;
-  margin-bottom:  1rem;
-}
-.masthead-title {
-  margin-top: 0;
-  margin-bottom: 0;
-  color: #505050;
-}
-.masthead-title a {
-  color: #505050;
-}
-.masthead small {
-  font-size: 75%;
-  font-weight: 400;
-  color: #c0c0c0;
-  letter-spacing: 0;
-}
-
-
-/*
- * Posts and pages
- *
- * Each post is wrapped in `.post` and is used on default and post layouts. Each
- * page is wrapped in `.page` and is only used on the page layout.
- */
-
-.page {
-  margin-bottom: 4em;
-}
-
-/* Blog post or page title */
-.page-title,
-.post-title,
-.post-title a {
-  color: #303030;
-}
-.page-title,
-.post-title {
-  margin-top: 0;
-}
-
-/* Meta data line below post title */
-.post-date {
-  display: block;
-  margin-top: -.5rem;
-  margin-bottom: 1rem;
-  color: #9a9a9a;
-}
-
-/* Related posts */
-.related {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  border-top: 1px solid #eee;
-}
-.related-posts {
-  padding-left: 0;
-  list-style: none;
-}
-.related-posts h3 {
-  margin-top: 0;
-}
-.related-posts li small {
-  font-size: 75%;
-  color: #999;
-}
-.related-posts li a:hover {
-  color: #268bd2;
-  text-decoration: none;
-}
-.related-posts li a:hover small {
-  color: inherit;
-}
-
-
-/*
- * Pagination
- *
- * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
- * there are no more previous or next posts to show.
- */
-
-.pagination {
-  overflow: hidden; /* clearfix */
-  margin-left: -1rem;
-  margin-right: -1rem;
-  font-family: "PT Sans", Helvetica, Arial, sans-serif;
-  color: #ccc;
-  text-align: center;
-}
-
-/* Pagination items can be `span`s or `a`s */
-.pagination-item {
-  display: block;
-  padding: 1rem;
-  border: 1px solid #eee;
-}
-.pagination-item:first-child {
-  margin-bottom: -1px;
-}
-
-/* Only provide a hover state for linked pagination items */
-a.pagination-item:hover {
-  background-color: #f5f5f5;
-}
-
-@media (min-width: 30rem) {
-  .pagination {
-    margin: 3rem 0;
-  }
-  .pagination-item {
-    float: left;
-    width: 50%;
-  }
-  .pagination-item:first-child {
-    margin-bottom: 0;
-    border-top-left-radius:    4px;
-    border-bottom-left-radius: 4px;
-  }
-  .pagination-item:last-child {
-    margin-left: -1px;
-    border-top-right-radius:    4px;
-    border-bottom-right-radius: 4px;
-  }
-}

blog/static/js/edition-2/main.js

@@ -1,17 +1,21 @@
-window.onload = function() {
+window.onload = function () {
-  var container = document.querySelector('#toc-aside');
+  let theme = localStorage.getItem("theme");
+  if (theme != null) {
+    set_theme(theme)
+  }
 
+  let container = document.querySelector('#toc-aside');
   if (container != null) {
     resize_toc(container);
     toc_scroll_position(container);
-    window.onscroll = function() { toc_scroll_position(container) };
+    window.onscroll = function () { toc_scroll_position(container) };
   }
 }
 
 function resize_toc(container) {
-  var containerHeight = container.clientHeight;
+  let containerHeight = container.clientHeight;
 
-  var resize = function() {
+  let resize = function () {
     if (containerHeight > document.documentElement.clientHeight - 100) {
       container.classList.add('coarse');
     } else {
@@ -20,8 +24,8 @@ function resize_toc(container) {
   };
   resize();
 
-  var resizeId;
+  let resizeId;
-  window.onresize = function() {
+  window.onresize = function () {
     clearTimeout(resizeId);
     resizeId = setTimeout(resize, 300);
   };
@@ -32,7 +36,6 @@ function toc_scroll_position(container) {
     // skip computation if ToC is not visible
     return;
   }
-  var items = container.querySelectorAll("li")
 
   // remove active class for all items
   for (item of container.querySelectorAll("li")) {
@@ -40,15 +43,15 @@ function toc_scroll_position(container) {
   }
 
   // look for active item
-  var site_offset = document.documentElement.scrollTop;
+  let site_offset = document.documentElement.scrollTop;
-  var current_toc_item = null;
+  let current_toc_item = null;
   for (item of container.querySelectorAll("li")) {
     if (item.offsetParent === null) {
       // skip items that are not visible
       continue;
     }
-    var anchor = item.firstElementChild.getAttribute("href");
+    let anchor = item.firstElementChild.getAttribute("href");
-    var heading = document.querySelector(anchor);
+    let heading = document.querySelector(anchor);
     if (heading.offsetTop <= (site_offset + document.documentElement.clientHeight / 3)) {
       current_toc_item = item;
     } else {
@@ -61,3 +64,35 @@ function toc_scroll_position(container) {
     current_toc_item.classList.add("active");
   }
 }
+
+function toggle_lights() {
+  if (document.documentElement.getAttribute("data-theme") === "dark") {
+    set_theme("light")
+  } else if (document.documentElement.getAttribute("data-theme") === "light") {
+    set_theme("dark")
+  } else {
+    set_theme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark")
+  }
+}
+
+function set_theme(theme) {
+  document.documentElement.setAttribute("data-theme", theme)
+  set_giscus_theme(theme)
+  localStorage.setItem("theme", theme)
+}
+
+function clear_theme_override() {
+  document.documentElement.removeAttribute("data-theme");
+  set_giscus_theme("preferred_color_scheme")
+  localStorage.removeItem("theme")
+}
+
+function set_giscus_theme(theme) {
+  let comment_form = document.querySelector("iframe.giscus-frame");
+  if (comment_form != null) {
+    comment_form.contentWindow.postMessage({
+      giscus: { setConfig: { theme: theme } }
+    }, "https://giscus.app")
+  }
+}
+

blog/templates/edition-2/base.html

@@ -6,17 +6,24 @@
     <meta charset="UTF-8">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
     <meta name="author" content="{{ config.extra.author.name }}">
 
     {% if current_url %}
         <link rel="canonical" href="{{ current_url | safe }}" />
     {% endif %}
-    <link href="/css/edition-2/poole.css" rel="stylesheet">
     <link href="/css/edition-2/main.css" rel="stylesheet">
 
     <link rel="alternate" type="application/rss+xml" title="RSS feed for os.phil-opp.com" href="{{ config.base_url | safe }}/rss.xml" />
 
+    <script>
+        let theme = localStorage.getItem("theme");
+        if (theme != null) {
+            document.documentElement.setAttribute("data-theme", theme);
+        }
+    </script>
+
     <script async src="/js/edition-2/main.js"></script>
 
     <title>{% block title %}{% endblock title %}</title>
@@ -34,6 +41,11 @@
             </div>
         </header>
 
+        <div class="theme-switch">
+            <div class="light-switch" onclick="toggle_lights()" title="Switch between light and dark theme"></div>
+            <div class="light-switch-reset" onclick="clear_theme_override()" title="Clear the theme override and go back to the system theme"></div>
+        </div>
+
         <div>
             {% block toc_aside %}{% endblock toc_aside %}
             <main>{% block main %}{% endblock main %}</main>

blog/templates/edition-2/index.html

@@ -118,6 +118,8 @@
             </p>
         </div>
     </div>
+
+    {{ snippets::dark_mode_note() }}
 </aside>
 
 {% endblock after_main %}

blog/templates/edition-2/page.html

@@ -130,6 +130,8 @@
             {% endfor %}</ul>
         </div>
         {%- endif %}
+
+        {{ snippets::dark_mode_note() }}
     </aside>
 
 {% endblock main %}

blog/templates/snippets.html

@@ -11,6 +11,16 @@
 {% endmacro support %}
 
 {% macro giscus(search_term) %}
+    {% if search_term is number %}
+        {% set discussion_url = "https://github.com/phil-opp/blog_os/discussions/" ~ search_term %}
+    {% else %}
+        {% set discussion_url = `https://github.com/phil-opp/blog_os/discussions/categories/post-comments?discussions_q="` ~ search_term ~ `"` %}
+    {% endif %}
+
+    <p class="comment-note">
+        Do you have a problem, want to share feedback, or discuss further ideas? Feel free to leave a comment here! Please stick to English and follow Rust's <a href="https://www.rust-lang.org/policies/code-of-conduct">code of conduct</a>. This comment thread directly maps to a <a href="{{ discussion_url }}"><em>discussion on GitHub</em></a>, so you can also comment there if you prefer.
+    </p>
+
     <div class="giscus"></div>
 
     <script src="https://giscus.app/client.js"
@@ -25,12 +35,22 @@
     {% endif %}
         data-term="{{ search_term }}"
         data-reactions-enabled="1"
+        data-emit-metadata="1"
         data-theme="preferred_color_scheme"
         crossorigin="anonymous"
         async>
     </script>
 
     <p class="comment-directly-on-github">
-        Instead of authenticating the <a href="https://giscus.app">giscus</a> application, you can also comment directly on the <span class="discussion_link">on GitHub. Just click the <i>"X comments"</i> link at the <a href="#comments">top</a> — or the date of any comment — to go to the GitHub discussion.</span>
+        Instead of authenticating the <a href="https://giscus.app">giscus</a> application, you can also comment directly <a href="{{ discussion_url }}"><em>on GitHub</em></a>.
     </p>
 {% endmacro giscus %}
+
+{% macro dark_mode_note() %}
+<div class="dark-mode-note warning">
+    <h2>Dark Mode is Experimental</h2>
+    <p>
+        We're still working on adjusting text colors, fixing images, and removing inconsistencies. If you have any problems, please <a href="https://github.com/phil-opp/blog_os/issues">file an issue</a>.
+    </p>
+</aside>
+{% endmacro dark_mode_note %}

blog/typos.toml

@@ -0,0 +1,12 @@
+[files]
+extend-exclude = [
+    "*.svg",
+]
+
+[default.extend-words]
+IST = "IST" # Interrupt Stack Table
+SEH = "SEH" # structured exception handling
+
+[default.extend-identifiers]
+TheBegining = "TheBegining" # GitHub user mentioned in status reports
+h015bf61815bb8afe = "h015bf61815bb8afe" # mangled name used in code example