rotion 0.0.4 → 0.0.5

package/dist/ui/esm/types/exporter/breadcrumbs.d.ts

@@ -1,12 +1,7 @@
-import type { MentionIcon } from './types.js';
+import type { Breadcrumb } from './types.js';
 export interface FetchBreadcrumbsProps {
     type: 'page_id' | 'database_id' | 'block_id' | 'workspace';
     id: string;
     limit?: number;
 }
-export type BreadcrumbsIcon = MentionIcon;
-export interface Breadcrumbs {
-    name: string;
-    icon: BreadcrumbsIcon;
-}
-export declare const FetchBreadcrumbs: ({ type, id, limit }: FetchBreadcrumbsProps) => Promise<Breadcrumbs[]>;
+export declare const FetchBreadcrumbs: ({ type, id, limit }: FetchBreadcrumbsProps) => Promise<Breadcrumb[]>;

package/dist/ui/esm/types/exporter/types.d.ts

@@ -208,7 +208,15 @@ export type ParagraphBlockObjectResponseEx = ParagraphBlockObjectResponse & {
         color: SelectColor;
     };
 };
-export type BlockObjectResponse = ParagraphBlockObjectResponseEx | Heading1BlockObjectResponse | Heading2BlockObjectResponse | Heading3BlockObjectResponse | BulletedListItemBlockObjectResponseEx | NumberedListItemBlockObjectResponseEx | QuoteBlockObjectResponse | ToDoBlockObjectResponse | ToggleBlockObjectResponseEx | TemplateBlockObjectResponse | SyncedBlockBlockObjectResponse | ChildPageBlockObjectResponseEx | ChildDatabaseBlockObjectResponseEx | EquationBlockObjectResponse | CodeBlockObjectResponse | CalloutBlockObjectResponseEx | DividerBlockObjectResponse | BreadcrumbBlockObjectResponse | TableOfContentsBlockObjectResponse | ColumnListBlockObjectResponseEx | ColumnBlockObjectResponse | LinkToPageBlockObjectResponse | TableBlockObjectResponseEx | TableRowBlockObjectResponse | EmbedBlockObjectResponseEx | BookmarkBlockObjectResponseEx | ImageBlockObjectResponseEx | VideoBlockObjectResponseEx | PdfBlockObjectResponse | FileBlockObjectResponse | AudioBlockObjectResponse | LinkPreviewBlockObjectResponse | UnsupportedBlockObjectResponse;
+export type Breadcrumb = {
+    id: string;
+    name: string;
+    icon: MentionIcon;
+};
+export type BreadcrumbBlockObjectResponseEx = BreadcrumbBlockObjectResponse & {
+    list: Breadcrumb[];
+};
+export type BlockObjectResponse = ParagraphBlockObjectResponseEx | Heading1BlockObjectResponse | Heading2BlockObjectResponse | Heading3BlockObjectResponse | BulletedListItemBlockObjectResponseEx | NumberedListItemBlockObjectResponseEx | QuoteBlockObjectResponse | ToDoBlockObjectResponse | ToggleBlockObjectResponseEx | TemplateBlockObjectResponse | SyncedBlockBlockObjectResponse | ChildPageBlockObjectResponseEx | ChildDatabaseBlockObjectResponseEx | EquationBlockObjectResponse | CodeBlockObjectResponse | CalloutBlockObjectResponseEx | DividerBlockObjectResponse | BreadcrumbBlockObjectResponseEx | TableOfContentsBlockObjectResponse | ColumnListBlockObjectResponseEx | ColumnBlockObjectResponse | LinkToPageBlockObjectResponse | TableBlockObjectResponseEx | TableRowBlockObjectResponse | EmbedBlockObjectResponseEx | BookmarkBlockObjectResponseEx | ImageBlockObjectResponseEx | VideoBlockObjectResponseEx | PdfBlockObjectResponse | FileBlockObjectResponse | AudioBlockObjectResponse | LinkPreviewBlockObjectResponse | UnsupportedBlockObjectResponse;
 export type ListBlockChildrenResponseEx = ListBlockChildrenResponse & {
     results: Array<BlockObjectResponse>;
     children?: ListBlockChildrenResponse;

package/dist/ui/esm/types/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { BreadcrumbBlockProps } from './BreadcrumbBlock.types';
-declare const BreadcrumbBlock: ({ block }: BreadcrumbBlockProps) => React.JSX.Element;
+declare const BreadcrumbBlock: ({ block, link, hrefs, query }: BreadcrumbBlockProps) => React.JSX.Element;
 export default BreadcrumbBlock;

package/dist/ui/esm/types/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.types.d.ts

@@ -1,4 +1,18 @@
-import type { BreadcrumbBlockObjectResponse } from '../../../../exporter';
+/// <reference types="node" />
+import type { ReactNode } from 'react';
+import type { ParsedUrlQueryInput } from 'node:querystring';
+import type { Link } from '../../types';
+import type { Breadcrumb, BreadcrumbBlockObjectResponseEx } from '../../../../exporter';
+export interface BreadcrumbLinkProps {
+    breadcrumb: Breadcrumb;
+    link?: Link;
+    href?: string;
+    query?: ParsedUrlQueryInput;
+    children?: ReactNode;
+}
 export interface BreadcrumbBlockProps {
-    block: BreadcrumbBlockObjectResponse;
+    block: BreadcrumbBlockObjectResponseEx;
+    link?: Link;
+    hrefs?: string[];
+    query?: ParsedUrlQueryInput;
 }

package/dist/ui/esm/types/ui/components/Page/Page.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { PageProps } from './Page.types';
-export declare const Page: ({ blocks, href, link, query, modules }: PageProps) => React.JSX.Element;
+export declare const Page: ({ blocks, href, link, query, modules, breadcrumb_hrefs }: PageProps) => React.JSX.Element;
 export default Page;

package/dist/ui/esm/types/ui/components/Page/Page.types.d.ts

@@ -8,6 +8,7 @@ export interface PageProps {
     link?: Link;
     query?: ParsedUrlQueryInput;
     modules?: ExternalModules;
+    breadcrumb_hrefs?: string[];
 }
 export interface ListType {
     [key: string]: string;

package/dist/ui/esm/types/ui/components/Page/PageHandler.d.ts

@@ -11,5 +11,5 @@ export declare const blockType: {
     code: string;
     quote: string;
 };
-export declare const PageHandler: ({ block, href, link, query, modules }: HandlerProps) => React.JSX.Element;
+export declare const PageHandler: ({ block, href, link, query, modules, breadcrumb_hrefs }: HandlerProps) => React.JSX.Element;
 export default PageHandler;

package/dist/ui/esm/types/ui/components/Page/PageHandler.types.d.ts

@@ -8,4 +8,5 @@ export interface HandlerProps {
     link?: Link;
     query?: ParsedUrlQueryInput;
     modules?: ExternalModules;
+    breadcrumb_hrefs?: string[];
 }

package/dist/ui/styles/page.css

@@ -89,6 +89,32 @@
   }
 }
 
+/* breadcrumb */
+.notionate-blocks-breadcrumb {
+  padding-left: .5rem;
+}
+.notionate-blocks-breadcrumb-a {
+  text-decoration: none;
+  color: #333;
+  font-size: .9rem;
+  padding: .2rem .3rem;
+  border-radius: 4px;
+}
+.notionate-blocks-breadcrumb-a:hover {
+  color: #666;
+  background-color: #fff;
+}
+.notionate-blocks-breadcrumb-icon {
+  vertical-align: middle;
+  padding-right: .4rem;
+  padding-bottom: .2rem;
+}
+.notionate-blocks-breadcrumb-slash {
+  font-size: .9rem;
+  opacity: .5;
+  padding: 0 .3rem;
+}
+
 /* callout */
 .notionate-blocks-callout {
   display: flex;

package/dist/ui/types.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ListBlockChildrenResponse, BulletedListItemBlockObjectResponse, NumberedListItemBlockObjectResponse, TableBlockObjectResponse, ToggleBlockObjectResponse, ColumnListBlockObjectResponse, ChildPageBlockObjectResponse, ChildDatabaseBlockObjectResponse, BookmarkBlockObjectResponse, RichTextItemResponse, CalloutBlockObjectResponse, ImageBlockObjectResponse, VideoBlockObjectResponse, EmbedBlockObjectResponse, TextRichTextItemResponse, EquationRichTextItemResponse, Heading1BlockObjectResponse, Heading2BlockObjectResponse, Heading3BlockObjectResponse, QuoteBlockObjectResponse, ToDoBlockObjectResponse, TemplateBlockObjectResponse, SyncedBlockBlockObjectResponse, EquationBlockObjectResponse, CodeBlockObjectResponse, DividerBlockObjectResponse, BreadcrumbBlockObjectResponse, TableOfContentsBlockObjectResponse, ColumnBlockObjectResponse, LinkToPageBlockObjectResponse, TableRowBlockObjectResponse, PdfBlockObjectResponse, FileBlockObjectResponse, AudioBlockObjectResponse, LinkPreviewBlockObjectResponse, UnsupportedBlockObjectResponse, PageObjectResponse, GetPagePropertyResponse, DatabaseObjectResponse, QueryDatabaseResponse, MentionRichTextItemResponse, ParagraphBlockObjectResponse, GetSelfResponse, MultiSelectPropertyItemObjectResponse, NumberPropertyItemObjectResponse, RichTextPropertyItemObjectResponse, TitlePropertyItemObjectResponse, SelectPropertyItemObjectResponse } from '@notionhq/client/build/src/api-endpoints.js';
+import { ListBlockChildrenResponse, BulletedListItemBlockObjectResponse, NumberedListItemBlockObjectResponse, TableBlockObjectResponse, ToggleBlockObjectResponse, ColumnListBlockObjectResponse, ChildPageBlockObjectResponse, ChildDatabaseBlockObjectResponse, BookmarkBlockObjectResponse, RichTextItemResponse, CalloutBlockObjectResponse, ImageBlockObjectResponse, VideoBlockObjectResponse, EmbedBlockObjectResponse, TextRichTextItemResponse, EquationRichTextItemResponse, BreadcrumbBlockObjectResponse, Heading1BlockObjectResponse, Heading2BlockObjectResponse, Heading3BlockObjectResponse, QuoteBlockObjectResponse, ToDoBlockObjectResponse, TemplateBlockObjectResponse, SyncedBlockBlockObjectResponse, EquationBlockObjectResponse, CodeBlockObjectResponse, DividerBlockObjectResponse, TableOfContentsBlockObjectResponse, ColumnBlockObjectResponse, LinkToPageBlockObjectResponse, TableRowBlockObjectResponse, PdfBlockObjectResponse, FileBlockObjectResponse, AudioBlockObjectResponse, LinkPreviewBlockObjectResponse, UnsupportedBlockObjectResponse, PageObjectResponse, GetPagePropertyResponse, DatabaseObjectResponse, QueryDatabaseResponse, MentionRichTextItemResponse, ParagraphBlockObjectResponse, GetSelfResponse, MultiSelectPropertyItemObjectResponse, NumberPropertyItemObjectResponse, RichTextPropertyItemObjectResponse, TitlePropertyItemObjectResponse, SelectPropertyItemObjectResponse } from '@notionhq/client/build/src/api-endpoints.js';
 import { ParsedUrlQueryInput } from 'node:querystring';
 import { UrlObject } from 'node:url';
 
@@ -174,7 +174,15 @@ type ParagraphBlockObjectResponseEx = ParagraphBlockObjectResponse & {
         color: SelectColor;
     };
 };
-type BlockObjectResponse = ParagraphBlockObjectResponseEx | Heading1BlockObjectResponse | Heading2BlockObjectResponse | Heading3BlockObjectResponse | BulletedListItemBlockObjectResponseEx | NumberedListItemBlockObjectResponseEx | QuoteBlockObjectResponse | ToDoBlockObjectResponse | ToggleBlockObjectResponseEx | TemplateBlockObjectResponse | SyncedBlockBlockObjectResponse | ChildPageBlockObjectResponseEx | ChildDatabaseBlockObjectResponseEx | EquationBlockObjectResponse | CodeBlockObjectResponse | CalloutBlockObjectResponseEx | DividerBlockObjectResponse | BreadcrumbBlockObjectResponse | TableOfContentsBlockObjectResponse | ColumnListBlockObjectResponseEx | ColumnBlockObjectResponse | LinkToPageBlockObjectResponse | TableBlockObjectResponseEx | TableRowBlockObjectResponse | EmbedBlockObjectResponseEx | BookmarkBlockObjectResponseEx | ImageBlockObjectResponseEx | VideoBlockObjectResponseEx | PdfBlockObjectResponse | FileBlockObjectResponse | AudioBlockObjectResponse | LinkPreviewBlockObjectResponse | UnsupportedBlockObjectResponse;
+type Breadcrumb = {
+    id: string;
+    name: string;
+    icon: MentionIcon;
+};
+type BreadcrumbBlockObjectResponseEx = BreadcrumbBlockObjectResponse & {
+    list: Breadcrumb[];
+};
+type BlockObjectResponse = ParagraphBlockObjectResponseEx | Heading1BlockObjectResponse | Heading2BlockObjectResponse | Heading3BlockObjectResponse | BulletedListItemBlockObjectResponseEx | NumberedListItemBlockObjectResponseEx | QuoteBlockObjectResponse | ToDoBlockObjectResponse | ToggleBlockObjectResponseEx | TemplateBlockObjectResponse | SyncedBlockBlockObjectResponse | ChildPageBlockObjectResponseEx | ChildDatabaseBlockObjectResponseEx | EquationBlockObjectResponse | CodeBlockObjectResponse | CalloutBlockObjectResponseEx | DividerBlockObjectResponse | BreadcrumbBlockObjectResponseEx | TableOfContentsBlockObjectResponse | ColumnListBlockObjectResponseEx | ColumnBlockObjectResponse | LinkToPageBlockObjectResponse | TableBlockObjectResponseEx | TableRowBlockObjectResponse | EmbedBlockObjectResponseEx | BookmarkBlockObjectResponseEx | ImageBlockObjectResponseEx | VideoBlockObjectResponseEx | PdfBlockObjectResponse | FileBlockObjectResponse | AudioBlockObjectResponse | LinkPreviewBlockObjectResponse | UnsupportedBlockObjectResponse;
 type ListBlockChildrenResponseEx = ListBlockChildrenResponse & {
     results: Array<BlockObjectResponse>;
     children?: ListBlockChildrenResponse;
@@ -511,9 +519,10 @@ interface PageProps {
     link?: Link;
     query?: ParsedUrlQueryInput;
     modules?: ExternalModules;
+    breadcrumb_hrefs?: string[];
 }
 
-declare const Page: ({ blocks, href, link, query, modules }: PageProps) => React.JSX.Element;
+declare const Page: ({ blocks, href, link, query, modules, breadcrumb_hrefs }: PageProps) => React.JSX.Element;
 
 interface BookmarkBlockProps {
     block: BookmarkBlockObjectResponseEx;
@@ -522,10 +531,13 @@ interface BookmarkBlockProps {
 declare const BookmarkBlock: ({ block }: BookmarkBlockProps) => React.JSX.Element;
 
 interface BreadcrumbBlockProps {
-    block: BreadcrumbBlockObjectResponse;
+    block: BreadcrumbBlockObjectResponseEx;
+    link?: Link;
+    hrefs?: string[];
+    query?: ParsedUrlQueryInput;
 }
 
-declare const BreadcrumbBlock: ({ block }: BreadcrumbBlockProps) => React.JSX.Element;
+declare const BreadcrumbBlock: ({ block, link, hrefs, query }: BreadcrumbBlockProps) => React.JSX.Element;
 
 interface BulletedListBlocksProps {
     block: BulletedListItemBlockObjectResponseEx;

package/dist/ui/umd/index.js

@@ -19317,11 +19317,28 @@
                 React.createElement(TextBlock, { tag: "span", block: block.bookmark.caption }))));
     };
 
-    // TODO: Iimplement and design
+    var BreadcrumbLink = function (_a) {
+        var breadcrumb = _a.breadcrumb, link = _a.link, href = _a.href, query = _a.query, children = _a.children;
+        var id = breadcrumb.id, name = breadcrumb.name;
+        var _b = getLinkPathAndLinkKey(href || ''), path = _b[0], slugKey = _b[1];
+        var file = slugKey === 'id' ? id : encodeURIComponent(name.toLowerCase()).replace(/%20/g, '-');
+        if (link && href) {
+            var Link = link;
+            return (React.createElement(Link, { className: "notionate-blocks-breadcrumb-a", href: { pathname: "".concat(path).concat(file), query: query } }, children));
+        }
+        if (href) {
+            return (React.createElement("a", { className: "notionate-blocks-breadcrumb-a", href: "".concat(path).concat(file).concat(queryToString(query)) }, children));
+        }
+        return (React.createElement("span", { className: "notionate-blocks-breadcrumb-a" }, children));
+    };
     var BreadcrumbBlock = function (_a) {
-        var block = _a.block;
-        var parent = block.parent;
-        return (React.createElement("div", { className: "notionate-blocks-breadcrumb" }, parent.type));
+        var block = _a.block, link = _a.link, hrefs = _a.hrefs, query = _a.query;
+        var max = block.list.length;
+        return (React.createElement("div", { className: "notionate-blocks-breadcrumb" }, block.list.map(function (v, i) { return (React.createElement(BreadcrumbLink, { key: "crumb-".concat(i), breadcrumb: v, href: hrefs === undefined ? undefined : hrefs[i], link: link, query: query },
+            v.icon.type === 'emoji' && React.createElement("span", { className: "notionate-blocks-breadcrumb-emoji" }, v.icon.emoji),
+            v.icon.type !== 'emoji' && React.createElement("img", { className: "notionate-blocks-breadcrumb-icon", src: v.icon.src, width: 20, height: 20, alt: v.name }),
+            React.createElement("span", { className: "notionate-blocks-breadcrumb-title" }, v.name),
+            i + 1 < max && React.createElement("span", { className: "notionate-blocks-breadcrumb-slash" }, "/"))); })));
     };
 
     var BulletedListBlocks = function (_a) {
@@ -19818,9 +19835,9 @@
     };
 
     var blockType = {
-        heading_1: 'h1',
-        heading_2: 'h2',
-        heading_3: 'h3',
+        heading_1: 'h2',
+        heading_2: 'h3',
+        heading_3: 'h4',
         bulleted_list_item: 'li',
         numbered_list_item: 'li',
         divider: 'hr',
@@ -19830,13 +19847,12 @@
     };
     var PageHandler = function (_a) {
         var _b;
-        var block = _a.block, href = _a.href, link = _a.link, query = _a.query, modules = _a.modules;
+        var block = _a.block, href = _a.href, link = _a.link, query = _a.query, modules = _a.modules, breadcrumb_hrefs = _a.breadcrumb_hrefs;
         switch (block.type) {
             case 'bookmark':
                 return React.createElement(BookmarkBlock, { block: block, key: block.id });
             case 'breadcrumb':
-                console.log("still a not supported component: ".concat(block.type));
-                return React.createElement(BreadcrumbBlock, { block: block, key: block.id });
+                return React.createElement(BreadcrumbBlock, { block: block, hrefs: breadcrumb_hrefs, link: link, query: query, key: block.id });
             case 'bulleted_list_item':
                 return React.createElement(BulletedListBlocks, { block: block, key: block.id });
             case 'callout':
@@ -19908,7 +19924,7 @@
     };
 
     var Page = function (_a) {
-        var blocks = _a.blocks, href = _a.href, link = _a.link, query = _a.query, modules = _a.modules;
+        var blocks = _a.blocks, href = _a.href, link = _a.link, query = _a.query, modules = _a.modules, breadcrumb_hrefs = _a.breadcrumb_hrefs;
         var results = blocks.results;
         var listType = {
             bulleted_list_item: 'ul',
@@ -19943,7 +19959,7 @@
                 }
             }
             else {
-                var elem = PageHandler({ block: block, href: href, link: link, query: query, modules: modules });
+                var elem = PageHandler({ block: block, href: href, link: link, query: query, modules: modules, breadcrumb_hrefs: breadcrumb_hrefs });
                 if (elem !== undefined) {
                     children.push(elem);
                 }