From ec6f4c6d7f6b5aeae45c49d05a3ea550b2921995 Mon Sep 17 00:00:00 2001 From: Rigidity Date: Fri, 5 Jul 2024 20:20:33 -0400 Subject: [PATCH] Syntax highlighting and hello world --- docs/getting-started/hello-world.md | 21 +++++++++++ docs/getting-started/installation.md | 6 +++ docusaurus.config.ts | 2 +- package.json | 5 ++- pnpm-lock.yaml | 9 +++++ sidebars.ts | 2 +- src/theme/prism-include-languages.ts | 27 ++++++++++++++ src/theme/prism-rue.ts | 56 ++++++++++++++++++++++++++++ 8 files changed, 125 insertions(+), 3 deletions(-) create mode 100644 docs/getting-started/hello-world.md create mode 100644 src/theme/prism-include-languages.ts create mode 100644 src/theme/prism-rue.ts diff --git a/docs/getting-started/hello-world.md b/docs/getting-started/hello-world.md new file mode 100644 index 0000000..36913fb --- /dev/null +++ b/docs/getting-started/hello-world.md @@ -0,0 +1,21 @@ +--- +slug: /hello-world +--- + +# Hello World + +The simplest example of a program in Rue is the classic hello world example. + +Write the following program in a file named `hello.rue`: + +```rue title="hello.rue" +fun main() -> Bytes { + "Hello, world!" +} +``` + +Now, run the following command to run the file: + +```bash +rue build hello.rue --run +``` diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 7cbbd1c..3d85c47 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -12,6 +12,12 @@ You can install the Rue CLI with this command: cargo install rue-cli ``` +It's also useful to install [clvm_tools_rs](https://github.com/Chia-Network/clvm_tools_rs): + +```bash +cargo install clvm_tools_rs +``` + ## VSCode Currently the only editor with support for Rue is [Visual Studio Code](https://code.visualstudio.com). diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 182dfad..a40eb24 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -90,7 +90,7 @@ const config: Config = { }, prism: { theme: prismThemes.github, - darkTheme: prismThemes.dracula, + darkTheme: prismThemes.oneDark, additionalLanguages: ["bash"], }, } satisfies Preset.ThemeConfig, diff --git a/package.json b/package.json index 25e8135..84e22e2 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", + "prismjs": "^1.29.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -28,8 +29,10 @@ "@docusaurus/module-type-aliases": "3.4.0", "@docusaurus/tsconfig": "3.4.0", "@docusaurus/types": "3.4.0", + "@types/prismjs": "^1.26.4", "prettier": "^3.3.2", - "typescript": "~5.2.2" + "typescript": "~5.2.2", + "utility-types": "^3.11.0" }, "browserslist": { "production": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a044c63..1d571a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: prism-react-renderer: specifier: ^2.3.0 version: 2.3.1(react@18.3.1) + prismjs: + specifier: ^1.29.0 + version: 1.29.0 react: specifier: ^18.0.0 version: 18.3.1 @@ -39,12 +42,18 @@ importers: '@docusaurus/types': specifier: 3.4.0 version: 3.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@types/prismjs': + specifier: ^1.26.4 + version: 1.26.4 prettier: specifier: ^3.3.2 version: 3.3.2 typescript: specifier: ~5.2.2 version: 5.2.2 + utility-types: + specifier: ^3.11.0 + version: 3.11.0 packages: diff --git a/sidebars.ts b/sidebars.ts index a18a247..d4e5585 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -5,7 +5,7 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Getting Started", - items: ["getting-started/installation"], + items: ["getting-started/installation", "getting-started/hello-world"], }, ], }; diff --git a/src/theme/prism-include-languages.ts b/src/theme/prism-include-languages.ts new file mode 100644 index 0000000..e81a96c --- /dev/null +++ b/src/theme/prism-include-languages.ts @@ -0,0 +1,27 @@ +import siteConfig from "@generated/docusaurus.config"; +import type * as PrismNamespace from "prismjs"; +import type { Optional } from "utility-types"; + +export default function prismIncludeLanguages( + PrismObject: typeof PrismNamespace, +): void { + const { + themeConfig: { prism }, + } = siteConfig; + const { additionalLanguages } = prism as { additionalLanguages: string[] }; + + globalThis.Prism = PrismObject; + + additionalLanguages.forEach((lang) => { + if (lang === "php") { + // eslint-disable-next-line global-require + require("prismjs/components/prism-markup-templating.js"); + } + // eslint-disable-next-line global-require, import/no-dynamic-require + require(`prismjs/components/prism-${lang}`); + }); + + require("./prism-rue"); + + delete (globalThis as Optional).Prism; +} diff --git a/src/theme/prism-rue.ts b/src/theme/prism-rue.ts new file mode 100644 index 0000000..2b29f40 --- /dev/null +++ b/src/theme/prism-rue.ts @@ -0,0 +1,56 @@ +Prism.languages.rue = { + function: { + pattern: /(\bfun\s+)[a-zA-Z_][a-zA-Z0-9_]*/, + lookbehind: true, + }, + "function-call": { + pattern: /\b[a-zA-Z_][a-zA-Z0-9_]*(?=\s*(?:\(|<.*?>\())/, + alias: "function", + }, + field: { + pattern: /\b[a-zA-Z_][a-zA-Z0-9_]*(?=\s*:)/, + alias: "property", + }, + "field-access": { + pattern: /\b(\.)([a-zA-Z_][a-zA-Z0-9_]*)/, + lookbehind: true, + alias: "property", + }, + string: { + pattern: /"[^"]*"/, + lookbehind: true, + greedy: true, + }, + comment: { + pattern: /\/\/.*|\/\*[^]*?\*\//, + multiline: true, + greedy: true, + }, + number: /\b[0-9][0-9_]*\b/, + operator: /[+\-*?%!\^]|<[<=]?|>[>=]?|=[=>]?|!=?|\.(?:\.\.)?|::|->?|&&?|\|\|?/, + punctuation: /[(){}[\],:]/, + "control-flow": { + pattern: /\b(?:if|else|return|raise|assert|assume)\b/, + alias: "keyword", + }, + binding: { + pattern: /\b(?:let|const|fun)\b/, + alias: "keyword", + }, + type: { + pattern: /\b(?:type|struct|enum|as|is)\b/, + alias: "keyword", + }, + module: { + pattern: /\b(?:import|mod)\b/, + alias: "keyword", + }, + modifier: { pattern: /\b(?:inline|export)\b/, alias: "keyword" }, + boolean: /\b(?:false|true)\b/, + null: { + pattern: /\bnil\b/, + alias: "constant", + }, + builtin: /\b(?:Int|Any|Bytes32|Bytes|PublicKey|Nil|Bool)\b/, + "class-name": /\b[A-Z][a-z][a-zA-Z0-9_]*\b/, +};