diff --git a/README.md b/README.md index 38457b5..aefb999 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,14 @@ While primarily designed as a ChatGPT plugin for type checking TypeScript code, ## Install ChatGPT Plugin -### If the plugin is available on the official store: +### From Store: 1. Navigate to the official OpenAI plugin store. 2. Search for this plugin. 3. Click on the plugin to view its details. 4. Click on the "Install" button to add the plugin to your ChatGPT. -### If the plugin is not available on the official store: +### Manually: 1. Navigate to the official OpenAI plugin store. 2. Click on the "Install an unverified plugin" link. @@ -30,9 +30,10 @@ While primarily designed as a ChatGPT plugin for type checking TypeScript code, #### Prompt -> ```md +> > Type check transferables > +> ```ts > import { hasTransferables } from "transferables" > ``` diff --git a/deps.ts b/deps.ts index 7d1e83d..9aa9fac 100644 --- a/deps.ts +++ b/deps.ts @@ -9,10 +9,15 @@ export { oakCors as cors } from "https://deno.land/x/cors/mod.ts" export { parse } from "https://deno.land/std/yaml/parse.ts" -export {unified} from 'https://esm.sh/unified' -export { default as remarkParse } from 'https://esm.sh/remark-parse' -export { default as remarkRehype } from 'https://esm.sh/remark-rehype' -export { default as rehypeStringify } from 'https://esm.sh/rehype-stringify' +export { unified } from "https://esm.sh/unified" +export { default as fromMarkdown } from "https://esm.sh/remark-parse" +export { default as withHtmlInMarkdown } from "https://esm.sh/rehype-raw" +export { default as toHtml } from "https://esm.sh/rehype-stringify" +export { default as toHast } from "https://esm.sh/remark-rehype" +export { default as withShiki } from "https://esm.sh/@stefanprobst/remark-shiki" +export * as shiki from "npm:shiki" + +export { default as GithubMarkdownFlavor } from "https://esm.sh/remark-gfm" export { default as html, h, Fragment } from "https://deno.land/x/htm/mod.ts" export { default as ColorScheme } from "https://deno.land/x/htm/plugins/color-scheme.ts" diff --git a/docs.tsx b/docs.tsx index 99169a7..b1a8ebc 100644 --- a/docs.tsx +++ b/docs.tsx @@ -1,13 +1,17 @@ /** @jsx h */ import { + ColorScheme, + fromMarkdown, + h, + html, path, - rehypeStringify, - remarkParse, - remarkRehype, + shiki, + toHast, + toHtml, unified, - html, - h, - ColorScheme + withHtmlInMarkdown, + withShiki, + GithubMarkdownFlavor, } from "./deps.ts"; // Destructure necessary path utilities from path (similar to path in Node.js) @@ -17,37 +21,51 @@ const { dirname, fromFileUrl, join } = path; // This is similar to __dirname in Node.js, but Deno uses URLs for modules, so we need to convert from a file URL to a path const __dirname = dirname(fromFileUrl(import.meta.url)); - // check the color scheme with system settings automatically -html.use(ColorScheme("auto")); +html.use(ColorScheme("dark")); -export async function toHTML() { +export async function getDocs() { + const highlighter = await shiki.getHighlighter({ theme: "github-dark" }); const file = await unified() - .use(remarkParse) // Parse markdown content to a syntax tree - .use(remarkRehype) // Turn markdown syntax tree to HTML syntax tree, ignoring embedded HTML - .use(rehypeStringify) // Serialize HTML syntax tree + .use(fromMarkdown) // Parse markdown content to a syntax tree + .use(GithubMarkdownFlavor) + .use(withShiki, { highlighter }) + .use(toHast, { allowDangerousHtml: true }) // Turn markdown syntax tree to HTML syntax tree, ignoring embedded HTML + .use(withHtmlInMarkdown) + .use(toHtml) // Serialize HTML syntax tree; .process( - new TextDecoder().decode(await Deno.readFile(join(__dirname, "./README.md"))) + new TextDecoder().decode( + await Deno.readFile(join(__dirname, "./README.md")), + ), ); - // { - // hey: "Hello World! The API is working!", - // message: - // "/twoslash - Accepts a JSON & Form Data body with the following properties: code, extension, and options.", - // }; - return ( await html({ lang: "en", title: "Intro. - Typescript Code Analyzer API", meta: { - description: "The REST API accepts a JSON & Form Data body with the following properties: code, extension, and options.", + description: + "The REST API accepts a JSON & Form Data body with the following properties: code, extension, and options.", }, links: [ { rel: "mask-icon", href: "/favicon/favicon.svg", color: "#ffffff" }, - { rel: "stylesheet", href: "https://unpkg.com/sakura.css/css/sakura-vader.css", type: "text/css" }, + { + rel: "stylesheet", + href: "https://unpkg.com/sakura.css/css/normalize.css ", + type: "text/css", + }, + { + rel: "stylesheet", + href: "https://unpkg.com/sakura.css/css/sakura-vader.css ", + type: "text/css", + }, + { + rel: "stylesheet", + href: "./static/style.css", + type: "text/css", + }, ], body: String(file), }) ).body; -} \ No newline at end of file +} diff --git a/mod.ts b/mod.ts index 3f16468..c0710d4 100644 --- a/mod.ts +++ b/mod.ts @@ -1,6 +1,6 @@ // Import necessary modules from dependencies import { cors, oak, parse, path, } from "./deps.ts"; -import { toHTML } from "./docs.tsx"; +import { getDocs } from "./docs.tsx"; import { twoslasher } from "./vendor/twoslash.ts"; import type { TwoSlashOptions } from "./vendor/twoslash.ts"; @@ -27,11 +27,20 @@ const router = new Router(); // Define routes router // Root route - .get("/", async (context) => { + .get("/", (context) => { // Respond with a JSON object - context.response.body = toHTML; + context.response.body = getDocs; context.response.headers.set("Content-Type", "text/html"); }) + // Root static route + .get("/static/:fileName", async (context) => { + const { fileName } = context.params; + // Use the send function from oak to serve static files + // This is similar to express.static in Express.js + await send(context, fileName, { + root: join(__dirname, `./static`), + }); + }) // Route for redirect serving favicon.* files .get("/favicon.:ext", (context) => { const { ext } = context.params; diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..cce10c5 --- /dev/null +++ b/static/style.css @@ -0,0 +1,12 @@ +blockquote { + border-radius: 0.5rem; + border-left-style: dashed; +} + +pre, code { + border-radius: 0.75rem; +} + +blockquote :not(pre) code { + background-color: rgb(0 0 0 / 0.23); +} \ No newline at end of file