Add git history to pages (#47)

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended"],
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "rules": {},
+  "ignorePatterns": ["src/_build/**/*"],
+  "env": {
+    "browser": true
+  }
+}

.prettierrc.toml

@@ -0,0 +1,4 @@
+trailingComma = "es5"
+tabWidth = 2
+semi = false
+singleQuote = true

requirements.txt

@@ -1,4 +1,6 @@
+gitpython
 myst-parser
+pandas
 pre-commit
 pydata-sphinx-theme
 sphinx>=7

src/_static/css/custom.css

@@ -30,3 +30,53 @@ h3 {
     max-width: fit-content;
   }
 }
+
+.modal-checkbox[type='checkbox']:checked ~ div.modal-background {
+  display: flex !important;
+}
+
+div.modal-background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+div.modal-foreground {
+  background: var(--pst-color-background);
+  z-index: 2;
+}
+
+input.modal-checkbox {
+  display: none;
+}
+
+/* Label CSS adapted from the PST css used for <a> */
+label.modal-checkbox-label {
+  cursor: pointer;
+  word-wrap: break-word;
+  color: var(--pst-color-link);
+  text-decoration: underline;
+  text-decoration-thickness: max(1px, 0.0625rem);
+  text-underline-offset: 0.1578em;
+}
+label.modal-checkbox-label:hover {
+  text-decoration-skip: none;
+  color: var(--pst-color-link-hover);
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+}
+
+/* Add a little spacing around the git history table elements */
+.git-history td,
+th {
+  padding: 0.5em;
+  border: 1px solid var(--pst-color-border-muted);
+}

src/_static/js/custom.js

@@ -0,0 +1,27 @@
+/** Set up event listeners for the git history modal */
+function setupGitHistory() {
+  const checkbox = document.getElementById('history-checkbox')
+  const background = document.getElementById('history-modal-background')
+  const foreground = document.getElementById('history-modal-foreground')
+
+  // Click on the background to close the modal
+  background.onclick = () => {
+    checkbox.checked = ''
+  }
+
+  // Prevent clicks on the table from closing the modal
+  foreground.onclick = (event) => {
+    event.stopPropagation()
+  }
+
+  // Listen for escape key to close modal
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && checkbox.checked) {
+      checkbox.checked = ''
+    }
+  })
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  setupGitHistory()
+})

src/_templates/git-history.html

@@ -0,0 +1,10 @@
+<label for="history-checkbox" class="modal-checkbox-label">
+  <i class="fa-solid fa-clock-rotate-left"></i>
+  Show article history
+</label>
+<input id="history-checkbox" type="checkbox" class="modal-checkbox" />
+<div id="history-modal-background" class="modal-background">
+  <div id="history-modal-foreground" class="modal-foreground">
+    <div class="modal-body">{{ add_git_history() }}</div>
+  </div>
+</div>

src/conf.py

@@ -1,3 +1,9 @@
+import pathlib
+from collections import defaultdict
+
+import git
+import pandas as pd
+
 # Configuration file for the Sphinx documentation builder.
 #
 # Options for this theme, pydata:
@@ -53,7 +59,7 @@
 html_theme_options = {
     "footer_start": ["copyright"],
     "footer_end": ["sphinx-version"],
-    "secondary_sidebar_items": ["page-toc", "edit-this-page"],
+    "secondary_sidebar_items": ["page-toc", "edit-this-page", "git-history"],
     "logo": {"text": "OAWiki"},
     "use_edit_page_button": True,
 }
@@ -71,6 +77,48 @@
 notfound_urls_prefix = ''
 
 
+def add_context_funcs(app, pagename, templatename, context, doctree):
+    repo_url = "https://github.com/observational-dev/oawiki"
+    repo = git.Repo(pathlib.Path(__file__).parents[1])
+
+    def add_git_history() -> str:
+        """Generate the git history content for each page.
+
+        Returns
+        -------
+        str
+            Git history rendered as HTML.
+        """
+        if "page_source_suffix" in context:
+            filename = (pathlib.Path(__file__).parent / pagename).with_suffix(
+                context["page_source_suffix"]
+            )
+            commit_log = defaultdict(list)
+            for commit in repo.iter_commits(paths=filename):
+                commit_log["Date"].append(
+                    f'<a href="{repo_url}/commit/{commit.hexsha}">'
+                    f"{str(commit.authored_datetime)}</a>"
+                )
+                commit_log["Author"].append(commit.author.name)
+                commit_log["Message"].append(commit.summary)
+            return (
+                pd.DataFrame(commit_log)
+                .sort_values("Date")
+                .to_html(
+                    index=False,
+                    escape=False,
+                    classes="git-history",
+                    justify="center",
+                )
+            )
+        return ""
+
+    context["add_git_history"] = add_git_history
+
+
 def setup(app):
     # Styles applied to the entire wiki
     app.add_css_file("css/custom.css")
+    app.add_js_file("js/custom.js")
+
+    app.connect("html-page-context", add_context_funcs)