Nextjs

Folder structure

mdx-components.tsx

next.config.ts

studio.template.tsx

Site Configuration

You can configure the behaviour of the documentation site. Using the following file

source.config.ts

import { AnthropicIcon } from "@/components/icons/anthropic";
import { ChatGPTIcon } from "@/components/icons/chatgpt";
import { MarkdownIcon } from "@/components/icons/markdown";
import { type Settings } from "@trythis/nextjs/settings";
import Link from "next/link";

const config: Settings = {
	copyPage: {
		enabled: true,
		enableDropdown: true,
		dropdown: [
			{
				id: "markdown",
				icon: (
					<div className="border border-gray-200 dark:border-white/[0.07] rounded-lg p-1.5">
						<MarkdownIcon />
					</div>
				),
				label: "View as Markdown",
				description: "View page as plain text",
			},
			{
				id: "chatgpt",
				icon: (
					<div className="border border-gray-200 dark:border-white/[0.07] rounded-lg p-1.5">
						<ChatGPTIcon />
					</div>
				),
				label: "Open in ChatGPT",
				description: "Ask questions about this page",
				url: "https://chatgpt.com/?hints=search&prompt=%s",
			},
			{
				id: "claude",
				icon: (
					<div className="border border-gray-200 dark:border-white/[0.07] rounded-lg p-1.5">
						<AnthropicIcon />
					</div>
				),
				label: "Open in Claude",
				description: "Ask questions about this page",
				url: "https://claude.ai/new?q=%s",
			},
		],
	},
	enableTryItButton: true,
	poweredBy: (
		<Link
			href="https://www.usebruno.com"
			target="_blank"
			rel="noreferrer"
			className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 text-nowrap">
			Powered by Bruno
		</Link>
	),
};

export default config;

Search configuration

next.config.ts

import { getConfig } from "@/lib/search";
import manifest from "@/source/manifest.json";
import { createSearch, indexCollectionsSync } from "@trythis/nextjs/search";

const cwd = process.cwd();

/** @type {import('next').NextConfig} */
const nextConfig = {};

const collections = indexCollectionsSync({ cwd, manifest });

type Collection = (typeof collections)[number];

const withSearch = createSearch({
	outDir: "./search",
	data: collections,
	document: getConfig<Collection>(),
});

export default withSearch(nextConfig);

Config should not change between indexing. Always regenerate when edited.

search.ts

import { Charset, DocSearchConfig, Mdx } from "@trythis/nextjs/search";

export const getConfig = <T>(): DocSearchConfig<T>["document"] => {
	type Collection = Mdx & { branch: string };

	const config: DocSearchConfig<Collection>["document"] = {
		id: "pathSlug",
		store: true,
		index: [
			{
				field: "label",
				tokenize: "forward",
				encoder: Charset.LatinBalance,
			},
			{
				field: "method",
				tokenize: "forward",
				encoder: Charset.LatinBalance,
			},
			{
				field: "description",
				tokenize: "forward",
				encoder: Charset.LatinBalance,
			},
		],
		tag: [{ field: "branch" }, { field: "method" }],
	};

	return config as DocSearchConfig<T>["document"];
};

Nextjs

Folder structure

Site Configuration

Search configuration

On this page