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

Feature/homepage syntax highlighting

See merge request ligolang/ligo!107
This commit is contained in:
Sander 2019-09-30 10:35:07 +00:00
commit 23c9aebf2e
2 changed files with 180 additions and 73 deletions

View File

@ -9,10 +9,88 @@ const React = require("react");
const CompLibrary = require("../../core/CompLibrary.js"); const CompLibrary = require("../../core/CompLibrary.js");
const hljs = require("highlight.js");
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock; 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 = () => ( const PascalLIGOTab = () => (
<div <div
id="tab-group-3-content-4" id="tab-group-3-content-4"
@ -20,38 +98,7 @@ const PascalLIGOTab = () => (
data-group="group_3" data-group="group_3"
tabIndex="-1" 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> </div>
); );
@ -62,33 +109,7 @@ const CamelLIGOTab = () => (
data-group="group_3" data-group="group_3"
tabIndex="-1" 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> </div>
); );
@ -319,7 +340,7 @@ class Index extends React.Component {
<div className="partners-text"> <div className="partners-text">
<h3>Our Partners</h3> <h3>Our Partners</h3>
<p className="body"> <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> </p>
</div> </div>
</div> </div>

View File

@ -139,6 +139,10 @@ footnote {
display: none; display: none;
} }
.fixedHeaderContainer {
left: 0;
}
.nav-footer { .nav-footer {
background: var(--color-primary-text); background: var(--color-primary-text);
} }
@ -184,11 +188,10 @@ footnote {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
padding: var(--padding-level-3);
} }
.home-text { .home-text {
width: 35%; flex: 1;
} }
.sample-code-container { .sample-code-container {
@ -256,6 +259,10 @@ blockquote {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.tab-pane {
height: 550px;
}
blockquote code { blockquote code {
opacity: 0.5; opacity: 0.5;
} }
@ -323,6 +330,11 @@ html {
background: white; background: white;
} }
body {
margin: 0 auto;
max-width: 1500px;
}
.copyright a { .copyright a {
color: #b2210c; color: #b2210c;
} }
@ -683,31 +695,105 @@ body
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.home-container { .home-container {
flex-direction: column-reverse; flex-direction: column;
margin-top: var(--padding-level-1);
}
.home-text {
align-content: center; 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 { .sample-code-container {
width: 90%; 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) { @media only screen and (max-width: 1023px) {
.reactNavSearchWrapper input#search_input_react { .reactNavSearchWrapper input#search_input_react {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
} }
@media only screen and (min-width: 1440px) {
.landing h4.tagline-text { .landing h4.tagline-text {
font-size: 2.25rem; font-size: 2.25rem;
} }
.sample-code-container {
max-width: 60%;
} }
@media only screen and (min-width: 1500px) { .sample-code {
padding: 25px;
width: 80%;
} }
}
/* 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
}