From 4f0160ce576dfa54585386ddf672d7471e72e27e Mon Sep 17 00:00:00 2001 From: Kayce Basques Date: Sat, 20 Jul 2024 14:54:34 -0700 Subject: [PATCH] finish diff2html post --- _static/biodigitaljazz.css | 16 +++++ blog/diff2html.rst | 126 +++++++++++++++++++++++++++++++++++++ rss.xml | 13 +++- 3 files changed, 153 insertions(+), 2 deletions(-) diff --git a/_static/biodigitaljazz.css b/_static/biodigitaljazz.css index 912f0a7..f636c77 100644 --- a/_static/biodigitaljazz.css +++ b/_static/biodigitaljazz.css @@ -12,6 +12,22 @@ body { max-width: 800px; margin: 0 auto; padding: 1em; + section { + div.highlight { + background-color: floralwhite; + } + li { + p { + margin: 0; + } + } + pre { + margin-block-end: 0; + margin-block-start: 0; + padding-block-end: 1em; + padding-block-start: 1em; + } + } } blockquote { diff --git a/blog/diff2html.rst b/blog/diff2html.rst index 5c919b6..0ea519b 100644 --- a/blog/diff2html.rst +++ b/blog/diff2html.rst @@ -5,3 +5,129 @@ diff2html + GitHub API = ??? ============================ *2024 Jul 20* + +.. _Get a commit: https://docs.github.com/en/rest/commits/commits?apiVersion=2022-11-28#get-a-commit + +This is just a quick & dirty (yeehaw) post to get community feedback on whether +"I'm holding this thing correctly." If anything useful comes out of the +discussion I will be a good OSSamaritan and translate into PRs, issues, +feature requests, etc. + +I'm trying to use `diff2html `__ and the GitHub API +together. That is, I pull commit data with the `Get a commit`_ endpoint +and want to render the diff with diff2html. + +I get commit data like this: + +.. code-block:: js + + // Example commit that demonstrates almost all the ways you can change a file + const url = 'https://api.github.com/repos/kaycebasques/biodigitaljazz/commits/f0a19c4d1d9267669dcc0c124387e057cbda83ac'; + const headers = { + 'X-GitHub-Api-Version': '2022-11-28', + 'Accept': 'application/vnd.github+json' + }; + const response = await fetch(url, headers); + const data = await response.json(); + console.log(data); + +.. _demo commit: https://github.com/kaycebasques/biodigitaljazz/commit/f0a19c4d1d9267669dcc0c124387e057cbda83ac + +The GitHub endpoint lists a bunch of different ways that a file +can change: + +* ``added`` +* ``removed`` +* ``modified`` +* ``renamed`` +* ``copied`` +* ``changed`` +* ``unchanged`` + +I created a `demo commit`_ to attempt to trigger all the change types +but couldn't figure out the last threee (``copied``, ``changed``, and +``unchanged``). + +Here's the thing that I feel I'm holding wrong. On my naive first attempt, +I basically passed the commit data from GitHub directly to diff2html, +but nothing got rendered. On closer inspection it seems that diff2html expects +more metadata than what GitHub provides. I concluded that I need to manually assembly +the diff data into the format that diff2html expects. + +.. code-block:: js + + // Construct the diff string in the "unified format" that diff2html requires + const parentCommitSha = data.parents[0].sha; + let diffLines = []; + for (let i = 0; i < data.files.length; i++) { + const file = data.files[i]; + const {sha, filename, patch} = file; + // 100644 means non-executable file which may not always be true but there doesn't + // seem to be a way to extract file mode from this GitHub endpoint + const fileMode = '100644'; + switch (file.status) { + case 'added': + diffLines.push(`diff --git a/${filename} b/${filename}`); + diffLines.push(`new file mode ${fileMode}`); + diffLines.push(`index 000000000..${parentCommitSha}`); + diffLines.push(`--- /dev/null`); + diffLines.push(`+++ b/${filename}`); + break; + case 'removed': + diffLines.push(`diff --git a/${filename} b/${filename}`); + diffLines.push(`deleted file mode ${fileMode}`); + diffLines.push(`index ${sha}..000000000`); + diffLines.push(`--- a/${filename}`); + diffLines.push(`+++ /dev/null`); + break; + case 'renamed': + const previousFilename = file.previous_filename; + diffLines.push(`diff --git a/${previousFilename} b/${filename}`); + diffLines.push(`similarity index 100%`); + diffLines.push(`rename from ${previousFilename}`); + diffLines.push(`rename to ${filename}`); + break; + case 'copied': // ??? + case 'changed': // ??? + case 'unchanged': // ??? + case 'modified': + diffLines.push(`diff --git a/${filename} b/${filename}`); + diffLines.push(`index ${sha}..${parentCommitSha}`); + diffLines.push(`--- a/${filename}`); + diffLines.push(`+++ b/${filename}`); + break; + } + if (patch) { + diffLines.push(patch); + } + } + const diffString = diffLines.join('\n'); + console.log(diffString); + +So am I actually supposed to manually construct the diff strings like this? +Or is there some way to finagle the GitHub API into providing the data in the +way that diff2html expects? Or maybe I missed a way to pass the GitHub API data +directly to diff2html and let diff2html assemble it? + +(For sake of completeness) here's how I render with diff2html: + +.. code-block:: js + + var targetElement = document.getElementById('myDiffElement'); + var configuration = { + drawFileList: false, + fileListToggle: false, + fileListStartVisible: false, + fileContentToggle: false, + matching: 'lines', + outputFormat: 'line-by-line', + synchronisedScroll: true, + highlight: true, + renderNothingWhenEmpty: false, + }; + var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration); + diff2htmlUi.draw(); + diff2htmlUi.highlightCode(); + +* `Full demo source code `_ +* `Full demo preview `_ diff --git a/rss.xml b/rss.xml index 1a4a546..523c251 100644 --- a/rss.xml +++ b/rss.xml @@ -1,7 +1,7 @@ - biodigitaljazz.net + Bio-digital jazz, man https://biodigitaljazz.net Given that you're following this blog, and the fact that you even @@ -11,9 +11,18 @@ y'all." en-us - Thu, 25 Jan 2024 00:00:00 +0000 + Sat, 20 Jul 2024 00:00:00 +0000 + + diff2html + GitHub API = ??? + https://biodigitaljazz.net/blog/diff2html.html + + Am I holding this right? + + Sat, 20 Jul 2024 00:00:00 +0000 + https://biodigitaljazz.net/blog/diff2html.html + pCrowDoodle, my "desirable difficulty" laptop https://biodigitaljazz.net/blog/pcrowdoodle.html