CATALOG.md: add a new recipe for using interactive buttons on Notion (#1430)

I've used Nativefier along with Notion in the last couple days and I was able to use interactive buttons on my Notion exported page, something that was not possible originally. As such, please consider the following recipe.

Co-authored-by: Dev pop-os <dev+pop-os@mevio.com.br>

CATALOG.md

@@ -187,3 +187,72 @@ a[href='/download'] {
   display: none;
 }
 ```
+
+
+### Notion
+
+You can use Notion pages with Nativefier without much hassle, but Notion itself does not present an easy way to use HTML buttons. As such, if you want to use Notion Pages as a quick way to make dashboards and interactive panels, you will be restricted to only plain links and standard components. 
+
+With Nativefier you can now extend Notion's functionality and possibilities by adding HTML buttons that can call other javascript functions, since it enables you to inject custom Javascript and CSS.
+
+```sh
+nativefier 'YOUR_NOTION_PAGE_SHARE_URL'
+  --inject notion.js
+  --inject notion.css
+```
+
+Notes:
+
+- You can inject the notion.js and notion.css files by copying them to the resources/app/inject folder of your nativefier app.
+- In your Notion page, use [notionbutton]BUTTON_TEXT|BUTTON_ACTION[/notionbutton], where BUTTON_TEXT is the text contained in your button and BUTTON_ACTION is the action which will be called in your JS function.
+```javascript
+/* notion.js */
+
+// First, we replace all placeholders in our Notion page to add our interactive buttons to it.
+window.onload = 
+  setTimeout(function(){
+    let htmlCode = document.body.getElementsByTagName("*");
+    for (let i = 0; i <= htmlCode.length; i++) {
+      if(htmlCode[i] && htmlCode[i].innerHTML){
+        let match = htmlCode[i].innerHTML.match(/\[notionbutton\]([\s\S]*?)\[\/notionbutton\]/);
+        if (match && typeof match == 'object'){
+          let btnarray = match['1'].split("|");
+          let btn_text = btnarray[0];
+          let btn_action = btnarray[1];
+          htmlCode[i].innerHTML = htmlCode[i].innerHTML.replace(match['0'], "<button class=\"btn-notion\" btnaction=\"" + btn_action + "\"  >"+btn_text+"</button>");
+        }
+      }
+    }
+    let buttons = document.querySelectorAll(".btn-notion");
+    for (let j=0; j <= buttons.length; j++){
+      if(buttons[j].hasAttribute("btnaction")){
+        buttons[j].onclick = function () { runAction(buttons[j].getAttribute("btnaction")) };
+      }
+    }
+  }, 3000);
+
+// And then we define your action below, according to our needs
+function runAction(action) {
+    switch(action){
+      case '1':
+        alert('Nice One!');
+        break;
+      default:
+        alert('Hello World!');
+    }
+}
+```
+
+After that, set your css file as follows:
+```css
+.notion-topbar{ /* hiding notion's default navigation bar for a more "app" feeling */
+  display:none; 
+}
+.btn-notion{ /* defining some style for our buttons */
+  background-color:#FFC300;
+  color: #333333;
+}
+.notion-selectable.notion-page-block.notion-collection-item span{
+  pointer-events: auto !important; /* notion prevents clicks on items inside databases. Use this to remove that. */
+}
+```