Merge branch 'feature/homepage-syntax-highlighting' into 'dev'

Feature/homepage syntax highlighting

See merge request ligolang/ligo!107

gitlab-pages/website/pages/en/index.js

@@ -9,10 +9,88 @@ const React = require("react");
 
 const CompLibrary = require("../../core/CompLibrary.js");
 
+const hljs = require("highlight.js");
+
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
+function pascaligo(hljs) {
+  return {
+    // case_insensitive: true,
+    beginKeywords: '',
+    keywords: {
+      keyword: 'and begin block case const contains down else end fail for ' +
+        'from function if in is list map mod nil not of or patch ' +
+        'procedure record remove set skip step then to type var while with',
+      literal: 'true false unit int string some none bool nat list'
+    },
+    lexemes: '[a-zA-Z][a-zA-Z0-9_]*',
+    contains: [
+      hljs.C_LINE_COMMENT_MODE,
+
+      {
+        className: 'type',
+        begin: /[A-Z][a-z]+/
+      },
+      {
+        begin: /[*+-:;\(\)\{\}|\>\<]/,
+        // className: 'ignore'
+      }
+    ]
+  }
+}
+
+hljs.registerLanguage('pascaligo', pascaligo);
+
+
+const pre = "```";
+
+const pascaligoExample = `${pre}pascaligo
+// variant defining pseudo multi-entrypoint actions
+type action is
+| Increment of int
+| Decrement of int
+
+function add (const a : int ; const b : int) : int is
+ block { skip } with a + b
+
+function subtract (const a : int ; const b : int) : int is
+ block { skip } with a - b
+
+// real entrypoint that re-routes the flow based 
+// on the action provided
+function main (const p : action ; const s : int) : 
+  (list(operation) * int) is
+ block { skip } with ((nil : list(operation)),
+  case p of
+  | Increment(n) -> add(s, n)
+  | Decrement(n) -> subtract(s, n)
+ end)
+${pre}`;
+
+const cameligoExample = `${pre}ocaml
+type storage = int
+
+(* variant defining pseudo multi-entrypoint actions *)
+type action =
+  | Increment of int
+  | Decrement of int
+
+let add (a: int) (b: int): int = a + b
+
+let subtract (a: int) (b: int): int = a - b
+
+(* real entrypoint that re-routes the flow based on 
+   the action provided *)
+let%entry main(p : action) storage =
+  let storage =
+    match p with
+    | Increment n -> add storage n
+    | Decrement n -> subtract storage n
+  in (([] : operation list), storage)
+${pre}`;
+
 const PascalLIGOTab = () => (
   <div
     id="tab-group-3-content-4"
@@ -20,38 +98,7 @@ const PascalLIGOTab = () => (
     data-group="group_3"
     tabIndex="-1"
   >
-    <div>
+    <MarkdownBlock>{pascaligoExample}</MarkdownBlock>
-      <span>
-        <pre>
-          <code className="hljs css language-Pascal">
-            // variant defining pseudo multi-entrypoint actions
-            <br />
-            type action is
-            <br />| Increment of int
-            <br />| Decrement of int
-            <br />
-            <br />
-            function add (const a : int ; const b : int) : int is
-            <br /> block {"{ skip }"} with a + b<br />
-            <br />
-            function subtract (const a : int ; const b : int) : int is
-            <br /> block {"{ skip }"} with a - b<br />
-            <br />
-            // real entrypoint that re-routes the flow based on the action
-            provided
-            <br />
-            function main (const p : action ; const s : int) : (list(operation)
-            * int) is
-            <br /> block {"{ skip }"} with ((nil : list(operation)),
-            <br /> case p of
-            <br /> | Increment(n) -&gt; add(s, n)
-            <br /> | Decrement(n) -&gt; subtract(s, n)
-            <br /> end)
-            <br />
-          </code>
-        </pre>
-      </span>
-    </div>
   </div>
 );
 
@@ -62,33 +109,7 @@ const CamelLIGOTab = () => (
     data-group="group_3"
     tabIndex="-1"
   >
-    <div>
+    <MarkdownBlock>{cameligoExample}</MarkdownBlock>
-      <pre>
-        <code className="hljs css language-Pascal">
-          type storage = int <br />
-          <br />
-          (* variant defining pseudo multi-entrypoint actions *) <br />
-          <br />
-          type action =<br />| Increment of int
-          <br />| Decrement of int
-          <br />
-          <br />
-          let add (a: int) (b: int) : int = a + b<br />
-          <br />
-          let subtract (a: int) (b: int) : int = a - b<br />
-          <br />
-          (* real entrypoint that re-routes the flow based on the action
-          provided *)
-          <br />
-          <br />
-          let%entry main (p : action) storage =<br /> let storage =<br /> match
-          p with
-          <br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
-          storage n<br /> in (([] : operation list), storage)
-          <br />
-        </code>
-      </pre>
-    </div>
   </div>
 );
 
@@ -134,7 +155,7 @@ class HomeSplash extends React.Component {
             </div>
           </div>
         </div>
-      </div>
+      </div >
     );
 
     return (
@@ -319,7 +340,7 @@ class Index extends React.Component {
           <div className="partners-text">
             <h3>Our Partners</h3>
             <p className="body">
-              We are not alone in this world -- here're some guys who support us
+              We are not alone in this world -- here're some people who support us
             </p>
           </div>
         </div>

gitlab-pages/website/static/css/custom.css

@@ -139,6 +139,10 @@ footnote {
   display: none;
 }
 
+.fixedHeaderContainer {
+  left: 0;
+}
+
 .nav-footer {
   background: var(--color-primary-text);
 }
@@ -184,11 +188,10 @@ footnote {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  padding: var(--padding-level-3);
 }
 
 .home-text {
-  width: 35%;
+  flex: 1;
 }
 
 .sample-code-container {
@@ -256,6 +259,10 @@ blockquote {
   color: rgba(255, 255, 255, 1);
 }
 
+.tab-pane {
+  height: 550px;
+}
+
 blockquote code {
   opacity: 0.5;
 }
@@ -323,6 +330,11 @@ html {
   background: white;
 }
 
+body {
+  margin: 0 auto;
+  max-width: 1500px;
+}
+
 .copyright a {
   color: #b2210c;
 }
@@ -683,31 +695,105 @@ body
 
 @media only screen and (max-width: 1023px) {
   .home-container {
-    flex-direction: column-reverse;
+    flex-direction: column;
-    margin-top: var(--padding-level-1);
-  }
-  .home-text {
     align-content: center;
-    text-align: center;
-    width: 90%;
-    padding-top: var(--padding-level-2);
   }
+
+  .home-text {
+    text-align: center;
+    padding: var(--padding-level-2) 0;
+  }
+
   .sample-code-container {
     width: 90%;
   }
+  
+  .sample-code {
+    padding: 0;
+    width: 100%;
+  }
 }
 
+@media only screen and (min-width: 1280px) {
+  .home-container {
+    flex-direction: row;
+    margin: var(--padding-level-1);    
+    max-width: 90%;
+    padding: var(--padding-level-3);
+  }
 @media only screen and (max-width: 1023px) {
   .reactNavSearchWrapper input#search_input_react {
     background-color: rgba(0, 0, 0, 0.2);
   }
 }
 
-@media only screen and (min-width: 1440px) {
   .landing h4.tagline-text {
     font-size: 2.25rem;
   }
+
+  .sample-code-container {
+    max-width: 60%;
+  }
+
+  .sample-code {
+    padding: 25px;
+    width: 80%;    
+  }
 }
 
-@media only screen and (min-width: 1500px) {
+
-}
+/* code highlights */
+.hljs {
+  display:block;
+  overflow-x:hidden;
+  padding:.5em;
+  background:white;
+  color:black
+ }
+ .hljs-comment,
+ .hljs-quote,
+ .hljs-variable {
+  color:#008000
+ }
+ .hljs-keyword,
+ .hljs-selector-tag,
+ .hljs-built_in,
+ .hljs-name,
+ .hljs-tag {
+  color:#00f
+ }
+ .hljs-string,
+ .hljs-title,
+ .hljs-section,
+ .hljs-attribute,
+ .hljs-literal,
+ .hljs-template-tag,
+ .hljs-template-variable,
+ .hljs-type,
+ .hljs-addition {
+  color:#a31515
+ }
+ .hljs-deletion,
+ .hljs-selector-attr,
+ .hljs-selector-pseudo,
+ .hljs-meta {
+  color:#2b91af
+ }
+ .hljs-doctag {
+  color:#808080
+ }
+ .hljs-attr {
+  color:#f00
+ }
+ .hljs-symbol,
+ .hljs-bullet,
+ .hljs-link {
+  color:#00b0e8
+ }
+ .hljs-emphasis {
+  font-style:italic
+ }
+ .hljs-strong {
+  font-weight:bold
+ }
+