From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component
---
 packages/dev-tools-pages/ts/highlight.tsx | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 packages/dev-tools-pages/ts/highlight.tsx

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
new file mode 100644
index 000000000..0c4602d51
--- /dev/null
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -0,0 +1,6 @@
+const highlight = require('highlight.js/lib/highlight');
+const javascript = require('highlight.js/lib/languages/javascript');
+
+highlight.registerLanguage('javascript', javascript);
+
+export default highlight;
-- 
cgit v1.2.3


From 1ae9f68db8c9768e68d1eab1f411b346e9512c1c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:10:35 +0100
Subject: Content (#7)

* optional children in List component

* added real content to trace page

* added real content to cov page

* add support for json highlighting

* real content on compiler page

* real content on profiler page

* remove unused import

* remove list from compiler page

* wrap code components in pages with breakout component

* fix font size on text

* fix typo
---
 packages/dev-tools-pages/ts/highlight.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 0c4602d51..9d7844c89 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,8 @@
 const highlight = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
+const json = require('highlight.js/lib/languages/json');
 
 highlight.registerLanguage('javascript', javascript);
+highlight.registerLanguage('json', json);
 
 export default highlight;
-- 
cgit v1.2.3


From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:19:56 +0100
Subject: Feature/syntaxhighlighting (#9)

* wip code highlighting of lines

* Implements gutter component

* WIP: Profiler with gutter

* cleaned up highlight code

* Removes before content for gutter styling

* Styles gutter

* Add correct Profiler code content

* Adds color variable for gutter gray

* refactor code component width gutter and diffing
---
 packages/dev-tools-pages/ts/highlight.tsx | 47 ++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 9d7844c89..7187118d0 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,8 +1,47 @@
-const highlight = require('highlight.js/lib/highlight');
+const hljs = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
 
-highlight.registerLanguage('javascript', javascript);
-highlight.registerLanguage('json', json);
+hljs.registerLanguage('javascript', javascript);
+
+interface PatchInterface {
+    [key: string]: string;
+}
+
+var PATCH_TYPES: PatchInterface = {
+    '+': 'addition',
+    '-': 'deletion',
+    '!': 'change',
+};
+
+function diffHighlight(language: string, code: any, gutter: any) {
+    return code
+        .split(/\r?\n/g)
+        .map((line: string, index: number) => {
+            var type;
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+                type = 'chunk';
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+                type = 'header';
+            } else {
+                type = PATCH_TYPES[line[0] as string] || 'null';
+                line = line.replace(/^[+\-! ]/, '');
+            }
+
+            const g = gutter[index];
+
+            return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
+                hljs.highlight(language, line).value
+            }</span>`;
+        })
+        .join('\n');
+}
+
+function highlight(language: string, code: string, diff: boolean, gutter: any) {
+    if (diff) {
+        return diffHighlight(language, code, gutter);
+    }
+
+    return hljs.highlight(language, code).value;
+}
 
 export default highlight;
-- 
cgit v1.2.3


From 1581ced6ec828d5b404dbcd1d7a09c0d8778a442 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 14:08:55 +0200
Subject: add json support to highlight

---
 packages/dev-tools-pages/ts/highlight.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 7187118d0..8dff4c9e9 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,7 +1,9 @@
 const hljs = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
+const json = require('highlight.js/lib/languages/json');
 
 hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
 
 interface PatchInterface {
     [key: string]: string;
-- 
cgit v1.2.3


From 6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 09:05:52 +0100
Subject: fix code highlighting with ...

---
 packages/dev-tools-pages/ts/highlight.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 8dff4c9e9..64c5f9a17 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -38,12 +38,30 @@ function diffHighlight(language: string, code: any, gutter: any) {
         .join('\n');
 }
 
-function highlight(language: string, code: string, diff: boolean, gutter: any) {
+interface highlightProps {
+    language: string;
+    code: string;
+    diff?: boolean;
+    gutter?: boolean;
+    etc?: boolean;
+}
+
+function highlight({ language, code, diff, gutter, etc }: highlightProps) {
     if (diff) {
         return diffHighlight(language, code, gutter);
     }
 
-    return hljs.highlight(language, code).value;
+    let hlCode = hljs.highlight(language, code).value;
+
+    if (!etc) {
+        return hlCode;
+    }
+
+    var hc = hlCode.split(/\r?\n/g);
+    hc.splice(1, 0, '    ...');
+    hc.splice(hc.length - 1, 0, '    ...');
+
+    return hc.join('\n');
 }
 
 export default highlight;
-- 
cgit v1.2.3


From eb9d80214693f7fb7c95ab6da546b6d89d33bee6 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 09:07:25 +0100
Subject: rename pesudo element in code gutter

---
 packages/dev-tools-pages/ts/highlight.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 64c5f9a17..6efba02f8 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -31,7 +31,7 @@ function diffHighlight(language: string, code: any, gutter: any) {
 
             const g = gutter[index];
 
-            return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
+            return `<span data-gutter="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
                 hljs.highlight(language, line).value
             }</span>`;
         })
-- 
cgit v1.2.3


From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 16 Nov 2018 11:05:30 +0100
Subject: fix linting + code syntax for statless components

---
 packages/dev-tools-pages/ts/highlight.tsx | 46 ++++++++++++++++---------------
 1 file changed, 24 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 6efba02f8..cef03904a 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,6 @@
-const hljs = require('highlight.js/lib/highlight');
-const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
+import * as hljs from 'highlight.js/lib/highlight';
+import * as javascript from 'highlight.js/lib/languages/javascript';
+import * as json from 'highlight.js/lib/languages/json';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -9,59 +9,61 @@ interface PatchInterface {
     [key: string]: string;
 }
 
-var PATCH_TYPES: PatchInterface = {
+const PATCH_TYPES: PatchInterface = {
     '+': 'addition',
     '-': 'deletion',
     '!': 'change',
 };
 
-function diffHighlight(language: string, code: any, gutter: any) {
+function diffHighlight(language: string, code: any, gutter: any): string {
     return code
         .split(/\r?\n/g)
         .map((line: string, index: number) => {
-            var type;
-            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+            let type;
+            let currentLine = line;
+
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
                 type = 'chunk';
-            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
                 type = 'header';
             } else {
-                type = PATCH_TYPES[line[0] as string] || 'null';
-                line = line.replace(/^[+\-! ]/, '');
+                type = PATCH_TYPES[currentLine[0]] || 'null';
+                currentLine = currentLine.replace(/^[+\-! ]/, '');
             }
 
             const g = gutter[index];
 
-            return `<span data-gutter="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
-                hljs.highlight(language, line).value
+            return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
+                hljs.highlight(language, currentLine).value
             }</span>`;
         })
         .join('\n');
 }
 
-interface highlightProps {
+interface HighlightProps {
     language: string;
     code: string;
-    diff?: boolean;
-    gutter?: boolean;
-    etc?: boolean;
+    isDiff?: boolean;
+    gutter?: [];
+    isEtc?: boolean;
 }
 
-function highlight({ language, code, diff, gutter, etc }: highlightProps) {
-    if (diff) {
+function highlight({ language, code, isDiff, gutter, isEtc }: HighlightProps): string {
+    if (isDiff) {
         return diffHighlight(language, code, gutter);
     }
 
-    let hlCode = hljs.highlight(language, code).value;
+    const hlCode = hljs.highlight(language, code).value;
 
-    if (!etc) {
+    if (!isEtc) {
         return hlCode;
     }
 
-    var hc = hlCode.split(/\r?\n/g);
+    const hc = hlCode.split(/\r?\n/g);
     hc.splice(1, 0, '    ...');
     hc.splice(hc.length - 1, 0, '    ...');
 
     return hc.join('\n');
 }
 
-export default highlight;
+export { highlight };
-- 
cgit v1.2.3


From b0c22a222e09ef8008a1ef7cf79e28b73961560a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:15:17 +0100
Subject: use lodash.map insted of array.map

---
 packages/dev-tools-pages/ts/highlight.tsx | 36 +++++++++++++++----------------
 1 file changed, 17 insertions(+), 19 deletions(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index cef03904a..02f4a753e 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,7 @@
 import * as hljs from 'highlight.js/lib/highlight';
 import * as javascript from 'highlight.js/lib/languages/javascript';
 import * as json from 'highlight.js/lib/languages/json';
+import * as _ from 'lodash';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -16,28 +17,25 @@ const PATCH_TYPES: PatchInterface = {
 };
 
 function diffHighlight(language: string, code: any, gutter: any): string {
-    return code
-        .split(/\r?\n/g)
-        .map((line: string, index: number) => {
-            let type;
-            let currentLine = line;
+    return _.map(code.split(/\r?\n/g), (line: string, index: number) => {
+        let type;
+        let currentLine = line;
 
-            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
-                type = 'chunk';
-            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
-                type = 'header';
-            } else {
-                type = PATCH_TYPES[currentLine[0]] || 'null';
-                currentLine = currentLine.replace(/^[+\-! ]/, '');
-            }
+        if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
+            type = 'chunk';
+        } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
+            type = 'header';
+        } else {
+            type = PATCH_TYPES[currentLine[0]] || 'null';
+            currentLine = currentLine.replace(/^[+\-! ]/, '');
+        }
 
-            const g = gutter[index];
+        const g = gutter[index];
 
-            return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
-                hljs.highlight(language, currentLine).value
-            }</span>`;
-        })
-        .join('\n');
+        return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
+            hljs.highlight(language, currentLine).value
+        }</span>`;
+    }).join('\n');
 }
 
 interface HighlightProps {
-- 
cgit v1.2.3

