@callstack/rspress-preset 0.4.0 → 0.4.1

package/README.md

@@ -50,7 +50,7 @@ export default withCallstackPreset(
     theme: {
       // theme settings
     },
-    // Optional: boolean or config for rspress-plugin-vercel-analytics.
+    // Optional: boolean or config for Vercel Analytics.
     vercelAnalytics: true,
   },
   defineConfig({
@@ -61,12 +61,12 @@ export default withCallstackPreset(
 
 ### Required/expected public assets
 
-All graphical assets are optional but recommended. Place files in `<docs.rootDir>/public/` (default `docs/public/`), and set their filenames via theme options (`docs.icon`, `docs.logoLight`, `docs.logoDark`, `docs.ogImage`). Defaults are used if omitted.
+All graphical assets are optional but recommended. Place files in `<docs.rootDir>/public/` (default `docs/public/`), and set their filenames via theme options (`docs.icon`, `docs.logoLight`, `docs.logoDark`, `docs.ogImage`).
 
-- **Favicon**: default `icon.png` (supports `png|svg|jpg|jpeg|webp|avif|ico`)
-- **Logo (light)**: default `logo-light.png` (supports `png|svg|jpg|jpeg|webp|avif`)
-- **Logo (dark)**: default `logo-dark.png` (supports `png|svg|jpg|jpeg|webp|avif`)
-- **Open Graph image**: default `og.png` (supports `png|svg|jpg|jpeg|webp|avif`)
+- **Favicon**: e.g. `/icon.png` (supports `png|svg|ico`)
+- **Logo (light)**: e.g. `/logo-light.png` (supports `png|svg|jpg|jpeg|webp|avif`)
+- **Logo (dark)**: e.g. `/logo-dark.png` (supports `png|svg|jpg|jpeg|webp|avif`)
+- **Open Graph image**: e.g. `/og-image.png` (supports `png|svg|jpg|jpeg|webp|avif`)
 
 If only one of `logoLight` or `logoDark` is provided, it will be used for both modes.
 

package/dist/index.cjs

@@ -1,4 +1,7 @@
 "use strict";
+const __rslib_import_meta_url__ = /*#__PURE__*/ function() {
+    return 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
+}();
 var __webpack_require__ = {};
 (()=>{
     __webpack_require__.n = (module)=>{
@@ -39,13 +42,13 @@ const external_node_fs_namespaceObject = require("node:fs");
 var external_node_fs_default = /*#__PURE__*/ __webpack_require__.n(external_node_fs_namespaceObject);
 const external_node_path_namespaceObject = require("node:path");
 var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const external_node_url_namespaceObject = require("node:url");
+var external_node_url_default = /*#__PURE__*/ __webpack_require__.n(external_node_url_namespaceObject);
 const plugin_namespaceObject = require("@callstack/rspress-theme/plugin");
 const core_namespaceObject = require("@rspress/core");
 const plugin_llms_namespaceObject = require("@rspress/plugin-llms");
 const plugin_sitemap_namespaceObject = require("@rspress/plugin-sitemap");
 const external_rsbuild_plugin_open_graph_namespaceObject = require("rsbuild-plugin-open-graph");
-const external_rspress_plugin_vercel_analytics_namespaceObject = require("rspress-plugin-vercel-analytics");
-var external_rspress_plugin_vercel_analytics_default = /*#__PURE__*/ __webpack_require__.n(external_rspress_plugin_vercel_analytics_namespaceObject);
 const external_node_util_namespaceObject = require("node:util");
 const external_zod_namespaceObject = require("zod");
 const nonEmptyString = external_zod_namespaceObject.z.string().trim().min(1, {
@@ -106,6 +109,8 @@ function validatePresetOptions(options) {
     }
     return result.data;
 }
+const preset_filename = external_node_url_default().fileURLToPath(__rslib_import_meta_url__);
+const preset_dirname = external_node_path_default().dirname(preset_filename);
 function createSocialLinks(socials) {
     return Object.entries(socials ?? {}).map(([key, value])=>({
             icon: key,
@@ -113,6 +118,15 @@ function createSocialLinks(socials) {
             content: value
         }));
 }
+function extractXHandle(profileUrl) {
+    try {
+        const url = new URL(profileUrl);
+        const handle = url.pathname.split('/')[1];
+        return `@${handle}`;
+    } catch  {
+        throw new Error('Failed to extract X handle from X profile URL');
+    }
+}
 const createPreset = (config)=>{
     var _docs_socials, _docs_socials1;
     const { context, docs, theme, vercelAnalytics } = config;
@@ -125,6 +139,15 @@ const createPreset = (config)=>{
         description: docs.description,
         icon: docs.icon,
         globalStyles: external_node_path_default().join(context, 'theme/styles.css'),
+        globalUIComponents: enableVercel ? [
+            [
+                external_node_path_default().join(external_node_path_default().dirname(preset_dirname), 'vendor/VercelAnalytics.ts'),
+                {
+                    mode: process.env.NODE_ENV ?? 'development',
+                    ...vercelOptions
+                }
+            ]
+        ] : [],
         logo: docs.logoLight || docs.logoDark ? {
             light: docs.logoLight ?? docs.logoDark,
             dark: docs.logoDark ?? docs.logoLight
@@ -159,10 +182,10 @@ const createPreset = (config)=>{
                     title: docs.title,
                     type: 'website',
                     url: docs.rootUrl,
-                    image: `${docs.rootUrl}/${docs.ogImage}`,
+                    image: docs.rootUrl + docs.ogImage,
                     description: docs.description,
-                    twitter: (null == (_docs_socials = docs.socials) ? void 0 : _docs_socials.x) ? {
-                        site: null == (_docs_socials1 = docs.socials) ? void 0 : _docs_socials1.x,
+                    twitter: (null == (_docs_socials = docs.socials) ? void 0 : _docs_socials.X) ? {
+                        site: extractXHandle(null == (_docs_socials1 = docs.socials) ? void 0 : _docs_socials1.X),
                         card: 'summary_large_image'
                     } : void 0
                 })
@@ -175,9 +198,8 @@ const createPreset = (config)=>{
             }),
             (0, plugin_llms_namespaceObject.pluginLlms)({
                 exclude: ({ page })=>page.routePath.includes('404')
-            }),
-            enableVercel && external_rspress_plugin_vercel_analytics_default()(vercelOptions)
-        ].filter(Boolean)
+            })
+        ]
     });
 };
 function withCallstackPreset(options, userConfig) {

package/dist/index.js

@@ -1,11 +1,11 @@
 import node_fs from "node:fs";
 import node_path from "node:path";
+import node_url from "node:url";
 import { pluginCallstackTheme } from "@callstack/rspress-theme/plugin";
 import { defineConfig, mergeDocConfig } from "@rspress/core";
 import { pluginLlms } from "@rspress/plugin-llms";
 import { pluginSitemap } from "@rspress/plugin-sitemap";
 import { pluginOpenGraph } from "rsbuild-plugin-open-graph";
-import rspress_plugin_vercel_analytics from "rspress-plugin-vercel-analytics";
 import { styleText } from "node:util";
 import { z } from "zod";
 const nonEmptyString = z.string().trim().min(1, {
@@ -66,6 +66,8 @@ function validatePresetOptions(options) {
     }
     return result.data;
 }
+const preset_filename = node_url.fileURLToPath(import.meta.url);
+const preset_dirname = node_path.dirname(preset_filename);
 function createSocialLinks(socials) {
     return Object.entries(socials ?? {}).map(([key, value])=>({
             icon: key,
@@ -73,6 +75,15 @@ function createSocialLinks(socials) {
             content: value
         }));
 }
+function extractXHandle(profileUrl) {
+    try {
+        const url = new URL(profileUrl);
+        const handle = url.pathname.split('/')[1];
+        return `@${handle}`;
+    } catch  {
+        throw new Error('Failed to extract X handle from X profile URL');
+    }
+}
 const createPreset = (config)=>{
     var _docs_socials, _docs_socials1;
     const { context, docs, theme, vercelAnalytics } = config;
@@ -85,6 +96,15 @@ const createPreset = (config)=>{
         description: docs.description,
         icon: docs.icon,
         globalStyles: node_path.join(context, 'theme/styles.css'),
+        globalUIComponents: enableVercel ? [
+            [
+                node_path.join(node_path.dirname(preset_dirname), 'vendor/VercelAnalytics.ts'),
+                {
+                    mode: process.env.NODE_ENV ?? 'development',
+                    ...vercelOptions
+                }
+            ]
+        ] : [],
         logo: docs.logoLight || docs.logoDark ? {
             light: docs.logoLight ?? docs.logoDark,
             dark: docs.logoDark ?? docs.logoLight
@@ -119,10 +139,10 @@ const createPreset = (config)=>{
                     title: docs.title,
                     type: 'website',
                     url: docs.rootUrl,
-                    image: `${docs.rootUrl}/${docs.ogImage}`,
+                    image: docs.rootUrl + docs.ogImage,
                     description: docs.description,
-                    twitter: (null == (_docs_socials = docs.socials) ? void 0 : _docs_socials.x) ? {
-                        site: null == (_docs_socials1 = docs.socials) ? void 0 : _docs_socials1.x,
+                    twitter: (null == (_docs_socials = docs.socials) ? void 0 : _docs_socials.X) ? {
+                        site: extractXHandle(null == (_docs_socials1 = docs.socials) ? void 0 : _docs_socials1.X),
                         card: 'summary_large_image'
                     } : void 0
                 })
@@ -135,9 +155,8 @@ const createPreset = (config)=>{
             }),
             pluginLlms({
                 exclude: ({ page })=>page.routePath.includes('404')
-            }),
-            enableVercel && rspress_plugin_vercel_analytics(vercelOptions)
-        ].filter(Boolean)
+            })
+        ]
     });
 };
 function withCallstackPreset(options, userConfig) {

package/dist/options.d.ts

@@ -1,5 +1,5 @@
 import type { pluginCallstackTheme } from '@callstack/rspress-theme/plugin';
-import type pluginVercelAnalytics from 'rspress-plugin-vercel-analytics';
+import type { AnalyticsProps } from '@vercel/analytics';
 import { z } from 'zod';
 export declare const presetOptionsSchema: z.ZodObject<{
     context: z.ZodEffects<z.ZodString, string, string>;
@@ -73,11 +73,10 @@ export declare const presetOptionsSchema: z.ZodObject<{
     vercelAnalytics?: boolean | Record<string, unknown> | undefined;
 }>;
 type ThemeConfig = Parameters<typeof pluginCallstackTheme>[0];
-type VercelAnalyticsConfig = Parameters<typeof pluginVercelAnalytics>[0];
 type PresetSchema = z.infer<typeof presetOptionsSchema>;
 export type PresetConfig = Omit<PresetSchema, 'theme' | 'vercelAnalytics'> & {
     theme?: ThemeConfig;
-    vercelAnalytics?: boolean | VercelAnalyticsConfig;
+    vercelAnalytics?: boolean | AnalyticsProps;
 };
 export declare function validatePresetOptions(options: unknown): PresetConfig;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@callstack/rspress-preset",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Callstack preset for Rspress docs",
   "author": "Jakub Romańczyk <jakub.romanczyk@callstack.com>",
   "license": "MIT",
@@ -16,7 +16,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "vendor"
   ],
   "publishConfig": {
     "access": "public",
@@ -40,10 +41,10 @@
   "dependencies": {
     "@rspress/plugin-llms": "2.0.0-beta.32",
     "@rspress/plugin-sitemap": "2.0.0-beta.32",
+    "@vercel/analytics": "^1.5.0",
     "rsbuild-plugin-open-graph": "^1.0.2",
-    "rspress-plugin-vercel-analytics": "^0.3.0",
     "zod": "^3.23.8",
-    "@callstack/rspress-theme": "0.4.0"
+    "@callstack/rspress-theme": "0.4.1"
   },
   "peerDependencies": {
     "@rspress/core": "2.0.0-beta.32"

package/vendor/VercelAnalytics.ts

@@ -0,0 +1,12 @@
+import va from '@vercel/analytics';
+import { useLayoutEffect } from 'react';
+
+const VercelAnalytics = (props: Record<string, unknown> = {}) => {
+  useLayoutEffect(() => {
+    va.inject(props);
+  }, []);
+
+  return null;
+};
+
+export default VercelAnalytics;