refactor: use haze's tree sitter library instead of REST api

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  build:
+    name: Build and Test
+    timeout-minutes: 15
+    runs-on: macos-latest
+
+    env:
+     TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+     TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+     TURBO_REMOTE_ONLY: true
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Setup Rust environment
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+          override: true
+
+      - name: Install nj-cli build
+        run:  cargo install nj-cli
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build

.gitmodules

@@ -0,0 +1,24 @@
+[submodule "grammars/tree-sitter-javascript"]
+	path = grammars/tree-sitter-javascript
+	url = git@github.com:tree-sitter/tree-sitter-javascript.git
+[submodule "grammars/tree-sitter-html"]
+	path = grammars/tree-sitter-html
+	url = https://github.com/tree-sitter/tree-sitter-html
+[submodule "grammars/tree-sitter-cpp"]
+	path = grammars/tree-sitter-cpp
+	url = git@github.com:tree-sitter/tree-sitter-cpp.git
+[submodule "grammars/tree-sitter-bash"]
+	path = grammars/tree-sitter-bash
+	url = git@github.com:tree-sitter/tree-sitter-bash.git
+[submodule "grammars/tree-sitter-rust"]
+	path = grammars/tree-sitter-rust
+	url = git@github.com:tree-sitter/tree-sitter-rust.git
+[submodule "grammars/tree-sitter-diff"]
+	path = grammars/tree-sitter-diff
+	url = git@github.com:the-mikedavis/tree-sitter-diff.git
+[submodule "grammars/tree-sitter-c"]
+	path = grammars/tree-sitter-c
+	url = https://github.com/tree-sitter/tree-sitter-c
+[submodule "grammars/tree-sitter-typescript"]
+	path = grammars/tree-sitter-typescript
+	url = https://github.com/tree-sitter/tree-sitter-typescript

app/[slug]/page.tsx

@@ -1,7 +1,8 @@
 import {readFileSync} from 'fs';
 import remarkGfm from 'remark-gfm';
 import PostPage from './blog-page';
-import rehypeTrestSitter from 'rehype-trest-sitter';
+import rehypeTreeSitter from 'rehype-tree-sitter';
+// import rehypeTrestSitter from 'rehype-trest-sitter';
 import {compileMDX} from 'next-mdx-remote/rsc';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
@@ -33,7 +34,21 @@ async function getMDXSource(slug: string) {
 			mdxOptions: {
 				remarkPlugins: [remarkGfm],
 				rehypePlugins: [
-					[rehypeTrestSitter, {url: 'https://trest.zeb.zone', apiKey: process.env.TREST_API_KEY}],
+                    [rehypeTreeSitter, {
+                        treeSitterGrammarRoot: "./grammars/",
+                        scopeMap: {
+						  typescript: "source.ts",
+						  ts: "source.ts",
+                          javascript: "source.js",
+                          js: "source.js",
+                          cpp: "source.cpp",
+						  c: "source.c",
+                          sh: "source.bash",
+                          rust: "source.rust",
+                          html: "text.html.basic",
+                        },
+                      }]
+					// [rehypeTrestSitter, {url: 'https://trest.zeb.zone', apiKey: process.env.TREST_API_KEY}],
 				],
 			},
 		},

app/posts/2022/12/reverse-engineering-tiktok-vm-obfuscation/reverse-engineering-tiktok-vm-1.mdx

@@ -21,7 +21,7 @@ of a request made on tiktok.com can begin to paint the picture for us. Let's sta
 for the term "food". Upon pressing enter, TikTok sends off a GET request with our search term and 
 some extra telemetry embedded.
 
-```
+```sh
 curl -G \
   -d 'aid=1988' \
   -d 'app_language=en' \

app/posts/2023/08/compiling-browser-to-bypass-antibot-measures.mdx

@@ -658,13 +658,13 @@ Where `block` is just the `result` from this current block and `this._lastCipher
 
 [^8]: This is why it's crucial the procedures for decryption and encryption key extraction are used on the *first* time `decrypt` and `encrypt` are called, otherwise we'd be stuck not knowing the last cipher block.
 
-```c
+```cpp
 partial_decrypt_result ^ round_key ^ decrypt_iv = plaintext
 ```
 
 Where everything is known except for `round_key`. This formula can be rearranged to calculate the `round_key`:
 
-```c
+```cpp
 round_key = partial_decrypt_result ^ plaintext ^ decrypt_iv
 ```
 

app/styles/penumbra.css

@@ -29,7 +29,7 @@ pre {
 .type {
 	color: var(--green);
 }
-.type.enum.variant {
+.type\.enum\.variant {
 	color: var(--green);
 }
 .label {
@@ -41,25 +41,28 @@ pre {
 .constant {
 	color: var(--purple);
 }
-.constant.numeric {
+.constant\.numeric {
 	color: var(--cyan);
 }
-.constant.character {
+.constant\.character {
 	color: var(--purple);
 }
 .string {
 	color: var(--yellow);
 }
-.string.special.symbol {
+.string\.special\.symbol {
 	color: var(--cyan);
 }
-.string.special.path {
+.string\.special\.path {
 	color: var(--cyan);
 }
 .variable {
 	color: var(--sky);
 }
-.variable.builtin {
+.variable\.parameter {
+	color: var(--sky);
+}
+.variable\.builtin {
 	color: var(--red);
 }
 .keyword {
@@ -68,25 +71,31 @@ pre {
 .function {
 	color: var(--blue);
 }
-.function.macro {
+.function\.method {
+	color: var(--blue);
+}
+.function\.macro {
 	color: var(--purple);
 }
 .punctuation {
 	color: var(--sky);
 }
+.punctuation\.bracket {
+	color: var(--sky);
+}
 .operator {
 	color: var(--magenta);
 }
 .namespace {
 	color: var(--sky);
 }
-.diff.plus {
+.diff\.plus {
 	color: var(--green);
 }
-.diff.minus {
+.diff\.minus {
 	color: var(--red);
 }
-.diff.delta {
+.diff\.delta {
 	color: var(--cyan);
 }
 .hint {
@@ -101,101 +110,101 @@ pre {
 .error {
 	color: var(--red);
 }
-.ui.background {
+.ui\.background {
 	background-color: var(--shade);
 }
-.ui.background.separator {
+.ui\.background\.separator {
 	color: var(--sky);
 }
-.ui.cursor.match {
+.ui\.cursor\.match {
 	background-color: var(--shadeplus);
 }
-.ui.cursorline.primary {
+.ui\.cursorline\.primary {
 	background-color: var(--shademinus);
 }
-.ui.linenr {
+.ui\.linenr {
 	color: var(--skyminus);
 }
-.ui.linenr.selected {
+.ui\.linenr\.selected {
 	color: var(--sky);
 }
-.ui.statusline {
+.ui\.statusline {
 	color: var(--shade);
 	background-color: var(--sky);
 }
-.ui.statusline.inactive {
+.ui\.statusline\.inactive {
 	color: var(--sky);
 	background-color: var(--shadeplus);
 }
-.ui.statusline.normal {
+.ui\.statusline\.normal {
 	color: var(--shade);
 	background-color: var(--blue);
 }
-.ui.statusline.insert {
+.ui\.statusline\.insert {
 	color: var(--shade);
 	background-color: var(--green);
 }
-.ui.statusline.select {
+.ui\.statusline\.select {
 	color: var(--shade);
 	background-color: var(--purple);
 }
-.ui.popup {
+.ui\.popup {
 	background-color: var(--shademinus);
 }
-.ui.popup.info {
+.ui\.popup\.info {
 	background-color: var(--shade);
 }
-.ui.window {
+.ui\.window {
 	color: var(--sky);
 }
-.ui.help {
+.ui\.help {
 	color: var(--sky);
 	background-color: var(--shademinus);
 }
-.ui.text {
+.ui\.text {
 	color: var(--sky);
 }
-.ui.text.focus {
+.ui\.text\.focus {
 	color: var(--blue);
 }
-.ui.text.info {
+.ui\.text\.info {
 	color: var(--sky);
 }
-.ui.virtual.ruler {
+.ui\.virtual\.ruler {
 	background-color: var(--shademinus);
 }
-.ui.virtual.whitespace {
+.ui\.virtual\.whitespace {
 	color: var(--skyminus);
 }
-.ui.virtual.indent-guide {
+.ui\.virtual\.indent-guide {
 	color: var(--shadeplus);
 }
-.ui.menu {
+.ui\.menu {
 	color: var(--sky);
 	background-color: var(--shademinus);
 }
-.ui.menu.selected {
+.ui\.menu\.selected {
 	color: var(--blue);
 }
-.ui.menu.scroll {
+.ui\.menu\.scroll {
 	color: var(--sky);
 	background-color: var(--shadeplus);
 }
-.ui.selection {
+.ui\.selection {
 	background-color: var(--shadeplus);
 }
-.markup.heading {
+.markup\.heading {
 	color: var(--skyplus);
 }
-.markup.list {
+.markup\.list {
 	color: var(--sky);
 }
-.markup.link.text {
+.markup\.link\.text {
 	color: var(--magenta);
 }
-.markup.quote {
+.markup\.quote {
 	color: var(--green);
 }
-.markup.raw {
+.markup\.raw {
 	color: var(--orange);
 }

package.json

@@ -5,7 +5,8 @@
 	"scripts": {
 		"dev": "next",
 		"dev:watch": "next-remote-watch ./posts",
-		"build": "next build",
+		"install-grammars": "cd grammars/tree-sitter-typescript && npm install && cd ../tree-sitter-cpp && npm install",
+		"build": "npm run install-grammars && turbo run build",
 		"export": "next export",
 		"start": "next start",
 		"lint": "eslint ."
@@ -32,10 +33,12 @@
 		"next-mdx-remote": "^4.4.1",
 		"react": "latest",
 		"react-dom": "latest",
+		"rehype-tree-sitter": "^0.2.4",
 		"rehype-trest-sitter": "^0.1.0",
 		"remark-gfm": "^3.0.1",
 		"remark-images": "^3.1.0",
 		"sharp": "^0.30.7",
+		"turbo": "^1.10.13",
 		"urlcat": "^2.0.4"
 	},
 	"devDependencies": {

turbo.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "https://turbo.build/schema.json",
+    "pipeline": {
+      "build": {
+        "outputs": [".next/**", "!.next/cache/**"],
+        "dependsOn": ["^build"]
+      },
+      "test": {
+        "dependsOn": ["^build"]
+      }
+    }
+  }