+
{!hideHeader && (
-
{lang}
-
+
{header ?? lang}
+
)}
);
}
-
-interface Props {
- children: string;
- lang: string;
- header?: boolean;
-}
diff --git a/src/components/CodeBlock/CodeBlockSync.tsx b/src/components/CodeBlock/CodeBlockSync.tsx
new file mode 100644
index 00000000..9c1cb12f
--- /dev/null
+++ b/src/components/CodeBlock/CodeBlockSync.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { transformerNotationHighlight } from '@shikijs/transformers';
+import { cva, cx } from 'class-variance-authority';
+
+import { useHighlighter } from '@/lib/highlight/client';
+import { theme } from '@/lib/highlight/theme';
+
+import { ClipboardCopy } from '../ClipboardCopy/ClipboardCopy';
+import styles from './CodeBlock.module.css';
+import { Props } from './props';
+
+const codeBlock = cva(styles.root, {
+ variants: {
+ hideLineNumbers: {
+ false: styles.withLineNumbers,
+ },
+ hideHeader: {
+ true: styles.hideHeader,
+ },
+ darkerBackground: {
+ true: styles.darker,
+ },
+ },
+});
+
+export function CodeBlockSync({
+ variant = 'default',
+ children,
+ lang,
+ header,
+ hideHeader: _hideHeader = false,
+ className,
+}: Props) {
+ const hideHeader = (!lang && !header) || _hideHeader;
+ const hideLineNumbers = lang === 'bash' || lang === 'text';
+ const darkerBackground = variant === 'darker';
+
+ const { highlighter, isFetching, isError } = useHighlighter();
+
+ const html = highlighter?.codeToHtml(children, {
+ lang,
+ theme,
+ transformers: [
+ // Add more transformers when needed from https://shiki.style/packages/transformers
+ transformerNotationHighlight({ matchAlgorithm: 'v3' }),
+ ],
+ });
+
+ return (
+
+ {!hideHeader && (
+
+ )}
+
+ {isFetching &&
Loading code block
}
+
+ {isError &&
Something went wrong while rendering code block
}
+
+ {html &&
}
+
+ );
+}
diff --git a/src/components/CodeBlock/index.ts b/src/components/CodeBlock/index.ts
index 5f5f442d..c3556c49 100644
--- a/src/components/CodeBlock/index.ts
+++ b/src/components/CodeBlock/index.ts
@@ -1 +1 @@
-export * from './CodeBlock';
\ No newline at end of file
+export * from './CodeBlock';
diff --git a/src/components/CodeBlock/props.ts b/src/components/CodeBlock/props.ts
new file mode 100644
index 00000000..057488d8
--- /dev/null
+++ b/src/components/CodeBlock/props.ts
@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+ children: string;
+ className?: string;
+ lang: string;
+ header?: ReactNode;
+ hideHeader?: boolean;
+ variant?: 'default' | 'darker';
+}
diff --git a/src/lib/highlight/client.ts b/src/lib/highlight/client.ts
new file mode 100644
index 00000000..40e797f5
--- /dev/null
+++ b/src/lib/highlight/client.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+import type { Highlighter } from 'shiki';
+
+import { getHighlighter } from './server';
+
+export const useHighlighter = () => {
+ const [highlighter, setHighlighter] = useState
(null);
+ const [fetching, setFetching] = useState(false);
+ const [error, setError] = useState(false);
+
+ useEffect(() => {
+ if (!highlighter && !fetching) {
+ setFetching(true);
+ getHighlighter()
+ .then((h) => {
+ setHighlighter(h);
+ setFetching(false);
+ })
+ .catch(() => {
+ setError(true);
+ setFetching(false);
+ });
+ }
+ }, [highlighter, fetching]);
+
+ return { highlighter, isFetching: fetching, isError: error };
+};
diff --git a/src/lib/highlight.tsx b/src/lib/highlight/server.ts
similarity index 73%
rename from src/lib/highlight.tsx
rename to src/lib/highlight/server.ts
index 74eb1c7e..caa5e23a 100644
--- a/src/lib/highlight.tsx
+++ b/src/lib/highlight/server.ts
@@ -1,7 +1,8 @@
+import type { Highlighter } from 'shiki';
-import { createHighlighter, type Highlighter } from 'shiki';
+import { createHighlighter } from 'shiki';
-export const theme = 'github-dark-default';
+import { theme } from './theme';
let highlighter: Highlighter | null = null;
@@ -10,7 +11,7 @@ export async function getHighlighter() {
highlighter = await createHighlighter({
themes: [theme],
langs: [
- () => import('./lang/rego.json'),
+ () => import('../lang/rego.json'),
'js',
'jsx',
'ts',
@@ -29,9 +30,9 @@ export async function getHighlighter() {
'xml',
'scala',
'python',
- 'scss',
+ 'scss',
'ruby',
- 'csv'
+ 'csv',
],
});
}
diff --git a/src/lib/highlight/theme.ts b/src/lib/highlight/theme.ts
new file mode 100644
index 00000000..928ea4c1
--- /dev/null
+++ b/src/lib/highlight/theme.ts
@@ -0,0 +1 @@
+export const theme = 'github-dark-default';
diff --git a/src/lib/operations/util.ts b/src/lib/operations/util.ts
new file mode 100644
index 00000000..c52e6c55
--- /dev/null
+++ b/src/lib/operations/util.ts
@@ -0,0 +1,44 @@
+import { ApiOperation } from '../swagger/types';
+
+export const operationUrl = (operation: ApiOperation) =>
+ `${process.env.NEXT_PUBLIC_CLOUDSMITH_API_URL}/${operation.version}${operation.path}`;
+
+/**
+ * Turns an operation slug into a fully qualified local path to use in links
+ */
+export const operationPath = (slug: string): string => {
+ return `/api/${slug}`;
+};
+
+export const getParametersByParam = (operation: ApiOperation, param: string) =>
+ operation.parameters?.filter((p) => p.in === param);
+
+export const operationKey = (op: ApiOperation) => `${op.method}-${op.path}`;
+
+export const curlCommand = (
+ op: ApiOperation,
+ parameters: {
+ path: Record;
+ },
+) => {
+ let command = `curl --request ${op.method.toUpperCase()} \\\n`;
+
+ const baseUrl = operationUrl(op);
+
+ const pathReplacedUrl = Object.entries(parameters.path).reduce((url, current) => {
+ const [param, value] = current;
+ const template = `{${param}}`;
+ if (value !== '' && url.includes(template)) {
+ return url.replaceAll(`{${param}}`, value);
+ }
+ return url;
+ }, baseUrl);
+
+ const cleanedUrl = pathReplacedUrl.replaceAll('\{', '').replaceAll('\}', '');
+
+ command += ` --url '${cleanedUrl}' \\\n`;
+
+ command += ` --header 'accept:application/json'`;
+
+ return command;
+};
diff --git a/src/lib/search/server.ts b/src/lib/search/server.ts
index c52d7c9c..c9f2274b 100644
--- a/src/lib/search/server.ts
+++ b/src/lib/search/server.ts
@@ -1,14 +1,15 @@
'use server';
-import path from 'path';
import { readFile } from 'fs/promises';
+import path from 'path';
+
import { FullOptions, Searcher } from 'fast-fuzzy';
-import { SearchInput, SearchResult } from './types';
-import { parseSchemas, toOperations } from '../swagger/parse';
-import { apiOperationPath } from '../swagger/util';
import { contentPath, loadMdxInfo } from '../markdown/util';
import { extractMdxMetadata } from '../metadata/util';
+import { operationPath } from '../operations/util';
+import { parseSchemas, toOperations } from '../swagger/parse';
+import { SearchInput, SearchResult } from './types';
let fuzzySearcher: Searcher>;
@@ -47,7 +48,7 @@ export const performSearch = async (
items.push({
title: op.title,
content: op.description || 'Default content',
- path: apiOperationPath(op.slug),
+ path: operationPath(op.slug),
section: 'api',
method: op.method,
});
diff --git a/src/lib/swagger/parse.ts b/src/lib/swagger/parse.ts
index d3cca489..661ceba9 100644
--- a/src/lib/swagger/parse.ts
+++ b/src/lib/swagger/parse.ts
@@ -5,8 +5,9 @@ import SwaggerParser from '@apidevtools/swagger-parser';
import { OpenAPIV3 } from 'openapi-types';
import { MenuItem } from '../menu/types';
+import { operationPath } from '../operations/util';
import { ApiOperation, ParameterObject } from './types';
-import { apiOperationPath, createSlug, createTitle, isHttpMethod, parseMenuSegments } from './util';
+import { createSlug, createTitle, isHttpMethod, parseMenuSegments } from './util';
const SCHEMAS_DIR = 'src/content/schemas';
@@ -173,11 +174,11 @@ export const toMenuItems = (operations: ApiOperation[]): MenuItem[] => {
if (!existing) {
existing = { title };
if (isLast) {
- existing.path = apiOperationPath(operation.slug);
+ existing.path = operationPath(operation.slug);
existing.method = operation.method;
} else {
if (!existing.path) {
- existing.path = apiOperationPath(operation.slug);
+ existing.path = operationPath(operation.slug);
}
existing.children = [];
}
diff --git a/src/lib/swagger/util.ts b/src/lib/swagger/util.ts
index 2e7db9b9..5e1e2e2d 100644
--- a/src/lib/swagger/util.ts
+++ b/src/lib/swagger/util.ts
@@ -1,4 +1,5 @@
import { OpenAPIV3 } from 'openapi-types';
+
import { replaceAll, titleCase } from '../util';
export const isHttpMethod = (method: string): boolean =>
@@ -42,10 +43,3 @@ export const createSlug = (menuSegments: string[]): string => {
export const createTitle = (menuSegments: string[]): string => {
return menuSegments.join(' ');
};
-
-/**
- * Turns an operation slug into a fully qualified local path to use in links
- */
-export const apiOperationPath = (slug: string): string => {
- return `/api/${slug}`;
-};
diff --git a/src/lib/url.ts b/src/lib/url.ts
new file mode 100644
index 00000000..e69de29b