From 8bd2c4e0a068c3a80a0cb3975f12c9334c1f6e5c Mon Sep 17 00:00:00 2001 From: Brendan Hansen Date: Wed, 5 Apr 2023 17:45:01 -0500 Subject: [PATCH] changed: preparing for initial release of website --- src/app.onyx | 22 +- www/news-articles/index.json | 8 + www/news-articles/ovmwasm.html | 62 +++--- www/static/css/new_style.css | 38 +++- www/static/vendor/highlight.min.css | 290 ++++++++++++++++---------- www/templates/pages/docs.html | 40 +++- www/templates/pages/docs/install.html | 73 ++++++- www/templates/pages/homepage.html | 2 +- www/templates/pages/news.html | 16 +- 9 files changed, 372 insertions(+), 179 deletions(-) create mode 100644 www/news-articles/index.json diff --git a/src/app.onyx b/src/app.onyx index 4b977df..c0e12b0 100644 --- a/src/app.onyx +++ b/src/app.onyx @@ -3,6 +3,7 @@ use runtime use otmp use http use http.server {Req :: Request, Res :: Response, route} +use json #inject runtime.vars { Enable_Heap_Debug :: true @@ -59,13 +60,22 @@ reg: otmp.TemplateRegistry; @route.{.GET, "/news"} (req: &Req, res: &Res) { - articles := make([..] str); + Article :: struct { name, description, path, date: str } + articles := make([..] Article); + + article_file := os.get_contents("www/news-articles/index.json"); + article_index, json_err := json.decode_with_error(article_file); + if json_err->has_error() { + res->status(500); + return; + } - for os.list_directory("www/news-articles") { - name := it->name(); - if string.ends_with(name, ".html") { - articles << string.temp_copy(name[0 .. name.length-5]); - } + for article_index.root->as_array() { + name := it["name"]->as_str(); + desc := it["description"]->as_str(); + path := it["path"]->as_str(); + date := it["date"]->as_str(); + articles << .{ name, desc, path, date }; } res->render("pages/news", &.{ diff --git a/www/news-articles/index.json b/www/news-articles/index.json new file mode 100644 index 0000000..192714a --- /dev/null +++ b/www/news-articles/index.json @@ -0,0 +1,8 @@ +[ + { + "name": "Onyx's Custom Runtime", + "path": "ovmwasm", + "date": "5th April 2023", + "description": "Something about a brief introduction to the OVM-Wasm system." + } +] diff --git a/www/news-articles/ovmwasm.html b/www/news-articles/ovmwasm.html index 834dc50..daef19e 100644 --- a/www/news-articles/ovmwasm.html +++ b/www/news-articles/ovmwasm.html @@ -1,35 +1,33 @@ -
-

Onyx's Custom Runtime

+

Onyx's Custom Runtime

-

- As Onyx targets WebAssembly (WASM) exclusively, running code outside of the browser requires a WASM embedder. - The job of the embedder is to translate the WASM Virtual Instruction Set Architecture into a "real" architecture that can be executed on the host system. - There are many great WASM embedders that exist for running WASM outside the browser. Here's a small, non-comprehensive list: -

- +

+ As Onyx targets WebAssembly (WASM) exclusively, running code outside of the browser requires a WASM embedder. + The job of the embedder is to translate the WASM Virtual Instruction Set Architecture into a "real" architecture that can be executed on the host system. + There are many great WASM embedders that exist for running WASM outside the browser. Here's a small, non-comprehensive list: +

+ -

- All of these embedders are great in their own way, but the one thing they are not great at is providing a great developer experience for Onyx. For this reason, Onyx maintains support for two WASM embedders: Wasmer and OVM-Wasm. Wasmer is used as the faster, production-ready embedder, while OVM-Wasm is used as the development embedder. -

+

+All of these embedders are great in their own way, but the one thing they are not great at is providing a great developer experience for Onyx. For this reason, Onyx maintains support for two WASM embedders: Wasmer and OVM-Wasm. Wasmer is used as the faster, production-ready embedder, while OVM-Wasm is used as the development embedder. +

-

- OVM-Wasm stands for Onyx Virtual Machine for WASM. The Onyx Virtual Machine (OVM) started as a separate project with the goal of providing a separate compile-target for Onyx; however, to reduce complexity, OVM-Wasm was created as a wrapper around OVM, that provides a wasm-c-api compatible interface, making it a WASM embedder. - Since OVM-Wasm is entirely specific to Onyx and can be easily modified to suit the needs of developing Onyx. - It has more features compared to a normal WASM embedder, such a debugging interface that is compatible with the Debug Adapter Protocol. -

- -

- Currently, it does not run as fast as it could. - This is due to several reason, but largely because it simply compiles WebAssembly down to an interpreted instruction stream, not machine-native instructions. - This was done to make OVM-Wasm more portable, but does come at a significant performance cost. - To compound onto this fact, the instruction stream itself is not optimized at all. - It is the most literal, WASM to OVM conversion possible. - This helps make the initial startup time faster, but does incur wasted performance. - It is on the (rather large) list of to-dos to add simple optimizations to the embedding process to make OVM-Wasm not horribly slow. -

-
+

+OVM-Wasm stands for Onyx Virtual Machine for WASM. The Onyx Virtual Machine (OVM) started as a separate project with the goal of providing a separate compile-target for Onyx; however, to reduce complexity, OVM-Wasm was created as a wrapper around OVM, that provides a wasm-c-api compatible interface, making it a WASM embedder. +Since OVM-Wasm is entirely specific to Onyx and can be easily modified to suit the needs of developing Onyx. +It has more features compared to a normal WASM embedder, such a debugging interface that is compatible with the Debug Adapter Protocol. +

+ +

+Currently, it does not run as fast as it could. +This is due to several reasons, but largely because it compiles WebAssembly down to an interpreted instruction stream, not machine-native instructions. +This was done to make OVM-Wasm more portable, but does come at a significant performance cost. +To compound onto this fact, the instruction stream itself is not optimized at all. +It is the most literal, WASM to OVM conversion possible. +This helps the initial startup time be faster, but does incur wasted performance. +It is on the (rather large) list of to-dos to add simple optimizations to the embedding process to make OVM-Wasm not as slow. +

diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css index 6db2f8a..bcce3ba 100644 --- a/www/static/css/new_style.css +++ b/www/static/css/new_style.css @@ -14,6 +14,7 @@ --dark-background-color: #111; --active-color: #555; --link-color: #bbf; + --visited-link-color: #bfbfff; --foreground-color: #fff; } } @@ -27,7 +28,8 @@ --light-background-color: #e0e0e0; --dark-background-color: #c0c0c0; --active-color: #cccccc; - --link-color: #224; + --link-color: #448; + --visited-link-color: #669; --foreground-color: #000000; } } @@ -43,14 +45,27 @@ body { a { color: var(--link-color); + text-decoration: none; +} + +a.link-button { + padding: 8px; + text-decoration: none; + background-color: var(--light-background-color); + transition: all 300ms; +} + +a.link-button:hover { + background-color: var(--active-color); + cursor: pointer; } a:visited { - color: #88f; + color: var(--visited-link-color); } .container { - padding: 56px 12px; + padding: 48px 12px; } .container > .container.merge { @@ -66,7 +81,7 @@ a:visited { margin-top: 20px; } -.container ul { +.container ul, .container ol { padding-left: 20px; } @@ -90,7 +105,10 @@ a:visited { h1 { min-width: 100px; font-size: 36pt; - font-weight: lighter; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 200; } .container h3 { @@ -203,3 +221,13 @@ main { grid-template-rows: auto 1fr auto; } +main pre { + border: 1px solid var(--terminal-background-color); + box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2); + padding: 8px; + display: block; +} + +main li { + margin-top: 8px; +} diff --git a/www/static/vendor/highlight.min.css b/www/static/vendor/highlight.min.css index 4dce1eb..106b70f 100644 --- a/www/static/vendor/highlight.min.css +++ b/www/static/vendor/highlight.min.css @@ -1,112 +1,180 @@ -/* - * Visual Studio 2015 dark style - * Author: Nicolas LLOBERA - */ - -.hljs { - background: #1E1E1E; - color: #DCDCDC; -} - -.hljs-keyword, -.hljs-literal, -.hljs-symbol, -.hljs-name { - color: #569CD6; -} -.hljs-link { - color: #569CD6; - text-decoration: underline; -} - -.hljs-built_in, -.hljs-type { - color: #4EC9B0; -} - -.hljs-number, -.hljs-class { - color: #B8D7A3; -} - -.hljs-string, -.hljs-meta .hljs-string { - color: #D69D85; -} - -.hljs-regexp, -.hljs-template-tag { - color: #9A5334; -} - -.hljs-subst, -.hljs-function, -.hljs-title, -.hljs-params, -.hljs-formula { - color: #DCDCDC; -} - -.hljs-comment, -.hljs-quote { - color: #57A64A; - font-style: italic; -} - -.hljs-doctag { - color: #608B4E; -} - -.hljs-meta, -.hljs-meta .hljs-keyword, - -.hljs-tag { - color: #9B9B9B; -} - -.hljs-variable, -.hljs-template-variable { - color: #BD63C5; -} - -.hljs-attr, -.hljs-attribute { - color: #9CDCFE; -} - -.hljs-section { - color: gold; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: bold; -} - -/*.hljs-code { - font-family:'Monospace'; -}*/ - -.hljs-bullet, -.hljs-selector-tag, -.hljs-selector-id, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #D7BA7D; -} - -.hljs-addition { - background-color: #144212; - display: inline-block; - width: 100%; -} - -.hljs-deletion { - background-color: #600; - display: inline-block; - width: 100%; +@media (prefers-color-scheme: light) { + /* + Visual Studio-like style based on original C# coloring by Jason Diamond + */ + .hljs { + 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; + } +} + +@media (prefers-color-scheme: dark) { + /* + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + */ + + .hljs { + background: #1E1E1E; + color: #DCDCDC; + } + + .hljs-keyword, + .hljs-literal, + .hljs-symbol, + .hljs-name { + color: #569CD6; + } + .hljs-link { + color: #569CD6; + text-decoration: underline; + } + + .hljs-built_in, + .hljs-type { + color: #4EC9B0; + } + + .hljs-number, + .hljs-class { + color: #B8D7A3; + } + + .hljs-string, + .hljs-meta .hljs-string { + color: #D69D85; + } + + .hljs-regexp, + .hljs-template-tag { + color: #9A5334; + } + + .hljs-subst, + .hljs-function, + .hljs-title, + .hljs-params, + .hljs-formula { + color: #DCDCDC; + } + + .hljs-comment, + .hljs-quote { + color: #57A64A; + font-style: italic; + } + + .hljs-doctag { + color: #608B4E; + } + + .hljs-meta, + .hljs-meta .hljs-keyword, + + .hljs-tag { + color: #9B9B9B; + } + + .hljs-variable, + .hljs-template-variable { + color: #BD63C5; + } + + .hljs-attr, + .hljs-attribute { + color: #9CDCFE; + } + + .hljs-section { + color: gold; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + + /*.hljs-code { + font-family:'Monospace'; + }*/ + + .hljs-bullet, + .hljs-selector-tag, + .hljs-selector-id, + .hljs-selector-class, + .hljs-selector-attr, + .hljs-selector-pseudo { + color: #D7BA7D; + } + + .hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; + } + + .hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; + } } diff --git a/www/templates/pages/docs.html b/www/templates/pages/docs.html index d791f2a..21a07c6 100644 --- a/www/templates/pages/docs.html +++ b/www/templates/pages/docs.html @@ -2,17 +2,37 @@

Onyx Docs

+
+ +
+

Getting Started

+

+ Install Onyx locally on your system, or use it in your browser. +

+

+ Install + Playground +

+
- - +
+

Language Reference

+

+ Read about the features of Onyx. +

+

+ Language Book +

+
+ +
+

Package Reference

+

+ Reference material for all packages shipped with the Onyx toolchain. +

+

+ Core packages +

{{endblock}} diff --git a/www/templates/pages/docs/install.html b/www/templates/pages/docs/install.html index 95e01ed..e7b0da0 100644 --- a/www/templates/pages/docs/install.html +++ b/www/templates/pages/docs/install.html @@ -3,10 +3,10 @@

Installing Onyx

- Online - Linux - Windows - MacOS + Online + Linux + Windows + MacOS

@@ -20,13 +20,72 @@

Linux

-

-

+
+

From Source

+

+ The easiest way to install Onyx on a Linux system is to clone the repository from GitHub, and then compile from source. + This is relatively simple, since Onyx does not use any fancy things in its source tree. Only C code and shell scripts. + +

    +
  1. + Clone the respository at onyx-lang/onyx. + 
    git clone https://github.com/onyx-lang/onyx --depth 1
    +
    2. +
  2. + Navigate into the new "onyx" directory. + 
    cd onyx
    +
    3. +
  3. + Configure the settings.sh file to suit your system needs. + If everything looks good, (or if you don't know what you are looking at), you should be good to go. +
    4. +
  4. + Run ./build.sh. + This will compile and install Onyx onto your system. + By default, the "onyx" binary will be placed in "/usr/bin", and the necessary libraries/core packages/tooling will be installed at "/usr/share/onyx". +
    5. +
  5. + Try running the "onyx help" command. You should see something like this. + 
    $ onyx help
+Onyx toolchain version v0.1.0
+
+The toolchain for the Onyx programming language, created by Brendan Hansen.
+
+Usage:
+	onyx <subcommand>
+
+Subcommands:
+	help      Shows this help message. Use "onyx help ".
+	build     Compiles an Onyx program into an executable.
+	run       Compiles and runs an Onyx program, all at once.
+	check     Checks syntax and types of an Onyx program.
+	package   Package manager
    +
    6. +
+

+ +

Future Plans

+

+ In the future, Onyx may ship a ".deb" file for Debian-based distros to easily install. + While this is planned, it is not a priority at the moment. +

+
-
+

Windows

+

    +
  1. Download the latest Windows release folder from the Releases on GitHub.
    2. +
  2. Extract the zip file to a permanent location.
    3. +
  3. Modify system environment variables.
    4. +
      +
    • Add the extracted folder to your system or user's PATH variable.
      • +
    • Make a new variable called "ONYX_PATH", and set it equal to the extracted folder path.
      • +
    +
  4. Log out and log back in to let system environment variable update.
    5. +
  5. Open a Command Prompt or Powershell instance, and try running "onyx help".
    6. +

diff --git a/www/templates/pages/homepage.html b/www/templates/pages/homepage.html index 8ca5ca9..40e2c4c 100644 --- a/www/templates/pages/homepage.html +++ b/www/templates/pages/homepage.html @@ -22,7 +22,7 @@
- 
use core {println}
+    
use core {println}
 
 main :: () {
     f := factorial(10);
diff --git a/www/templates/pages/news.html b/www/templates/pages/news.html
index 3a2022a..3ee0613 100644
--- a/www/templates/pages/news.html
+++ b/www/templates/pages/news.html
@@ -2,15 +2,17 @@
 
 

     
News

+

 
-    
    
-        {{ foreach $article in $articles }}
-        
  • 
-            {% $article %}
-        
    • 
-        {{ endforeach }}
-    

+{{ foreach $article in $articles }}
+

+    
{% $article.name %}

+    
{% $article.date %}

+    

+    {% $article.description %}
+    

 

+{{ endforeach }}
 
 {{endblock}}
 
-- 
2.25.1