{ENABLE_LIGHTBOX ? (
-
- 
+
) : (
-
@@ -62,29 +67,31 @@ const altText = block.Image.Caption?.map(c => c.Text.Content).join('') || 'Image
margin: 1rem auto;
max-width: 100%;
}
-
+
.image-wrapper {
margin: 0 auto;
max-width: 100%;
}
-
+
.image-container {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease;
}
-
+
.image-container:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
-
+
.lightbox-link {
display: block;
cursor: zoom-in;
}
-
+
.image-content {
display: block;
max-width: 100%;
@@ -93,17 +100,18 @@ const altText = block.Image.Caption?.map(c => c.Text.Content).join('') || 'Image
object-fit: cover;
transition: opacity 0.3s ease;
}
-
- .image-content[loading="lazy"] {
- background: linear-gradient(90deg,
- hsl(var(--muted)) 0%,
- hsl(var(--muted) / 0.8) 50%,
+
+ .image-content[loading='lazy'] {
+ background: linear-gradient(
+ 90deg,
+ hsl(var(--muted)) 0%,
+ hsl(var(--muted) / 0.8) 50%,
hsl(var(--muted)) 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
-
+
@keyframes shimmer {
0% {
background-position: -200% 0;
@@ -112,12 +120,12 @@ const altText = block.Image.Caption?.map(c => c.Text.Content).join('') || 'Image
background-position: 200% 0;
}
}
-
+
@media (max-width: 768px) {
.image {
margin: 0.75rem auto;
}
-
+
.image-container:hover {
transform: none;
box-shadow: none;
diff --git a/src/components/notion/Mention.astro b/src/components/notion/Mention.astro
index 23b09b5..bf498bd 100644
--- a/src/components/notion/Mention.astro
+++ b/src/components/notion/Mention.astro
@@ -1,9 +1,9 @@
---
+import arrow from '../../images/icon-arrow-link.svg'
+import { getPostLink } from '../../lib/blog-helpers.ts'
import type { Post } from '../../lib/interfaces.ts'
import { getPostByPageId } from '../../lib/notion/client'
-import { getPostLink } from '../../lib/blog-helpers.ts'
import '../../styles/notion-color.css'
-import arrow from '../../images/icon-arrow-link.svg'
export interface Props {
pageId: string
@@ -22,18 +22,22 @@ if (pageId) {
<>
- {post.Icon && post.Icon.Type === 'emoji'
- ? post.Icon.Emoji
- : post.Icon && post.Icon.Type === 'external'
- ? (
- 
- )
- : '📄'}
- 
+ {post.Icon && post.Icon.Type === 'emoji' ? (
+ post.Icon.Emoji
+ ) : post.Icon && post.Icon.Type === 'external' ? (
+
+ ) : (
+ '📄'
+ )}
+
{post.Title}
@@ -42,7 +46,11 @@ if (pageId) {
🚫
-
+
Post not found
diff --git a/src/components/notion/NumberedListItems.astro b/src/components/notion/NumberedListItems.astro
index 88554d0..82939a9 100644
--- a/src/components/notion/NumberedListItems.astro
+++ b/src/components/notion/NumberedListItems.astro
@@ -1,9 +1,9 @@
---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
-import RichText from './RichText.astro'
-import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
+import NotionBlocks from '../NotionBlocks.astro'
+import RichText from './RichText.astro'
export interface Props {
block: interfaces.Block
@@ -21,7 +21,8 @@ const items = block.ListItems ?? []
{
items
.filter(
- (b: interfaces.Block) => b.Type === 'numbered_list_item' && b.NumberedListItem,
+ (b: interfaces.Block) =>
+ b.Type === 'numbered_list_item' && b.NumberedListItem,
)
.map((b: interfaces.Block) => {
const item = b.NumberedListItem
diff --git a/src/components/notion/Paragraph.astro b/src/components/notion/Paragraph.astro
index 976c470..b75bdc7 100644
--- a/src/components/notion/Paragraph.astro
+++ b/src/components/notion/Paragraph.astro
@@ -1,9 +1,9 @@
---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
-import RichText from './RichText.astro'
-import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
+import NotionBlocks from '../NotionBlocks.astro'
+import RichText from './RichText.astro'
export interface Props {
block: interfaces.Block
diff --git a/src/components/notion/PinterestEmbed.astro b/src/components/notion/PinterestEmbed.astro
index 6af180c..734ca39 100644
--- a/src/components/notion/PinterestEmbed.astro
+++ b/src/components/notion/PinterestEmbed.astro
@@ -11,5 +11,4 @@ const { url } = Astro.props
type="text/javascript"
async
defer
- src="//assets.pinterest.com/js/pinit.js"
->
+ src="//assets.pinterest.com/js/pinit.js">
diff --git a/src/components/notion/Quote.astro b/src/components/notion/Quote.astro
index 5ca6f7e..b879e1e 100644
--- a/src/components/notion/Quote.astro
+++ b/src/components/notion/Quote.astro
@@ -1,9 +1,9 @@
---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
-import RichText from './RichText.astro'
-import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
+import NotionBlocks from '../NotionBlocks.astro'
+import RichText from './RichText.astro'
export interface Props {
block: interfaces.Block
diff --git a/src/components/notion/RichText.astro b/src/components/notion/RichText.astro
index 32df99f..e8bff6a 100644
--- a/src/components/notion/RichText.astro
+++ b/src/components/notion/RichText.astro
@@ -1,13 +1,13 @@
---
import katex from 'katex'
import type { RichText } from '../../lib/interfaces.ts'
+import Anchor from './annotations/Anchor.astro'
import Bold from './annotations/Bold.astro'
+import Code from './annotations/Code.astro'
+import Color from './annotations/Color.astro'
import Italic from './annotations/Italic.astro'
import Strikethrough from './annotations/Strikethrough.astro'
import Underline from './annotations/Underline.astro'
-import Color from './annotations/Color.astro'
-import Code from './annotations/Code.astro'
-import Anchor from './annotations/Anchor.astro'
import Mention from './Mention.astro'
export interface Props {
@@ -43,13 +43,13 @@ const { richText } = Astro.props
{content}
)
- }
+ },
)}
{richText.Equation && (
)}
diff --git a/src/components/notion/SyncedBlock.astro b/src/components/notion/SyncedBlock.astro
index 8a16297..28b4771 100644
--- a/src/components/notion/SyncedBlock.astro
+++ b/src/components/notion/SyncedBlock.astro
@@ -1,6 +1,6 @@
---
-import NotionBlocks from '../NotionBlocks.astro'
import type * as interfaces from '../../lib/interfaces'
+import NotionBlocks from '../NotionBlocks.astro'
export interface Props {
block: interfaces.Block
diff --git a/src/components/notion/TableOfContents.astro b/src/components/notion/TableOfContents.astro
index 9b30b86..db2590a 100644
--- a/src/components/notion/TableOfContents.astro
+++ b/src/components/notion/TableOfContents.astro
@@ -1,6 +1,6 @@
---
-import * as interfaces from '../../lib/interfaces.ts'
import { buildHeadingId } from '../../lib/blog-helpers.ts'
+import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
import '../../styles/notion-color.css'
@@ -39,7 +39,7 @@ if (!block.TableOfContents) {
)} ${indentClass}`}
>
{heading.RichTexts.map(
- (richText: interfaces.RichText) => richText.PlainText
+ (richText: interfaces.RichText) => richText.PlainText,
).join('')}
)
@@ -52,6 +52,9 @@ if (!block.TableOfContents) {
}
.table-of-contents > a {
display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
line-height: 1.8rem;
font-size: 0.9rem;
font-weight: 500;
diff --git a/src/components/notion/ToDo.astro b/src/components/notion/ToDo.astro
index c3766cc..3b747f1 100644
--- a/src/components/notion/ToDo.astro
+++ b/src/components/notion/ToDo.astro
@@ -1,9 +1,9 @@
---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
-import RichText from './RichText.astro'
-import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
+import NotionBlocks from '../NotionBlocks.astro'
+import RichText from './RichText.astro'
export interface Props {
block: interfaces.Block
diff --git a/src/components/notion/Toggle.astro b/src/components/notion/Toggle.astro
index d15b1b9..c2f28b0 100644
--- a/src/components/notion/Toggle.astro
+++ b/src/components/notion/Toggle.astro
@@ -1,9 +1,9 @@
---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
-import RichText from './RichText.astro'
-import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
+import NotionBlocks from '../NotionBlocks.astro'
+import RichText from './RichText.astro'
export interface Props {
block: interfaces.Block
diff --git a/src/components/notion/TweetEmbed.astro b/src/components/notion/TweetEmbed.astro
index 6d137d9..9313eeb 100644
--- a/src/components/notion/TweetEmbed.astro
+++ b/src/components/notion/TweetEmbed.astro
@@ -17,7 +17,8 @@ const postURL =
-
+