Bugfix #24 prism js laggy

docs/console/build.reference.ts

@@ -17,4 +17,4 @@ let compiled = compiler.compile([
 
 const encoder = new TextEncoder();
 const data = encoder.encode(JSON.stringify(compiled, null, 2));
-Deno.writeFileSync(`${drashDirRoot}/docs/src/api_reference.json`, data);
+Deno.writeFileSync(`${drashDirRoot}/docs/public/assets/json/api_reference.json`, data);

docs/public/assets/css/_components.code.scss

@@ -68,7 +68,6 @@
 //
 .c-code-parameter {
     @extend %c-code-function-parameter;
-    margin-right: rem(1);
 }
 
 //

docs/src/api_reference.json → docs/public/assets/json/api_reference.json

@@ -78,7 +78,7 @@
         {
           "access_modifier": "public",
           "description": [
-            "Get the `@annotationname` definitions from the doc block."
+            "Get the specified `@annotationname` definitions from the specified doc block."
           ],
           "example_code": [
             {
@@ -323,7 +323,7 @@
         {
           "access_modifier": "protected",
           "description": [
-            "Get paragraphs from a text block string."
+            "Get paragraphs from a text block."
           ],
           "example_code": [],
           "signature": "protected getParagraphs(textBlock: string): string[]",
@@ -343,7 +343,7 @@
               "annotation": "@return string[]",
               "data_type": "string[]",
               "description": [
-                "Returns an array of strings. Each element in the array is a paragraph."
+                "Returns an array of strings. Each element in the array is a separate paragraph."
               ],
               "name": null
             }

docs/public/assets/vendor/prismjs/prism.css

@@ -1,5 +1,5 @@
 /* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+bnf+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+markup-templating+docker+ebnf+eiffel+ejs+elixir+elm+erb+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+scala+php+javastacktrace+jolie+javadoclike+n4js+json+jsonp+json5+julia+keyman+kotlin+latex+markdown+liquid+lisp+livescript+lolcode+lua+makefile+crystal+django+matlab+mel+mizar+monkey+n1ql+typescript+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+jsdoc+phpdoc+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+js-extras+jsx+renpy+reason+vala+rest+rip+roboconf+textile+rust+sas+sass+stylus+javadoc+scheme+smalltalk+smarty+plsql+soy+twig+swift+yaml+tcl+haml+toml+tt2+pug+tsx+t4-templating+visual-basic+t4-cs+regex+vbnet+velocity+verilog+vhdl+vim+t4-vb+wasm+wiki+xeora+xojo+xquery+tap&plugins=line-highlight+line-numbers+keep-markup */
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+clike+javascript+json+typescript+pug&plugins=line-highlight+toolbar+copy-to-clipboard */
 /**
  * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
  * Based on https://github.com/chriskempson/tomorrow-theme
@@ -173,45 +173,62 @@ pre[data-line] {
 	content: none;
 }
 
-pre[class*="language-"].line-numbers {
+div.code-toolbar {
 	position: relative;
-	padding-left: 3.8em;
-	counter-reset: linenumber;
 }
 
-pre[class*="language-"].line-numbers > code {
-	position: relative;
-	white-space: inherit;
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
 }
 
-.line-numbers .line-numbers-rows {
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	font-size: 100%;
-	left: -3.8em;
-	width: 3em; /* works for line-numbers below 1000 lines */
-	letter-spacing: -1px;
-	border-right: 1px solid #999;
-
-	-webkit-user-select: none;
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
 	-moz-user-select: none;
 	-ms-user-select: none;
-	user-select: none;
-
 }
 
-	.line-numbers-rows > span {
-		pointer-events: none;
-		display: block;
-		counter-increment: linenumber;
-	}
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
 
-		.line-numbers-rows > span:before {
-			content: counter(linenumber);
-			color: #999;
-			display: block;
-			padding-right: 0.8em;
-			text-align: right;
-		}
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
 

docs/src/response_service.ts

@@ -14,6 +14,7 @@ export function getAppData() {
   return {
     // The below is transferred to index.ejs
     scripts: [
+      "https://unpkg.com/axios/dist/axios.min.js",
       "/public/assets/vendor/prismjs/prism.js",
       "/public/assets/vendor/jquery-3.3.1/jquery.min.js",
       "/public/assets/vendor/bootstrap-4.1.3-dist/js/bootstrap.min.js"

docs/src/vue/components/page_api_reference.vue

@@ -55,7 +55,8 @@ div.page.page--reference
                                 strong.tag-row__heading Params
                                 ul
                                     li(v-for="param in method.params")
-                                        code.c-code-parameter {{ param.name }} 
+                                        code.c-code-parameter {{ param.name }}
+                                        span : 
                                         code.c-code-data-type {{ param.data_type }}
                                         ul(v-show="param.description.length > 0")
                                             li(v-for="description in param.description" :inner-html.prop="description | markdown-it")

docs/src/vue/components/pages/api-reference/compilers.vue

@@ -3,8 +3,6 @@ page-api-reference(:namespace="namespace")
 </template>
 
 <script>
-import apiReferenceData from "/src/api_reference.json";
-
 export const resource = {
     paths: ["/api-reference/compilers"],
     meta: {
@@ -15,10 +13,15 @@ export const resource = {
 export default {
     data() {
         return {
-            namespace: apiReferenceData["Drash.Compilers"]
+            namespace: {}
         };
+    },
+    mounted() {
+        axios.get("/public/assets/json/api_reference.json")
+            .then(response => {
+                console.log(response.data);
+                this.namespace = response.data['Drash.Compilers'];
+            });
     }
 }
 </script>
-
-

docs/src/vue/components/vue_app_root.vue

@@ -1,59 +1,61 @@
 <template lang="pug">
 div#vue_app
-  button.c-btn.c-btn-mobile.hide--soft(type="button", @click="openSidebar()")
-    i.fa.fa-bars
-    i.fa.fa-times
-  button.c-btn.c-btn-back-to-top.hide--soft(type="button", @click="scrollToTop()")
-    i.fa.fa-arrow-up
-  sidebar
-  main#top.c-main
-    //-
-      PURPOSE
-      TYPE
-      PARAMETERS
-      THROWS
-      RETURNS
-      EXAMPLE USAGE
-      NOTES
-    div.c-misc-date-last-updated-bar
-      div.row.text-align--right
-        div.col
-          p Last updated: {{ date_last_updated }}
-    div.container.c-container--docs
-      router-view
+    button.c-btn.c-btn-mobile.hide--soft(type="button", @click="openSidebar()")
+        i.fa.fa-bars
+        i.fa.fa-times
+    button.c-btn.c-btn-back-to-top.hide--soft(type="button", @click="scrollToTop()")
+        i.fa.fa-arrow-up
+    sidebar
+    main#top.c-main
+        //-
+          PURPOSE
+          TYPE
+          PARAMETERS
+          THROWS
+          RETURNS
+          EXAMPLE USAGE
+          NOTES
+        div.c-misc-date-last-updated-bar
+            div.row.text-align--right
+                div.col
+                    p Last updated: {{ date_last_updated }}
+        div.container.c-container--docs
+            transition
+                keep-alive
+                    router-view
 </template>
 
 <script>
 import Sidebar from "./sidebar.vue";
 
 export default {
-  components: {
-      Sidebar
-  },
-  data() {
-    return {
-      date_last_updated: "271641R022019",
-    };
-  },
-  methods: {
-    scrollToTop: function scrollToTop() {
-      $('html, body').animate({
-        scrollTop: $("body").offset().top - 0
-      }, 0);
+    components: {
+        Sidebar
+    },
+    data() {
+        return {
+            date_last_updated: "271641R022019",
+        };
+    },
+    methods: {
+        scrollToTop: function scrollToTop() {
+            $('html, body').animate({
+                scrollTop: $("body").offset().top - 0
+            }, 0);
+        },
+        openSidebar: function openSidebar() {
+            if($(".c-btn-mobile").hasClass("open")) {
+                $(".c-btn-mobile").removeClass("open");
+                $(".c-btn-mobile .fa-bars").show();
+                $(".c-btn-mobile .fa-times").hide();
+                $(".c-sidebar").addClass("hide--soft");
+            } else {
+                $(".c-btn-mobile").addClass("open");
+                $(".c-btn-mobile .fa-bars").hide();
+                $(".c-btn-mobile .fa-times").show();
+                $(".c-sidebar").removeClass("hide--soft");
+            }
+        }
     },
-    openSidebar: function openSidebar() {
-      if($(".c-btn-mobile").hasClass("open")) {
-        $(".c-btn-mobile").removeClass("open");
-        $(".c-btn-mobile .fa-bars").show();
-        $(".c-btn-mobile .fa-times").hide();
-        $(".c-sidebar").addClass("hide--soft");
-      } else {
-        $(".c-btn-mobile").addClass("open");
-        $(".c-btn-mobile .fa-bars").hide();
-        $(".c-btn-mobile .fa-times").show();
-        $(".c-sidebar").removeClass("hide--soft");
-      }
-    }
-  },
 }
 </script>