@brillout/docpress 0.16.24 → 0.16.26

package/+config.ts

@@ -2,7 +2,7 @@ export { config as default }
 
 import type { Config } from 'vike/types'
 import { viteConfig } from './vite.config.js'
-import type { Config as DocpressConfig, ChoicesConfig } from './types/Config.js'
+import type { Config as DocpressConfig } from './types/Config.js'
 import type { PageSection } from './parsePageSections.js'
 import type { Resolved } from './resolvePageContext.js'
 
@@ -21,10 +21,6 @@ const config = {
       env: { server: true, client: true, config: true },
       global: true,
     },
-    choices: {
-      env: { server: true, client: true, config: true },
-      global: true,
-    },
   },
   prefetch: {
     staticAssets: 'hover',
@@ -41,11 +37,9 @@ declare global {
     }
     interface Config {
       docpress?: DocpressConfig
-      choices?: ChoicesConfig
     }
     interface ConfigResolved {
       docpress: DocpressConfig
-      choices: ChoicesConfig
       pageSectionsExport: PageSection[] | undefined
     }
   }

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -111,7 +111,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
 }
 
 function findChoiceGroup(vikeConfig: VikeConfig, choices: string[]) {
-  const { choices: choicesConfig } = vikeConfig.config
+  const { choices: choicesConfig } = vikeConfig.config.docpress
   const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
 
   const groupName = Object.keys(choicesAll).find((key) => {

package/css/code/highlight.css

@@ -1,3 +1,4 @@
-.highlighted {
+.highlighted,
+.highlighted-word {
   background: rgba(0, 0, 0, 0.1);
 }

package/dist/+config.d.ts

@@ -1,5 +1,5 @@
 export { config as default };
-import type { Config as DocpressConfig, ChoicesConfig } from './types/Config.js';
+import type { Config as DocpressConfig } from './types/Config.js';
 import type { PageSection } from './parsePageSections.js';
 import type { Resolved } from './resolvePageContext.js';
 declare const config: {
@@ -25,14 +25,6 @@ declare const config: {
             };
             global: true;
         };
-        choices: {
-            env: {
-                server: true;
-                client: true;
-                config: true;
-            };
-            global: true;
-        };
     };
     prefetch: {
         staticAssets: "hover";
@@ -48,11 +40,9 @@ declare global {
         }
         interface Config {
             docpress?: DocpressConfig;
-            choices?: ChoicesConfig;
         }
         interface ConfigResolved {
             docpress: DocpressConfig;
-            choices: ChoicesConfig;
             pageSectionsExport: PageSection[] | undefined;
         }
     }

package/dist/+config.js

@@ -15,10 +15,6 @@ const config = {
             env: { server: true, client: true, config: true },
             global: true,
         },
-        choices: {
-            env: { server: true, client: true, config: true },
-            global: true,
-        },
     },
     prefetch: {
         staticAssets: 'hover',

package/dist/code-blocks/utils/generateChoiceGroupCode.js

@@ -88,7 +88,7 @@ function generateChoiceGroupCode(choiceNodes, parent) {
     };
 }
 function findChoiceGroup(vikeConfig, choices) {
-    const { choices: choicesConfig } = vikeConfig.config;
+    const { choices: choicesConfig } = vikeConfig.config.docpress;
     const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig };
     const groupName = Object.keys(choicesAll).find((key) => {
         // get only the values that exist in both choices and choicesAll[key].choices

package/dist/types/Config.d.ts

@@ -1,4 +1,4 @@
-export type { Config, ChoicesConfig };
+export type { Config };
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js';
 import type React from 'react';
 type Config = {
@@ -28,6 +28,7 @@ type Config = {
         indexName: string;
     };
     googleAnalytics?: string;
+    umamiId?: string;
     i18n?: true;
     pressKit?: true;
     docsDir?: string;
@@ -38,6 +39,7 @@ type Config = {
     navLogoStyle?: React.CSSProperties;
     navLogoTextStyle?: React.CSSProperties;
     globalNote?: React.ReactNode;
+    choices?: Record<string, Choice>;
 };
 /** Order in Algolia search results */
 type Category = string | {
@@ -45,7 +47,6 @@ type Category = string | {
     /** Hide from Algolia search */
     hide?: boolean;
 };
-type ChoicesConfig = Record<string, Choice>;
 type Choice = {
     choices: string[];
     default: string;

package/dist/vite.config.js

@@ -5,7 +5,12 @@ import { parsePageSections } from './parsePageSections.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
 import remarkDirective from 'remark-directive';
-import { transformerNotationDiff, transformerNotationHighlight } from '@shikijs/transformers';
+import { transformerNotationDiff, transformerNotationWordHighlight } from '@shikijs/transformers';
+// @brillout/shiki-transformers adds color parameter `[!code highlight:#abc]` where #abc is a color
+// https://github.com/shikijs/shiki/issues/1264
+// https://shiki.style/packages/transformers#transformernotationhighlight
+// https://github.com/shikijs/shiki/compare/main...brillout:shiki:brillout/highlight-color-param
+import { transformerNotationHighlight } from '@brillout/shiki-transformers';
 import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js';
 import { remarkDetype } from './code-blocks/remarkDetype.js';
 import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js';
@@ -17,7 +22,12 @@ const prettyCode = [
     {
         theme: 'github-light',
         keepBackground: false,
-        transformers: [transformerNotationDiff(), transformerNotationHighlight(), shikiTransformerAutoLinks()],
+        transformers: [
+            transformerNotationDiff(),
+            transformerNotationHighlight(),
+            transformerNotationWordHighlight(),
+            shikiTransformerAutoLinks(),
+        ],
     },
 ];
 const rehypePlugins = [prettyCode, [rehypeMetaToProps]];

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.24",
+  "version": "0.16.26",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
+    "@brillout/shiki-transformers": "^4.0.2",
     "@docsearch/css": "3.9.0",
     "@docsearch/react": "3.9.0",
     "@mdx-js/mdx": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
-    "@shikijs/transformers": "1.2.0",
+    "@shikijs/transformers": "^4.0.2",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "detype": "^2.0.2",
     "estree-util-value-to-estree": "^3.5.0",

package/renderer/onRenderClient.tsx

@@ -52,6 +52,7 @@ async function onRenderClient(pageContext: PageContextClient) {
   installSectionUrlHashs()
   setHydrationIsFinished()
   initGoogleAnalytics(pageContext)
+  initUmami(pageContext)
 
   globalObject.isNotFirstRender = true
 }
@@ -104,3 +105,46 @@ declare global {
     gtag: (...args: any[]) => void
   }
 }
+
+async function initUmami(pageContext: PageContextClient) {
+  // Only add script tag on first render
+  if (globalObject.isNotFirstRender) {
+    return
+  }
+
+  // Simple way to plug in umami
+  const umamiId = pageContext.config.docpress.umamiId
+  if (!umamiId) {
+    return
+  }
+
+  try {
+    await addScript('https://cloud.umami.is/script.js', {
+      'data-website-id': umamiId,
+    })
+  } catch {
+    // Umami analytics unavailable
+  }
+}
+
+/** https://umami.is/docs/tracker-functions */
+type Umami = {
+  track: {
+    (): void
+    (eventName: string): void
+    (data: object): void
+    (eventName: string, data: object): void
+  }
+  identify: {
+    (uniqueId: string): void
+    (data: object): string
+    (uniqueId: string, data: object): void
+  }
+}
+
+declare global {
+  interface Window {
+    /** Script load is not guaranteed */
+    umami?: Umami
+  }
+}

package/types/Config.ts

@@ -1,4 +1,4 @@
-export type { Config, ChoicesConfig }
+export type { Config }
 
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js'
 import type React from 'react'
@@ -35,6 +35,7 @@ type Config = {
     indexName: string
   }
   googleAnalytics?: string
+  umamiId?: string
 
   i18n?: true
   pressKit?: true
@@ -49,6 +50,7 @@ type Config = {
   navLogoTextStyle?: React.CSSProperties
 
   globalNote?: React.ReactNode
+  choices?: Record<string, Choice>
 }
 
 /** Order in Algolia search results */
@@ -60,8 +62,6 @@ type Category =
       hide?: boolean
     }
 
-type ChoicesConfig = Record<string, Choice>
-
 type Choice = {
   choices: string[]
   default: string

package/utils/addScript.ts

@@ -2,12 +2,17 @@ export { addScript }
 
 import { genPromise } from './genPromise.js'
 
-async function addScript(src: string) {
+async function addScript(src: string, attributes?: Record<string, string>) {
   const { promise, resolve, reject } = genPromise()
   const script = document.createElement('script')
   script.onload = () => resolve()
   script.onerror = () => reject(new Error(`Failed to load script: ${src}`))
   script.src = src
+  if (attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+      script.setAttribute(name, value)
+    }
+  }
   document.head.appendChild(script)
   return promise
 }

package/vite.config.ts

@@ -7,7 +7,12 @@ import { parsePageSections } from './parsePageSections.js'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkGfm from 'remark-gfm'
 import remarkDirective from 'remark-directive'
-import { transformerNotationDiff, transformerNotationHighlight } from '@shikijs/transformers'
+import { transformerNotationDiff, transformerNotationWordHighlight } from '@shikijs/transformers'
+// @brillout/shiki-transformers adds color parameter `[!code highlight:#abc]` where #abc is a color
+// https://github.com/shikijs/shiki/issues/1264
+// https://shiki.style/packages/transformers#transformernotationhighlight
+// https://github.com/shikijs/shiki/compare/main...brillout:shiki:brillout/highlight-color-param
+import { transformerNotationHighlight } from '@brillout/shiki-transformers'
 import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js'
 import { remarkDetype } from './code-blocks/remarkDetype.js'
 import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js'
@@ -20,7 +25,12 @@ const prettyCode = [
   {
     theme: 'github-light',
     keepBackground: false,
-    transformers: [transformerNotationDiff(), transformerNotationHighlight(), shikiTransformerAutoLinks()],
+    transformers: [
+      transformerNotationDiff(),
+      transformerNotationHighlight(),
+      transformerNotationWordHighlight(),
+      shikiTransformerAutoLinks(),
+    ],
   },
 ]
 const rehypePlugins: any = [prettyCode, [rehypeMetaToProps]]