How to compare modified Jekyll Theme to original?

Question

I've modified the Jekyll Cayman theme. How do I track it to the original so I can see when original changes and I need to recopy and modify it?

I tried using wget followed by diff but the results were nonsensical. Here are the original and modified links that display fine in the browser but appear to be garbage when downloaded with wget :

• Original theme - jekyll-theme-cayman.scss

• Modified theme - jekyll-theme-cayman.scss

Answer 1

GitHub Pages are Rendered in HTML

The file you view using GitHub will contain a plethora of HTML. What you want is to skip the HTML and download the raw code as this Stack Overflow answer describes:

• How can I check out a single file from GitHub without cloning the whole repository?

---

Step-by-Step Instructions

First download the original Jekyll Cayman Theme file in raw format:

wget -O original 'https://raw.githubusercontent.com/pages-themes/cayman/master/_sass/jekyll-theme-cayman.scss'

Then download the modified Jekyll Cayman Theme file in raw format:

wget -O modified 'https://raw.githubusercontent.com/pippim/pippim.github.io/main/_sass/jekyll-theme-cayman.scss'

Now compare the two files with the diff command:

$ diff original modified

0a1,5
> /* Github Pages Jekyll Cayman Theme. Make code block font size larger. Copied from:
>  * https://github.com/pages-themes/cayman/blob/master/_sass/jekyll-theme-cayman.scss
>  * Source code version: January 2021
>  */
> 
223c228
<     font-size: 0.9rem;
---
>     font-size: 96%;  // Change 0.9rem to 96% for proper size in headings
238a244,248
>     
>     /** Code Block scroll bar From: 
>      ** https://stackoverflow.com/a/38490989/6929343 **/
>     max-height: 400px;
>     overflow-y: auto;
277a288
> 

---

Analyzing the diff Results

The > shows what you've added to the theme. If there are < then that is what your copy of the theme is missing. When that happens, copy the theme's file over again to your repo and then add back your revisions.

In this case only a single line appears in the original that isn't in the modified version:

<     font-size: 0.9rem;

As this line was intentionally deleted from the original version (because it wasn't working properly) the original version has not been updated since it was copied and modified.