docs: updated style and logo

docs/.vitepress/config.mts

@@ -1,42 +1,45 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
 
 export default defineConfig({
   title: "Sprocket",
-  description: "A bioinformatics workflow orchestration engine and package manager built on top of the Workflow Description Language (WDL)",
-  base: '/sprocket/',
+  description:
+    "A bioinformatics workflow orchestration engine and package manager built on top of the Workflow Description Language (WDL)",
+  base: "/sprocket/",
   themeConfig: {
+    logo: {
+      light: "/sprocket-logo.png",
+      dark: "/sprocket-logo-dark.png",
+    },
+    siteTitle: "",
     nav: [
-      { text: 'Documentation', link: '/overview' },
+      { text: "Documentation", link: "/overview" },
       {
         text: "v0.5.0",
         items: [
           {
-            text: 'Changelog',
-            link: 'https://github.com/stjude-rust-labs/sprocket/blob/main/CHANGELOG.md'
-          }
-        ]
-      }
+            text: "Changelog",
+            link: "https://github.com/stjude-rust-labs/sprocket/blob/main/CHANGELOG.md",
+          },
+        ],
+      },
     ],
 
     sidebar: [
       {
-        text: 'Getting Started',
+        text: "Getting Started",
         items: [
-          { text: 'Overview', link: '/overview' },
-          { text: 'Installation', link: '/installation' },
-        ]
+          { text: "Overview", link: "/overview" },
+          { text: "Installation", link: "/installation" },
+        ],
       },
       {
-        text: 'Visual Studio Code Extension',
-        items: [
-          { text: 'Getting Started', link: '/vscode/getting-started' },
-        ]
-      }
+        text: "Visual Studio Code Extension",
+        items: [{ text: "Getting Started", link: "/vscode/getting-started" }],
+      },
     ],
 
-
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/stjude-rust-labs/sprocket' }
-    ]
-  }
-})
+      { icon: "github", link: "https://github.com/stjude-rust-labs/sprocket" },
+    ],
+  },
+});

docs/.vitepress/theme/Layout.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData } from "vitepress";
 
 // https://vitepress.dev/reference/runtime-api#usedata
-const { site, frontmatter } = useData()
+const { site, frontmatter } = useData();
 </script>
 
 <template>

docs/.vitepress/theme/style.css

@@ -3,47 +3,8 @@
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
-/**
- * Colors
- *
- * Each colors have exact same color scale system with 3 levels of solid
- * colors with different brightness, and 1 soft color.
- *
- * - `XXX-1`: The most solid color used mainly for colored text. It must
- *   satisfy the contrast ratio against when used on top of `XXX-soft`.
- *
- * - `XXX-2`: The color used mainly for hover state of the button.
- *
- * - `XXX-3`: The color for solid background, such as bg color of the button.
- *   It must satisfy the contrast ratio with pure white (#ffffff) text on
- *   top of it.
- *
- * - `XXX-soft`: The color used for subtle background such as custom container
- *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
- *   on top of it.
- *
- *   The soft color must be semi transparent alpha channel. This is crucial
- *   because it allows adding multiple "soft" colors on top of each other
- *   to create a accent, such as when having inline code block inside
- *   custom containers.
- *
- * - `default`: The color used purely for subtle indication without any
- *   special meanings attched to it such as bg color for menu hover state.
- *
- * - `brand`: Used for primary brand colors, such as link text, button with
- *   brand theme, etc.
- *
- * - `tip`: Used to indicate useful information. The default theme uses the
- *   brand color for this by default.
- *
- * - `warning`: Used to indicate warning to the users. Used in custom
- *   container, badges, etc.
- *
- * - `danger`: Used to show error, or dangerous message to the users. Used
- *   in custom container, badges, etc.
- * -------------------------------------------------------------------------- */
-
  :root {
+
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
@@ -136,3 +97,25 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
+
+/**
+ * Custom
+ * -------------------------------------------------------------------------- */
+
+:root {
+	--vp-nav-logo-height: 32px;
+}
+
+.VPNavBarTitle > .title {
+  margin-top: 2px;
+  padding-bottom: 5px;
+}
+
+
+.dark {
+  --vp-c-bg: #070A1A;
+  --vp-c-divider: #e2e2e333;
+
+  --vp-c-white: #e2e2e3;
+  --vp-sidebar-bg-color: #111420;
+}

docs/overview.md

@@ -1,5 +1,3 @@
-# Introduction
-
 ::: tip Note
 **Sprocket** is current an alpha-phase project. To that end,
 this page serves the purpose of describing what we hope Sprocket _will_ become
@@ -9,19 +7,25 @@ you to follow the project on
 progress.
 :::
 
-**Sprocket** is an bioinformatics workflow execution engine built on top of the [Workflow Description Language](https://openwdl.org). The project has multiple high-level goals, including to:
+# Introduction
+
+![Sprocket Repository Header](/public/repo-header.png)
+
+**Sprocket** is an bioinformatics workflow execution engine built on top of the
+[Workflow Description Language](https://openwdl.org). The project has multiple
+high-level goals, including to:
 
-* Provide a **high-performance** workflow execution engine capable of
+- Provide a **high-performance** workflow execution engine capable of
   orchestrating massive bioinformatics workloads (the stated target is 20,000+
   concurrent jobs).
-* Develop a suite of **modern development tools** that brings bioinformatics
+- Develop a suite of **modern development tools** that brings bioinformatics
   development on par with other modern languages (e.g.,
   [`wdl-lsp`](https://github.com/stjude-rust-labs/wdl/tree/main/wdl-lsp)).
-* Maintain an **community-focused codebase** that enables a diverse set of
+- Maintain an **community-focused codebase** that enables a diverse set of
   contributors from academic, non-profit, and commercial organizations.
-* Build on an **open, domain-tailored standard** to ensure the toolset remains
+- Build on an **open, domain-tailored standard** to ensure the toolset remains
   singularly focused on unencumbered innovation within bioinformatics.
-* Retain a **simple and accessible user experience** when complexity isn't warranted.
+- Retain a **simple and accessible user experience** when complexity isn't warranted.
 
 Sprocket is written in [Rust](https://www.rust-lang.org/) and enjoys all of the
 benefits that come with that choice. It also takes heavy inspiration from Rust
@@ -41,9 +45,9 @@ variety of execution environments.
 
 The execution engine for Sprocket is comprised of two major components:
 
-* The **orchestration engine**, which handles the scheduling and monitoring of
+- The **orchestration engine**, which handles the scheduling and monitoring of
   units of execution within a workflow, and
-* **Execution runtimes**, which carry out the work associated with a unit of
+- **Execution runtimes**, which carry out the work associated with a unit of
   compute within a particular environment (e.g., local compute, a high-performance compute
   cluster, or the cloud).
 
@@ -115,7 +119,7 @@ stated goals.
 The following are "goal adjacent", meaning that the project values these things
 when they do not otherwise inhibit the primary goals.
 
-* **Providing robust implementations natively for a handful of reference
+- **Providing robust implementations natively for a handful of reference
   backends.** Outside of a few core backends that are used to drive the
   development of the project, backends are intended to be developed and
   maintained by the backend providers themselves. When that isn't possible,
@@ -126,20 +130,20 @@ when they do not otherwise inhibit the primary goals.
 
 The following are non-goals of the project.
 
-* **Supporting multiple workflow languages or standards.** Workflow
+- **Supporting multiple workflow languages or standards.** Workflow
   languages are ideally a simple means to an end: to run large-scale
   bioinformatics analyses with as little development and operational friction as
   possible. We stand unconvinced that there is a strong technical argument for
   multiple workflow languages existing within bioinformatics.
-* **Supporting a comprehensive list of backends.** As stated above, we aim to
+- **Supporting a comprehensive list of backends.** As stated above, we aim to
   spur a thriving community of independent backend development that is
   compatible with Sprocket. More explicitly, comprehensive support for the quirks of
   each backend (not to mention the day-to-day maintenance of these backends) represents a
   _significant_ time investment that takes away from core development time.
-* **Simplicity at all costs.** Though we aim to make things simple when
+- **Simplicity at all costs.** Though we aim to make things simple when
   possible, complexity will be introduced when deemed necessary (this is
   particularly true when it comes to internal implementation details).
-* **Native Windows compatibility.** For now, Sprocket is intended to be used on
+- **Native Windows compatibility.** For now, Sprocket is intended to be used on
   UNIX-like machines. If you're on Windows, we recommend you [install
   WSL](https://learn.microsoft.com/en-us/windows/wsl/install) if you haven't
   already.
@@ -156,6 +160,5 @@ used.
 
 [`wdl`]: https://github.com/stjude-rust-labs/wdl
 [`sprocket`]: https://github.com/stjude-rust-labs/sprocket
-[Visual Studio Code extension]:
-    https://marketplace.visualstudio.com/items?itemName=stjude-rust-labs.sprocket-vscode
+[Visual Studio Code extension]: https://marketplace.visualstudio.com/items?itemName=stjude-rust-labs.sprocket-vscode
 [Workflow Description Language]: https://openwdl.org

docs/public/repo-header.png

@@ -0,0 +1 @@
+../../assets/repo-header.png

docs/public/sprocket-logo-dark.png

@@ -0,0 +1 @@
+../../assets/sprocket-logo-dark.png

docs/public/sprocket-logo.png

@@ -0,0 +1 @@
+../../assets/sprocket-logo.png