chore: upgrading docual and marked

.github/workflows/deploy-site.yml

@@ -31,6 +31,8 @@ jobs:
 
     - name: Build Website
       run: pnpm website:build
+      env:
+        ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
 
     - name: Publish to Cloudflare Pages
       uses: cloudflare/wrangler-action@v3

README.md

@@ -199,13 +199,13 @@ Accessing the default options for this instance of Writr. Here is the default se
 }
 ```
 
-By default, raw HTML in markdown (such as `<iframe>`, `<video>`, or `<div>` tags) is stripped during rendering. Set `rawHtml: true` to preserve raw HTML elements and their attributes in the rendered output. This is useful for embedding videos, widgets, or custom HTML in your markdown content.
+By default, raw HTML in markdown (such as `&lt;iframe&gt;`, `&lt;video&gt;`, or `&lt;div&gt;` tags) is stripped during rendering. Set `rawHtml: true` to preserve raw HTML elements and their attributes in the rendered output. This is useful for embedding videos, widgets, or custom HTML in your markdown content.
 
 **Note:** Setting `mdx: true` also enables raw HTML passthrough as part of the MDX specification. The `rawHtml` option is for enabling raw HTML in standard markdown without using MDX.
 
 ## `.frontmatter`
 
-Accessing the frontmatter for this instance of Writr. This is a `Record<string, any>` and can be set via the `.content` property.
+Accessing the frontmatter for this instance of Writr. This is a `Record&lt;string, any&gt;` and can be set via the `.content` property.
 
 ```javascript
 import { Writr } from 'writr';
@@ -255,7 +255,7 @@ const html = await writr.render(options); // <h1>Hello World ::-):</h1><p>This i
 
 ## `.engine`
 
-Accessing the underlying engine for this instance of Writr. This is a `Processor<Root, Root, Root, undefined, undefined>` from the core [`unified`](https://github.com/unifiedjs/unified) project and uses the familiar `.use()` plugin pattern. You can chain additional unified plugins on this processor to customize the render pipeline. Learn more about the unified engine at [unifiedjs.com](https://unifiedjs.com/) and check out the [getting started guide](https://unifiedjs.com/learn/guide/using-unified/) for examples.
+Accessing the underlying engine for this instance of Writr. This is a `Processor&lt;Root, Root, Root, undefined, undefined&gt;` from the core [`unified`](https://github.com/unifiedjs/unified) project and uses the familiar `.use()` plugin pattern. You can chain additional unified plugins on this processor to customize the render pipeline. Learn more about the unified engine at [unifiedjs.com](https://unifiedjs.com/) and check out the [getting started guide](https://unifiedjs.com/learn/guide/using-unified/) for examples.
 
 
 ## `.render(options?: RenderOptions)`

package.json

@@ -57,8 +57,8 @@
     "test": "pnpm lint && vitest run --coverage",
     "test:ci": "biome check --error-on-warnings && vitest run --coverage",
     "test:integration": "vitest run --config vitest.integration.config.ts",
-    "website:build": "rimraf ./site/README.md ./site/dist && npx docula build -s ./site -o ./site/dist",
-    "website:serve": "rimraf ./site/README.md ./site/dist && npx docula serve -s ./site -o ./site/dist"
+    "website:build": "rimraf ./site/README.md ./site/dist && pnpm docula build",
+    "website:serve": "rimraf ./site/README.md ./site/dist && pnpm docula dev"
   },
   "dependencies": {
     "ai": "^6.0.138",
@@ -95,10 +95,10 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@vitest/coverage-v8": "^4.1.1",
-    "docula": "^0.40.0",
+    "docula": "^1.10.0",
     "dotenv": "^17.3.1",
     "markdown-it": "^14.1.1",
-    "marked": "^17.0.4",
+    "marked": "^17.0.5",
     "rimraf": "^6.1.3",
     "tinybench": "^6.0.0",
     "tsup": "^8.5.1",

site/.gitignore

@@ -0,0 +1 @@
+.cache

site/docula.config.mjs → site/docula.config.ts

@@ -1,17 +1,26 @@
+import type { DoculaOptions } from 'docula';
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
+import dotenv from "dotenv";
 
-export const options = {
+dotenv.config({ quiet: true });
+
+export const options: Partial<DoculaOptions> = {
 	githubPath: 'jaredwray/writr',
 	siteTitle: 'Writr',
 	siteDescription: 'Beautiful Website for Your Projects',
 	siteUrl: 'https://writr.org',
+	themeMode: 'light',
+	ai: {
+		provider: 'anthropic',
+		apiKey: process.env.ANTHROPIC_API_KEY!,
+	},
 };
 
-export const onPrepare = async config => {
+export const onPrepare = async (options: DoculaOptions) => {
 	const readmePath = path.join(process.cwd(), './README.md');
-	const readmeSitePath = path.join(config.sitePath, 'README.md');
+	const readmeSitePath = path.join(options.sitePath, 'README.md');
 	const readme = await fs.promises.readFile(readmePath, 'utf8');
 	const updatedReadme = readme.replace('![Writr](site/logo.svg)', '');
 	console.log('writing updated readme to', readmeSitePath);

site/variables.css

@@ -1,30 +1,32 @@
 :root {
-  --font-family: 'Open Sans', sans-serif;
-
-  --color-primary:  #373232;
-  --color-secondary: #FF6808;
-  --color-secondary-dark: #FF6808;
-  --color-text: #373232;
-
-  --background: #ffffff;
-  --home-background: #ffffff;
-  --header-background: #ffffff;
-
-  --sidebar-background: #ffffff;
-  --sidebar-text: #322d3c;
-  --sidebar-text-active: #7d7887;
-
-  --border: rgba(238,238,245,1);
-
-  --background-search-highlight: var(--color-secondary-dark);
-  --color-search-highlight: #ffffff;
-  --search-input-background: var(--header-background);
-
-  --code: rgba(238,238,245,1);
+  --bg: #121212;
+  --fg: #ffffff;
+  --border: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.2);
+  --border-hover: rgba(255, 255, 255, 0.4);
+  --surface: #262626;
+  --surface-hover: rgba(255, 255, 255, 0.1);
+  --muted: #c5cdd3;
+  --muted-fg: rgba(255, 255, 255, 0.65);
+  --code-bg: rgba(255, 255, 255, 0.075);
+  --pre-bg: rgba(255, 255, 255, 0.05);
+  --link: #6ea8fe;
+  --scrollbar: rgba(255, 255, 255, 0.2);
+  --header-height: 81px;
+}
 
-  --pagefind-ui-text: var(--color-text) !important;
-  --pagefind-ui-font: var(--font-family) !important;
-  --pagefind-ui-background: var(--background) !important;
-  --pagefind-ui-border: var(--border) !important;
-  --pagefind-ui-scale: .9 !important;
+[data-theme="light"] {
+  --bg: #ffffff;
+  --fg: #1a1a1a;
+  --border: rgba(0, 0, 0, 0.1);
+  --border-strong: rgba(0, 0, 0, 0.15);
+  --border-hover: rgba(0, 0, 0, 0.3);
+  --surface: #f0f0f0;
+  --surface-hover: rgba(0, 0, 0, 0.06);
+  --muted: #6b7280;
+  --muted-fg: rgba(0, 0, 0, 0.5);
+  --code-bg: rgba(0, 0, 0, 0.05);
+  --pre-bg: rgba(0, 0, 0, 0.03);
+  --link: #0969da;
+  --scrollbar: rgba(0, 0, 0, 0.2);
 }