Add BNP Changelog; Image jBox Enhancement

Makefile

@@ -1,20 +1,28 @@
-SHELL := /bin/bash
-FILE  := tmp.txt
-CAT   := bat
+SHELL=/bin/bash
+COMMAND_COLOR = \033[36m
+SELECT_COLOR  = \033[34m
+DESC_COLOR    = \033[32m
+CLEAR_COLOR   = \033[0m
 
-# ifeq (, $(shell which bat))
-# 	$(error "No bat in $(PATH), consider installing it")
-# 	CAT = cat
-# endif
+.PHONY: help
+help: ## prints this message ## 
+	@echo ""; \
+	echo "Usage: make <command>"; \
+	echo ""; \
+	echo "where <command> is one of the following:"; \
+	echo ""; \
+	grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
+	perl -nle '/(.*?): ## (.*?) ## (.*$$)/; if ($$3 eq "") { printf ( "$(COMMAND_COLOR)%-20s$(DESC_COLOR)%s$(CLEAR_COLOR)\n\n", $$1, $$2) } else { printf ( "$(COMMAND_COLOR)%-20s$(DESC_COLOR)%s$(CLEAR_COLOR)\n%-20s%s\n\n", $$1, $$2, " ", $$3) }';
 
-
-.PHONY : compile run 
-
-compile :
-	@ls -1 posts/ | sed -e "s/\..*$$//" | uniq | grep -v 'example'; \
-	read -p "Which post? " post; \
-	./node_modules/showdown/bin/showdown.js makehtml -i posts/$$post.md -o posts/$$post.html
-
-run :
+.PHONY: compile
+compile: ## convert md files to html ## (uses "showdown.js" in node_modules)
+	@echo ""; \
+	echo "Select Post to Compile:"; \
+	echo -e "$(SELECT_COLOR)"; \
+	./select.sh
+	
+.PHONY: run
+run: ## npm run startdev ## 
 	@echo "-> Running"
-	@npm run startdev
+	@npm run startdev
+

app.js

@@ -31,7 +31,7 @@ app.get('/posts', (req, res) => {
     for (let i = 0; i < files.length; i++) {
         if (path.extname(files[i]) === '.json') {
             let postData = getData(files[i])
-            if (postData) {
+            if (postData && postData.active === 'posts') {
                 data.posts.push(postData)
             } else {
                 console.log(files[i], 'does not have a corresponding "html" file')
@@ -94,7 +94,14 @@ app.get('/posts/:post', (req, res) => {
 })
 
 app.get('/bnp/changelog', (req, res) => {
-    res.sendFile(__dirname + '/posts/bnp-changelog.html')
+    let postData
+    try {
+        postData = JSON.parse(fs.readFileSync('./posts/bnp-changelog.json', 'utf8'))
+        postData.content = fs.readFileSync('./posts/' + postData.content_file, 'utf8')
+    } catch (e) {
+        return res.redirect('/404')
+    }
+    return res.render('pages/post', postData)
 })
 
 const port = 3000

core.css

@@ -208,10 +208,14 @@ code.prettyprint {
   color: #999;
 }
 
+.jBox-image-label.active {
+  background-color: #3883FA !important;
+}
+
 /*
  Hack Font
 */
-
+/*
 @font-face {
   font-family: 'Hack';
   src: url('fonts/hack-regular.woff2?sha=e700a30') format('woff2'), url('fonts/hack-regular.woff?sha=e700a30') format('woff');
@@ -239,3 +243,4 @@ code.prettyprint {
   font-weight: 700;
   font-style: italic;
 }
+*/

posts/bnp-changelog.html

@@ -1,10 +1,49 @@
-<h1 id="betternetworkpanel-changelog">Better Network Panel - Changelog</h1>
+<h1 id="betternetworkpanelchangelogomitintoc">Better Network Panel - Changelog <!-- omit in toc --></h1>
 <ul>
-    <li><p>Better Request Search</p>
-        <ul>
-            <li>1</li>
-            <li>2</li>
-        </ul>
-    </li>
-    <li>Improved Code Viewer</li>
+<li><a href="#version-100">Version 1.0.0</a>
+    <ul>
+        <li><a href="#improved-search">Improved Search</a></li>
+        <li><a href="#json-editor-built-in">JSON Editor BUILT IN</a></li>
+        <li><a href="#vertical-chrome-panel">Vertical Chrome Panel</a></li>
+        <li><a href="#download-json">Download JSON</a></li>
+    </ul>
+</li>
 </ul>
+<h2 id="version100">Version 1.0.0</h2>
+<p><a href="/images/v1.0.0-FullScreenshot.png" data-jbox-image="gallery">
+    <img src="/images/v1.0.0-FullScreenshot.png" alt="Version 1.0.0 Screenshot" />
+</a></p>
+<p><a id="improved-search" /></p>
+<h3 id="improvedsearch">Improved Search</h3>
+<p>Advanced search capability has been added in this release which improves on the previous search by adding a negation search (i.e. "-carts" which would remove requests containing "carts" in the results).</p>
+<p><a href="/images/v1.0.0-Search.png" data-jbox-image="gallery">
+    <img src="/images/v1.0.0-Search.png" alt="New Improved Search Screenshot" />
+</a></p>
+<p>Additionally, <strong>AND</strong> and <strong>OR</strong> searching filters have been added.  So you can search for:</p>
+<blockquote>
+  <p><code>products</code> <strong>AND</strong> <code>services</code></p>
+</blockquote>
+<p>Which would return any request containing <strong>BOTH</strong> <code>products</code> <strong>AND</strong> <code>services</code> somewhere in the headers, request body, etc…</p>
+<p>And you can search for:</p>
+<blockquote>
+  <p><code>products</code> <strong>OR</strong> <code>services</code></p>
+</blockquote>
+<p>Which would return any requests containing <strong>EITHER</strong> <code>products</code> <strong>OR</strong> <code>services</code>.</p>
+<p><a id="json-editor-built-in" /></p>
+<h3 id="jsoneditorbuiltin">JSON Editor BUILT IN</h3>
+<p>Using the Open Source <a href="https://github.com/josdejong/jsoneditor">JSON Editor</a>, you can now easily search and view JSON data just as you can on the official <a href="https://jsoneditoronline.org">jsoneditoronline.org</a> website.</p>
+<p><a href="/images/v1.0.0-JSONEditor.png" data-jbox-image="gallery">
+    <img src="/images/v1.0.0-JSONEditor.png" alt="JSON Editor Screenshot" />
+</a></p>
+<p><a id="vertical-chrome-panel" /></p>
+<h3 id="verticalchromepanel">Vertical Chrome Panel</h3>
+<p>Better Network Panel now supports a vertical layout using responsive CSS.  Panel resizing will be released soon.</p>
+<p><a href="/images/v1.0.0-VerticalPanel.png" data-jbox-image="gallery">
+    <img src="/images/v1.0.0-VerticalPanel.png" alt="Vertical Panel Screenshot" />
+</a></p>
+<p><a id="download-json" /></p>
+<h3 id="downloadjson">Download JSON</h3>
+<p>Download the current panel as a JSON doc.</p>
+<p><a href="/images/v1.0.0-DownloadJSON.png" data-jbox-image="gallery">
+    <img src="/images/v1.0.0-DownloadJSON.png" alt="Download JSON Button Screenshot" />
+</a></p>

posts/bnp-changelog.json

@@ -0,0 +1,9 @@
+{
+    "title": "Better Network Panel - Changelog - Levi Olson",
+    "permalink": "/posts/bnp-changelog",
+    "created_at": "2021-01-23T10:05:19-06:00",
+    "created_at_short": "2021-01-23",
+    "post_title": "Better Network Panel - Changelog",
+    "active": "",
+    "content_file": "bnp-changelog.html"
+}

posts/bnp-changelog.md

@@ -0,0 +1,62 @@
+# Better Network Panel - Changelog <!-- omit in toc -->
+
+- [Version 1.0.0](#version-100)
+  - [Improved Search](#improved-search)
+  - [JSON Editor BUILT IN](#json-editor-built-in)
+  - [Vertical Chrome Panel](#vertical-chrome-panel)
+  - [Download JSON](#download-json)
+
+## Version 1.0.0
+
+<a href="/images/v1.0.0-FullScreenshot.png" data-jbox-image="gallery">
+    ![Version 1.0.0 Screenshot](/images/v1.0.0-FullScreenshot.png)
+</a>
+
+<a id="improved-search" />
+### Improved Search
+
+Advanced search capability has been added in this release which improves on the previous search by adding a negation search (i.e. "-carts" which would remove requests containing "carts" in the results).
+
+<a href="/images/v1.0.0-Search.png" data-jbox-image="gallery">
+    ![New Improved Search Screenshot](/images/v1.0.0-Search.png)
+</a>
+
+
+Additionally, **AND** and **OR** searching filters have been added.  So you can search for:
+
+> `products` **AND** `services`
+
+Which would return any request containing **BOTH** `products` **AND** `services` somewhere in the headers, request body, etc...
+ 
+And you can search for:
+
+> `products` **OR** `services`
+
+Which would return any requests containing **EITHER** `products` **OR** `services`.
+
+<a id="json-editor-built-in" />
+### JSON Editor BUILT IN
+
+Using the Open Source [JSON Editor](https://github.com/josdejong/jsoneditor), you can now easily search and view JSON data just as you can on the official [jsoneditoronline.org](https://jsoneditoronline.org) website.
+
+<a href="/images/v1.0.0-JSONEditor.png" data-jbox-image="gallery">
+    ![JSON Editor Screenshot](/images/v1.0.0-JSONEditor.png)
+</a>
+
+<a id="vertical-chrome-panel" />
+### Vertical Chrome Panel
+
+Better Network Panel now supports a vertical layout using responsive CSS.  Panel resizing will be released soon.
+
+<a href="/images/v1.0.0-VerticalPanel.png" data-jbox-image="gallery">
+    ![Vertical Panel Screenshot](/images/v1.0.0-VerticalPanel.png)
+</a>
+
+<a id="download-json" />
+### Download JSON
+
+Download the current panel as a JSON doc.
+
+<a href="/images/v1.0.0-DownloadJSON.png" data-jbox-image="gallery">
+    ![Download JSON Button Screenshot](/images/v1.0.0-DownloadJSON.png)
+</a>

posts/chrome-ext-better-network-panel.html

@@ -11,11 +11,9 @@
 <p><a href="https://chrome.google.com/webstore/detail/better-network-panel/kknnkgpbclaljhfcknhbebhppmkmoaml"><img src="/images/bnpscreenshot.png" alt="BNP for Chrome" /></a></p>
 <p>I present to you a <a href="https://chrome.google.com/webstore/detail/better-network-panel/kknnkgpbclaljhfcknhbebhppmkmoaml">Better Network Panel</a>.  A Chrome extension that adds a new panel, and offers great features like:</p>
 <ul>
-<li><strong>Full Search</strong> - Entire request is searchable (i.e. headers, postbody, etc…), not just URI</li>
-<li><strong>JSON Parsing</strong> - Even nested members that contain stringified JSON are parsed</li>
+<li><strong>Full Search</strong> - Entire request is searchable (i.e. headers, request body, etc…), not just URI</li>
+<li><strong>JSON Parsing</strong> - Even nested members that contain stringified JSON are parsed to 3 levels deep</li>
 <li><strong>JSON Search</strong> - Incremental searching is available directly in the Preview pane</li>
-<li><strong>Import HAR</strong> - Import your own HAR file and use this tool for debugging</li>
-<li><strong>Download HAR</strong> - Export a request as a HAR file and use an external tool for further debugging</li>
 <li><strong>Regex Search</strong> - Powerfull regex searches can be performed on the Preview pane</li>
 <li>More to come</li>
 </ul>

posts/chrome-ext-better-network-panel.md

@@ -1,4 +1,4 @@
-# Better Network Panel - a Chrome extension #
+# Better Network Panel - a Chrome extension
 
 > "As a Salesforce and Vlocity developer, I'm constantly looking for ways to improve my workflow, speed up my debugging, and find answers fast."
 
@@ -18,11 +18,9 @@ And all of the above is done several times a day.
 
 I present to you a [Better Network Panel](https://chrome.google.com/webstore/detail/better-network-panel/kknnkgpbclaljhfcknhbebhppmkmoaml).  A Chrome extension that adds a new panel, and offers great features like:
 
-* **Full Search** - Entire request is searchable (i.e. headers, postbody, etc...), not just URI
-* **JSON Parsing** - Even nested members that contain stringified JSON are parsed
+* **Full Search** - Entire request is searchable (i.e. headers, request body, etc...), not just URI
+* **JSON Parsing** - Even nested members that contain stringified JSON are parsed to 3 levels deep
 * **JSON Search** - Incremental searching is available directly in the Preview pane
-* **Import HAR** - Import your own HAR file and use this tool for debugging
-* **Download HAR** - Export a request as a HAR file and use an external tool for further debugging
 * **Regex Search** - Powerfull regex searches can be performed on the Preview pane
 * More to come
 
@@ -30,7 +28,6 @@ I present to you a [Better Network Panel](https://chrome.google.com/webstore/det
 
 View it on [GitHub](https://github.com/leothelocust/better-network-chrome-panel)
 
-
 ## Special Thanks
 
 A huge thanks and recognition goes to [Milton Lai](https://github.com/milton-lai/saml-chrome-panel) and his project SAML Chrome Panel.  I started from a fork of his project, but later started fresh as there was a lot of SAML specific code that this project doesn't use/need.  The UI is nearly identical, but the code underneath has become fairly different at this point.

select.sh

@@ -0,0 +1,14 @@
+#! /usr/bin/env bash 
+
+PS3="Enter a number: "
+
+OPTIONS=$(ls -1 posts/ | sed -e "s/\..*$//" | uniq | grep -v 'example')
+select post in $OPTIONS
+do
+    echo -e "\033[32m"
+    echo "Compiling: $post.html"
+    echo -e "\033[33m"
+    ./node_modules/showdown/bin/showdown.js makehtml -i posts/$post.md -o posts/$post.html
+    echo -e "\033[0m"
+    exit 0
+done

views/partials/footer.ejs

@@ -1,3 +1,10 @@
+    <script type="text/javascript">
+        new jBox('Image', {
+            closeOnClick: true,
+            color: "#3883FA",
+            imageSize: "auto"
+        });
+    </script>
 <footer id="footer" class="footer-container">
     <div class="footer">
         <div class="copyright">

views/partials/head.ejs

@@ -5,4 +5,10 @@
     <%= title %>
 </title>
 <link rel="stylesheet" href="/core.css">
+
 <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
+
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.1/dist/jBox.all.min.js"></script>
+<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.1/dist/jBox.all.min.css" rel="stylesheet">