seo

notionpresso · Apr 8, 2024 · 3a3682c · 3a3682c
1 parent 6ab940d
commit 3a3682c
Show file tree

Hide file tree

Showing 12 changed files with 209 additions and 137 deletions.
diff --git a/packages/svelte-notion-page/build-storybook.log b/packages/svelte-notion-page/build-storybook.log
diff --git a/packages/svelte-notion-page/package.json b/packages/svelte-notion-page/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@cozy-blog/svelte-notion-page",
-	"version": "0.0.24",
+	"version": "0.0.25",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",

diff --git a/packages/svelte-notion-page/src/lib/components/notion.css b/packages/svelte-notion-page/src/lib/components/notion.css
@@ -1,5 +1,7 @@
 .notion * {
 	box-sizing: border-box;
+	margin-block-start: 0;
+	margin-block-end: 0;
 }
 
 .notion {
@@ -15,9 +17,11 @@
 	--notion-indent: 27px;
 }
 
-.notion * {
-	margin-block-start: 0;
-	margin-block-end: 0;
+.notion figure {
+	padding: 0;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	unicode-bidi: isolate;
 }
 
 .notion *::selection {
@@ -37,10 +41,18 @@
 	margin-top: 2px;
 }
 
+.notion-display-contents {
+	display: contents;
+}
+
 .notion-block > .notion-block {
 	margin-left: var(--notion-indent);
 }
 
+.notion-block > .notion-display-contents > .notion-block {
+	margin-left: var(--notion-indent);
+}
+
 .notion-toggle > .notion-block {
 	display: none;
 }
@@ -55,11 +67,10 @@
 }
 
 .notion-toggle-button {
-	display: inline-block;
 	width: 22px;
 	height: 24px;
 	box-sizing: border-box;
-	display: flex;
+	display: inline-flex;
 	border-radius: 3px;
 	border: none;
 	margin-left: 2px;

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte
@@ -12,26 +12,30 @@
 	const { marker } = bulletedListItemMarker.getMarker(props);
 </script>
 
-<div class={`notion-block notion-list-bulleted ${getColorCss(color)}`}>
-	<li class="notion-list-bulleted-content">
-		<span class="notion-list-marker">{marker}</span>
-		<p>
-			<RichText props={texts} />
-		</p>
+<ul class={`notion-block notion-list-bulleted ${getColorCss(color)}`}>
+	<li class="notion-display-contents">
+		<div class="notion-list-bulleted-content">
+			<span class="notion-list-marker">{marker}</span>
+			<p>
+				<RichText props={texts} />
+			</p>
+		</div>
+		<slot />
 	</li>
-	<slot />
-</div>
+</ul>
 
 <style>
+	ul {
+		list-style-type: none;
+		padding-left: 0;
+	}
 	.notion-list-bulleted-content {
-		display: flex;
-		align-items: start;
 		padding-left: 2px;
 		padding-top: 3px;
 		padding-bottom: 3px;
-		list-style-type: none;
+		display: flex;
+		align-items: flex-start;
 	}
-
 	.notion-list-marker {
 		user-select: none;
 		width: 24px;

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte
@@ -56,7 +56,7 @@
 	};
 </script>
 
-<div class="notion-block notion-code">
+<figure class="notion-block notion-code">
 	<div class="notion-code-content">
 		<div class="notion-code-meta">
 			<div class="notion-code-language">
@@ -86,17 +86,17 @@
 		</code>
 	</div>
 	{#if caption.length !== 0}
-		<div class="notion-asset-caption">
+		<figcaption class="notion-asset-caption">
 			<RichText props={caption} />
-		</div>
+		</figcaption>
 	{/if}
 
 	{#if copied}
 		<div in:fly|global={{ y: 40 }} out:fade|global class="notion-code-copy-tooltip">
 			<div>{'Copied'}</div>
 		</div>
 	{/if}
-</div>
+</figure>
 
 <style>
 	.notion-code {

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte
@@ -3,7 +3,7 @@
 	import RichText from '../base/richtext/RichText.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 
-	export let style = ''
+	export let style = '';
 	export let props: ImageArgs;
 	const { image } = props;
 	const { type, caption } = image;
@@ -54,7 +54,7 @@
 	}
 </script>
 
-<div style={style} class="notion-block notion-image">
+<figure {style} class="notion-block notion-image">
 	<div class="notion-image-content">
 		{#if url}
 			<ImageViewer bind:opened {initialIndex} {urls} />
@@ -63,11 +63,11 @@
 		{/if}
 	</div>
 	{#if caption.length !== 0}
-		<div class="notion-asset-caption">
+		<figcaption class="notion-asset-caption">
 			<RichText props={caption} />
-		</div>
+		</figcaption>
 	{/if}
-</div>
+</figure>
 
 <style>
 	.notion-image:not(:last-child) {

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte
@@ -11,33 +11,44 @@
 	const { marker, format } = numberedListItemMarker.getMarker(props);
 </script>
 
-<div
+<ol
 	data-notion-marker-format={format}
 	class={`notion-block notion-list-numbered ${getColorCss(color)}`}
 >
-	<li class="notion-list-numbered-content">
-		<div class="notion-list-marker">{marker}</div>
-		<p>
-			<RichText props={texts} />
-		</p>
+	<li class="notion-display-contents">
+		<div class="notion-list-numbered-content">
+			<span data-notion-marker-format={format} class="notion-list-marker">{marker}</span>
+			<p>
+				<RichText props={texts} />
+			</p>
+		</div>
+		<slot />
 	</li>
-	<slot />
-</div>
+</ol>
 
 <style>
-	:global(.notion-list-numbered[data-notion-marker-format='romans'] > li > .notion-list-marker) {
+	ol {
+		list-style-type: none;
+		padding-left: 0;
+	}
+	:global(
+			.notion-list-numbered[data-notion-marker-format='romans']
+				> .notion-display-contents
+				> .notion-list-numbered-content
+				> .notion-list-marker
+		) {
 		width: 3em !important;
 		margin-right: 0em;
 	}
-	:global(.notion-list-numbered[data-notion-marker-format='romans'] > .notion-block) {
+	:global(.notion-list-numbered[data-notion-marker-format='romans'] > li > .notion-block) {
 		margin-left: 2.9em;
 	}
 
 	.notion-list-marker::after {
 		content: '.';
 	}
 
-	li > .notion-list-marker {
+	.notion-list-marker {
 		width: 26px;
 	}
 
@@ -52,7 +63,6 @@
 	.notion-list-numbered-content {
 		padding-top: 4px;
 		padding-bottom: 4px;
-		list-style-type: none;
 		display: flex;
 	}
 </style>
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte
@@ -20,7 +20,7 @@
 		margin-top: 0;
 		margin-bottom: 0;
 		margin-block-start: 0;
-		margin-end-start: 0;
+		margin-block-end: 0;
 	}
 
 	.notion-paragraph-content {

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte
@@ -11,6 +11,7 @@
 
 <div
 	class:notion-toggle-open={open}
+	aria-expanded={open}
 	class={`${getColorCss(color)} notion-block notion-h1 notion-toggle`}
 >
 	<div class="notion-toggle-content">

diff --git a/packages/svelte-notion-page/src/stories/Image/notion-export.ts b/packages/svelte-notion-page/src/stories/Image/notion-export.ts
@@ -59,7 +59,7 @@ export const multipleImageJson = {
 		},
 		{
 			object: 'block',
-			id: 'f3eab6d3-fa21-4f62-b586-9fffc93c3fdd',
+			id: 'f3eab63-fa21-4f62-b586-9fffc93c3fdd',
 			parent: {
 				type: 'page_id',
 				page_id: 'dffa6fc2-7f09-4640-9ab0-a6e26309140b'

diff --git a/packages/svelte-notion-page/src/stories/bulleted_list/notion-export.ts b/packages/svelte-notion-page/src/stories/bulleted_list/notion-export.ts
@@ -604,7 +604,7 @@ export const json = {
 		},
 		{
 			object: 'block',
-			id: '61fd2e57-e1e7-477a-b21d-69b3fa5f9779',
+			id: '61xd2e57-e1e7-477a-b21d-69b3fa5f9779',
 			parent: {
 				type: 'block_id',
 				block_id: '11d67279-49d5-4afa-b45e-4a7fa31291e9'

diff --git a/packages/svelte-notion-page/src/stories/numbered_list/notion-export.ts b/packages/svelte-notion-page/src/stories/numbered_list/notion-export.ts
@@ -675,7 +675,7 @@ export const json = {
 		},
 		{
 			object: 'block',
-			id: '61fd2e57-e1e7-477a-b21d-69b3fa5f9779',
+			id: '61ad2e57-e1e7-477a-b21d-69b3fa5f9779',
 			parent: {
 				type: 'block_id',
 				block_id: '11d67279-49d5-4afa-b45e-4a7fa31291e9'
@@ -720,7 +720,7 @@ export const json = {
 		},
 		{
 			object: 'block',
-			id: '61fd2e57-e1e7-477a-b21d-69b3fa5f9779',
+			id: '61xd2e57-e1e7-477a-b21d-69b3fa5f9779',
 			parent: {
 				type: 'block_id',
 				block_id: '11d67279-49d5-4afa-b45e-4a7fa31291e9'