
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
This is React components that uses the Notion API to display the Notion's database and page.
Notionate: This is React components that uses the Notion API to display the Notion's database and page.
Use API calls and components together. This is database list example:
import type { GetStaticProps, NextPage } from 'next'
import Link from 'next/link'
import {
QueryDatabaseResponseEx,
FetchDatabase,
QueryDatabaseParameters,
Link as NLink,
} from 'notionate'
import { DBList } from 'notionate/dist/components'
import 'notionate/dist/styles/notionate.css'
// Import when enable dark-mode
import 'notionate/dist/styles/notionate-dark.css'
type Props = {
db: QueryDatabaseResponseEx
}
export const getStaticProps: GetStaticProps<Props> = async (context) => {
const db = await FetchDatabase({
database_id: process.env.NOTION_DBID,
filter: {
property: 'Published',
checkbox: {
equals: true
},
},
sorts: [
{
property: 'Date',
direction: 'descending'
},
]
} as QueryDatabaseParameters)
return {
props: {
db,
}
}
}
export default const DB: NextPage<Props> = ({ db }) => {
return (
<>
<List
keys={['Name', 'spacer', 'Tags', 'Date']}
db={db}
href="/database/[id]"
link={Link as NLink} />
</>
)
}
This is page example:
import type { GetStaticProps, NextPage } from 'next'
import { FetchBlocks, ListBlockChildrenResponseEx } from 'notionate'
import { Blocks } from 'notionate/dist/components'
import 'notionate/dist/styles/notionate.css'
// Import when enable dark-mode
import 'notionate/dist/styles/notionate-dark.css'
type Props = {
blocks: ListBlockChildrenResponseEx
}
export const getStaticProps: GetStaticProps<Props> = async (context) => {
const blocks = await FetchBlocks(process.env.NOTION_PAGEID)
return {
props: {
blocks,
}
}
}
export default const Page: NextPage<Props> = ({ blocks }) => {
return (
<>
<Blocks blocks={blocks} />
</>
)
}
Set the notion token as environment variable:
$ cat .env
NOTION_TOKEN=secret_vHVKhIeYm95ga1sjOv*************************
NOTION_PAGEID=23740912d6ac4018ab76c64e772a342a
NOTION_DBID=81781536afc6431da21721177e7bf8e0
Env name | Description | Default |
---|---|---|
NOTION_TOKEN | Read permission is required in notion's credentials | - |
NOTIONATE_CACHEDIR | Cache directory name | .cache |
NOTIONATE_DOCROOT | Web server root directory | public |
NOTIONATE_IMAGEDIR | Web server image directory | images |
NOTIONATE_INCREMENTAL_CACHE | Enable incremental cache | false |
NOTIONATE_WAITTIME | milliseconds to wait right after api request due to ratelimit | 0 |
NOTIONATE_LIMITED_WAITTIME | milliseconds to wait before backoff after ratelimit limit | 60sec |
NOTIONATE_WEBP_QUALITY | Quality for WebP converting | 95 |
This is the API available:
Images are saved in NOTIONATE_IMAGEDIR
locally.
This is the components available:
FAQs
This is React components that uses the Notion API to display the Notion's database and page.
The npm package notionate receives a total of 2 weekly downloads. As such, notionate popularity was classified as not popular.
We found that notionate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.