diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js index 8c9cac7de..51f827e80 100644 --- a/gitlab-pages/website/pages/en/index.js +++ b/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 = () => (
( data-group="group_3" tabIndex="-1" > -
- - 
-          
-            // 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)
-            

-          
-
- -
+ {pascaligoExample}
); @@ -62,33 +109,7 @@ const CamelLIGOTab = () => ( data-group="group_3" tabIndex="-1" > -
- 
-        
-          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)
-          

-        
-
-
+ {cameligoExample} ); @@ -134,7 +155,7 @@ class HomeSplash extends React.Component { - + ); return ( @@ -319,7 +340,7 @@ class Index extends React.Component {

Our Partners

- 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

diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css index e4884493a..bf95fa2d4 100644 --- a/gitlab-pages/website/static/css/custom.css +++ b/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; - margin-top: var(--padding-level-1); - } - .home-text { + flex-direction: column; 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 + } + \ No newline at end of file