Merge pull request #5722 from lukewilliamboswell/website-update

More updates to wip site update
roc-lang · Aug 5, 2023 · 00b4be2 · 00b4be2
2 parents 5d3a3e8 + 7598b08
commit 00b4be2
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 100 deletions.
diff --git a/mlc_config.json b/mlc_config.json
@@ -44,6 +44,9 @@
         },
         {
             "pattern": "https://liberapay.com/"
+        },
+        {
+            "pattern": "*.html"
         }
     ]
 }
diff --git a/www/build.sh b/www/build.sh
@@ -95,6 +95,7 @@ mv www/build/tutorial/tutorial.html www/build/tutorial/index.html
 mkdir www/build/wip
 $roc run www/wip_new_website/main.roc -- www/wip_new_website/content/ www/build/wip
 cp -r www/wip_new_website/static/site.css www/build/wip
+cp -r www/build/fonts www/build/wip/fonts
 
 # cleanup
 rm -rf roc_nightly roc_releases.json

diff --git a/www/wip_new_website/build.roc b/www/wip_new_website/build.roc
@@ -1,6 +1,6 @@
 #!/usr/bin/env roc
 app "website-builder"
-    packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0-rc1/hbIodFf7kULTYZJkzgsvgsnFAvQexm5hVeBaOMZk84I.tar.br" }
+    packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0/DI4lqn7LIZs8ZrCDUgLK-tHHpQmxGF1ZrlevRKq5LXk.tar.br" }
     imports [
         pf.Task.{ Task },
         pf.Command,
@@ -15,31 +15,40 @@ main =
         Command.new "rm"
         |> Command.args ["-rf", "dist/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to remove dist folder"
+        |> Task.onFail \_ -> crash "Failed to remove dist folder"
         |> Task.await
 
     # Build site
     {} <- 
         Command.new "roc"
         |> Command.args ["run", "main.roc", "--", "content/", "dist/wip/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to build site"
+        |> Task.onFail \_ -> crash "Failed to build site"
         |> Task.await
 
     # Copy static files
     {} <- 
         Command.new "cp"
         |> Command.args ["-r", "static/site.css", "dist/wip/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to copy static files"
+        |> Task.onFail \_ -> crash "Failed to copy static files"
+        |> Task.await
+
+    # Copy font files - assume that www/build.sh has been run previously and the
+    # fonts are available locally in ../build/fonts
+    {} <- 
+        Command.new "cp"
+        |> Command.args ["-r", "../build/fonts/", "dist/fonts/"]
+        |> Command.status
+        |> Task.onFail \_ -> crash "Failed to copy static files"
         |> Task.await
 
     # Start file server
     {} <- 
         Command.new "simple-http-server"
-        |> Command.args ["-p", "8080", "--", "dist/"]
+        |> Command.args ["-p", "8080", "--nocache", "--index", "--", "dist/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to run file server; consider intalling with `cargo install simple-http-server`"
+        |> Task.onFail \_ -> crash "Failed to run file server; consider intalling with `cargo install simple-http-server`"
         |> Task.await
 
-    Task.ok {}
+    Task.succeed {}
diff --git a/www/wip_new_website/content/community.md b/www/wip_new_website/content/community.md
@@ -1,20 +1,22 @@
-# Contribute to Roc
+# Community
 
-## Community Values 
+WIP
+
+## Values 
 
 <!-- 
 Work in Progress - Richard is developing this section
 
 Basically it will say something like we expect you to be kind, even if you think someone is being mean to you, don't assume ill intentions etc
 -->
 
-## Meet the Community
+## Meet
 
 - Group Chat [roc.zulipchat.com](https://roc.zulipchat.com/)
 - Github Project [roc-lang/roc](https://github.com/roc-lang/roc)
 - Meetups & Events
 
-## Ideas & Proposals
+## Proposals
 
 - [Good First Issues](https://github.com/roc-lang/roc/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
 

diff --git a/www/wip_new_website/content/docs.md b/www/wip_new_website/content/docs.md
@@ -1,11 +1,17 @@
 # Documentation
 
-- Builtin Package <!-- link to builtins -->
-- Basic-CLI Platform <!-- link to docs -->
+Builtin Package - [docs](https://www.roc-lang.org/builtins)
 
-<!-- TODO Develop a Short language reference, move stuff out of tutorial e.g. de-sugaring table, keywords -->
+Basic-CLI Platform - [repo](https://github.com/roc-lang/basic-cli) - [docs](https://www.roc-lang.org/packages/basic-cli)
 
 ## Guides
 
-- [Frequently Asked Questions](https://github.com/roc-lang/roc/blob/main/FAQ.md)
-- [Roc for Elm Programmers](https://github.com/roc-lang/roc/blob/main/roc-for-elm-programmers.md)
+[Frequently Asked Questions](https://github.com/roc-lang/roc/blob/main/FAQ.md)
+
+[Roc for Elm Programmers](https://github.com/roc-lang/roc/blob/main/roc-for-elm-programmers.md)
+
+## Language Reference
+
+<!-- TODO Develop a Short language reference, move stuff out of tutorial e.g. de-sugaring table, keywords -->
+
+
diff --git a/www/wip_new_website/content/index.md b/www/wip_new_website/content/index.md
@@ -1,55 +1,61 @@
-<!--
-The purpose of the Home page is to function as the first point of contact for all visitors. It should seamlessly connect people with the most suitable content for their immediate needs; it provides information at a high level of abstraction and guides visitors towards more relevant and detailed content within the site.
 
-This page contains minimal content, so that visitors are able to quickly scan the page. It should not be cluttered or overwhelming. It should reflect Roc's goals (fast, friendly, functional) and values (welcoming community).
--->
+# Roc
 
-# Roc lang
+Work in progress! 
 
-A systems programming language that is fast, friendly, and functional.
+<!-- TODO turn these into nice buttons -->
+- [tutorial](/wip/tutorial.html)
+
+- [install](/wip/install.html)
+
+- [help / group chat](https://roc.zulipchat.com), we're friendly!
+
+## Goals 
 
 <section class="home-goals-container">
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Fast</h2>
-      <p class="home-goals-description">We want Roc to run faster than any non-systems language that sees mainstream use in industry. <a class="home-goals-learn-more" href="/design_goals.html#fast">Learn more</a></p>
+      <h3 class="home-goals-title">Fast</h3>
+      <p class="home-goals-description">Runs fast, compiles fast. <br><a class="home-goals-learn-more" href="/design_goals.html#fast">Learn more</a></p>
     </div>
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Friendly</h2>
-      <p class="home-goals-description">Roc aims to be a user-friendly language with a friendly community of users. <a class="home-goals-learn-more" href="/design_goals.html#friendly">Learn more</a></p>
+      <h3 class="home-goals-title">Friendly</h3>
+      <p class="home-goals-description">User-friendly language, friendly community. <br><a class="home-goals-learn-more" href="/design_goals.html#friendly">Learn more</a></p>
     </div>
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Functional</h2>
-      <p class="home-goals-description">Roc aims to be a purely functional programming language. <a class="home-goals-learn-more" href="/design_goals.html#functional">Learn more</a></p>
+      <h3 class="home-goals-title">Functional</h3>
+      <p class="home-goals-description">Pure functional programming, keep it simple.<br><a class="home-goals-learn-more" href="/design_goals.html#functional">Learn more</a></p>
 </section>
 
 ## Try Roc
 
-<!-- WebREPL should go here, first impression -->
+<!-- TODO WebREPL to go here -->
+
+The code below shows a Roc application which prints `Hello World!` to the terminal. It does this using the [roc-lang/basic-cli](https://github.com/roc-lang/basic-cli) platform. 
 
 ```roc
 app "hello-world"
     packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.3.2/tE4xS_zLdmmxmHwHih9kHWQ7fsXtJr7W7h3425-eZFk.tar.br" }
     imports [pf.Stdout]
     provides [main] to pf
 
-main = Stdout.line "Hello, World!"
+main = 
+    Stdout.line "Hello, World!"
 ```
 
+We have developed a number of smaller code [examples](https://github.com/roc-lang/examples) which demonstrate how to use Roc. These cover a range of topics from basic syntax to more advanced features such as random number generation and using the popular `Task` feature.
+
 ## Use cases
 
 -   Tools & Scripts
--   Web (coming soon) <!-- richard starting on this -->
+-   Web (coming soon)
 -   Networking & Servers (coming soon)
 -   Graphical (coming soon)
 -   Scientific (coming soon)
 -   Embedded (coming soon)
 
-## Roc Platforms/Applications (vs libraries)
+## Platforms & Applications
 
-<!--
-provide explamation of platform/application abstraction versus libraries as common in most other languages as this is one of the most unique features of Roc
--->
-TODO 
+TODO provide explanation of platform/application abstraction versus libraries as common in most other languages as this is one of the most unique features of Roc
 
 ## Talks and Publications
 

diff --git a/www/wip_new_website/content/install.md b/www/wip_new_website/content/install.md
@@ -1,18 +1,16 @@
-# Installing Roc
+# Install Roc
 
-## Installation
+<!-- TODO detect current OS with browser and only show link for that, provide other button for others  -->
 
-- [Linux x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/linux_x86_64.md)
-- [MacOS Apple Silicon Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_apple_silicon.md)
-- [MacOS x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_x86_64.md)
-- [Windows Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/windows.md)
-- [Other Systems Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/other.md)
+- [Linux x86-64](https://github.com/roc-lang/roc/blob/main/getting_started/linux_x86_64.md)
+- [MacOS Apple Silicon](https://github.com/roc-lang/roc/blob/main/getting_started/macos_apple_silicon.md)
+- [MacOS x86-64](https://github.com/roc-lang/roc/blob/main/getting_started/macos_x86_64.md)
+- [Windows](https://github.com/roc-lang/roc/blob/main/getting_started/windows.md)
+- [Other Systems](https://github.com/roc-lang/roc/blob/main/getting_started/other.md)
 
-## Nightly Builds
+## Nightly
 
-<!-- direct download links to builds should go here -->
-
-[nightly builds](https://github.com/roc-lang/roc/releases)
+<!-- link to nightly for currently detected OS(browser) and provide "other" button to reveal all -->
 
 ## Roc CLI
 
@@ -27,6 +25,25 @@
 
 ## Package Management
 
+You can include packages using an URL:
+
+```roc
+app "hello"
+    packages { 
+        # basic-cli platform
+        pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0/DI4lqn7LIZs8ZrCDUgLK-tHHpQmxGF1ZrlevRKq5LXk.tar.br",
+        # json package
+        json: "https://github.com/lukewilliamboswell/roc-json/releases/download/0.1.0/xbO9bXdHi7E9ja6upN5EJXpDoYm7lwmJ8VzL7a5zhYE.tar.br",
+    }
+    imports [
+        pf.Stdout,
+        json.Core,
+    ]
+    provides [main] to pf
+```
+
+A full Roc package manager will be developed in the future.
+
 <!-- 
 
 explain package manager design is still a work in progress 
@@ -35,6 +52,8 @@ the plan is to create a centralised index
 - a fact that every language will have one
 
 in the meantime you can use package URLs
+
+TODO Add an explanation for the URLs with the SHA and the tar.br. This explanation should only be revealed on click.
 -->
 
 ## Editor Support
@@ -44,6 +63,8 @@ explain that the high level design is a work in progress
 - Design goals for editor - we want Roc to ship with an awesome editor
 - Beginners learning to get up an running with an editor
 - Want it to run really fast etc
+
+- Also link to VScode plugin
 -->
 
 - Language Server

diff --git a/www/wip_new_website/content/tutorial.md b/www/wip_new_website/content/tutorial.md
@@ -1,5 +1,33 @@
 # Tutorial
 
-This is a placeholder page for the Roc tutorial.
-
-TODO move the tutorial here from `../generate_tutorial/src/input/tutorial.roc`
+This tutorial will teach you how to build Roc applications. Along the way, you'll learn how to write tests, use the REPL, and much more!
+
+## [Strings and Numbers](#strings-and-numbers) {#strings-and-numbers}
+
+Let's start by getting acquainted with Roc's [_Read-Eval-Print-Loop_](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop), or **REPL** for short. Run this in a terminal:
+
+<code class="block">roc repl</code>
+
+If Roc is [installed](#installation), you should see this:
+
+<pre><samp>The rockin’ roc repl</samp></pre>
+
+So far, so good!
+
+### [Hello, World!](#hello-world) {#hello-world}
+
+Try typing this in the REPL and pressing Enter:
+
+<samp class="repl-prompt">"Hello, World!"</samp>
+
+The REPL should cheerfully display the following:
+
+<pre><samp><span class="literal">"Hello, World!" </span><span class="colon">:</span> Str <span class="comment">               # val1</span></samp></pre>
+
+Congratulations! You've just written your first Roc code.
+
+### [Naming Things](#naming-things) {#naming-things}
+
+When you entered the _expression_ `"Hello, World!"`, the REPL printed it back out. It also printed `: Str`, because `Str` is that expression's type. We'll talk about types later; for now, let's ignore the `:` and whatever comes after it whenever we see them.
+
+**TODO -- move tutorial here when this site is migrated.**
diff --git a/www/wip_new_website/main.roc b/www/wip_new_website/main.roc
@@ -1,7 +1,7 @@
 app "roc-website"
     packages { pf: "../../examples/static-site-gen/platform/main.roc" }    
     imports [
-        pf.Html.{ html, head, body, footer, p, div, main, text, nav, a, link, meta },
+        pf.Html.{ html, head, body, footer, br, div, main, text, nav, a, link, meta },
         pf.Html.Attributes.{ content, name, id, href, rel, lang, class, title, charset },
     ]
     provides [transformFileContent] to pf
@@ -49,16 +49,11 @@ view = \page, htmlContent ->
             main [] [
                 text htmlContent,
             ],
-            footer [
-                id "footer"
-            ] [
-                p [] [
-                    a [href "https://github.com/roc-lang/roc"] [text "source code repository"],
-                ],
-                # <!-- TODO FOOTER - Lanugage link to source code -->
-                text "This site is powered by ",
-                a [href "https://www.netlify.com"] [ text "Netlify"],
-                text ". Made by people who like to make nice things. © Roc 2023",
+            footer [] [
+                div [id "footer"] [
+                    text " powered by ",
+                    a [href "https://www.netlify.com"] [ text "Netlify"],
+                ]
             ]
         ],
         # TODO - add site.js if needed
@@ -86,7 +81,6 @@ viewNavbar =
 rocLogo = 
     (Html.element "svg") [
             (Html.attribute "viewBox") "0 -6 51 58",
-            (Html.attribute "fill") "#7c38f5",
             (Html.attribute "xmlns") "http://www.w3.org/2000/svg",
             (Html.attribute "aria-labelledby") "logo-link",
             (Html.attribute "role") "img",