feat: add page icon align option #618

Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,7 +29,7 @@ export function PageIconImpl({
		hideDefaultIcon?: boolean
		defaultIcon?: string \| null
		}) {
	const { mapImageUrl, recordMap, darkMode } = useNotionContext()
	const { alignCenter, mapImageUrl, recordMap, darkMode } = useNotionContext()
		let isImage = false
		let content: any = null

Expand Down Expand Up		@@ -94,7 +94,8 @@ export function PageIconImpl({
		<div
		className={cs(
		inline ? 'notion-page-icon-inline' : 'notion-page-icon-hero',
	isImage ? 'notion-page-icon-image' : 'notion-page-icon-span'
	isImage ? 'notion-page-icon-image' : 'notion-page-icon-span',
	alignCenter ? 'align-center' : 'align-left'
Amemome marked this conversation as resolved. Outdated Show resolved Hide resolved
		)}
		>
		{content}
Expand Down

3 changes: 3 additions & 0 deletions packages/react-notion-x/src/context.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,6 +35,7 @@ export interface NotionContext {
		minTableOfContentsItems: number
		linkTableTitleProperties: boolean
		isLinkCollectionToUrlProperty: boolean
	alignCenter: boolean

		defaultPageIcon?: string \| null
		defaultPageCover?: string \| null
Expand Down Expand Up		@@ -63,6 +64,7 @@ export interface PartialNotionContext {
		showCollectionViewDropdown?: boolean
		linkTableTitleProperties?: boolean
		isLinkCollectionToUrlProperty?: boolean
	alignCenter?: boolean

		showTableOfContents?: boolean
		minTableOfContentsItems?: number
Expand Down Expand Up		@@ -169,6 +171,7 @@ const defaultNotionContext: NotionContext = {
		showCollectionViewDropdown: true,
		linkTableTitleProperties: true,
		isLinkCollectionToUrlProperty: false,
	alignCenter: true,
Copy link @gemini-code-assist gemini-code-assist bot Mar 20, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. high Is `alignCenter: true` the intended default? It might be more intuitive to default to `false` and allow users to explicitly enable centering. This could prevent unexpected layout changes for existing users. alignCenter: false, Copy link Author @Amemome Amemome Mar 20, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. The default value was center-aligned, so I set it to true.

		showTableOfContents: false,
		minTableOfContentsItems: 3,
Expand Down

3 changes: 3 additions & 0 deletions packages/react-notion-x/src/renderer.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,6 +34,7 @@ export function NotionRenderer({
		defaultPageIcon,
		defaultPageCover,
		defaultPageCoverPosition,
	alignCenter,
		...rest
		}: {
		recordMap: ExtendedRecordMap
Expand All		@@ -59,6 +60,7 @@ export function NotionRenderer({
		linkTableTitleProperties?: boolean
		isLinkCollectionToUrlProperty?: boolean
		isImageZoomable?: boolean
	alignCenter?: boolean

		showTableOfContents?: boolean
		minTableOfContentsItems?: number
Expand Down Expand Up		@@ -117,6 +119,7 @@ export function NotionRenderer({
		defaultPageCover={defaultPageCover}
		defaultPageCoverPosition={defaultPageCoverPosition}
		zoom={isImageZoomable ? zoom : null}
	alignCenter={alignCenter}
		>
		<NotionBlockRenderer {...rest} />
		</NotionContextProvider>
Expand Down

20 changes: 19 additions & 1 deletion packages/react-notion-x/src/styles.css

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -623,7 +623,6 @@
		.notion-page-icon-hero {
		position: absolute;
		top: 0;
	left: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
Expand All		@@ -632,6 +631,15 @@
		.notion-page-icon-hero.notion-page-icon-image {
		width: 124px;
		height: 124px;
	}

	.notion-page-icon-hero.notion-page-icon-image.align-left {
	left: 0%;
	margin-left: 26px;
	}

	.notion-page-icon-hero.notion-page-icon-image.align-center {
	left: 50%;
		margin-left: -62px;
		}
Amemome marked this conversation as resolved. Outdated Show resolved Hide resolved

Expand All		@@ -641,6 +649,16 @@
		margin-left: -39px;
		}

	.notion-page-icon-hero.notion-page-icon-span.align-left {
	left: 0%;
	margin-left: 16px;
	}

	.notion-page-icon-hero.notion-page-icon-span.align-center {
	left: 50%;
	margin-left: -39px;
	}
Amemome marked this conversation as resolved. Outdated Show resolved Hide resolved

		.notion-page-icon-hero .notion-page-icon {
		position: relative;
		display: block;
Expand Down

Navigation Menu