Skip to content

Commit 3f53522

Browse files
mosugimosugi
committed
refactor: implement blog pagination and update blog link in header
1 parent 6d6be38 commit 3f53522

File tree

5 files changed

+78
-14
lines changed

5 files changed

+78
-14
lines changed

‎apps/notro-tail/src/components/Header.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const headerPages = await getCollection("pages", ({ data }) => {
2121
</li>
2222
))}
2323
<li>
24-
<a href="/blog">Blog</a>
24+
<a href="/blog/[...page]">Blog</a>
2525
</li>
2626
</ul>
2727
</nav>

‎apps/notro-tail/src/components/NotionCustomBlocks.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ const {
3232
} = Astro.props;
3333
3434
let tempListItems: any = [];
35+
36+
console.log(Astro.slots);
3537
---
3638

3739
{

‎apps/notro-tail/src/pages/blog/[...page].astro

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
import type { PageObjectResponseType } from "notro";
3+
import type { PaginateFunction } from "astro";
4+
import { getCollection } from "astro:content";
5+
import BlogList from "../../components/BlogList.astro";
6+
import Layout from "../../layouts/Layout.astro";
7+
8+
export async function getStaticPaths({
9+
paginate,
10+
}: {
11+
paginate: PaginateFunction;
12+
}) {
13+
const posts = await getCollection("posts");
14+
return paginate(posts, {
15+
pageSize: 2,
16+
});
17+
}
18+
19+
const { page } = Astro.props;
20+
21+
const currentPath = Astro.url.pathname;
22+
const data = page.data.map(({ data }) => data as PageObjectResponseType);
23+
---
24+
25+
<Layout title="Blog">
26+
<main class="nt-posts">
27+
<section class="nt-selectable nt-collection_view-block">
28+
<BlogList posts={data} path={currentPath} />
29+
</section>
30+
</main>
31+
</Layout>

‎apps/notro-tail/src/pages/blog/index.astro

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/notro/README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,47 @@ const { entry } = Astro.props;
5656
This example gets the first entry from the `database` collection and passes the blocks to the `<NotionBlocks>` component.
5757
Each entry in the collection will have a `data` property with the response from the Notion API.
5858
`<NotionBlocks>` is a component that renders the blocks from the Notion API response.
59+
60+
| Block Type | Supported | Block Type Enum | Notes |
61+
| ------------------------ | ---------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
62+
| Page | ✅ Yes | `page` |
63+
| Text | ✅ Yes | `text` | Supports all known text formatting options |
64+
| Bookmark | ✅ Yes | `bookmark` | Embedded preview of external URL |
65+
| Bulleted List | ✅ Yes | `bulleted_list` | `<ul>` |
66+
| Numbered List | ✅ Yes | `numbered_list` | `<ol>` |
67+
| Heading 1 | ✅ Yes | `header` | `<h1>` |
68+
| Heading 2 | ✅ Yes | `sub_header` | `<h2>` |
69+
| Heading 3 | ✅ Yes | `sub_sub_header` | `<h3>` |
70+
| Quote | ✅ Yes | `quote` |
71+
| Callout | ✅ Yes | `callout` |
72+
| Equation (block) | ✅ Yes | `equation` | [katex](https://katex.org/) via [react-katex](https://github.com/MatejBransky/react-katex) |
73+
| Equation (inline) | ✅ Yes | `text` | [katex](https://katex.org/) via [react-katex](https://github.com/MatejBransky/react-katex) |
74+
| Todos (checkboxes) | ✅ Yes | `to_do` |
75+
| Table Of Contents | ✅ Yes | `table_of_contents` | See `notion-utils` `getPageTableOfContents` helper funtion |
76+
| Divider | ✅ Yes | `divider` | Horizontal line |
77+
| Column | ✅ Yes | `column` |
78+
| Column List | ✅ Yes | `column_list` |
79+
| Toggle | ✅ Yes | `toggle` | [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) |
80+
| Image | ✅ Yes | `image` | `<img>` |
81+
| Embed | ✅ Yes | `embed` | Generic `iframe` embeds |
82+
| Video | ✅ Yes | `video` | `iframe` |
83+
| Figma | ✅ Yes | `figma` | `iframe` |
84+
| Google Maps | ✅ Yes | `maps` | `iframe` |
85+
| Google Drive | ✅ Yes | `drive` | Google Docs, Sheets, etc custom embed |
86+
| Tweet | ✅ Yes | `tweet` | Uses the twitter embedding SDK |
87+
| PDF | ✅ Yes | `pdf` | Uses S3 signed URLs and [react-pdf](https://github.com/wojtekmaj/react-pdf) |
88+
| Audio | ✅ Yes | `audio` | Uses S3 signed URLs and [HTML5 `audio` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) |
89+
| File | ✅ Yes | `file` | Uses S3 signed URLs (generic downloadable file) |
90+
| Link | ✅ Yes | `text` | External links |
91+
| Page Link | ✅ Yes | `page` | Link to a notion page in the same workspace |
92+
| External Page Link | ✅ Yes | `text` | Links to a notion page or collection view in another workspace |
93+
| Code (block) | ✅ Yes | `code` | Block code syntax highlighting via [prismjs](https://prismjs.com/) |
94+
| Code (inline) | ✅ Yes | `text` | Inline code formatting (no syntax highlighting) |
95+
| Collections | ✅ Yes | | Also known as [databases](https://www.notion.so/Intro-to-databases-fd8cd2d212f74c50954c11086d85997e) |
96+
| Collection View | ✅ Yes | `collection_view` | Collections have a 1:N mapping to collection views |
97+
| Collection View Table | ✅ Yes | `collection_view` | `type = "table"` (default table view) |
98+
| Collection View Gallery | ✅ Yes | `collection_view` | `type = "gallery"` (grid view) |
99+
| Collection View Board | ✅ Yes | `collection_view` | `type = "board"` (kanban view) |
100+
| Collection View List | ✅ Yes | `collection_view` | `type = "list"` (vertical list view) |
101+
| Collection View Calendar | ❌ Missing | `collection_view` | `type = "calendar"` (embedded calendar view) |
102+
| Collection View Page | ✅ Yes | `collection_view_page` | Collection view as a standalone page |

0 commit comments

Comments
 (0)