Minimal landing page

ocaml-multicore · Nov 1, 2024 · 59a588e · 59a588e
1 parent a268b1a
commit 59a588e
Show file tree

Hide file tree

Showing 6 changed files with 395 additions and 0 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "proseWrap": "always"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Picos — Interoperable effects based concurrency</title>
+    <link rel="stylesheet" href="index/reset.css" />
+    <link rel="stylesheet" href="index/main.css" />
+    <link
+      rel="icon"
+      href="https://raw.githubusercontent.com/ocaml-multicore/picos/main/doc/picos-logo.svg"
+    />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/ocaml-multicore/picos/main/doc/picos-logo.svg"
+    />
+    <meta
+      property="og:description"
+      content="Composable concurrency with ease"
+    />
+  </head>
+  <body>
+    <header class="header">
+      <a href="/picos/">
+        <img
+          alt="Picos"
+          decoding="sync"
+          height="100%"
+          src="https://raw.githubusercontent.com/ocaml-multicore/picos/main/doc/picos-logo.svg"
+      /></a>
+      <nav class="links">
+        <a href="https://github.com/ocaml-multicore/picos#introduction"
+          >Introduction</a
+        >
+        <div id="api">
+          <a href="doc/">API</a>
+        </div>
+        <a href="https://github.com/ocaml-multicore/picos">GitHub</a>
+      </nav>
+    </header>
+    <section class="intro">
+      <a href="https://github.com/ocaml-multicore/picos#readme">
+        <img
+          style="margin: auto"
+          alt="Picos"
+          decoding="sync"
+          width="70%"
+          src="https://raw.githubusercontent.com/ocaml-multicore/picos/main/doc/picos-logo.svg"
+      /></a>
+      <p class="secondary">Interoperable Effects-Based Concurrency</p>
+    </section>
+    <section class="benefits">
+      <section class="block">
+        <h2>Interoperability</h2>
+        <p>
+          Picos is
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos/index.html#introduction"
+          >
+            an interface between <em>schedulers</em> and
+            <em>concurrent abstractions</em></a
+          >. Two phrases,
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos/index.html#picos-compatible"
+            >Picos compatible</a
+          >
+          and
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos/index.html#implemented-in-picos"
+            >Implemented in Picos</a
+          >, are used to describe the opposing sides of this contract.
+        </p>
+      </section>
+      <section class="block">
+        <h2>Cancelation</h2>
+        <p>
+          The
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos/Picos/index.html#understanding-cancelation"
+          >
+            two main motivating problems</a
+          >
+          for the design of Picos have been
+          <em>Cancelable synchronization</em> and
+          <em>Structured concurrency</em>.
+        </p>
+      </section>
+      <section class="block">
+        <h2>Mix and Match</h2>
+        <p>
+          Picos allows a single application to use
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos_mux/index.html"
+          >
+            multiple schedulers</a
+          >
+          and libraries internally using different
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos_std/Picos_std_structured/index.html"
+          >
+            concurrent programming models</a
+          >.
+        </p>
+      </section>
+      <section class="block">
+        <h2>IO</h2>
+        <p>
+          Picos allows
+          <a
+            href="https://ocaml-multicore.github.io/picos/doc/picos_io/Picos_io/index.html"
+          >
+            IO to be implemented as scheduler agnostic libraries</a
+          >.
+        </p>
+      </section>
+    </section>
+    <section class="outro">
+      <h2>Additional resources</h2>
+      <p>
+        <a
+          href="https://icfp24.sigplan.org/details/ocaml-2024-papers/5/Picos-Interoperable-effects-based-concurrency"
+          >Picos — Interoperable effects based concurrency</a
+        >
+      </p>
+      <hr />
+    </section>
+    <script type="module" src="index/main.js"></script>
+  </body>
+</html>
diff --git a/index/main.css b/index/main.css
@@ -0,0 +1,148 @@
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: Sans-Serif;
+  background: #202020;
+  color: #bebebe;
+}
+
+a {
+  font-weight: bold;
+  text-decoration: none;
+  color: #bebebe;
+}
+
+a:hover {
+  color: #ffffff;
+}
+
+.header {
+  padding: 8px 2em;
+  position: sticky;
+  top: 0;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #303030;
+}
+
+.header > * {
+  height: 100%;
+}
+
+.header .links {
+  display: flex;
+  align-items: center;
+}
+
+.header .links > * {
+  margin-left: 2em;
+}
+
+.intro {
+  text-align: center;
+  max-width: 900px;
+  margin: 60px auto;
+  padding: 0px 20px;
+}
+
+.primary {
+  margin-top: 30px;
+  font-size: xxx-large;
+}
+
+.secondary {
+  margin-top: 10px;
+  font-size: x-large;
+}
+
+.tertiary {
+  margin-top: 10px;
+  font-size: large;
+}
+
+.benefits {
+  background: #262626;
+  padding: 1px 20px;
+}
+
+.block {
+  max-width: 900px;
+  margin: 60px auto;
+  padding: 1px 0px;
+}
+
+.outro {
+  text-align: center;
+  max-width: 900px;
+  margin: 60px auto;
+  padding: 1px 20px;
+}
+
+.outro hr {
+  margin: 60px 0px;
+  opacity: 0.1;
+}
+
+h2 {
+  margin: 10px 0px;
+}
+
+h3 {
+  margin: 10px 0px 6px 0px;
+}
+
+#versions {
+  display: flex;
+  position: absolute;
+  top: 38px;
+  flex-direction: column;
+  background: #303030;
+  padding: 5px 15px;
+  border: 1px solid #404040;
+  max-height: 10em;
+  overflow: auto;
+
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.2s opacity;
+}
+
+a:hover + #versions,
+#versions:hover {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0.2s;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #fafafa;
+    color: #333;
+  }
+
+  a {
+    color: #555;
+  }
+
+  a:hover {
+    color: #000;
+  }
+
+  .header {
+    background: #eaeaea;
+  }
+
+  .benefits {
+    background: #f3f3f3;
+  }
+
+  a:hover + #versions,
+  #versions:hover {
+    background: #eaeaea;
+    border: 1px solid #dadada;
+  }
+}
diff --git a/index/main.js b/index/main.js
@@ -0,0 +1,32 @@
+import * as Version from './version.js'
+
+const get = async url => {
+  const response = await fetch(url)
+  return await response.json()
+}
+
+const init = async () => {
+  const contents = await get(
+    'https://api.github.com/repos/ocaml-multicore/picos/contents/?ref=gh-pages'
+  )
+
+  const versions = contents
+    .filter(e => e.type === 'dir' && Version.is(e.name))
+    .map(e => e.name)
+    .sort(Version.compare)
+    .reverse()
+
+  const container = document.createElement('div')
+  container.id = 'versions'
+  document.getElementById('api').appendChild(container)
+
+  for (const version of versions) {
+    const a = document.createElement('a')
+    a.href = version + '/'
+    a.innerText = version
+
+    container.appendChild(a)
+  }
+}
+
+init()
diff --git a/index/reset.css b/index/reset.css
@@ -0,0 +1,65 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}