Skip to main content
The ReadingEntry component renders individual reading/knowledge entries from a Notion database, typically used on the reading log page.

​
Component Location

File: src/components/ReadingEntry.astro

​
Props

​
page
PageObjectResponse
required
Notion page object containing the reading entry data

​
Interface

src/components/ReadingEntry.astro
export interface Props {
  page: PageObjectResponse;
}

​
Expected Notion Properties

The component expects the following properties in the Notion page:
​
Tags
multi_select
Tags for the entry. Special tag “wow” displays in red.
​
Link
url
URL link to the content being referenced
​
Comments and Quotes
text
Notes, comments, or quotes from the reading
​
Date
date
Date of the reading/entry (ISO format)

​
Usage

src/pages/read.astro
---
import ReadingEntry from '@components/ReadingEntry.astro';
import { queryNotionDatabase } from '@lib/notion-cms';

const knowledgeEntries = await queryNotionDatabase(
  import.meta.env.NOTION_DB_ID_KNOWLEDGE_2025,
  {
    sorts: [{ property: 'Date', direction: 'descending' }]
  }
);
---

{knowledgeEntries.map(entry => (
  <ReadingEntry page={entry} />
))}

​
Rendering Logic

The component renders:
  1. “wow” Tag: If present, displays as red text
  2. Link: Underlined link using the “Comments and Quotes” property as link text
  3. Date: Formatted as “MMM d” (e.g., “Jan 15”)
  4. Other Tags: Displayed in gray with # prefix

​
Example Output

<div>
  <span class="text-red-500">wow</span>
  <a class="underline" href="https://example.com">
    Interesting article about Astro
  </a>
  on Jan 15
  <span class="text-gray-400">#javascript</span>
  <span class="text-gray-400">#webdev</span>
</div>

​
Styling

The component uses Tailwind CSS classes:
  • “wow” tag: text-red-500 (red emphasis)
  • Link: underline (underlined text)
  • Other tags: text-gray-400 (muted gray)

​
Helper Functions

The component uses: 
import { parseProperty } from 'src/lib/notion-parse';
import { format, parseISO } from 'date-fns';
  • parseProperty: Extracts property values from Notion page objects
  • format: Formats dates (from date-fns)
  • parseISO: Parses ISO date strings (from date-fns)

​
Date Formatting

format(parseISO(parseProperty(page.properties["Date"])), "MMM d")
Converts ISO date string to readable format like “Jan 15”.

​
Notion Database Schema

Expected database columns:
PropertyTypeDescription
TagsMulti-selectCategories/tags (special: “wow”)
LinkURLLink to content
Comments and QuotesTextNotes/quotes
DateDateEntry date

Pages Management

Learn about static pages in Notion

Notion Parse Utility

parseProperty and other parsing utilities

Build docs developers (and LLMs) love

Get started for freeTalk to us