notionic 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # notionic
 
+## 0.9.0
+
+### Minor Changes
+
+- [#43](https://github.com/nublson/notionic/pull/43) [`31d8a75`](https://github.com/nublson/notionic/commit/31d8a75aecd9164cb532950f6663f60aaed93b78) Thanks [@nublson](https://github.com/nublson)! - Add a `link` key to `components` for links inside text, such as adding a favicon to external links. Its component gets `link`, `children` and `context`; the default is `NotionLink`. `LinkProps` is exported. `notionic/fetch` exports `fetchBookmarkPreview(url)`, to preview any link the way bookmarks are.
+
 ## 0.8.3
 
 ### Patch Changes

package/README.md

@@ -86,6 +86,8 @@ To also get the page's title, icon, cover and properties, use `fetchPage(notion,
 
 For bookmarks, embeds and link previews, `fetchBlocks` also fetches the linked page and reads its title, description, image and favicon, so the block renders as a card like a Notion bookmark. A page that's slow (over 5 seconds), unreachable or untitled renders as a one-line card with the URL, and private network addresses are never fetched. Pass `bookmarkPreviews: false` to make no requests outside Notion.
 
+To preview any other link the same way, use `fetchBookmarkPreview(url)` from `notionic/fetch`. It returns the page's `title`, `description`, `image`, `favicon` and `siteName`, or `null`, under the same rules. It doesn't cache either.
+
 You can also pass blocks you fetched yourself: `NotionRenderer` takes the API's block objects with nested blocks attached as `children` (the `NotionBlock` type).
 
 ## Options
@@ -126,6 +128,23 @@ function Callout({ block, context, children }: BlockProps<"callout">) {
 
 Equations inside text have their own key, `inline_equation`, whose component gets the equation's LaTeX as `expression`.
 
+Links inside text have their own key too, `link`. Its component gets the resolved `link` (`href`, and `external` for other sites), the formatted text as `children`, and `context`. Wrap `NotionLink` to keep notionic's styling and new-tab behavior:
+
+```tsx
+import { NotionLink, type LinkProps } from "notionic";
+
+function Link({ link, children }: LinkProps) {
+  return (
+    <NotionLink link={link}>
+      {link.external ? <Favicon href={link.href} /> : null}
+      {children}
+    </NotionLink>
+  );
+}
+
+<NotionRenderer blocks={blocks} components={{ link: Link }} />;
+```
+
 ### Interactive demos
 
 Put your own React components in a page, like the demos in a design engineering blog. Each demo is a component in your project, so it can use anything you install (Motion, Sonner, charts, 3D). In Notion, an embed of a URL ending in `/demos/<name>` marks where it goes, and its caption goes below it.

package/dist/fetch.d.ts

@@ -1,4 +1,4 @@
-import { C as IdRequest, S as ListBlockChildrenResponse, T as PartialPageObjectResponse, f as NotionPage, u as NotionBlock, w as PageObjectResponse, x as ListBlockChildrenParameters } from "./types-DOxr5KpT.js";
+import { C as ListBlockChildrenResponse, E as PartialPageObjectResponse, S as ListBlockChildrenParameters, T as PageObjectResponse, d as NotionBlock, i as BookmarkPreview, p as NotionPage, w as IdRequest } from "./types-Bn9yupWe.js";
 //#region ../../node_modules/.pnpm/@notionhq+client@5.27.1/node_modules/@notionhq/client/build/src/api-endpoints/pages.d.ts
 type GetPagePathParameters = {
   page_id: IdRequest;
@@ -9,6 +9,13 @@ type GetPageQueryParameters = {
 type GetPageParameters = GetPagePathParameters & GetPageQueryParameters;
 type GetPageResponse = PartialPageObjectResponse | PageObjectResponse;
 //#endregion
+//#region src/bookmark-preview.d.ts
+/**
+ * The preview card data for a bookmarked page, read from its HTML, or null
+ * when the page can't be fetched, isn't HTML, or has no title.
+ */
+export declare function fetchBookmarkPreview(url: string): Promise<BookmarkPreview | null>;
+//#endregion
 //#region src/fetch.d.ts
 /**
  * The part of the Notion client notionic uses. A `Client` from

package/dist/fetch.js

@@ -256,4 +256,4 @@ async function fetchPage(client, pageId, options = {}) {
 	};
 }
 //#endregion
-export { fetchBlocks, fetchPage };
+export { fetchBlocks, fetchBookmarkPreview, fetchPage };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { _ as PageHeading, a as DemoFrameProps, b as resolveFileUrl, c as InlineEquationProps, d as NotionBlockType, f as NotionPage, g as RichText, h as ResolvedLink, i as BookmarkPreview, l as LinkedPage, m as RenderContext, n as BlockOf, o as DemoProps, p as PageIcon, r as BlockProps, s as Demos, t as BlockComponents, u as NotionBlock, v as collectHeadings, w as PageObjectResponse, y as HostedFile } from "./types-DOxr5KpT.js";
+import { T as PageObjectResponse, _ as RichText, a as DemoFrameProps, b as HostedFile, c as InlineEquationProps, d as NotionBlock, f as NotionBlockType, g as ResolvedLink, h as RenderContext, i as BookmarkPreview, l as LinkProps, m as PageIcon, n as BlockOf, o as DemoProps, p as NotionPage, r as BlockProps, s as Demos, t as BlockComponents, u as LinkedPage, v as PageHeading, x as resolveFileUrl, y as collectHeadings } from "./types-Bn9yupWe.js";
 import { ReactNode } from "react";
 //#region src/renderer.d.ts
 export declare const defaultComponents: BlockComponents;
@@ -109,4 +109,4 @@ export declare function DemoFrame({ caption, context, children }: DemoFrameProps
 /** A Notion code language as people write it: "typescript" is "TypeScript". */
 export declare function languageName(language: string): string;
 //#endregion
-export { type BlockComponents, type BlockOf, type BlockProps, type BookmarkPreview, type DemoFrameProps, type DemoProps, type Demos, type HostedFile, type InlineEquationProps, type LinkedPage, type NotionBlock, type NotionBlockType, type NotionPage, type NotionRendererProps, type RichText as NotionRichText, type PageHeading, type PageIcon, type RenderContext, type ResolvedLink, RichText$1 as RichText, collectHeadings, resolveFileUrl };
+export { type BlockComponents, type BlockOf, type BlockProps, type BookmarkPreview, type DemoFrameProps, type DemoProps, type Demos, type HostedFile, type InlineEquationProps, type LinkProps, type LinkedPage, type NotionBlock, type NotionBlockType, type NotionPage, type NotionRendererProps, type RichText as NotionRichText, type PageHeading, type PageIcon, type RenderContext, type ResolvedLink, RichText$1 as RichText, collectHeadings, resolveFileUrl };

package/dist/index.js

@@ -102,10 +102,14 @@ function RichTextItem({ item, context }) {
 		children: node
 	});
 	const link = resolveLink(item.href, context);
-	if (link) node = /* @__PURE__ */ jsx(NotionLink, {
-		link,
-		children: node
-	});
+	if (link) {
+		const Link = context.components.link ?? NotionLink;
+		node = /* @__PURE__ */ jsx(Link, {
+			link,
+			context,
+			children: node
+		});
+	}
 	return node;
 }
 /** A Notion rich text array: annotations, colors, links and mentions. */
@@ -460,8 +464,10 @@ function Caption({ caption, context }) {
 function UrlLine({ url, label, context }) {
 	const link = resolveLink(url, context);
 	if (!link) return null;
-	return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(NotionLink, {
+	const Link = context.components.link ?? NotionLink;
+	return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Link, {
 		link,
+		context,
 		children: label || url
 	}) });
 }
@@ -1154,7 +1160,8 @@ const defaultComponents = {
 	link_to_page: LinkToPage,
 	table_of_contents: TableOfContents,
 	tab: Tab,
-	inline_equation: InlineEquation
+	inline_equation: InlineEquation,
+	link: NotionLink
 };
 const LIST_KINDS = {
 	bulleted_list_item: "bulleted",

package/dist/markdown.d.ts

@@ -1,4 +1,4 @@
-import { m as RenderContext, u as NotionBlock } from "./types-DOxr5KpT.js";
+import { d as NotionBlock, h as RenderContext } from "./types-Bn9yupWe.js";
 //#region src/markdown.d.ts
 export type MarkdownOptions = {
   /** Where links to Notion pages point, as in `NotionRenderer`. Defaults to notion.so. */

package/dist/{types-DOxr5KpT.d.ts → types-Bn9yupWe.d.ts}

@@ -1292,14 +1292,23 @@ type InlineEquationProps = {
   expression: string;
   context: RenderContext;
 };
+/** Props of the component that renders a link inside text. */
+type LinkProps = {
+  /** Where the link goes, and whether it opens in a new tab. */
+  link: ResolvedLink;
+  /** The linked text, already formatted. */
+  children: ReactNode;
+  context: RenderContext;
+};
 /**
  * Replacements for the built-in components: one per block type, plus
- * `inline_equation` for equations inside text and `demo` for the frame
- * around demos.
+ * `inline_equation` for equations inside text, `link` for links inside text,
+ * and `demo` for the frame around demos.
  */
 type BlockComponents = { [T in NotionBlockType]?: ComponentType<BlockProps<T>>; } & {
   inline_equation?: ComponentType<InlineEquationProps>;
+  link?: ComponentType<LinkProps>;
   demo?: ComponentType<DemoFrameProps>;
 };
 //#endregion
-export { IdRequest as C, ListBlockChildrenResponse as S, PartialPageObjectResponse as T, PageHeading as _, DemoFrameProps as a, resolveFileUrl as b, InlineEquationProps as c, NotionBlockType as d, NotionPage as f, RichText as g, ResolvedLink as h, BookmarkPreview as i, LinkedPage as l, RenderContext as m, BlockOf as n, DemoProps as o, PageIcon as p, BlockProps as r, Demos as s, BlockComponents as t, NotionBlock as u, collectHeadings as v, PageObjectResponse as w, ListBlockChildrenParameters as x, HostedFile as y };
+export { ListBlockChildrenResponse as C, PartialPageObjectResponse as E, ListBlockChildrenParameters as S, PageObjectResponse as T, RichText as _, DemoFrameProps as a, HostedFile as b, InlineEquationProps as c, NotionBlock as d, NotionBlockType as f, ResolvedLink as g, RenderContext as h, BookmarkPreview as i, LinkProps as l, PageIcon as m, BlockOf as n, DemoProps as o, NotionPage as p, BlockProps as r, Demos as s, BlockComponents as t, LinkedPage as u, PageHeading as v, IdRequest as w, resolveFileUrl as x, collectHeadings as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionic",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Render Notion API blocks as React Server Components, styled with Tailwind CSS and shadcn/ui tokens.",
   "license": "MIT",
   "author": "Nubelson Fernandes",