flesh out getting started a little

astro.config.mjs

@@ -2,22 +2,15 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import tailwind from "@astrojs/tailwind";
-import astroExpressiveCode from "astro-expressive-code";
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://riot.ml',
+  site: "https://riot.ml",
   integrations: [
-    astroExpressiveCode({
-      shiki: {
-        themes: ['dracula', 'solarized-light'],
-        langs: ["ocaml", "erlang", "javascript"],
-      }
-    }),
     starlight({
       title: "Riot",
-      logo : {
-        src: './src/assets/riot.png'
+      logo: {
+        src: "./src/assets/riot.png",
       },
       social: {
         github: "https://github.com/riot-ml/riot",
@@ -28,15 +21,19 @@ export default defineConfig({
         { label: "Getting Started", slug: "getting-started" },
         {
           label: "Guides",
-          items: [
-            { label: "Example Guide", slug: "guides/example" },
-          ],
+          items: [{ label: "Example Guide", slug: "guides/example" }],
         },
         {
           label: "Reference",
           autogenerate: { directory: "reference" },
         },
       ],
+      expressiveCode: {
+        themes: ["snazzy-light", 'monokai'],
+        shiki: {
+          langs: ["ocaml", "erlang", "javascript"],
+        },
+      },
     }),
     tailwind({ applyBaseStyles: false }),
   ],

src/content/docs/getting-started/index.mdx

@@ -3,14 +3,51 @@ title: Getting Started
 description: Building your first Riot app
 ---
 
-import { Code } from '@astrojs/starlight/components';
+import { Code } from "@astrojs/starlight/components";
 
 ## Installing Riot
 
 We can install Riot from Github or from the OPAM repository.
 
+```bash frame="code" title="Install with opam"
+$ opam pin riot.dev
+$ opam install riot
+```
+
+```lisp title="Install with dune"
+(package
+  (name your_package)
+  (depends riot))
+
+; if you want to use the latest version from Github
+; you can set package pins with the following snippets:
+(pin (package (name riot)) (url "git+https://github.com/riot-ml/riot"))
+(pin (package (name rio)) (url "git+https://github.com/riot-ml/rio"))
+(pin (package (name gluon)) (url "git+https://github.com/riot-ml/gluon"))
+(pin (package (name bytestring)) (url "git+https://github.com/riot-ml/bytestring"))
+```
+
 ## Your First Riot App
 
 ```ocaml title="main.ml"
 let () = Riot.run @@ fun () -> print_endline "Hello, Joe!"
 ```
+
+```lisp title="dune"
+(executable
+  (public_name main)
+  (libraries riot))
+```
+
+```lisp title="dune-project"
+(using dune 3.17)
+(package
+  (name main)
+  (depends riot))
+```
+
+```bash title="Running your first app"
+$ dune lock
+$ dune run
+"Hello, Joe!"
+```

src/content/docs/index.mdx

@@ -22,8 +22,8 @@ import { Card, CardGrid } from "@astrojs/starlight/components";
     fearlessly.
   </Card>
   <Card title="Batteries Included" icon="approve-check-circle">
-    Riot aims to be a productive environment for building I/O heavy
-    applications like web servers.
+    Riot aims to be a productive environment for building I/O heavy applications
+    like web servers.
   </Card>
   <Card title="Multi-core from Day 1" icon="seti:ocaml">
     Riot apps are multicore ready by default. Simply spawn many Riot processes
@@ -34,7 +34,8 @@ import { Card, CardGrid } from "@astrojs/starlight/components";
     and make your apps blazing fast!
   </Card>
   <Card title="Friendly" icon="heart">
-    All backgrounds and genders and experience levels are welcome and respected equally.
-    Black lives matter. Trans rights are human rights. No nazi bullsh*t.
+    All backgrounds and genders and experience levels are welcome and respected
+    equally. Black lives matter. Trans rights are human rights. No nazi
+    bullsh*t.
   </Card>
 </CardGrid>

src/styles/custom.css

@@ -4,30 +4,30 @@
 
 /* Dark mode colors. */
 :root {
-	--sl-color-accent-low: #460913;
-	--sl-color-accent: #c5003b;
-	--sl-color-accent-high: #feb1b4;
-	--sl-color-white: #ffffff;
-	--sl-color-gray-1: #f0edec;
-	--sl-color-gray-2: #cbc7c6;
-	--sl-color-gray-3: #a9a2a0;
-	--sl-color-gray-4: #5d5655;
-	--sl-color-gray-5: #3d3735;
-	--sl-color-gray-6: #2b2524;
-	--sl-color-black: #1a1717;
+  --sl-color-accent-low: #460913;
+  --sl-color-accent: #c5003b;
+  --sl-color-accent-high: #feb1b4;
+  --sl-color-white: #ffffff;
+  --sl-color-gray-1: #f0edec;
+  --sl-color-gray-2: #cbc7c6;
+  --sl-color-gray-3: #a9a2a0;
+  --sl-color-gray-4: #5d5655;
+  --sl-color-gray-5: #3d3735;
+  --sl-color-gray-6: #2b2524;
+  --sl-color-black: #1a1717;
 }
 /* Light mode colors. */
-:root[data-theme='light'] {
-	--sl-color-accent-low: #ffc6c8;
-	--sl-color-accent: #a60030;
-	--sl-color-accent-high: #630019;
-	--sl-color-white: #1a1717;
-	--sl-color-gray-1: #2b2524;
-	--sl-color-gray-2: #3d3735;
-	--sl-color-gray-3: #5d5655;
-	--sl-color-gray-4: #918a88;
-	--sl-color-gray-5: #c5c1c0;
-	--sl-color-gray-6: #f0edec;
-	--sl-color-gray-7: #f7f6f5;
-	--sl-color-black: #ffffff;
+:root[data-theme="light"] {
+  --sl-color-accent-low: #ffc6c8;
+  --sl-color-accent: #a60030;
+  --sl-color-accent-high: #630019;
+  --sl-color-white: #1a1717;
+  --sl-color-gray-1: #2b2524;
+  --sl-color-gray-2: #3d3735;
+  --sl-color-gray-3: #5d5655;
+  --sl-color-gray-4: #918a88;
+  --sl-color-gray-5: #c5c1c0;
+  --sl-color-gray-6: #f0edec;
+  --sl-color-gray-7: #f7f6f5;
+  --sl-color-black: #ffffff;
 }

tailwind.config.mjs

@@ -1,10 +1,24 @@
-import starlightPlugin from '@astrojs/starlight-tailwind';
+import starlightPlugin from "@astrojs/starlight-tailwind";
 
-import starlightPlugin from '@astrojs/starlight-tailwind';
+import starlightPlugin from "@astrojs/starlight-tailwind";
 
 // Generated color palettes
-const accent = { 200: '#feb1b4', 600: '#a60030', 900: '#630019', 950: '#460913' };
-const gray = { 100: '#f7f6f5', 200: '#f0edec', 300: '#c5c1c0', 400: '#918a88', 500: '#5d5655', 700: '#3d3735', 800: '#2b2524', 900: '#1a1717' };
+const accent = {
+  200: "#feb1b4",
+  600: "#a60030",
+  900: "#630019",
+  950: "#460913",
+};
+const gray = {
+  100: "#f7f6f5",
+  200: "#f0edec",
+  300: "#c5c1c0",
+  400: "#918a88",
+  500: "#5d5655",
+  700: "#3d3735",
+  800: "#2b2524",
+  900: "#1a1717",
+};
 
 /** @type {import('tailwindcss').Config} */
 export default {