moved all crates into seperate folder + related path fixes

crates/docs/src/docs_error.rs

@@ -0,0 +1,55 @@
+use peg::error::ParseError;
+use roc_ast::ast_error::ASTError;
+use roc_module::module_err::ModuleError;
+use roc_parse::parser::SyntaxError;
+use snafu::Snafu;
+
+#[derive(Debug, Snafu)]
+#[snafu(visibility(pub))]
+#[allow(clippy::enum_variant_names)]
+pub enum DocsError {
+    WrapASTError {
+        #[snafu(backtrace)]
+        source: ASTError,
+    },
+    WrapModuleError {
+        #[snafu(backtrace)]
+        source: ModuleError,
+    },
+    WrapSyntaxError {
+        msg: String,
+    },
+    WrapPegParseError {
+        source: ParseError<usize>,
+    },
+}
+
+pub type DocsResult<T, E = DocsError> = std::result::Result<T, E>;
+
+impl<'a> From<SyntaxError<'a>> for DocsError {
+    fn from(syntax_err: SyntaxError) -> Self {
+        Self::WrapSyntaxError {
+            msg: format!("{:?}", syntax_err),
+        }
+    }
+}
+
+impl From<ASTError> for DocsError {
+    fn from(ast_err: ASTError) -> Self {
+        Self::WrapASTError { source: ast_err }
+    }
+}
+
+impl From<ModuleError> for DocsError {
+    fn from(module_err: ModuleError) -> Self {
+        Self::WrapModuleError { source: module_err }
+    }
+}
+
+impl From<ParseError<usize>> for DocsError {
+    fn from(peg_parse_err: ParseError<usize>) -> Self {
+        Self::WrapPegParseError {
+            source: peg_parse_err,
+        }
+    }
+}

crates/docs/src/html.rs

@@ -0,0 +1,85 @@
+use roc_code_markup::{markup::nodes::MarkupNode, slow_pool::SlowPool};
+
+// determine appropriate css class for MarkupNode
+pub fn mark_node_to_html(mark_node: &MarkupNode, mark_node_pool: &SlowPool, buf: &mut String) {
+    let mut additional_newlines = 0;
+
+    match mark_node {
+        MarkupNode::Nested {
+            children_ids,
+            newlines_at_end,
+            ..
+        } => {
+            for &child_id in children_ids {
+                mark_node_to_html(mark_node_pool.get(child_id), mark_node_pool, buf)
+            }
+
+            additional_newlines = *newlines_at_end;
+        }
+        MarkupNode::Text {
+            content,
+            syn_high_style,
+            newlines_at_end,
+            ..
+        } => {
+            use roc_code_markup::syntax_highlight::HighlightStyle::*;
+
+            let css_class = match syn_high_style {
+                Operator => "operator",
+                String => "string",
+                FunctionName => "function-name",
+                FunctionArgName => "function-arg-name",
+                Type => "type",
+                Bracket => "bracket",
+                Number => "number",
+                PackageRelated => "package-related",
+                Value => "value",
+                RecordField => "recordfield",
+                Import => "import",
+                Provides => "provides",
+                Blank => "blank",
+                Comment => "comment",
+                DocsComment => "docs-comment",
+                UppercaseIdent => "uppercase-ident",
+                LowercaseIdent => "lowercase-ident",
+                Keyword => "keyword-ident",
+            };
+
+            write_html_to_buf(content, css_class, buf);
+
+            additional_newlines = *newlines_at_end;
+        }
+        MarkupNode::Blank {
+            newlines_at_end, ..
+        } => {
+            let mut content_str = " ".to_string();
+
+            for _ in 0..*newlines_at_end {
+                content_str.push('\n');
+            }
+
+            write_html_to_buf(&content_str, "blank", buf);
+
+            additional_newlines = *newlines_at_end;
+        }
+        MarkupNode::Indent { .. } => {
+            let content_str = mark_node.get_content();
+
+            write_html_to_buf(&content_str, "indent", buf);
+        }
+    }
+
+    for _ in 0..additional_newlines {
+        buf.push('\n')
+    }
+}
+
+fn write_html_to_buf(content: &str, css_class: &'static str, buf: &mut String) {
+    let opening_tag: String = ["<span class=\"syntax-", css_class, "\">"].concat();
+
+    buf.push_str(opening_tag.as_str());
+
+    buf.push_str(content);
+
+    buf.push_str("</span>");
+}

crates/docs/src/static/favicon.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 52 53" xmlns="http://www.w3.org/2000/svg">
+  <style>polygon {fill: #5c0bff;}@media (prefers-color-scheme: dark) {polygon {fill: #7733ff;}} </style>
+  <polygon points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086"/>
+</svg>

crates/docs/src/static/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <!-- <title>TODO populate this based on the module's name, e.g. "Parser - roc/parser"</title> -->
+    <!-- <meta name="description" content="TODO populate this based on the module's description"> -->
+    <meta name="viewport" content="width=device-width">
+    <link rel="icon" href="<!-- favicon.svg -->">
+    <script type="text/javascript" src="<!-- search.js -->" defer></script>
+    <link rel="stylesheet" href="<!-- styles.css -->">
+</head>
+
+<body>
+<nav id="sidebar-nav">
+    <input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
+    <label for="module-search" id="search-link">Search</label>
+    <div class="module-links">
+        <!-- Module links -->
+    </div>
+</nav>
+<div class="top-header-extension">
+    <!-- if the window gets big, this extends the purple bar on the top header to the left edge of the window -->
+</div>
+<header class="top-header">
+    <nav class="pkg-and-logo">
+        <a class="logo" href="/" aria-labelledby="logo-link">
+            <svg viewBox="0 -6 51 58" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logo-link" role="img">
+                <title id="logo-link">Return to Roc packages</title>
+                <polygon role="presentation" points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086" />
+            </svg>
+        </a>
+        <!-- Package Name and Version -->
+    </nav>
+    <div class="top-header-triangle">
+        <!-- if the window gets big, this extends the purple bar on the top header to the left edge of the window -->
+    </div>
+</header>
+<main>
+    <!-- Module Docs -->
+</main>
+<footer>
+    <p>Made by people who like to make nice things.</p>
+    <p>© 2021</p>
+</footer>
+</body>
+
+</html>

crates/docs/src/static/search.js

@@ -0,0 +1,44 @@
+(() => {
+  let sidebar = document.getElementById("sidebar-nav");
+  let searchBox = document.getElementById("module-search");
+
+  function search() {
+    let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
+
+    if (text === "") {
+      // Un-hide everything
+      sidebar.querySelectorAll(".sidebar-entry a").forEach((entry) => entry.classList.remove("hidden"));
+
+      // Re-hide all the sub-entries except for those of the current module
+      let currentModuleName = document.querySelector('.module-name').textContent;
+
+      sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
+        let entryName = entry.querySelector('.sidebar-module-link').textContent;
+        if (currentModuleName === entryName) return;
+        entry.querySelectorAll(".sidebar-sub-entries a").forEach((subEntry) => subEntry.classList.add("hidden"));
+      })
+    } else {
+      // First, show/hide all the sub-entries within each module (top-level functions etc.)
+      sidebar.querySelectorAll(".sidebar-sub-entries a").forEach((entry) => {
+        if (entry.textContent.toLowerCase().includes(text)) {
+          entry.classList.remove("hidden");
+        } else {
+          entry.classList.add("hidden");
+        }
+      });
+
+      // Then, show/hide modules based on whether they match, or any of their sub-entries matched
+      sidebar.querySelectorAll(".sidebar-module-link").forEach((entry) => {
+        if (entry.textContent.toLowerCase().includes(text) || entry.parentNode.querySelectorAll(".sidebar-sub-entries a:not(.hidden)").length > 0) {
+          entry.classList.remove("hidden");
+        } else {
+          entry.classList.add("hidden");
+        }
+      });
+    }
+  }
+
+  searchBox.addEventListener("input", search);
+
+  search();
+})();

crates/docs/src/static/styles.css

@@ -0,0 +1,561 @@
+:root {
+  --purple-1: #f2f1f9;
+  --purple-2: #d9d2ef;
+  --purple-3: #a17ef1;
+  --purple-4: #8d51f6;
+  --purple-5: #742af4;
+  --purple-6: #23143d;
+  --purple-7: #25222a;
+  --purple-8: #161519;
+  --purple-9: #111014;
+  --gray-1: #f8f8f8;
+  --gray-2: #f0f0f0;
+  --gray-3: #dddddd;
+  --gray-4: #5b5b5b;
+  --gray-5: #212121;
+  --link-color: var(--purple-5);
+  --code-link-color: #5721d4;
+  --text-color: var(--gray-5);
+  --code-color: #222222;
+  --code-bg-color: var(--gray-2);
+  --body-bg-color: #ffffff;
+  --border-color: #e9e9e9;
+  --faded-color: #4c4c4c;
+  --font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --top-header-height: 67px;
+  --sidebar-width: 280px;
+  --top-bar-bg: #8257e5;
+  --top-bar-fg: #ffffff;
+  --nav-link-hover-color: #000000;
+  --type-signature-color: var(--purple-5);
+  --type-signature-bg-color: var(--purple-1);
+}
+
+a {
+  color: #972395;
+}
+
+.logo {
+  padding: 2px 8px;
+}
+
+.logo svg {
+  height: 48px;
+  width: 48px;
+  fill: var(--top-bar-fg);
+}
+
+.logo:hover {
+  text-decoration: none;
+}
+
+.logo svg:hover {
+  fill: var(--nav-link-hover-color);
+}
+
+.pkg-full-name {
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  font-size: 32px;
+  margin: 0 8px;
+  font-weight: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 100%;
+}
+
+.entry-name {
+  white-space: pre-wrap;
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: normal;
+  color: var(--type-signature-color);
+  background-color: var(--type-signature-bg-color);
+  width: fit-content;
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+
+.entry-name a {
+  font-weight: bold;
+  color: var(--type-signature-color);
+}
+
+.entry-name a:visited {
+  color: var(--type-signature-color);
+}
+
+.pkg-full-name a {
+  padding-top: 12px;
+  padding-bottom: 16px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover, a:hover code {
+  text-decoration: underline;
+}
+
+.pkg-and-logo {
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background-color: var(--top-bar-bg);
+}
+
+.pkg-and-logo a, .pkg-and-logo a:visited {
+  color: var(--top-bar-fg);
+}
+
+.pkg-and-logo a:hover {
+  color: var(--nav-link-hover-color);
+  text-decoration: none;
+}
+
+.search-button {
+  flex-shrink: 0; /* always shrink the package name before these; they have a relatively constrained length */
+  padding: 12px 18px;
+  margin-right: 42px;
+  display: none; /* only show this in the mobile view */
+}
+
+.version {
+  padding: 18px 10px;
+  min-width: 48px;
+  margin-right: 8px;
+}
+
+body {
+  display: grid;
+  grid-template-columns: [before-sidebar] 1fr [sidebar] var(--sidebar-width) [main-content] fit-content(calc(1280px - var(--sidebar-width))) [end] 1fr;
+  grid-template-rows: [top-header] var(--top-header-height) [above-footer] auto [footer] auto;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  color: var(--text-color);
+  background-color: var(--body-bg-color);
+}
+
+main {
+  grid-column-start: main-content;
+  grid-column-end: main-content;
+  grid-row-start: above-footer;
+  grid-row-end: above-footer;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 18px;
+  line-height: 1.85em;
+  margin-top: 2px;
+  padding: 48px;
+
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
+}
+
+#sidebar-nav {
+  grid-column-start: sidebar;
+  grid-column-end: sidebar;
+  grid-row-start: above-footer;
+  grid-row-end: above-footer;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-left: 56px;
+  padding-top: 6px;
+  width: 100%;
+}
+
+.top-header-extension {
+  grid-column-start: before-sidebar;
+  grid-column-end: sidebar;
+  grid-row-start: top-header;
+  grid-row-end: top-header;
+  background-color: var(--top-bar-bg);
+}
+
+.top-header {
+  grid-column-start: sidebar;
+  grid-column-end: end;
+  grid-row-start: top-header;
+  grid-row-end: top-header;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  font-family: var(--font-sans);
+  font-size: 24px;
+  height: 100%;
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
+}
+
+.top-header-triangle {
+  /* This used to be a clip-path, but Firefox on Android (at least as of early 2020)
+   * rendered the page extremely slowly in that version. With this approach it's super fast.
+   */
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: var(--top-header-height) 0 0 48px;
+  border-color: transparent transparent transparent var(--top-bar-bg);
+}
+
+p {
+    overflow-wrap: break-word;
+    margin: 24px 0;
+}
+
+footer {
+  grid-column-start: main-content;
+  grid-column-end: main-content;
+  grid-row-start: footer;
+  grid-row-end: footer;
+  max-width: var(--main-content-max-width);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 16px;
+}
+
+footer p {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.sidebar-entry ul {
+  list-style-type: none;
+  margin: 0;
+}
+
+.sidebar-entry a {
+  box-sizing: border-box;
+  min-height: 48px;
+  min-width: 48px;
+  padding: 12px 16px;
+  font-family: var(--font-mono);
+}
+
+.sidebar-entry a,
+.sidebar-entry a:visited {
+  color: var(--text-color);
+}
+
+.sidebar-sub-entries a {
+  display: block;
+  line-height: 24px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 36px;
+}
+
+.module-name {
+  font-size: 56px;
+  line-height: 1em;
+  font-family: var(--font-mono);
+  font-weight: bold;
+  margin-top: 18px;
+  margin-bottom: 48px;
+}
+
+.module-name a, .module-name a:visited {
+  color: inherit;
+}
+
+.sidebar-module-link {
+  box-sizing: border-box;
+  font-size: 18px;
+  line-height: 24px;
+  font-family: var(--font-mono);
+  display: block;
+  width: 100%;
+  padding: 8px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+a, a:visited {
+  color: var(--link-color);
+}
+
+h3 {
+  font-size: 32px;
+  margin: 48px 0 24px 0;
+}
+
+h4 {
+  font-size: 24px;
+}
+
+.type-def {
+  font-size: 24px;
+  color: var(--link-color);
+}
+
+.code-snippet {
+  padding: 8px 16px;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-family: var(--font-mono);
+  background-color: var(--code-bg-color);
+}
+
+code {
+  font-family: var(--font-mono);
+  color: var(--code-color);
+  background-color: var(--code-bg-color);
+  display: inline-block;
+}
+
+p code {
+  padding: 0 8px;
+  border-radius: 4px;
+}
+
+code a, a code {
+  text-decoration: none;
+  color: var(--code-link-color);
+  background: none;
+  padding: 0;
+}
+
+code a:visited, a:visited code {
+  color: var(--code-link-color);
+}
+
+pre {
+  margin: 36px 0;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: var(--code-bg-color);
+  overflow-x: auto;
+}
+
+.hidden {
+  /* Use !important to win all specificity fights. */
+  display: none !important;
+}
+
+.syntax-number {
+    color: #60B7BF;
+}
+.syntax-string {
+  color:#F7577C;
+}
+
+.syntax-bracket {
+  color:#FF335F;
+}
+.syntax-closure-dash,
+.syntax-closure-arrow,
+.syntax-operator
+{
+    color: #ffffff;
+}
+.syntax-comma {
+  color: #9573E6;
+}
+.syntax-comment {
+  color: #ff0000;
+}
+
+#module-search:placeholder-shown {
+  padding: 0;
+  opacity: 0;
+  height: 0;
+}
+
+#module-search, #module-search:focus {
+  opacity: 1;
+  padding: 12px 16px;
+  height: 48px;
+}
+
+/* Show the "Search" label link when the text input has a placeholder */
+#module-search:placeholder-shown + #search-link {
+  display: flex;
+}
+
+/* Hide the "Search" label link when the text input has focus */
+#module-search:focus + #search-link {
+  display: none;
+}
+
+#module-search {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 18px;
+  line-height: 18px;
+  margin-top: 6px;
+  border: none;
+  color: var(--faded-color);
+  background-color: var(--code-bg-color);
+  font-family: var(--font-serif);
+}
+
+#module-search::placeholder {
+  color: var(--faded-color);
+  opacity: 1;
+}
+
+#search-link {
+  box-sizing: border-box;
+  display: none;
+  align-items: center;
+  font-size: 18px;
+  line-height: 18px;
+  padding: 12px 16px;
+  height: 48px;
+  cursor: pointer;
+}
+
+#search-link:hover {
+  text-decoration: underline;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg-color: var(--purple-8);
+    --code-bg-color: var(--purple-7);
+    --border-color: #555555;
+    --code-color: #eeeeee;
+    --text-color: var(--gray-1);
+    --logo-solid: #777777;
+    --faded-color: #bbbbbb;
+    --link-color: #c5a8ff;
+    --code-link-color: #b894ff;
+    --top-bar-bg: #6845b9;
+    --top-bar-fg: #eeeeee;
+    --type-signature-color: var(--grey-1);
+    --type-signature-bg-color: var(--purple-4);
+  }
+
+  html {
+    scrollbar-color: #444444 #2f2f2f;
+  }
+}
+
+@media only screen and (max-device-width: 480px) and (orientation: portrait) {
+  .search-button {
+    display: block; /* This is only visible in mobile. */
+  }
+
+  .top-header {
+    justify-content: space-between;
+    width: auto;
+  }
+
+  .pkg-full-name {
+    margin-left: 8px;
+    margin-right: 12px;
+    font-size: 24px;
+    padding-bottom: 14px;
+  }
+
+  .pkg-full-name a {
+    vertical-align: middle;
+    padding: 18px 0;
+  }
+
+  .logo {
+    padding-left: 2px;
+    width: 50px;
+    height: 54px;
+  }
+
+  .version {
+    margin: 0;
+    font-weight: normal;
+    font-size: 18px;
+    padding-bottom: 16px;
+  }
+
+  .module-name {
+    font-size: 36px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    max-width: calc(100% - 18px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  main {
+    grid-column-start: none;
+    grid-column-end: none;
+    grid-row-start: above-footer;
+    grid-row-end: above-footer;
+    padding: 18px;
+    font-size: 16px;
+  }
+
+  #sidebar-nav {
+    grid-column-start: none;
+    grid-column-end: none;
+    grid-row-start: sidebar;
+    grid-row-end: sidebar;
+    margin-top: 0;
+    padding-left: 0;
+    width: auto;
+  }
+
+  #sidebar-heading {
+    font-size: 24px;
+    margin: 16px;
+  }
+
+  h3 {
+    font-size: 18px;
+    margin: 0;
+    padding: 0;
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  body {
+    grid-template-columns: auto;
+    grid-template-rows: [top-header] var(--top-header-height) [before-sidebar] auto [sidebar] auto [above-footer] auto [footer] auto;
+/* [before-sidebar] 1fr [sidebar] var(--sidebar-width) [main-content] fit-content(calc(1280px - var(--sidebar-width))) [end] 1fr; */
+
+    margin: 0;
+    min-width: 320px;
+    max-width: 100%;
+  }
+
+  .top-header-triangle {
+    display: none;
+  }
+
+  .pkg-and-logo {
+    width: 100%;
+  }
+
+  .pkg-full-name {
+    flex-grow: 1;
+  }
+
+  .pkg-full-name a {
+    padding-top: 24px;
+    padding-bottom: 12px;
+  }
+}