Add a toggleable rendered markdown page for md files

c96099269241f024408717eaca75db25f26446f4

Tucker McKnight <tucker@pangolin.lan> | Wed Dec 31 2025

Add a toggleable rendered markdown page for md files

Adds a toggle switch for showing rendered markdown content or
the un-rendered original file contents.

Page will obey the toggle switch state on page load.

Move the "view raw file" link to a separate row, since the "show blame"
toggle switch doesn't show when the rendered markdown page is showing.

Also change the permalink for raw files so that it has the original
file's extension.
frontend/main.js:47
Before
46
47
48










49


50
51

const toggleLastTouch = (event) => {
  const isOn = event.target.checked
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
  const annotations = document.getElementById("annotations")
⁣
⁣
  if (isOn) {
    annotations.classList.remove("d-none")
  } else {
After
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

const toggleLastTouch = (event) => {
  const isOn = event.target.checked
  setShowLastTouch(isOn)
}

const toggleRenderedContent = (event) => {
  const isOn = event.target.checked
  setRenderedContent(isOn)
}

const renderedContent = document.querySelector(".rendered-content")
const codeContent = document.querySelector(".code-content")
const annotations = document.getElementById("annotations")

const setShowLastTouch = (isOn) => {
  if (isOn) {
    annotations.classList.remove("d-none")
  } else {
frontend/main.js:55
Before
54
55
56










57
58

59
  }
}

⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
document.getElementById("showLastTouch")?.addEventListener('click', toggleLastTouch)

⁣
const copyPull = (event) => {
  const hash = event.target.dataset.hash
After
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  }
}

const setRenderedContent = (isOn) => {
  if (isOn) {
    renderedContent.classList.remove("d-none")
    codeContent.classList.add("d-none")
  } else {
    renderedContent.classList.add("d-none")
    codeContent.classList.remove("d-none")
  }
}

document.getElementById("showLastTouch")?.addEventListener('click', toggleLastTouch)
document.getElementById("showRenderedContent")?.addEventListener('click', toggleRenderedContent)

const copyPull = (event) => {
  const hash = event.target.dataset.hash
frontend/main.js:129
Before
128
129











})

⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
showBranchesResults(searchBox.value)
After
128
129
130
131
132
133
134
135
136
137
138
139
140
})

showBranchesResults(searchBox.value)

const pageLoadLastTouch = document.getElementById("showLastTouch")
if (pageLoadLastTouch) {
  setShowLastTouch(pageLoadLastTouch.checked)
}

const pageLoadRenderedContent = document.getElementById("showRenderedContent")
if (pageLoadRenderedContent) {
  setRenderedContent(pageLoadRenderedContent.checked)
}
js_templates/file.ts:9
Before
8
9
10
11

12
  const lineNumbers = eleventyConfig.getFilter("lineNumbers")
  const highlightCode = eleventyConfig.getFilter("highlightCode")
  const languageExtension = eleventyConfig.getFilter("languageExtension")

⁣
  return `
    <div class="row my-3">
After
8
9
10
11
12
13
  const lineNumbers = eleventyConfig.getFilter("lineNumbers")
  const highlightCode = eleventyConfig.getFilter("highlightCode")
  const languageExtension = eleventyConfig.getFilter("languageExtension")
  const renderContentIfAvailable = eleventyConfig.getFilter("renderContentIfAvailable")

  return `
    <div class="row my-3">
js_templates/file.ts:30
Before
29
30
31

32
33
    <div class="row">
      <div class="col">
        <p>Files snapshot from <span class="font-monospace">${data.fileInfo.branchName}</span></p>
⁣
      </div>
    </div>
    ${isDirectory(data.fileInfo.file, data.fileInfo.repoName, data.fileInfo.branchName) ?
After
29
30
31
32
33
34
    <div class="row">
      <div class="col">
        <p>Files snapshot from <span class="font-monospace">${data.fileInfo.branchName}</span></p>
        <p><a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/raw/${data.fileInfo.file.split('.').map(filePart => slugify(filePart)).join('.')}">View raw file</a></p>
      </div>
    </div>
    ${isDirectory(data.fileInfo.file, data.fileInfo.repoName, data.fileInfo.branchName) ?
js_templates/file.ts:46
Before
After
main.ts:352
Before
351
352
353
354
355
356
      permalink: (data) => {
        const repoName = data.fileInfo.repoName
        const branchName = data.fileInfo.branchName
        return `${reposPath}/${eleventyConfig.getFilter("slugify")(repoName)}/branches/${eleventyConfig.getFilter("slugify")(branchName)}/raw/${eleventyConfig.getFilter("slugify")(data.fileInfo.file)}`
      },
    }
  )
After
351
352
353
354
355
356
      permalink: (data) => {
        const repoName = data.fileInfo.repoName
        const branchName = data.fileInfo.branchName
        return `${reposPath}/${eleventyConfig.getFilter("slugify")(repoName)}/branches/${eleventyConfig.getFilter("slugify")(branchName)}/raw/${data.fileInfo.file.split('.').map(filePart => eleventyConfig.getFilter("slugify")(filePart)).join('.')}`
      },
    }
  )