From 32db10dd3dc49eb41b655e736f78af8a1cc35e5f Mon Sep 17 00:00:00 2001 From: Charles Ancheta <55412395+cbebe@users.noreply.github.com> Date: Thu, 17 Oct 2024 19:38:30 -0600 Subject: [PATCH] website: Add basic syntax highlighting --- package.json | 5 ++- pkg/website/docs/fysh/manual.md | 44 +------------------ pkg/website/package.json | 33 ++++++++++++++ pkg/website/project.json | 29 ------------ pkg/website/src/theme/prism-fysh.ts | 33 ++++++++++++++ .../src/theme/prism-include-languages.ts | 33 ++++++++++++++ pnpm-lock.yaml | 11 +++++ 7 files changed, 116 insertions(+), 72 deletions(-) create mode 100644 pkg/website/package.json delete mode 100644 pkg/website/project.json create mode 100644 pkg/website/src/theme/prism-fysh.ts create mode 100644 pkg/website/src/theme/prism-include-languages.ts diff --git a/package.json b/package.json index af68861..a4344b1 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,12 @@ "@nx-go/nx-go": "^3.2.0", "@nx/node": "19.8.0", "@nx/workspace": "19.8.0", + "@types/prismjs": "^1.26.4", "@types/react": "^18.3.11", "nx": "19.8.0", - "typescript": "~5.2.2" + "prismjs": "^1.29.0", + "typescript": "~5.2.2", + "utility-types": "^3.11.0" }, "dependencies": { "@docusaurus/core": "3.4.0", diff --git a/pkg/website/docs/fysh/manual.md b/pkg/website/docs/fysh/manual.md index 3db6c18..2fa0435 100644 --- a/pkg/website/docs/fysh/manual.md +++ b/pkg/website/docs/fysh/manual.md @@ -6,16 +6,13 @@ sidebar_position: 2 ## 🐠 Chapter 1: Fysh Syntax -
- Click to expand - ### 🐟 Variables - Meet Steven, our fishy friend. In Fysh, variables like Steven are declared with `>`. Every line of fysh ends with a wave `~`. ```fysh -> ~ +> ~ ``` - Steven has binary scales. In Fysh, `}` represents `1` and `)` represents `0`. @@ -65,7 +62,7 @@ sidebar_position: 2 - **Multiplying values:** Fysh often get lonely. This loneliness causes fysh to meet new fysh and proliferate. This gives Steven a value of - `0b101010 = 0b110 * 0b111`. (42 = 6 * 7) + `0b101010 = 0b110 * 0b111`. (42 = 6 \* 7) ```fysh > = ><{{(°> <3 ><{{{°> ~ @@ -120,13 +117,8 @@ number that determines the doneness of the fysh. ><###> ~ ``` -
- ## πŸ“Š Chapter 2: Data Types -
- Click to expand - ### πŸ“ Integers - **Integer:** Steven is an integer represented using binary scales. They have @@ -187,13 +179,8 @@ number that determines the doneness of the fysh. >[><(({Β°>] ~ ``` -
- ## 🧠 Chapter 3: Fysh Logic and Operations -
- Click to expand - ### πŸ€” Logical Operations - **`AND (&&)`, `OR (||)`, and `NOT (!!)`**: Steven is experiencing an @@ -254,13 +241,8 @@ are represented by `~o` or `o~`. Here, we are checking if Steven is bigger than > β‰ˆo ><{{{Β°> ``` -
- ## πŸ”„ Chapter 3: Control Structures -
- Click to expand - ### πŸ” While Loops - In the whirlpool of Fysh logic, the while loop, represented by `@` or `πŸŒ€`, @@ -317,13 +299,8 @@ Conditional statements run based on how each Fysh feels <>< ``` -
- ## πŸ§‘β€πŸ”§ Chapter 4: Functions -
- Click to expand - ### ✏️ Defining Functions To define a function or SUBroutine, use a submarine `>(funcNameHere)` along with @@ -349,13 +326,8 @@ of the 3 parameters. [>(submarine) > - > - >] ~ ``` -
- ## βš“ Chapter 5: Output -
- Click to expand - ### ⛓️ Output Value When we finally reach our destination, we anchor ourselves. Anchors are used to @@ -367,13 +339,8 @@ Here we're outputting `0b101` (5). (+o ><{({Β°> ~ ``` -
- ## πŸ’¬ Chapter 6: Comments -
- Click to expand - ### πŸ”‰ Single-line Comments Navigator Fysh are used to guide the reader through the code. They are @@ -397,13 +364,8 @@ How to grill a Fysh: <*/>< ``` -
- ## πŸ“ˆ Examples -
- Click to expand - ### ❗Factorial Example This program calculates the factorial of number. In this case 5. The factorial @@ -435,5 +397,3 @@ Let's break it down: 2. `<< ~` - Decrement the number. 3. Repeat until the number is 1. 4. `(+o > ~` - Output the factorial. - -
diff --git a/pkg/website/package.json b/pkg/website/package.json new file mode 100644 index 0000000..7f8284f --- /dev/null +++ b/pkg/website/package.json @@ -0,0 +1,33 @@ +{ + "name": "website", + "nx": { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "pkg/website/src", + "targets": { + "build": { + "executor": "@nx-extend/docusaurus:browser", + "options": { + "outputPath": "dist/pkg/website" + } + }, + "serve": { + "executor": "@nx-extend/docusaurus:dev-server", + "options": { + "port": 3000 + } + }, + "deploy": { + "dependsOn": [ + "build" + ], + "executor": "nx:run-commands", + "options": { + "command": "go run pkg/website/cmd/main.go", + "cwd": "{workspaceRoot}" + } + } + }, + "tags": [] + } +} diff --git a/pkg/website/project.json b/pkg/website/project.json deleted file mode 100644 index 5eb114e..0000000 --- a/pkg/website/project.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "website", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "pkg/website/src", - "targets": { - "build": { - "executor": "@nx-extend/docusaurus:browser", - "options": { - "outputPath": "dist/pkg/website" - } - }, - "serve": { - "executor": "@nx-extend/docusaurus:dev-server", - "options": { - "port": 3000 - } - }, - "deploy": { - "dependsOn": ["build"], - "executor": "nx:run-commands", - "options": { - "command": "go run pkg/website/cmd/main.go", - "cwd": "{workspaceRoot}" - } - } - }, - "tags": [] -} diff --git a/pkg/website/src/theme/prism-fysh.ts b/pkg/website/src/theme/prism-fysh.ts new file mode 100644 index 0000000..d45983e --- /dev/null +++ b/pkg/website/src/theme/prism-fysh.ts @@ -0,0 +1,33 @@ +Prism.languages.fysh = { + comment: [ + { + pattern: /><\/\*>[\s\S]*?<\*\/><\/\/>.*$/m, + greedy: true, + }, + ], + string: [ + { + pattern: /\*[^*]*\*/, + greedy: true, + }, + { + pattern: /🫧[^🫧]*🫧/, + greedy: true, + alias: 'special', + }, + ], + keyword: [ + { + pattern: /><\(*[*^@]>/, + greedy: true, + }, + { + pattern: /><\\\/>|<\\\/> { + 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-fysh'); + + delete (globalThis as Optional).Prism; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0bd59ba..5de4f2e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,15 +51,24 @@ importers: '@nx/workspace': specifier: 19.8.0 version: 19.8.0 + '@types/prismjs': + specifier: ^1.26.4 + version: 1.26.4 '@types/react': specifier: ^18.3.11 version: 18.3.11 nx: specifier: 19.8.0 version: 19.8.0 + prismjs: + specifier: ^1.29.0 + version: 1.29.0 typescript: specifier: ~5.2.2 version: 5.2.2 + utility-types: + specifier: ^3.11.0 + version: 3.11.0 pkg/tree-sitter-fysh: dependencies: @@ -126,6 +135,8 @@ importers: specifier: ^5.3.3 version: 5.4.5 + pkg/website: {} + packages: '@algolia/autocomplete-core@1.9.3':