Branch

Add a toggle switch for chaning diff view

Sat Apr 12 2025

Tucker McKnight

Can switch between the before and after diffs being
shown side-by-side or stacked on top of each other.

Also added some tasks for later.

ff579b8ae2e980b6400229ee6d930221e99af2a0

darcs pull https://repos.tuckerm.us/repos/eleventy-darcs/branches/main -h ff579b8ae2e980b6400229ee6d930221e99af2a0
README.md:34
Before
After 
- [ ] remember the user's side-by-side/unified diff choice
- [ ] move javascript into its own file instead of being at the bottom of `_includes/main.njk`
_includes/main.njk:98
Before
After 

      const toggleUnifiedMode = (e) => {
        const diffs = document.getElementById('diffs')
        const afterDiffs = document.querySelectorAll('.diff-right')
        if (e.checked) {
          diffs.classList.add("unified")
          afterDiffs.forEach((elem) => {
            elem.classList.remove('border-start', 'ps-2')
          })
        }
        else {
          diffs.classList.remove("unified")
          afterDiffs.forEach((elem) => {
            elem.classList.add('border-start', 'ps-2')
          })
        }
      }
main.css:7
Before 
  padding: 10px 4px;
After
main.css:14
Before 
.unified {
After 
[data-bs-theme=dark] [data-type=after] mark {
  background-color: rgba(51, 247, 160, .1); /* different green for dark mode; looks better */
}
.unified .diff {
main.css:25
Before 
  flex: auto;
After 
  flex-basis: 100%;
patch.njk:33
Before 
  <div class="row ">
After 
  <div class="row my-2">
    <div class="col-auto d-flex align-items-center fs-4">
      <i class="bi bi-layout-split"></i>
      <div class="form-check form-switch ms-2 mb-1">
        <input class="form-check-input" type="checkbox" id="unifiedModeSwitch" value="unified" onchange="toggleUnifiedMode(this)" aria-label="Toggle switch for unified or side by side diff view">
      </div>
      <i class="bi bi-hr"></i>
    </div>
  </div>
  <div class="row" id="diffs">
patch.njk:47
Before 
      <div class="d-flex">
After 
      <div class="diff d-flex">