chore: cdk publishing for twoslash bundler (#2697)

Author: chdeskur

.github/workflows/deploy-fdr-dev.yml

@@ -9,6 +9,7 @@ on:
       - "fern/fern.config.json"
       - "servers/fdr-deploy/**"
       - "servers/fdr/**"
+      - "servers/mdx-bundler/**"
       - ".github/workflows/deploy-fdr-dev.yml"
       - ".github/workflows/publish-fdr-sdk.yml"
       - "packages/fdr-sdk/**"
@@ -34,7 +35,7 @@ jobs:
     secrets: inherit
 
   deploy_dev:
-    runs-on: ubuntu-latest
+    runs-on: Seed
     environment: Fern Dev
     strategy:
       matrix:
@@ -82,6 +83,7 @@ jobs:
         run: |
           git_version="$(scripts/git-version.sh)"
           pnpm --filter=@fern-platform/fdr run docker:dev "${git_version}"
+          pnpm --filter=@fern-platform/mdx-bundler docker "${git_version}"
           npm install -g aws-cdk
           cd servers/fdr-deploy
           VERSION="${git_version}" pnpm --filter=@fern-platform/fdr-deploy deploy:dev

packages/fern-docs/bundle/src/mdx/bundler/serialize.ts

@@ -1,16 +1,8 @@
 import "server-only";
 
-// import { RehypeShikiOptions } from "@shikijs/rehype";
-// import {
-//   transformerNotationDiff,
-//   transformerNotationFocus,
-//   transformerNotationHighlight,
-// } from "@shikijs/transformers";
-// import { rendererRich, transformerTwoslash } from "@shikijs/twoslash";
 import { mapKeys } from "es-toolkit/object";
 import fs from "fs";
 import { gracefulify } from "graceful-fs";
-// import { ElementContent } from "hast";
 import { bundleMDX } from "mdx-bundler";
 import path from "path";
 import rehypeKatex from "rehype-katex";
@@ -30,7 +22,6 @@ import {
   customHeadingHandler,
   sanitizeBreaks,
   sanitizeMdxExpression,
-  // toTree,
 } from "@fern-docs/mdx";
 import {
   rehypeAcornErrorBoundary,
@@ -58,7 +49,7 @@ import { rehypeExtractAsides } from "../plugins/rehype-extract-asides";
 import { rehypeFiles } from "../plugins/rehype-files";
 import { RehypeLinksOptions, rehypeLinks } from "../plugins/rehype-links";
 import { rehypeMigrateJsx } from "../plugins/rehype-migrate-jsx";
-// import { conditionalRehypeShiki } from "../plugins/rehype-shiki-twoslash";
+import { conditionalRehypeShiki } from "../plugins/rehype-shiki-twoslash";
 import { rehypeSteps } from "../plugins/rehype-steps";
 import { rehypeTabs } from "../plugins/rehype-tabs";
 import { remarkExtractTitle } from "../plugins/remark-extract-title";
@@ -167,32 +158,7 @@ async function serializeMdxImpl(
         [rehypeFiles, { files: remoteFiles }],
         rehypeMdxClassStyle,
         rehypeCodeBlock,
-        // [
-        //   conditionalRehypeShiki,
-        //   {
-        //     themes: {
-        //       light: "min-light",
-        //       dark: "material-theme-darker",
-        //     },
-        //     transformers: [
-        //       transformerNotationDiff(),
-        //       transformerNotationFocus(),
-        //       transformerNotationHighlight(),
-        //       transformerTwoslash({
-        //         explicitTrigger: true,
-        //         renderer: rendererRich({
-        //           renderMarkdown: function (markdown) {
-        //             const { hast } = toTree(markdown, {
-        //               format: "md",
-        //               sanitize: false,
-        //             });
-        //             return hast.children as ElementContent[];
-        //           },
-        //         }),
-        //       }),
-        //     ],
-        //   } satisfies RehypeShikiOptions,
-        // ],
+        conditionalRehypeShiki,
         rehypeSteps,
         rehypeAccordions,
         rehypeTabs,

packages/fern-docs/bundle/src/mdx/components/twoslash/index.scss

@@ -10,7 +10,7 @@
   --twoslash-docs-color: #888;
   --twoslash-docs-font: var(--font-body);
   --twoslash-code-font: var(--font-code);
-  --twoslash-code-font-size: 1em;
+  --twoslash-code-font-size: var(--text-sm);
   --twoslash-matched-color: inherit;
   --twoslash-unmatched-color: #888;
   --twoslash-cursor-color: #8888;
@@ -49,40 +49,43 @@ html.dark .shiki span {
   position: relative;
 }
 
-.twoslash .twoslash-popup-container {
-  position: absolute;
+.twoslash .twoslash-popup-info-hover {
+  position: fixed;
   opacity: 0;
   display: inline-flex;
   flex-direction: column;
   transform: translateY(1.1em);
   background: var(--card-background, var(--card-surface-fallback));
   color: var(--twoslash-popup-color);
   transition: opacity 0.3s;
-  pointer-events: none;
   border-radius: calc(var(--radius) * 3);
   border: 1px solid var(--card-border, var(--color-border-default));
-  z-index: 10;
   user-select: none;
   text-align: left;
   box-shadow: var(--twoslash-popup-shadow);
-  max-width: var(--content-width);
+  max-width: 500px;
+  max-height: 600px;
   overflow: scroll;
+  pointer-events: none;
+  white-space: pre-wrap;
+  z-index: 20;
+  padding: 8px 12px;
 }
 
-.twoslash .twoslash-query-presisted .twoslash-popup-container {
+.twoslash .twoslash-query-presisted .twoslash-popup-info-hover {
   z-index: 9;
   transform: translateY(1.5em);
 }
 
-.twoslash .twoslash-hover:hover .twoslash-popup-container,
-.twoslash .twoslash-error-hover:hover .twoslash-popup-container,
-.twoslash .twoslash-query-presisted .twoslash-popup-container,
-.twoslash .twoslash-query-line .twoslash-popup-container {
+.twoslash .twoslash-hover:hover .twoslash-popup-info-hover,
+.twoslash .twoslash-error-hover:hover .twoslash-popup-info-hover,
+.twoslash .twoslash-query-presisted .twoslash-popup-info-hover,
+.twoslash .twoslash-query-line .twoslash-popup-info-hover {
   opacity: 1;
   pointer-events: auto;
 }
 
-.twoslash .twoslash-popup-container:hover {
+.twoslash .twoslash-popup-info-hover:hover {
   user-select: auto;
 }
 
@@ -101,7 +104,7 @@ html.dark .shiki span {
 
 .twoslash .twoslash-popup-code,
 .twoslash .twoslash-popup-error,
-.twoslash .twoslash-popup-docs {
+.twoslash .twoslash-popup-jsdoc {
   padding: 6px 8px !important;
 }
 
@@ -110,43 +113,43 @@ html.dark .shiki span {
   font-size: var(--twoslash-code-font-size);
 }
 
-.twoslash .twoslash-popup-docs {
+.twoslash .twoslash-popup-jsdoc {
   color: var(--twoslash-docs-color);
   font-family: var(--twoslash-docs-font);
-  font-size: 0.8em;
+  font-size: var(--twoslash-code-font-size);
   border-top: 1px solid var(--twoslash-border-color);
 
   --tw-content: "-";
 }
 
-.twoslash .twoslash-popup-docs code {
-  font-size: inherit;
+.twoslash .twoslash-popup-jsdoc code {
+  font-size: var(--twoslash-code-font-size);
 }
 
 .twoslash .twoslash-popup-error {
   color: var(--twoslash-error-color);
   background-color: var(--twoslash-error-bg);
   font-family: var(--twoslash-docs-font);
-  font-size: 0.8em;
+  font-size: var(--twoslash-code-font-size);
 }
 
-.twoslash .twoslash-popup-docs-tags {
+.twoslash .twoslash-popup-jsdoc-tags {
   display: flex;
   flex-direction: column;
   font-family: var(--twoslash-docs-font);
 }
 
-.twoslash .twoslash-popup-docs-tags,
-.twoslash .twoslash-popup-docs-tag-name {
+.twoslash .twoslash-popup-jsdoc-tags,
+.twoslash .twoslash-popup-jsdoc-tag-name {
   margin-right: 0.5em;
 }
 
-.twoslash .twoslash-popup-docs-tag-name {
+.twoslash .twoslash-popup-jsdoc-tag-name {
   font-family: var(--twoslash-code-font);
 }
 
 /* ===== Query Line ===== */
-.twoslash .twoslash-query-line .twoslash-popup-container {
+.twoslash .twoslash-query-line .twoslash-popup-info-hover {
   position: relative;
   margin-bottom: 1.4em;
   transform: translateY(0.6em);
@@ -203,7 +206,7 @@ html.dark .shiki span {
 
 .twoslash-completion-list {
   width: 240px;
-  font-size: 0.8rem;
+  font-size: var(--twoslash-code-font-size);
   padding: 4px 0 0;
   display: flex;
   flex-direction: column;
@@ -347,7 +350,7 @@ pre.twoslash .language-id {
 }
 
 pre.twoslash code {
-  border-radius: calc(var(--radius) * 3);
+  border-radius: 4px;
   box-shadow: unset !important;
 }
 
@@ -371,7 +374,7 @@ pre.twoslash data-lsp:hover::before {
   padding: 5px 8px;
   border-radius: 2px;
   font-family: var(--twoslash-code-font);
-  font-size: 14px;
+  font-size: var(--twoslash-code-font-size);
   white-space: pre-wrap;
   z-index: 100;
 }
@@ -501,7 +504,7 @@ pre .inline-completions ul.dropdown {
   background-color: gainsboro;
   color: grey;
   font-family: var(--twoslash-code-font);
-  font-size: 0.8rem;
+  font-size: var(--twoslash-code-font-size);
   margin: 0;
   padding: 4px 0 0;
   border-left: 4px solid #4b9edd;
@@ -575,8 +578,8 @@ data-lsp {
 
 .tag-container .twoslash-annotation p {
   text-align: left;
-  font-size: 0.8rem;
-  line-height: 0.9rem;
+  font-size: var(--twoslash-code-font-size);
+  line-height: inherit;
 }
 
 .tag-container .twoslash-annotation svg {
@@ -632,3 +635,19 @@ pre .logger.log-log svg {
 .twoslash li::before {
   --tw-content: "";
 }
+
+.twoslash-popup-jsdoc p,
+.twoslash-popup-jsdoc ul,
+.twoslash-popup-jsdoc li {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.twoslash-popup-jsdoc code {
+  font-family: var(--font-code);
+  border: 0 !important;
+}
+
+.twoslash code span {
+  font-size: var(--twoslash-code-font-size);
+}