From 1b5af5bcb72368722403a503aa82e6c31766d7b5 Mon Sep 17 00:00:00 2001 From: clearbluejar <3752074+clearbluejar@users.noreply.github.com> Date: Thu, 20 Apr 2023 08:31:27 -0400 Subject: [PATCH 1/5] some init changes --- diff-showdown.js | 61 ++++++++++++++++++++++++ diff2html.html | 46 ++++++++++++++++++ index.html | 87 +++++++++++++++++++++++++++++----- main.js | 111 +++++++++++++++++++++++++++++++------------- mermaid-showdown.js | 59 +++++++++++++++++++++++ 5 files changed, 320 insertions(+), 44 deletions(-) create mode 100644 diff-showdown.js create mode 100644 diff2html.html create mode 100644 mermaid-showdown.js diff --git a/diff-showdown.js b/diff-showdown.js new file mode 100644 index 0000000..d96b6c8 --- /dev/null +++ b/diff-showdown.js @@ -0,0 +1,61 @@ +/** + * Support for Mermaid in Showdown + */ +(function (extension) { + 'use strict'; + + if (typeof showdown !== 'undefined') { + // global (browser or nodejs global) + extension(showdown); + } else if (typeof define === 'function' && define.amd) { + // AMD + define(['showdown'], extension); + } else if (typeof exports === 'object') { + // Node, CommonJS-like + module.exports = extension(require('showdown')); + } else { + // showdown was not found so we throw + throw Error('Could not find showdown library'); + } + +}(function (showdown) { + 'use strict'; + + var mermaidBlocks = []; + + /** + * + * Support for mermaid.js + */ + showdown.extension('diff', function () { + return [ + { + type: 'lang', + regex: '(?:^|\\n)``` ?diff(.*)\\n([\\s\\S]*?)\\n```', + replace: function (s, match) { + var thing = s.match('(?:^|\\n)``` ?diff(.*)\\n([\\s\\S]*?)\\n```'); + var thing_group = thing.length - 1; + mermaidBlocks.push(thing[thing_group]); + var n = mermaidBlocks.length - 1; + return '%PLACEHOLDER' + n + '%'; + } + }, + + { + type: 'output', + filter: function (text) { + var new_text = ''; + for (var i = 0; i < mermaidBlocks.length; ++i) { + var pat = '%PLACEHOLDER' + i + '%'; + //text = text.replace(new RegExp(pat, 'gi'), '
' + mermaidBlocks[i] + '
'); + } + new_text = mermaidBlocks.join('\n\n') + //reset array + mermaidBlocks = []; + return new_text; + } + } + + ]; + }); +})); \ No newline at end of file diff --git a/diff2html.html b/diff2html.html new file mode 100644 index 0000000..752f16f --- /dev/null +++ b/diff2html.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 7e4638d..e85d2e6 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,13 @@ + - Gist HTML Preview - - - - - + Diff HTML Preview + + + + + @@ -23,9 +24,48 @@ max-width: 680px; padding: 0 15px; } + + .container2 { + width: auto; + max-width: 90%; + padding: 0 15px; + } + + table.diff { + font-family: Courier; + border: medium; + width: auto; + } + + .diff_header { + background-color: #e0e0e0; + max-width: 50%; + + } + + td.diff_header { + text-align: right + } + + .diff_next { + background-color: #c0c0c0 + } + + .diff_add { + background-color: #aaffaa + } + + .diff_chg { + background-color: #ffff77 + } + + .diff_sub { + background-color: #ffaaaa + } +

@@ -33,8 +73,9 @@
-

Gist HTML Preview

-

If File Name is empty, it will preview index.html or the first file as default.

+

diff HTML Diff Preview

+

If File Name is empty, it will preview index.html or the first file + as default.

@@ -46,14 +87,38 @@

Gist HTML Preview

-
+
- Fork me on GitHub + Fork me on GitHub
+ + + + + + + + + + + + + + +
+ + - + + \ No newline at end of file diff --git a/main.js b/main.js index 13e9a1b..5295c11 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,18 @@ (function () { - function showMainPage () { + function showMainPage() { document.getElementById('main').className = 'container'; // remove class 'hide' document.getElementById('loading').className += ' hide'; // add class 'hide' } - function showError (message) { + function showError(message) { document.getElementById('alert-box').innerHTML += '
' - + '×' - + message - + '
'; + + '×' + + message + + ''; } - function submit () { + function submit() { var query = document.getElementById('gist_id').value; var fileName = document.getElementById('file_name').value; if (fileName) { @@ -44,35 +44,80 @@ // 4. fetch data fetch('https://api.github.com/gists/' + gistId) - .then(function (res) { - return res.json().then(function (body) { - if (res.status === 200) { - return body; - } - console.log(res, body); // debug - throw new Error('Gist ' + gistId + ', ' + body.message.replace(/\(.*\)/, '')); - }); - }) - .then(function (info) { - if (fileName === '') { - for (var file in info.files) { - // index.html or the first file - if (fileName === '' || file === 'index.html') { - fileName = file; + .then(function (res) { + return res.json().then(function (body) { + if (res.status === 200) { + return body; + } + console.log(res, body); // debug + throw new Error('Gist ' + gistId + ', ' + body.message.replace(/\(.*\)/, '')); + }); + }) + .then(function (info) { + if (fileName === '') { + for (var file in info.files) { + // index.html or the first file + if (fileName === '' || file === 'index.html') { + fileName = file; + } } } - } - if (info.files.hasOwnProperty(fileName) === false) { - throw new Error('File ' + fileName + ' is not exist'); - } + if (info.files.hasOwnProperty(fileName) === false) { + throw new Error('File ' + fileName + ' is not exist'); + } - // 5. write data - var content = info.files[fileName].content; - document.write(content); - }) - .catch(function (err) { - showMainPage(); - showError(err.message); - }); + // 5. write data + var content = info.files[fileName].content; + showdown.setOption('moreStyling', true); + showdown.setOption('simpleLineBreaks', true); + showdown.setOption('tables', true); + showdown.setFlavor('github'); + + //var converter = new showdown.Converter({ extensions: ['mermaid'] }); + var converter = new showdown.Converter({ extensions: ['diff'] }); + + html = converter.makeHtml(content); + + + //document.write(html); + //var targetElement = document.getElementById('myDiffElement'); + //targetElement.innerHTML = html + //mermaid.initialize({ startOnLoad: true }); + //alert(hljs.listLanguages()); + var targetElement = document.getElementById('myDiffElement'); + var configuration = { + drawFileList: true, + fileListToggle: false, + fileListStartVisible: true, + fileContentToggle: false, + matching: 'lines', + outputFormat: 'side-by-side', + synchronisedScroll: true, + highlight: true, + renderNothingWhenEmpty: false, + diffStyle: 'char', + fileContentToggle: true, + //highlightLanguages: { '856 Meta': 'c' } + }; + var diff2htmlUi = new Diff2HtmlUI(targetElement, html, configuration); + diff2htmlUi.draw(); + + // force c syntax + const files = diff2htmlUi.targetElement.querySelectorAll('.d2h-file-wrapper'); + files.forEach(file => { + const language = file.getAttribute('data-lang'); + file.setAttribute('data-lang', 'c') + console.log(language); + }); + + diff2htmlUi.highlightCode(); + + showMainPage(); + + }) + .catch(function (err) { + showMainPage(); + showError(err.message); + }); })(); diff --git a/mermaid-showdown.js b/mermaid-showdown.js new file mode 100644 index 0000000..1c039ba --- /dev/null +++ b/mermaid-showdown.js @@ -0,0 +1,59 @@ +/** + * Support for Mermaid in Showdown + */ +(function (extension) { + 'use strict'; + + if (typeof showdown !== 'undefined') { + // global (browser or nodejs global) + extension(showdown); + } else if (typeof define === 'function' && define.amd) { + // AMD + define(['showdown'], extension); + } else if (typeof exports === 'object') { + // Node, CommonJS-like + module.exports = extension(require('showdown')); + } else { + // showdown was not found so we throw + throw Error('Could not find showdown library'); + } + +}(function (showdown) { + 'use strict'; + + var mermaidBlocks = []; + + /** + * + * Support for mermaid.js + */ + showdown.extension('mermaid', function () { + return [ + { + type: 'lang', + regex: '(?:^|\\n)``` ?mermaid(.*)\\n([\\s\\S]*?)\\n```', + replace: function (s, match) { + var thing = s.match('(?:^|\\n)``` ?mermaid(.*)\\n([\\s\\S]*?)\\n```'); + var thing_group = thing.length - 1; + mermaidBlocks.push(thing[thing_group]); + var n = mermaidBlocks.length - 1; + return '%PLACEHOLDER' + n + '%'; + } + }, + + { + type: 'output', + filter: function (text) { + for (var i = 0; i < mermaidBlocks.length; ++i) { + var pat = '%PLACEHOLDER' + i + '%'; + text = text.replace(new RegExp(pat, 'gi'), '
' + mermaidBlocks[i] + '
'); + } + //reset array + mermaidBlocks = []; + return text; + } + } + + ]; + }); +})); \ No newline at end of file From d20130ac6753e3d5852ad62da5a77725926fb118 Mon Sep 17 00:00:00 2001 From: clearbluejar <3752074+clearbluejar@users.noreply.github.com> Date: Thu, 20 Apr 2023 08:34:24 -0400 Subject: [PATCH 2/5] another1 --- mermaid-showdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mermaid-showdown.js b/mermaid-showdown.js index 1c039ba..b4f21a6 100644 --- a/mermaid-showdown.js +++ b/mermaid-showdown.js @@ -48,7 +48,7 @@ var pat = '%PLACEHOLDER' + i + '%'; text = text.replace(new RegExp(pat, 'gi'), '
' + mermaidBlocks[i] + '
'); } - //reset array + //reset array3 mermaidBlocks = []; return text; } From 6578241e1d2a54df8f21c260cb1d0b73c9b5f103 Mon Sep 17 00:00:00 2001 From: clearbluejar <3752074+clearbluejar@users.noreply.github.com> Date: Thu, 27 Apr 2023 08:31:05 -0400 Subject: [PATCH 3/5] first attempt --- index.html | 7 +- main.js | 249 +++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 207 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index e85d2e6..01a6a77 100644 --- a/index.html +++ b/index.html @@ -73,8 +73,8 @@
-

diff HTML Diff Preview

-

If File Name is empty, it will preview index.html or the first file +

Diff Gist HTML Preview

+

If File Name is empty, it will preview the first file as default.

@@ -96,6 +96,9 @@

diff HTML Diff Preview

data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
+
+
+ diff --git a/main.js b/main.js index 5295c11..557885d 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,9 @@ (function () { function showMainPage() { - document.getElementById('main').className = 'container'; // remove class 'hide' + document.getElementById('main').className = 'container'; // remove class 'hide' document.getElementById('loading').className += ' hide'; // add class 'hide' + document.getElementById('files').className = 'container'; // remove class 'hide' + document.getElementById('gist_details').className = 'container'; // remove class 'hide' } function showError(message) { @@ -12,6 +14,58 @@ + '
'; } + // https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript + function formatBytes(bytes, decimals = 2) { + if (!+bytes) return '0 Bytes' + + const k = 1024 + const dm = decimals < 0 ? 0 : decimals + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + + const i = Math.floor(Math.log(bytes) / Math.log(k)) + + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` + } + + function addGistDetails(info) { + var html = `

Gist Details: