Merge branch 'LIGO-93-profiles' into 'LIGO-92-buttons'

[LIGO-93] redesign profile pics

See merge request ligolang/ligo!86
This commit is contained in:
Sarah Fowler 2019-09-26 14:19:47 +00:00
commit 5dc46ef392
5 changed files with 278 additions and 136 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ dune-project
cache/*
Version.ml
/_opam/
**/.DS_Store

View File

@ -5,9 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const React = require("react");
const CompLibrary = require('../../core/CompLibrary.js');
const CompLibrary = require("../../core/CompLibrary.js");
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const Container = CompLibrary.Container;
@ -15,46 +15,117 @@ const GridBlock = CompLibrary.GridBlock;
class HomeSplash extends React.Component {
render() {
const {siteConfig, language = ''} = this.props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const { siteConfig, language = "" } = this.props;
const { baseUrl, docsUrl } = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
const langPart = `${language ? `${language}/` : ""}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const SplashContainer = props => (
<div className="homeContainer">
<div className="homeSplashFade">
<div className="wrapper homeWrapper">
<div className="tabs">
<div className="nav-tabs">
<div id="tab-group-3-tab-4" className="nav-link active" data-group="group_3"
data-tab="tab-group-3-content-4">PascaLIGO</div>
<div className="nav-link" data-group="group_3"
data-tab="tab-group-3-content-5">CameLIGO</div>
<div className="nav-link">ReasonLIGO (coming soon) </div>
{/* <div id="tab-group-3-tab-5" className="nav-link" data-group="group_3"
<div className="tabs">
<div className="nav-tabs">
<div
id="tab-group-3-tab-4"
className="nav-link active"
data-group="group_3"
data-tab="tab-group-3-content-4"
>
PascaLIGO
</div>
<div
className="nav-link"
data-group="group_3"
data-tab="tab-group-3-content-5"
>
CameLIGO
</div>
<div className="nav-link">ReasonLIGO (coming soon) </div>
{/* <div id="tab-group-3-tab-5" className="nav-link" data-group="group_3"
data-tab="tab-group-3-content-5">Camligo</div> */}
</div>
<div className="tab-content">
<div id="tab-group-3-content-4" className="tab-pane active" data-group="group_3" tabIndex="-1">
<div>
<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 id="tab-group-3-content-5" className="tab-pane" data-group="group_3" tabIndex="-1">
<div>
<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 className="tab-content">
<div
id="tab-group-3-content-4"
className="tab-pane active"
data-group="group_3"
tabIndex="-1"
>
<div>
<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
id="tab-group-3-content-5"
className="tab-pane"
data-group="group_3"
tabIndex="-1"
>
<div>
<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>
</div>
</div>
{props.children}
</div>
@ -95,9 +166,19 @@ class HomeSplash extends React.Component {
<div className="inner">
<ProjectTitle siteConfig={siteConfig} />
<PromoSection>
<Button href={docUrl('setup/installation.html')}>Get Started</Button>
<Button href={docUrl('tutorials/get-started/tezos-taco-shop-smart-contract')}>Tutorials</Button>
<Button href={docUrl('contributors/origin.html')}>Contribute</Button>
<Button href={docUrl("setup/installation.html")}>
Get Started
</Button>
<Button
href={docUrl(
"tutorials/get-started/tezos-taco-shop-smart-contract"
)}
>
Tutorials
</Button>
<Button href={docUrl("contributors/origin.html")}>
Contribute
</Button>
</PromoSection>
</div>
</SplashContainer>
@ -107,14 +188,15 @@ class HomeSplash extends React.Component {
class Index extends React.Component {
render() {
const {config: siteConfig, language = ''} = this.props;
const {baseUrl} = siteConfig;
const { config: siteConfig, language = "" } = this.props;
const { baseUrl } = siteConfig;
const Block = props => (
<Container
padding={['bottom', 'top']}
padding={["bottom", "top"]}
id={props.id}
background={props.background}>
background={props.background}
>
<GridBlock
align="center"
contents={props.children}
@ -126,7 +208,8 @@ class Index extends React.Component {
const FeatureCallout = () => (
<div
className="productShowcaseSection paddingBottom"
style={{textAlign: 'center'}}>
style={{ textAlign: "center" }}
>
<h2>Feature Callout</h2>
<MarkdownBlock>These are features of this project</MarkdownBlock>
</div>
@ -137,13 +220,13 @@ class Index extends React.Component {
{[
{
content:
'To make your landing page more attractive, use illustrations! Check out ' +
'[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' +
'The illustrations you see on this page are from unDraw.',
"To make your landing page more attractive, use illustrations! Check out " +
"[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. " +
"The illustrations you see on this page are from unDraw.",
image: `${baseUrl}img/undraw_code_review.svg`,
imageAlign: 'left',
title: 'Wonderful SVG Illustrations',
},
imageAlign: "left",
title: "Wonderful SVG Illustrations"
}
]}
</Block>
);
@ -153,11 +236,11 @@ class Index extends React.Component {
{[
{
content:
'This is another description of how this project is useful',
"This is another description of how this project is useful",
image: `${baseUrl}img/undraw_note_list.svg`,
imageAlign: 'right',
title: 'Description',
},
imageAlign: "right",
title: "Description"
}
]}
</Block>
);
@ -167,11 +250,11 @@ class Index extends React.Component {
{[
{
content:
'Each new Docusaurus project has **randomly-generated** theme colors.',
"Each new Docusaurus project has **randomly-generated** theme colors.",
image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
imageAlign: 'right',
title: 'Randomly Generated Theme Colors',
},
imageAlign: "right",
title: "Randomly Generated Theme Colors"
}
]}
</Block>
);
@ -182,22 +265,24 @@ class Index extends React.Component {
<Block layout="fourColumn">
{[
{
content: 'Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.',
content:
"Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
image: `${baseUrl}img/edit.svg`,
imageAlign: 'top',
title: 'Syntax Agnostic',
imageAlign: "top",
title: "Syntax Agnostic"
},
{
content: 'Write types, then code, and benefit from the safety coming from type systems.',
content:
"Write types, then code, and benefit from the safety coming from type systems.",
image: `${baseUrl}img/lightning.svg`,
imageAlign: 'top',
title: 'Strong Type System',
imageAlign: "top",
title: "Strong Type System"
},
{
content: 'With Granary, you can use LIGO as a lib from NodeJS.',
content: "With Granary, you can use LIGO as a lib from NodeJS.",
image: `${baseUrl}img/puzzle.svg`,
imageAlign: 'top',
title: 'Easy Integration',
imageAlign: "top",
title: "Easy Integration"
}
]}
</Block>
@ -206,7 +291,7 @@ class Index extends React.Component {
const Roadmap = () => (
<div className="roadmap">
<Block background="light" >
<Block background="light">
{[
{
content:
@ -229,9 +314,9 @@ class Index extends React.Component {
"Long term plans will be announced soon" +
"</em>",
image: ``,
imageAlign: 'right',
title: 'Roadmap',
},
imageAlign: "right",
title: "Roadmap"
}
]}
</Block>
</div>
@ -250,7 +335,7 @@ class Index extends React.Component {
</a>
));
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
return (
<div className="productShowcaseSection paddingBottom">
@ -273,18 +358,22 @@ class Index extends React.Component {
const showcase = siteConfig.team
.filter(user => user.pinned)
.map(user => (
<a href={user.infoLink} key={user.infoLink}>
<img src={user.image} alt={user.caption} title={user.caption} />
<p>{user.caption}</p>
<a
className="profileContainer"
href={user.infoLink}
key={user.infoLink}
>
<img className="profileImage" src={user.image} alt={user.caption} />
<p className="headline">{user.caption}</p>
</a>
));
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
return (
<div className="productShowcaseSection paddingBottom team">
<h1 className="sectionTitle">Team</h1>
<div className="logos">{showcase}</div>
<div className="team-container">{showcase}</div>
{/* <div className="more-users">
<a className="button" href={pageUrl('users.html')}>
More {siteConfig.title} Users
@ -298,7 +387,6 @@ class Index extends React.Component {
<div className="landing">
<HomeSplash siteConfig={siteConfig} language={language} />
<div className="mainContainer">
<Features />
{/* <Roadmap /> */}
{/* <FeatureCallout /> */}

View File

@ -11,99 +11,103 @@
// List of projects/orgs using your project for the users page.
const partners = [
{
caption: 'Nomadic Labs',
caption: "Nomadic Labs",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/nomadic-logo.jpg',
infoLink: 'https://www.nomadic-labs.com/',
pinned: true,
image: "/img/nomadic-logo.jpg",
infoLink: "https://www.nomadic-labs.com/",
pinned: true
},
{
caption: 'Tocqueville Group',
caption: "Tocqueville Group",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/tq-logo.svg',
infoLink: 'https://tqgroup.io/',
pinned: true,
image: "/img/tq-logo.svg",
infoLink: "https://tqgroup.io/",
pinned: true
},
{
caption: 'Stove Labs',
caption: "Stove Labs",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/stove-logo.png',
infoLink: 'https://stove-labs.com',
pinned: true,
},
image: "/img/stove-logo.png",
infoLink: "https://stove-labs.com",
pinned: true
}
];
const team = [
{
caption: 'Gabriel Alfour',
caption: "Gabriel Alfour",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/user.png',
infoLink: 'https://gitlab.com/gabriel.alfour',
pinned: true,
image: "/img/user.svg",
infoLink: "https://gitlab.com/gabriel.alfour",
pinned: true
},
{
caption: 'Georges Dupéron',
caption: "Georges Dupéron",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/user.png',
infoLink: 'https://gitlab.com/georges.duperon',
pinned: true,
image: "/img/user.svg",
infoLink: "https://gitlab.com/georges.duperon",
pinned: true
},
{
caption: 'Christian Rinderknecht',
caption: "Christian Rinderknecht",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/christian.jpeg',
infoLink: 'https://github.com/rinderknecht',
pinned: true,
image: "/img/christian.jpeg",
infoLink: "https://github.com/rinderknecht",
pinned: true
},
{
caption: 'Brice Aldrich',
caption: "Brice Aldrich",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/brice.png',
infoLink: 'https://github.com/DefinitelyNotAGoat',
pinned: true,
image: "/img/brice.png",
infoLink: "https://github.com/DefinitelyNotAGoat",
pinned: true
},
{
caption: 'Matej Sima',
caption: "Matej Sima",
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/image.jpg'.
image: '/img/matej.jpg',
infoLink: 'https://github.com/maht0rz',
pinned: true,
},
image: "/img/matej.jpg",
infoLink: "https://github.com/maht0rz",
pinned: true
}
];
const siteConfig = {
title: 'LIGO', // Title for your website.
tagline: 'LIGO is a statically typed high-level smart-contract language that compiles down to Michelson. It seeks to be easy to use, extensible and safe.',
url: 'https://your-docusaurus-test-site.com', // Your website URL
baseUrl: '/', // Base URL for your project */
title: "LIGO", // Title for your website.
tagline:
"LIGO is a statically typed high-level smart-contract language that compiles down to Michelson. It seeks to be easy to use, extensible and safe.",
url: "https://your-docusaurus-test-site.com", // Your website URL
baseUrl: "/", // Base URL for your project */
// For github.io type URLs, you would set the url and baseUrl like:
// url: 'https://facebook.github.io',
// baseUrl: '/test-site/',
// Used for publishing and more
projectName: 'ligo',
organizationName: 'marigold',
projectName: "ligo",
organizationName: "marigold",
// For top-level user or org sites, the organization is still the same.
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
// organizationName: 'JoelMarcey'
// For no header links in the top nav bar -> headerLinks: [],
headerLinks: [
{doc: 'setup/installation', label: 'Docs'},
{doc: 'tutorials/get-started/tezos-taco-shop-smart-contract', label: 'Tutorials'},
{ blog: true, label: 'Blog' },
{ doc: "setup/installation", label: "Docs" },
{
doc: "tutorials/get-started/tezos-taco-shop-smart-contract",
label: "Tutorials"
},
{ blog: true, label: "Blog" },
// TODO: { href: "/odoc", label: "Api" },
{doc: 'contributors/origin', label: 'Contribute'},
{href: 'https://discord.gg/9rhYaEt', label: ''},
{ search: true },
{ doc: "contributors/origin", label: "Contribute" },
{ href: "https://discord.gg/9rhYaEt", label: "" },
{ search: true }
],
// If you have users set above, you add it here:
@ -111,14 +115,14 @@ const siteConfig = {
team,
/* path to images for header/footer */
headerIcon: 'img/logo.svg',
footerIcon: 'img/logo.svg',
favicon: 'img/logo.svg',
headerIcon: "img/logo.svg",
footerIcon: "img/logo.svg",
favicon: "img/logo.svg",
/* Colors for website */
colors: {
primaryColor: '#1A1A1A',
secondaryColor: '#1A1A1A',
primaryColor: "#1A1A1A",
secondaryColor: "#1A1A1A"
},
/* Custom fonts for website */
@ -140,20 +144,20 @@ const siteConfig = {
highlight: {
// Highlight.js theme to use for syntax highlighting in code blocks.
theme: 'default',
theme: "default"
},
// Add custom scripts here that would be placed in <script> tags.
scripts: ['https://buttons.github.io/buttons.js'],
scripts: ["https://buttons.github.io/buttons.js"],
// On page navigation for the current documentation page.
onPageNav: 'separate',
onPageNav: "separate",
// No .html extensions for paths.
cleanUrl: true,
// Open Graph and Twitter card images.
ogImage: 'img/undraw_online.svg',
twitterImage: 'img/undraw_tweetstorm.svg',
ogImage: "img/undraw_online.svg",
twitterImage: "img/undraw_tweetstorm.svg",
// Show documentation's last contributor's name.
// enableUpdateBy: true,
@ -163,15 +167,15 @@ const siteConfig = {
// You may provide arbitrary config keys to be used as needed by your
// template. For example, if you need your repo's URL...
repoUrl: 'https://gitlab.com/ligolang/ligo',
repoUrl: "https://gitlab.com/ligolang/ligo",
stylesheets: [
"https://fonts.googleapis.com/css?family=DM+Sans|Open+Sans|Source+Code+Pro&display=swap"
],
algolia: {
apiKey: '12be98d9fd4242a5f16b70a5cc6b0158',
indexName: 'ligolang',
apiKey: "12be98d9fd4242a5f16b70a5cc6b0158",
indexName: "ligolang",
algoliaOptions: {} // Optional, if provided by Algolia
},
}
};
module.exports = siteConfig;

View File

@ -456,6 +456,38 @@ body
fill: #0078e8;
}
/** Profile Images **/
.profileContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: fit-content;
color: var(--color-primary-text);
padding: 0 var(--padding-level-1);
}
.profileContainer:hover {
color: var(--color-primary-brand);
}
.profileImage {
max-height: 195px;
max-width: 195px;
border: var(--color-gray);
}
.profileImage:hover {
box-shadow: 12px 12px 0px var(--color-primary-brand);
}
.team-container {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: var(--padding-level-1);
flex-wrap: wrap;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}

View File

@ -0,0 +1,17 @@
<svg width="195" height="195" viewBox="0 0 195 195" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="195" height="195" rx="2" fill="#EBF6FF"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="195" height="195">
<rect width="195" height="195" rx="2" fill="#EFEFEF"/>
</mask>
<g mask="url(#mask0)">
<g opacity="0.66">
<path fill-rule="evenodd" clip-rule="evenodd" d="M96.8828 136.001C117.493 136.001 134.2 117.205 134.2 94.0192C134.2 70.8332 117.493 52.0371 96.8828 52.0371C76.2729 52.0371 59.5653 70.8332 59.5653 94.0192C59.5653 117.205 76.2729 136.001 96.8828 136.001ZM74.6715 144C40.8717 144 14.2319 172.785 16.8451 206.484L22.1944 275.469C22.9616 285.363 31.2138 293 41.1375 293H153.862C163.786 293 172.038 285.363 172.805 275.469L178.155 206.484C180.768 172.785 154.128 144 120.328 144H74.6715Z" fill="url(#paint0_linear)"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="97.9998" y1="215.5" x2="97.9998" y2="25.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="#A5D4FF"/>
<stop offset="1" stop-color="#D3EAFF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB