#inject runtime.vars {
Enable_Heap_Debug :: true
// Debug :: true
+ CGI_MODE :: true
}
reg: otmp.TemplateRegistry;
@route.{.GET, "/docs/getting_started"}
(req: &Req, res: &Res) => res->render("pages/docs/getting_started", null);
+@route.{.GET, "/robots.txt"}
+(req: &Req, res: &Res) {
+ res->file("./www/static/robots.txt");
+ res->status(200);
+ res->end();
+}
+
Article :: struct { name, description, path, date: str }
news_articles: Cached_Resource([] Article);
logger := http.server.logger(style=.V2);
pipes->pipe(&logger);
- app := http.server.tcp(pipes, .{ thread_count = 0 });
+ #if #defined(runtime.vars.CGI_MODE) {
+ http.server.cgi(pipes);
- port := conv.parse_int(os.env("SERVER_PORT") ?? "8000");
+ } else {
+ app := http.server.tcp(pipes, .{ thread_count = 8 });
+
+ port := conv.parse_int(os.env("SERVER_PORT") ?? "8000");
- app->serve(~~port);
- println("Server stopping...");
+ app->serve(~~port);
+ println("Server stopping...");
+ }
}
}
.ui-theme {
- --terminal-background-color: #303033;
- --terminal-foreground-color: #ffffff;
-
- --background-color: #f0f0f5;
- --light-background-color: #e0e0e6;
- --dark-background-color: var(--header-color);
- --active-color: #cccccc;
-
- --header-color: #303033;
+ --header-color: linear-gradient(var(--accent-background) 0, var(--background) 70%);
--header-text: #ffffff;
- --header-accent: #505055;
+ --header-accent: #606080;
- --link-color: #448;
- --visited-link-color: #669;
- --foreground-color: #000000;
+ --footer-color: linear-gradient(var(--background), var(--accent-background));
+
+ --text: #ffffff;
+ --background: #060609;
+ --accent-background: #181824;
+ --primary: #45476e;
+ --secondary: #494957;
+ --accent: #00fffb;
+ --accent-text: #000000;
}
@media (min-width: 800px) {
}
body {
- background: var(--background-color);
- color: var(--foreground-color);
+ background: var(--background);
+ color: var(--text);
- font-family: "system-ui", sans-serif;
+ font-family: 'Oxanium', sans-serif;
}
a {
- color: var(--link-color);
+ color: var(--text);
text-decoration: none;
}
a.link-button {
padding: 8px;
+ border-radius: 4px;
text-decoration: none;
- background-color: var(--light-background-color);
+ background-color: var(--primary);
transition: all 300ms;
+ position: relative;
+ top: 0;
}
a.link-button:hover {
- background-color: var(--active-color);
+ top: -6px;
+ box-shadow: 0 6px 15px 8px rgba(200, 200, 230, 0.2);
cursor: pointer;
}
a:visited {
- color: var(--visited-link-color);
+ color: var(--text);
+}
+
+a.cta-button {
+ flex: 1;
+ border-radius: 8px;
+ padding: 16px;
+ font-size: 16pt;
+ background-color: var(--secondary);
+ color: var(--text);
+ box-shadow: 0px 3px 12px 2px rgba(200, 200, 230, 0.2);
+ position: relative;
+ top: 0;
+ transition: all 0.2s;
+}
+
+a.cta-button:hover {
+ top: -6px;
+ box-shadow: 0 6px 15px 8px rgba(200, 200, 230, 0.2);
+ cursor: pointer;
}
.container {
text-align: center;
}
-.container.dark {
- background: var(--dark-background-color);
- color: var(--header-text);
+.container.card > * {
+ background: #000;
+ box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
+ border-radius: 8px;
+ border: 1px solid var(--primary);
+ padding: 8px;
}
-.container.light {
- background: var(--light-background-color);
+.container .title:after {
+ content: "";
+ height: 2px;
+ background: linear-gradient(to right, var(--primary), var(--background));
+ display: block;
+ max-width: 1200px;
+ margin: 0 auto;
+ margin-bottom: 32px; /* This is large because of margin collapse. */
}
.container.header {
}
p code {
- background: var(--terminal-background-color);
- color: var(--terminal-foreground-color);
border-radius: 4px;
padding: 2px;
}
+@font-face {
+ font-family: fira;
+ src: url(../font/FiraCode-Regular.woff);
+}
+
/* Navigation */
@media screen and (min-width: 800px) {
.navbar-container {
- background: var(--header-color);
- color: var(--header-text);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ background-color: var(--accent-background);
+ color: var(--text);
width: 100%;
}
@media screen and (max-width: 799px) {
.navbar-container {
- background: var(--header-color);
+ background-color: var(--accent-background);
color: var(--header-text);
width: 100%;
navbar {
- background: var(--header-color);
+ background: none;
color: var(--header-text);
padding: 0 12px;
}
.hamburger-piece {
- background-color: var(--foreground-color);
+ background-color: var(--text);
margin-bottom: 4px;
height: 4px;
width: 32px;
/* Footer */
+.container:has(.footer-container) {
+ background: var(--footer-color);
+}
+
.footer-container {
display: flex;
flex-direction: var(--default-flex-direction);
-.panel-container {
- display: flex;
- flex-direction: var(--default-flex-direction);
- justify-content: space-between;
- width: 100%;
- gap: 24px;
-}
-
-.panel-container div {
- flex-basis: 0;
- flex-grow: 1;
-
- padding: 12px 0;
-/* background-color: var(--background-color);*/
-}
-
-.panel-container div h3 {
- margin-bottom: 4px;
-}
-
-.panel-container div p {
- width: 100%;
- text-align: justify;
-}
-
-
main {
min-height: 100vh;
}
main pre {
- border: 0px solid var(--dark-background-color);
+ border: 1px solid var(--primary);
border-radius: 6px;
- box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
padding: 8px;
display: block;
overflow-y: auto;
display: none;
}
- #desktop_logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); }
+ /* #desktop_logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); } */
#desktop_logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); }
#desktop_logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); }
#desktop_logo:hover #path537 { transform-origin: center; transform: rotate(150deg) translate(17px, -4.3px); }
#desktop_logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); }
- #desktop_logo :not(#layer2) path { transition: all 1s ease-in-out; }
+ #desktop_logo:hover path {fill: white !important;}
+ #desktop_logo path { transition: all 1s ease-in-out; }
}
@media (max-width: 799px) {
}
}
-@font-face {
- font-family: fira;
- src: url(../font/FiraCode-Regular.woff);
+#install-command .copy-button {
+ opacity: 0;
+ display: inline;
+ width: 20px;
+ border-radius: 4px;
+ background: var(--accent);
+ color: var(--accent-text);
+ padding: 0px 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+ font-family: 'Oxanium', sans-serif;
+}
+
+#install-command:hover .copy-button {
+ opacity: 1;
}
+
+::-webkit-scrollbar{
+ width: 8px;
+}
+
+::-webkit-scrollbar-track-piece{
+ background-color: var(--background);
+}
+
+::-webkit-scrollbar-thumb{
+ background-color: var(--secondary);
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover{
+ background-color: var(--primary);
+}
+
--- /dev/null
+User-agent: Googlebot
+Disallow: /nogooglebot/
+
+User-agent: *
+Allow: /
* Author: Nicolas LLOBERA <nllobera@gmail.com>
*/
-.hljs {
+/* .hljs {
background: #1E1E1E;
color: #DCDCDC;
}
font-weight: bold;
}
-/*.hljs-code {
- font-family:'Monospace';
-}*/
-
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
background-color: #600;
display: inline-block;
width: 100%;
+} */
+
+/*!
+ Theme: a11y-dark
+ Author: @ericwbailey
+ Maintainer: @ericwbailey
+
+ Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+*/
+/*
+ IR_Black style (c) Vasily Mikhailitchenko <vaskas@programica.ru>
+*/
+
+.hljs {
+ background: #000;
+ color: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+ color: #7c7c7c;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag,
+.hljs-name {
+ color: #96cbfe;
+}
+
+.hljs-attribute,
+.hljs-selector-id {
+ color: #ffffb6;
+}
+
+.hljs-string,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition {
+ color: #a8ff60;
+}
+
+.hljs-subst {
+ color: #daefa3;
}
+
+.hljs-regexp,
+.hljs-link {
+ color: #e9c062;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-doctag {
+ color: #ffffb6;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-literal {
+ color: #c6c5fe;
+}
+
+.hljs-number,
+.hljs-deletion {
+ color:#ff73fd;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}
\ No newline at end of file
<!DOCTYPE html>
-<html class="ui-theme">
+<html class="ui-theme" lang="en">
<head>
<title>{% block "title" %}</title>
<!-- Including this on every page because why not -->
<link rel="stylesheet" href="/static/vendor/highlight.min.css">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <!-- <link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet"> -->
+ <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap" rel="stylesheet">
<script src="/static/vendor/highlight.min.js"></script>
<script defer>
hljs.cssSelector = "pre code.language-onyx"
</div>
-<div class="container light" id="vscode">
- <h2>Visual Studio Code</h2>
-</div>
-<div class="container">
+<div class="container" id="vscode">
+ <div class="title">
+ <h2>Visual Studio Code</h2>
+ </div>
<p>
<a class="link-button" href="https://marketplace.visualstudio.com/items?itemName=onyxlang.onyxlang">VS Code Extension</a>
</p>
<p>This extension does have support for the <code>onyx lsp</code>, assuming that is <a href="#lsp">setup</a>.
</div>
-<div class="container light" id="vim">
- <h2>Vim / Neovim</h2>
-</div>
-<div class="container">
+<div class="container" id="vim">
+ <div class="title">
+ <h2>Vim / NeoVim</h2>
+ </div>
<p>
<a class="link-button" href="https://github.com/onyx-lang/onyx.vim">Vim Plugin</a>
</p>
</div>
-<div class="container light" id="sublime-text">
- <h2>Sublime Text</h2>
-</div>
-<div class="container">
+<div class="container" id="sublime-text">
+ <div class="title">
+ <h2>Sublime Text</h2>
+ </div>
<p>
Currently, Onyx does not have a published package on Sublime Text's Package Control, but like VS Code, you are able to install it manually.
</p>
</p>
</div>
-<div class="container light" id="emacs">
- <h2>Emacs</h2>
-</div>
-<div class="container">
+<div class="container" id="emacs">
+ <div class="title">
+ <h2>Emacs</h2>
+ </div>
<p>
Currently, Onyx does not have a published package for Emacs.
</p>
</p>
</div>
-<div class="container light" id="lsp">
- <h2>Language Server</h2>
-</div>
-<div class="container">
+<div class="container" id="lsp">
+ <div class="title">
+ <h2>Language Server</h2>
+ </div>
+
<p>
If you are unfamiliar, a <em>Language Server</em> abstracts the tooling and language specific functionality out of editors and into a reusable component.
This way, it is easier to develop in-editor functionality across multiple editors, as the same work does not need to be replicated for each supported editor.
</div>
<div class="container">
- <h2>Step 1: Install Onyx</h2>
+ <h2>Install Onyx</h2>
<p>On any Linux, MacOS, or WSL system, run the following command to install Onyx onto your system.</p>
<pre class="hljs"><code class="language-sh">sh <(curl https://get.onyxlang.io -sSfL)</code></pre>
</div>
<div class="container">
- <h2>Step 2: Create an Onyx project</h2>
+ <h2>Create an Onyx project</h2>
<p>
<em>This is an optional step, but does set you up to use packages in your project.</em>
</div>
<div class="container">
- <h2>Step 3: Write your first Onyx program</h2>
+ <h2>Write your first Onyx program</h2>
<p>
Open your favorite text editor, optionally install <a href="/docs/setup">editor support</a>, and create a new file called <code>main.onyx</code> in this project folder.
Write the following code in that file.
</div>
<div class="container">
- <h2>Step 4: Run your program!</h2>
+ <h2>Run your program!</h2>
<p>To run the program our newly created program, we use the following command from within the project folder.</p>
<pre class="hljs"><code class="language-onyx">$ onyx run main.onyx
Hello, Onyx!</code></pre>
</p>
</div>
-<div class="container light" id="online">
- <h2>Try Online</h2>
-</div>
-<div class="container">
+<div class="container" id="online">
+ <div class="title">
+ <h2>Try Online</h2>
+ </div>
<p>
Onyx is available to try online for free in the Onyx Playground.
It allows you learn the syntax from examples, without installing the language onto your system.
</p>
</div>
-<div class="container light" id="linux-macos">
- <h2>Linux / MacOS</h2>
-</div>
-<div class="container">
+<div class="container" id="linux-macos">
+ <div class="title">
+ <h2>Linux / MacOS</h2>
+ </div>
<p>
The easiest way to install Onyx on a Linux or MacOS system is to use the installation script you can find at <a href="https://get.onyxlang.io">get.onyxlang.io</a>.
You can download and run the script in one bash command.
</div>
-<div class="container light" id="windows">
- <h2>Windows</h2>
-</div>
-<div class="container">
+<div class="container" id="windows">
+ <div class="title">
+ <h2>Windows</h2>
+ </div>
<p>
<ol>
<li>Download the latest Windows release from the <a href="https://github.com/onyx-lang/onyx/releases/latest">Releases</a> on GitHub.</li>
</p>
</div>
-<div class="container light" id="source">
- <h2>From Source</h2>
-</div>
-
-<div class="container">
+<div class="container" id="source">
+ <div class="title">
+ <h2>From Source</h2>
+ </div>
<p>
Building Onyx from source is easy. If you want to use the Wasmer runtime, you will need to have Wasmer installed. See their <a href="https://docs.wasmer.io/install">installation instructions</a> for details.
</p>
{{ block "page_content" }}
<div class="container header">
- <div style="text-align: center;">
- <h1>The <b>Onyx</b> Programming Language</h1>
- </div>
- <div style="font-size: 20pt; text-align: center; margin-top: 8px">
- <p>A data-oriented, safe, and modern programming language</p>
+ <div style="height: 20rem; display: flex; flex-direction: column; place-content: center;">
+ <div style="text-align: center;">
+ <h1>The <b>Onyx</b> Programming Language</h1>
+ </div>
+ <div style="font-size: 20pt; text-align: center; margin-top: 8px">
+ <p>A data-oriented, safe, and modern programming language</p>
+ </div>
</div>
-</div>
-
-<!-- <div class="container light">
- <h2 style="margin-bottom: 8px">Get Started</h2>
-</div> -->
-<div class="container">
- <div style="text-align: center;">
+ <!--<div style="text-align: center;">
<div style="margin-bottom: 26px">
Install in one command, or build <a href="/docs/install">from source</a>.
</div>
<div>
- <span style="font-size: 16pt; font-family: monospace; padding: 20px; color: var(--header-text); background: var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)">
+ <span style="font-size: 16pt; font-family: monospace; padding: 20px; color: var(--header-text); background: var(--primary); border-radius: 8px; box-shadow: 0px 1px 12px 2px rgba(200, 200, 230, 0.4)">
sh <(curl https://get.onyxlang.io -sSfL)
</span>
</div>
Alternatively, try Onyx online and read the docs!
</div>
<div style="margin-top: 26px; display: flex; flex-direction: row; gap: 40px;">
- <a style="flex: 1; border-radius: 8px; padding: 16px; font-size: 16pt; border: 1px solid var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)" href="/playground">TRY ONLINE</a>
- <a style="flex: 1; border-radius: 8px; padding: 16px; font-size: 16pt; border: 1px solid var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)" href="/docs">READ THE DOCS</a>
+ <a class="cta-button" href="/playground">TRY ONLINE</a>
+ <a class="cta-button" href="/docs">READ THE DOCS</a>
+ </div>
+ </div>-->
+
+ <div class="container card" style="width: 800px">
+ <div style="font-size: 14pt; font-family: fira; padding: 20px;">
+ <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Install Onyx in one command</span></div>
+ <div id="install-command">
+ <span style="color: #444;">$</span> <span style="color: var(--accent)">sh</span> <(curl https://get.onyxlang.io -sSfL)
+ <span class="copy-button">Copy</span>
+ </div>
+ <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Read the docs</span></div>
+ <div><span style="color: #444;">$</span> <span style="color: var(--accent)">curl</span> <a style="text-decoration: underline" href="/docs">onyxlang.io/docs</a></div>
+ <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Try Onyx in your browser</span></div>
+ <div><span style="color: #444;">$</span> <span style="color: var(--accent)">curl</span> <a style="text-decoration: underline" href="/playground">onyxlang.io/playground</a></div>
</div>
</div>
</div>
-<div class="container light">
- <h2 style="margin-bottom: 8px">Recent News</h2>
-</div>
-{% partial "partials/news_listing" %}
-
-<div class="container light">
- <h2>Language Overview</h2>
-</div>
<div class="container">
+ <div class="title">
+ <h2>Language Overview</h2>
+ </div>
+
<div>
<h2>Syntax</h2>
<br />
</code></pre>
</div>
+<div class="container">
+ <div class="title">
+ <h2 style="margin-bottom: 8px">Recent News</h2>
+ </div>
</div>
+{% partial "partials/news_listing" %}
+
</div>
+</div>
+
+<script>
+document.querySelector("#install-command .copy-button").addEventListener("click", e => {
+ navigator.clipboard.writeText("sh <(curl https://get.onyxlang.io -sSfL)").then(_ => {
+ e.target.innerHTML = "Copied!";
+ setTimeout(_ => { e.target.innerHTML="Copy" }, 5000);
+ });
+})
+</script>
{{endblock}}
-<div class="container dark">
+<div class="container" style="margin-top: 32px;">
<div class="footer-container">
<div style="flex-grow: 2">
<div style="display: flex; align-items: center; gap: 1rem;">
- <img src="/static/images/logo.svg" width="60" height="60">
+ <img src="/static/images/logo.svg" width="60" height="60" alt="Onyx Logo">
<h2>Onyx</h2>
</div>
<div class="navbar-container">
<navbar>
- <a href="/">
- <svg viewBox="0 0 64 16" version="1.1" id="desktop_logo">
+ <a href="/" aria-label="Go to the homepage">
+ <svg viewBox="0 0 64 16" version="1.1" id="desktop_logo" alt="Onyx Logo">
{% partial "partials/logo_svg" %}
</svg>
- <svg viewBox="0 0 16 16" version="1.1" id="mobile_logo">
+ <svg viewBox="0 0 16 16" version="1.1" id="mobile_logo" alt="Onyx Logo">
{% partial "partials/logo_svg" %}
</svg>
</a>
{{ foreach $article in $articles }}
-<div class="container">
- <div style="padding: 32px 0">
+<div class="container card">
+ <div style="padding-top: 32px; padding-bottom: 32px;">
<h2 style="float: left; margin: 0; margin-bottom: 8px;">
- <a href="/news/{% $article.path %}" style="color: var(--foreground-color)">
- <span style="border-bottom: 1px solid rgba(0,0,0,0.2)">{% $article.name %}</span>
+ <a href="/news/{% $article.path %}">
+ <span>{% $article.name %}</span>
</a>
</h2>
<p style="float: right; line-height: 1.5rem;"><em>{% $article.date %}</em></p>
projects / onyxlang.io.git / commitdiff