Browse Source

New website layout

main
Gil Mizrahi 6 months ago
parent
commit
2af7bfd97c
8 changed files with 275 additions and 90 deletions
  1. +1
    -0
      .gitlab-ci.yml
  2. +52
    -0
      website/blog.html
  3. +62
    -0
      website/docs.html
  4. +0
    -33
      website/haddocks/index.html
  5. +39
    -49
      website/index.html
  6. +72
    -0
      website/project.html
  7. +49
    -8
      website/static/css/main.css
  8. BIN
      website/static/images/logo.png

+ 1
- 0
.gitlab-ci.yml View File

@@ -36,6 +36,7 @@ pages:
- cp -r website public
- stack build --fast --no-terminal
- stack hoogle --rebuild --no-terminal
- mkdir -p public/haddocks
- cp -r .stack-work/install/*/*/*/doc/giml-* public/haddocks/
artifacts:
paths:


+ 52
- 0
website/blog.html View File

@@ -0,0 +1,52 @@
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>Giml: a purely functional programming language</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link rel="stylesheet" type="text/css" href="static/highlight/styles/arta.css">
</head>
<body>

<main class="main-container">
<header class="main-header">
<h1><a href="https://gilmi.gitlab.io/giml-lang">
<img src="static/images/logo.png" alt="Giml logo" title="Giml-lang home" style="vertical-align:text-bottom;"> Giml
</a></h1>
<h2>Giml News</h2>

<section>
<nav>
<ul class="nav-links">
<li class="nav-link">
<a href="index.html">Home</a>
</li>
<li class="nav-link">
<a href="project.html">The Project</a>
</li>
<li class="nav-link">
<a href="docs.html">Documents</a>
</li>
<li class="nav-link">
<a href="blog.html">Blog</a>
</li>
</ul>
</nav>
</section>
</header>

<content>
<ul>
<li>2021/03/13 - <a href="https://gilmi.me/blog/post/2021/03/13/giml-announcement">Strema is now Giml (Giml announcement)</a></li>
<li>2021/02/21 - <a href="https://gilmi.me/blog/post/2021/02/11/strema-streaming">Live coding a compiler (Strema announcement)</a></li>
</ul>

</content>

<footer>
</footer>

</main>

<script src="static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


</body></html>

+ 62
- 0
website/docs.html View File

@@ -0,0 +1,62 @@
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>Giml: a purely functional programming language</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link rel="stylesheet" type="text/css" href="static/highlight/styles/arta.css">
</head>
<body>

<main class="main-container">
<header class="main-header">
<h1><a href="https://gilmi.gitlab.io/giml-lang">
<img src="static/images/logo.png" alt="Giml logo" title="Giml-lang home" style="vertical-align:text-bottom;"> Giml
</a></h1>
<h2>Giml Docs</h2>

<section>
<nav>
<ul class="nav-links">
<li class="nav-link">
<a href="index.html">Home</a>
</li>
<li class="nav-link">
<a href="project.html">The Project</a>
</li>
<li class="nav-link">
<a href="docs.html">Documents</a>
</li>
<li class="nav-link">
<a href="blog.html">Blog</a>
</li>
</ul>
</nav>
</section>
</header>

<content>
<h2>Haddocks Index</h2>
<p>The Giml implementation is separated into the following packages:</p>
<ul>
<li><a href="haddocks/giml-language-0.1.0.0/index.html">giml-language</a> - Definition and frontend of the Giml language.</li>
<li><a href="haddocks/giml-backend-js-0.1.0.0/index.html">giml-backend-js</a> - Definition and backend of a subset of JavaScript used as a compilation target for Giml.</li>
<li><a href="haddocks/giml-compiler-0.1.0.0/index.html">giml-compiler</a> - A compiler from Giml to JavaScript.</li>
</ul>
<h2>Other documents</h2>
<ul>
<li><a href="https://gitlab.com/gilmi/giml-lang/-/tree/main/examples">Code examples</a></li>
<li><a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/language-ref.org">Language reference</a></li>
<li><a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/overview.org">Implementation overview</a></li>
<li><a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/wishlist.org">Wish list</a></li>
</ul>

</content>

<footer>
</footer>

</main>

<script src="static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


</body></html>

+ 0
- 33
website/haddocks/index.html View File

@@ -1,33 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Giml: a purely functional programming language</title>
<link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>

<div class="main-container">
<header class="main-header">
<a href="https://gilmi.gitlab.io/giml-lang">
<img src="../static/images/logo.png" alt="Giml logo" title="Giml homepage">
</a>
<h1>Giml Haddocks index</h1>
</header>

<nav class="main-navigation">
<ul class="nav-links">
<li>
<a href="giml-language-0.1.0.0/index.html">giml-language</a> - Definition and frontend of the Giml language.
</li>
<li>
<a href="giml-backend-js-0.1.0.0/index.html">giml-backend-js</a> - Definition and backend of a subset of JavaScript used as a compilation target for Giml.
</li>
<li>
<a href="giml-compiler-0.1.0.0/index.html">giml-compiler</a> - A compiler from Giml to JavaScript.
</li>
</ul>
</nav>

</body>
</html>

+ 39
- 49
website/index.html View File

@@ -2,27 +2,42 @@
<title>Giml: a purely functional programming language</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link rel="stylesheet" type="text/css" href="static/highlight/styles/arta.css">
</head>
<body>
</head>
<body>

<div class="main-container">
<main class="main-container">
<header class="main-header">
<a href="https://gitlab.com/gilmi/giml-lang">
<img src="static/images/logo.png" alt="Giml logo" title="Giml repository on GitLab">
</a>
<h1>Giml is a strict, statically typed, purely functional programming language built live on stream</h1>
</header>
<h1><a href="https://gilmi.gitlab.io/giml-lang">
<img src="static/images/logo.png" alt="Giml logo" title="Giml-lang home" style="vertical-align:text-bottom;"> Giml
</a></h1>
<h2>A strict, purely functional programming language</h2>

<nav class="main-navigation">
<section>
<nav>
<ul class="nav-links">
<li class="nav-link">
<a href="index.html">Home</a>
</li>
<li class="nav-link">
<a href="project.html">The Project</a>
</li>
<li class="nav-link">
<a href="docs.html">Documents</a>
</li>
<li class="nav-link">
<a href="blog.html">Blog</a>
</li>
</ul>
</nav>
</section>
</header>

<content class="main-content">
<div class="center">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLhMOOgDOKD4IkQM75GkAnXI-fpIrDAnsu" frameborder="0" allow="encrypted-media; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="side-by-side">
<content>
<section class="center">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLhMOOgDOKD4IkQM75GkAnXI-fpIrDAnsu" frameborder="0" allow="encrypted-media; picture-in-picture" allowfullscreen></iframe>
</section>
<p><strong>Giml</strong> is a strict, statically typed, purely <strong>functional programming language</strong> with emphasis on structural typing <strong>developed live on stream</strong>. See the <a href="project.html">project page</a> for more information.</p>
<section class="side-by-side">
<div class="example">
<script>
var hideGiml = function() {
@@ -138,42 +153,17 @@ main();
</ul>
<p>More info <a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/language-ref.org">here</a>.</p>
</div>
</div>
<h2>More Information?</h2>
<p>The main repository for Giml lives on <a href="https://gitlab.com/gilmi/giml-lang">Gitlab.com/gilmi/giml-lang</a>.</p>
<p>Note that the issue tracker is a good place to ask questions, but pull/merge requests will not be accepted at this time.</p>
<p>Visit <a href="https://gilmi.gitlab.io/giml-lang/haddocks">the docs</a> for implementation details. There's also an <a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/overview.org">overview document</a> describing some less trivial features and how they're implemented.</p>
<h2>Streaming? When and Where?</h2>
<p>Giml (<a href="https://gilmi.me/blog/post/2021/03/13/giml-announcement">formerly known as Strema</a>)
started as (and still is) a fun <a href="https://gilmi.me/blog/post/2021/02/11/strema-streaming">live coding project</a>, and almost all of the work is done while streaming live.</p>
<p>Live coding sessions are streamed <a href="https://twitch.tv/suppipi">on twitch</a> and are then
uploaded <a href="https://www.youtube.com/watch?v=khAKcFgziWU&amp;list=PLhMOOgDOKD4IkQM75GkAnXI-fpIrDAnsu">to youtube</a>.</p>
<p>I stream about two times a week, usually Sunday and Wednesday, on european mornings.
My <a href="https://www.twitch.tv/suppipi/schedule">twitch schedule</a> contains the most up-to-date information.</p>
<h2>Haskell?</h2>
<p>Yeah! I think Haskell is really great and <a href="https://github.com/soupi/rfc/blob/master/compilers-and-haskell.md">a very good fit for writing compilers</a>.</p>
<p>If you are interested in this project but aren't really familiar with Haskell, worry not! I've written a bunch of material hoping to help people get started with Haskell easily, including:</p>
<ul>
<li><a href="https://soupi.github.io/rfc/reading_simple_haskell/">Reading Simple Haskell</a></li>
<li><a href="https://github.com/soupi/haskell-study-plan">Haskell study plan</a></li>
<li><a href="https://github.com/soupi/learn-haskell-blog-generator">Learning Haskell by building a simple blog generator</a></li>
</ul>
<p>I've also compiled a list of resources on writing compilers for functional languages:</p>
<ul>
<li><a href="https://github.com/soupi/rfc/blob/master/fun-compilers.md">Fun compilers</a></li>
</ul>
<p>Do let me know if these tutorials helped you :)</p>
<h2>Why?</h2>
<p>Because it's fun!</p>
<p>But also because I'd like to make Haskell and building compilers more approachable.</p>
<h2>Who am I?</h2>
<p>I'm Gil, also known as <a href="https://twitter.com/_gilmi">gilmi</a> or <a href="https://github.com/soupi">suppi</a>.
I do a bunch of stuff with Haskell. <a href="https://gilmi.me">My website</a> has more information about me, my open source projects and tutorials :)</p>
</section>

</content>
</div>
</content>

<footer>
</footer>

</main>

<link rel="stylesheet" type="text/css" href="static/highlight/styles/arta.css">
<script src="static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body></html>


</body></html>

+ 72
- 0
website/project.html View File

@@ -0,0 +1,72 @@
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>Giml: a purely functional programming language</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link rel="stylesheet" type="text/css" href="static/highlight/styles/arta.css">
</head>
<body>

<main class="main-container">
<header class="main-header">
<h1><a href="https://gilmi.gitlab.io/giml-lang">
<img src="static/images/logo.png" alt="Giml logo" title="Giml-lang home" style="vertical-align:text-bottom;"> Giml
</a></h1>
<h2>The Giml Project</h2>

<section>
<nav>
<ul class="nav-links">
<li class="nav-link">
<a href="index.html">Home</a>
</li>
<li class="nav-link">
<a href="project.html">The Project</a>
</li>
<li class="nav-link">
<a href="docs.html">Documents</a>
</li>
<li class="nav-link">
<a href="blog.html">Blog</a>
</li>
</ul>
</nav>
</section>
</header>

<content>
<h2>The Project</h2>
<p>Giml is an open source hobby project developed by <a href="https://gilmi.me">Gil Mizrahi</a> and is licensed under <a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/LICENSE">BSD-3</a>.</p>
<p>Giml (formerly known as Strema) started as as a hobby 'Live coding a compiler' streaming project and most of the work has been developed live on Twitch.</p>
<p>Giml is still very much a work-in-progress and many critical features are currently missing, but feel free to play around with it if you'd like!</p>
<h2>Why?</h2>
<p>Because it's fun!</p>
<p>But also because I'd like to make Haskell and building compilers more approachable.</p>
<h2>Source &amp; Docs</h2>
<p>Giml's <a href="https://gitlab.com/gilmi/giml-lang">source repository</a> and <a href="https://gitlab.com/gilmi/giml-lang/issues">issue tracker</a> are hosted on Gitlab.</p>
<p>Giml is currently pre-0.1 release and is still changing rapidly.
To play with Giml-HEAD, see the build instructions in the <a href="https://gitlab.com/gilmi/giml-lang/-/blob/main/README.md">README</a>.</p>
<p>Various documentation including haddocks, language reference and examples can be found in <a href="docs.html">the docs page</a>.</p>
<h2>The Development</h2>
<p>If you're interested in watching Giml's developement videos, live or on demand,
check out my <a href="https://www.twitch.tv/suppipi/schedule">Twitch schedule</a> or Giml's
<a href="https://www.youtube.com/watch?list=PLhMOOgDOKD4IkQM75GkAnXI-fpIrDAnsu&amp;v=khAKcFgziWU">Youtube playlist</a>.</p>
<h2>Resources</h2>
<p>If you are interested in Haskell or compilers development but don't know where to start, check out the following resources:</p>
<ul>
<li><a href="https://soupi.github.io/rfc/reading_simple_haskell/">Reading Simple Haskell</a></li>
<li><a href="https://github.com/soupi/haskell-study-plan">Haskell study plan</a></li>
<li><a href="https://github.com/soupi/learn-haskell-blog-generator">Learning Haskell by building a simple blog generator</a></li>
<li><a href="https://github.com/soupi/rfc/blob/master/fun-compilers.md">Fun compilers</a></li>
</ul>

</content>

<footer>
</footer>

</main>

<script src="static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


</body></html>

+ 49
- 8
website/static/css/main.css View File

@@ -8,22 +8,59 @@ html {
}

body {
background-image: linear-gradient(rgb(30,25,35), rgb(30,35,50), #864450, #e66465);
min-height: 90%;
background-image: linear-gradient(rgb(30,25,35), rgb(30,35,50), #563450, #e66465);

font-weight: initial;
font-size: 1.1em;
}

.nav-links {
margin-top: 2rem;
padding-bottom: 1rem;
margin-bottom: 2.5rem;
text-align: center;
border-bottom: 1px solid rgb(40,35,45); // rgb(64, 55, 107);

}
.nav-links li {
list-style-type: none;
display: inline-block;
}
.nav-links a {
display: inline-block;
padding: 1rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
font-size: 1.2em;
// font-weight: bold;
text-decoration: none;
color: rgb(218, 77, 78);
}
.nav-links a:hover {
color: white;
}
.nav-links li:hover {
// background-color: rgb(85, 25, 180);
background-color: rgba(74, 55, 127, 0.9);
}
.nav-links li:hover a {
color: white;
}

.main-container {
min-height: 100%;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
max-width: 960px;
min-width: 500px;
min-width: 640px;
padding: 2em;
padding-left: 5em;
padding-right: 5em;
font-family: sans-serif;
background-image: none;
background-color: white;
background-color: rgb(255,255,255);
}

.side-by-side {
@@ -32,6 +69,9 @@ body {
}

.main-header {
}

.main-header h2 {
text-align: center;
}

@@ -85,11 +125,11 @@ p {


a:visited {
color: rgb(218, 77, 78);
color: rgb(178, 47, 48);
}

a {
color: rgb(218, 77, 78);
color: rgb(178, 47, 48);
text-decoration: underline;
font-weight: normal;
}
@@ -97,10 +137,11 @@ a:hover {
color: rgb(85, 25, 180);
}

h1 { font-size: 1.7em; color: rgb(64, 55, 107); }
h2 { font-size: 1.5em; color: rgb(64, 55, 107); }
h3 { font-size: 1.4em; color: rgb(64, 55, 107); }
h1 { font-size: 1.9em; color: rgb(64, 55, 107); }
h2 { font-size: 1.7em; color: rgb(64, 55, 107); }
h3 { font-size: 1.5em; color: rgb(64, 55, 107); }
h4 { font-size: 1.3em; color: rgb(64, 55, 107); }
h5 { font-size: 1.2em; color: rgb(64, 55, 107); }
h6 { font-size: 1.1em; color: rgb(64, 55, 107); }

h1 a { font-size: 1.9em; color: rgb(64, 55, 107); font-weight: bold; text-decoration: none; }

BIN
website/static/images/logo.png View File

Before After
Width: 200  |  Height: 200  |  Size: 60KB Width: 80  |  Height: 80  |  Size: 14KB

Loading…
Cancel
Save