Merge pull request #5 from rizinorg/ansi-colors

Support for ANSI colors
rizinorg · Nov 16, 2021 · 0566339 · 0566339
2 parents e87dee6 + 83f1f1f
commit 0566339
Show file tree

Hide file tree

Showing 31 changed files with 1,645 additions and 692 deletions.
diff --git a/.rizin-notebook.png b/.rizin-notebook.png
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ A notebook to write notes while using `rizin`.
 
 If you want to compare it with something similar, you can call it as the rizin equivalent of [jupyter notebook](https://jupyter.org/)
 
+## Requirements
+
+Requires at least rizin version `0.2.0`
+
 ## Screenshot
 
 ![rizin-notebook](https://raw.githubusercontent.com/rizinorg/rizin-notebook/master/.rizin-notebook.png)

diff --git a/assets.go b/assets.go
diff --git a/assets/static/inconsolata.ttf b/assets/static/inconsolata.ttf
diff --git a/assets/templates/about.tmpl b/assets/templates/about.tmpl
@@ -40,6 +40,9 @@
                         <div class="input-group spacing-top">
                             <span class="input-group-addon detail-size">Version</span>
                         </div>
+                        <div class="input-group spacing-top">
+                            <span class="input-group-addon detail-size">Storage</span>
+                        </div>
                     </div>
                     <div class="column">
                         <div class="input-group spacing-top">
@@ -48,6 +51,9 @@
                         <div class="input-group spacing-top">
                             <span class="input-group-addon">{{ .nbversion }}</span>
                         </div>
+                        <div class="input-group spacing-top">
+                            <span class="input-group-addon">{{ .storage }}</span>
+                        </div>
                     </div>
                 </div>
             </p>

diff --git a/assets/templates/console-error.tmpl b/assets/templates/console-error.tmpl
@@ -9,9 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
     html, body { width: 100%; height: 100%; margin: 0 }
-    .button-edit { width: 75px ! important; margin-top: 9px; margin-right: 9px; }
   </style>
 </head>
+<body>
   <div style="margin-top: 15px; height: 100%;">
     <div class="form-group">
       <input type="text" disabled="" class="form-input" value="Error: {{ .error }}"/>

diff --git a/assets/templates/console.tmpl b/assets/templates/console.tmpl
@@ -12,7 +12,8 @@
     .button-edit { width: 75px ! important; margin-top: 9px; margin-right: 9px; }
   </style>
 </head>
-  <form style="margin-top: 15px; height: 100%;" action="{{ .root }}output/exec/{{ .nonce }}" method="POST">
+<body>
+  <form style="margin-top: 15px; height: 100%;" action="{{ .root }}output/exec/{{ .unique }}" method="POST">
     <div class="form-group">
       <input type="text" class="form-input" name="command" value="" placeholder="Rizin command for example: pdf"/>
     </div>

diff --git a/assets/templates/error.tmpl b/assets/templates/error.tmpl
@@ -1,10 +1,10 @@
-{{ $root := .root }}{{ $error := .error }}<!DOCTYPE html>
+{{ $error := .error }}{{ $llen := len .location }}<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Rizin Notebook</title>
-    <link rel="stylesheet" href="{{ $root }}static/spectre-icons.min.css">
-    <link rel="stylesheet" href="{{ $root }}static/spectre.min.css">
+    <link rel="stylesheet" href="{{ .root }}static/spectre-icons.min.css">
+    <link rel="stylesheet" href="{{ .root }}static/spectre.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type="text/css">
         .spacing-top { margin: 3px 0px 0px 0px; }
@@ -16,11 +16,11 @@
     <section class="container grid-960 mt-10">
         <header class="navbar">
             <section class="navbar-section">
-                <img src="{{ $root }}static/logo.png" width="30" height="30" />&nbsp;
-                <a href="{{ $root }}" class="navbar-brand mr-10">Rizin Notebook</a>
+                <img src="{{ .root }}static/logo.png" width="30" height="30" />&nbsp;
+                <a href="{{ .root }}" class="navbar-brand mr-10">Rizin Notebook</a>
             </section>
             <section class="navbar-section">
-                <a href="{{ $root }}" class="btn btn-primary">Go Back</a>
+                <a href="{{ if lt $llen 1 }}{{ .root }}{{ else }}{{ .location }}{{ end }}" class="btn btn-primary">Go Back</a>
             </section>
         </header>
         <section class="container">

diff --git a/assets/templates/index.tmpl b/assets/templates/index.tmpl
@@ -23,6 +23,8 @@
                 <a href="{{ $root }}" class="navbar-brand mr-10">Rizin Notebook</a>
             </section>
             <section class="navbar-section">
+                <a href="{{ $root }}settings" class="btn">Settings</a>
+                &nbsp;
                 <a href="{{ $root }}about" class="btn">About</a>
                 &nbsp;
                 <a href="{{ $root }}new" class="btn btn-primary">New Page</a>
@@ -41,11 +43,11 @@
                         {{ if $page.pipe }}
                         <button class="btn tooltip tooltip-bottom pipe spacing-left" data-tooltip="The pipe is still open."><i class="icon icon-more-horiz"></i></button>
                         {{ else }}
-                        <a class="btn spacing-left" href="{{ $root }}edit/{{ $page.nonce }}">
+                        <a class="btn spacing-left" href="{{ $root }}edit/{{ $page.unique }}">
                             <i class="icon icon-edit">Edit</i>
                         </a>
                         {{ end }}
-                        <a class="btn spacing-left" href="{{ $root }}view/{{ $page.nonce }}">
+                        <a class="btn spacing-left" href="{{ $root }}view/{{ $page.unique }}">
                             <i class="icon icon-forward">View</i>
                         </a>
                     </div>

diff --git a/assets/templates/markdown-edit.tmpl b/assets/templates/markdown-edit.tmpl
@@ -34,6 +34,7 @@
         autofocus: true,
         hideIcons: ["side-by-side", "fullscreen", "guide"],
         autosave: { enabled: false },
+        spellChecker: false,
         forceSync: true,
         indentWithTabs: false,
         promptURLs: true,

diff --git a/assets/templates/markdown-view.tmpl b/assets/templates/markdown-view.tmpl
@@ -9,15 +9,31 @@
   <style type="text/css">
       html, body { width: 100%; height: 100%; margin: 0 }
       .button-edit { float: right; width: 60px ! important; margin-top: 5px; }
-      .markdown-container { margin-top: 9px; white-space: pre; line-height: 0px; }
+      .markdown-container { margin-top: 9px; }
   </style>
 </head>
-<body>
+<body onload="view()">
   <a class="btn btn-action spacing-left button-edit" href="{{ .root }}markdown/edit{{ .path }}">
     <i class="icon icon-edit">Code</i> Edit
   </a>
-  <div class="markdown-container">
-{{ .html | raw}}
+  <div class="markdown-container" id="markdown-container" >
+    <textarea style="display: none;" name="md-container" id="md-container" cols="30" rows="10">{{ .html }}</textarea>
   </div>
+  <script src="{{ .root }}static/simplemde.min.js"></script>
+  <script>
+  function view() {
+    var smde = new SimpleMDE({
+        element: document.getElementById('md-container'),
+        autoDownloadFontAwesome: false,
+        spellChecker: false,
+        status: false,
+        indentWithTabs: false,
+        promptURLs: true,
+        tabSize: 4,
+    });
+    var md = smde.value();
+    document.getElementById('markdown-container').innerHTML = smde.markdown(md);
+  };
+  </script>
 </body>
 </html>
diff --git a/assets/templates/output.tmpl b/assets/templates/output.tmpl
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Rizin Notebook</title>
+  <link rel="stylesheet" href="{{ .root }}static/spectre-icons.min.css">
+  <link rel="stylesheet" href="{{ .root }}static/spectre.min.css">
+  <link rel="stylesheet" href="{{ .root }}static/simplemde.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style type="text/css">
+    blink { -webkit-animation: 2s linear infinite condemned_blink_effect; animation: 2s linear infinite condemned_blink_effect; }
+    @-webkit-keyframes condemned_blink_effect {
+      0% { visibility: hidden; }
+      50% { visibility: hidden; }
+      100% { visibility: visible; }
+    }
+    @keyframes condemned_blink_effect {
+      0% { visibility: hidden; }
+      50% { visibility: hidden; }
+      100% { visibility: visible; }
+    }
+    @font-face { font-family: 'Inconsolata'; src: URL('{{ .root }}static/inconsolata.ttf') format('truetype'); }
+    html, body { width: 100%; height: 100%; background-color: #4b4b4b; color: #eeeeee; font-family: Inconsolata; }
+    pre { width: 100%; height: 100%; margin: 5px; background-color: inherit; color: inherit; line-height: 8px; }
+  </style>
+</head>
+<body>
+  <pre>{{ .output | raw }}</pre>
+</body>
+</html>
diff --git a/assets/templates/page-new.tmpl b/assets/templates/page-new.tmpl
@@ -1,4 +1,4 @@
-{{ $root := .root }}{{ $page := .page }}{{ $nlen := len .nonce }}<!DOCTYPE html>
+{{ $root := .root }}{{ $page := .page }}{{ $nlen := len .unique }}<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -48,7 +48,7 @@
         <div class="column">
           <form action="{{ $root }}edit" method="POST" enctype="multipart/form-data" onsubmit="verify(event)">
             <div class="form-group">
-              <input type="hidden" name="nonce" value="{{ .nonce }}" />
+              <input type="hidden" name="unique" value="{{ .unique }}" />
               <input type="text" class="form-input" name="title" id="title" value="{{ .title }}" placeholder="Notebook page title"/>
               {{ if lt $nlen 1 }}
               <br>
@@ -60,7 +60,7 @@
               <button class="btn btn-primary" type="submit">{{ if lt $nlen 1 }}Create{{ else }}Save{{ end }}</button>
               <a class="btn" href="{{ $root }}">Cancel</a>
               {{ if gt $nlen 0 }}
-              <a class="btn float-right" href="{{ $root }}delete/{{ .nonce }}" onclick="confirm_delete(event)">Delete</a>
+              <a class="btn float-right" href="{{ $root }}delete/{{ .unique }}" onclick="confirm_delete(event)">Delete</a>
               {{ end }}
             </div>
           </form>

diff --git a/assets/templates/page-view.tmpl b/assets/templates/page-view.tmpl
@@ -24,10 +24,11 @@
     </style>
     <script>
       function handle(obj) {
-        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
+        obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 20) + 'px';
         if (obj.contentWindow.location.href.indexOf("/deleted") > 0) {
           obj.parentNode.parentNode.removeChild(obj.parentNode);
         }
+        window.scrollTo(0, document.body.scrollHeight);
       }
       function output(obj) {
         obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
@@ -36,6 +37,7 @@
         } else if (obj.contentWindow.location.href.indexOf("/loaded") > 0) {
           location.reload()
         }
+        window.scrollTo(0, document.body.scrollHeight);
       }
       function newmd() {
         var body = document.getElementById("page-body");
@@ -51,8 +53,7 @@
         iframe.setAttribute("height", "100%");
         iframe.setAttribute("scrolling", "no");
         iframe.setAttribute("onload", "handle(this)");
-        iframe.setAttribute("onload", "handle(this)");
-        iframe.src = "{{ $root }}markdown/new/{{ $page.nonce }}";
+        iframe.src = "{{ $root }}markdown/new/{{ $page.unique }}";
         div.appendChild(iframe);
         body.insertBefore(div, body.childNodes[body.childNodes.length - 2]);
       }
@@ -70,8 +71,7 @@
         iframe.setAttribute("height", "100%");
         iframe.setAttribute("scrolling", "no");
         iframe.setAttribute("onload", "output(this)");
-        iframe.setAttribute("onload", "output(this)");
-        iframe.src = "{{ $root }}output/input/{{ $page.nonce }}";
+        iframe.src = "{{ $root }}output/input/{{ $page.unique }}";
         div.appendChild(iframe);
         body.insertBefore(div, body.childNodes[body.childNodes.length - 2]);
       }
@@ -80,9 +80,6 @@
           event.preventDefault();
         }
       }
-      function syntax(elem, id) {
-        console.log(elem, id);
-      }
     </script>
   </head>
 <body>
@@ -95,7 +92,7 @@
       <section class="navbar-section">
         <h4 class="title-margin">{{ $page.title }}</h4>
         &nbsp;
-        <a href="{{ $root }}pipe/{{ if $pipe }}close{{ else }}open{{ end }}/{{ $page.nonce }}" class="btn{{ if $pipe }} pipe{{ end }}">
+        <a href="{{ $root }}pipe/{{ if $pipe }}close{{ else }}open{{ end }}/{{ $page.unique }}" class="btn{{ if $pipe }} pipe{{ end }}">
           {{ if $pipe }}Close Pipe{{ else }}Open Pipe{{ end }}
         </a>
         &nbsp;
@@ -104,33 +101,41 @@
     </header>
     <section class="container">
       <div class="columns">
-        <div class="column" id="page-body">
+        <div class="column">
           <div class="input-group spacing-top">
             <code class="input-group-addon spacing-right">File: {{ $page.filename }}</code>
           </div>
-      {{ range $i, $line := $page.lines }}
-        {{ if eq $line.type "markdown" }}
+        </div>
+      </div>
+    </section>
+  </section>
+  <section class="container mt-10">
+    <section class="container">
+      <div class="columns">
+        <div class="column" style="padding-top: 0px" id="page-body">
+{{ range $i, $line := $page.lines }}
+{{ if eq $line.type "markdown" }}
           <div class="panel spacing-top resizer">
-            <iframe frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" onload="handle(this)" onunload="handle(this)" class="panel-body no-borders md-heigh" src="{{ $root }}markdown/view/{{ $page.nonce }}/{{ $line.nonce }}"></iframe>
+            <iframe frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" onload="handle(this)" onunload="handle(this)" class="panel-body no-borders md-heigh" src="{{ $root }}markdown/view/{{ $page.unique }}/{{ $line.unique }}"></iframe>
           </div>
-        {{ else }}
+{{ else }}
           <div class="input-group spacing-top">
             <code class="input-group-addon spacing-right spacing-left">{{ $line.command }}</code>
-            <a class="btn float-right" href="{{ $root }}output/delete/{{ $page.nonce }}/{{ $line.nonce }}" onclick="confirm_delete(event)">
+            <a class="btn float-right" href="{{ $root }}output/delete/{{ $page.unique }}/{{ $line.unique }}" onclick="confirm_delete(event)">
               <i class="icon icon-delete icon-height">Delete</i>
             </a>
           </div>
           <div class="input-group spacing-top">
-            <iframe id="output-{{ $i }}" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" onload="handle(this)" class="input-group-addon spacing-left md-heigh" src="{{ $root }}output/view/{{ $page.nonce }}/{{ $line.nonce }}"></iframe>
+            <iframe id="output-{{ $i }}" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" onload="handle(this)" class="input-group-addon spacing-left md-heigh" src="{{ $root }}output/view/{{ $page.unique }}/{{ $line.unique }}"></iframe>
           </div>
-        {{ end }}
-      {{ end }}
+{{ end }}
+{{ end }}
           <div class="input-group spacing-top" style="margin-top: 10px;">
             <a class="btn" href="#" onclick="newmd()"><i class="icon icon-message">Markdown</i> Markdown</a>
-            {{ if $pipe }}
+{{ if $pipe }}
             &nbsp;
             <a class="btn" href="#" onclick="newcm()"><i class="icon icon-resize-horiz">Command Line</i> Command Line</a>
-            {{ end }}
+{{ end }}
           </div>
         </div>
       </div>

diff --git a/assets/templates/reload.tmpl b/assets/templates/reload.tmpl
@@ -21,7 +21,7 @@
       border-top-color:transparent;
     }
   </style>
-  <meta http-equiv="refresh" content="5"/>
+  <meta http-equiv="refresh" content="2"/>
 </head>
 <body>
   <div class="center">