diff --git a/astro.config.mjs b/astro.config.mjs index b9fbd64..53d1d32 100644 --- a/astro.config.mjs +++ b/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 }), ], diff --git a/src/content/docs/getting-started/index.mdx b/src/content/docs/getting-started/index.mdx index 222acac..943ddf8 100644 --- a/src/content/docs/getting-started/index.mdx +++ b/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!" +``` diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 030c31a..37a2acd 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -22,8 +22,8 @@ import { Card, CardGrid } from "@astrojs/starlight/components"; fearlessly. - 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. 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! - 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. diff --git a/src/styles/custom.css b/src/styles/custom.css index 16b9fcf..b577e8f 100644 --- a/src/styles/custom.css +++ b/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; } diff --git a/tailwind.config.mjs b/tailwind.config.mjs index ed3250e..20a9118 100644 --- a/tailwind.config.mjs +++ b/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 {