Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/embraceagi/ownlink

build your ownlink in a minute for all in one , you can exhibit your blog, projects and cards/ 一分钟内搭建自己的个人链接，展示自己的博客，contacts，项目
https://github.com/embraceagi/ownlink

all-in-one links nextjs notion vercel

Last synced: 9 days ago
JSON representation

build your ownlink in a minute for all in one , you can exhibit your blog, projects and cards/ 一分钟内搭建自己的个人链接，展示自己的博客，contacts，项目

Host: GitHub
URL: https://github.com/embraceagi/ownlink
Owner: EmbraceAGI
License: mit
Created: 2023-09-03T15:52:36.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2023-10-24T00:27:35.000Z (about 1 year ago)
Last Synced: 2023-10-24T01:52:38.271Z (about 1 year ago)
Topics: all-in-one, links, nextjs, notion, vercel
Language: TypeScript
Homepage: https://ownlink-two.vercel.app/
Size: 657 KB
Stars: 5
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: readme-en.md
- Contributing: contributing.md
- Funding: .github/funding.yml
- License: license

Awesome Lists containing this project

README

Use notion to establish your own link in a minute

English | Chinese

# Build your ownlink through Next.js + Notion --- Live Examples

[**Demo：**](https://ownlink-two.vercel.app/) Click here to see a Demo website

[**My webiste**](https://www.garyhou2023.info/) Click here to see my website

[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project)

1. Deploy your ownlink in 1 minute, fork this repo and deploy it
2. copy this notion template in your notion, get the notion page id like this :
[Notion-template](https://twilight-stay-202.notion.site/Ownlink_Template-292e44db817d4cafb370287e59a63b93?pvs=4)
id is 292e44db817d4cafb370287e59a63b93?pvs=4
3. Edit values in [site.config.ts](./site.config.ts) 📝, change Notion page id to yours, that's all of it, your have your ownlink now!

> The ultimate starter kit for Next.js and Notion integration.
>

[![Build Badge](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/actions/workflows/build.yml/badge.svg)](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/actions/workflows/build.yml) [![Prettier Badge](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## Introduction

Fueling my personal blog and portfolio, this repository leverages the power of Notion as a CMS via [react-notion-x](https://github.com/NotionX/react-notion-x), [Next.js](https://nextjs.org/), and [Vercel](https://vercel.com).

## Capabilities

- Quick setup: edit just a [single config file](./site.config.ts) 🛠
- Deep integration with Notion via [react-notion-x](https://github.com/NotionX/react-notion-x)
- Tech stack: Next.js, TypeScript, React ⚙
- Performance and SEO optimized 🚀
- Auto-generated social images 🖼
- Clean URLs 🌐
- Dynamic TOCs 📚
- Dark mode support 🌒
- CMD+K / CMD+P for quick search 🔍
- Mobile responsive 📱

## Getting Started

**Configuration is handled in [site.config.ts](./site.config.ts).**

1. Fork or clone the repo 🍴
2. Edit values in [site.config.ts](./site.config.ts) 📝
3. `npm install` 📦
4. `npm run dev` for local testing 🖥
5. `npm run deploy` to push to Vercel 🚀

For the `rootNotionPageId`, use the last segment of your public Notion page URL. More instructions in the repo.

## URL Schemes

The app adopts distinct URL paths for development and production, although any dev path will work in prod and vice-versa.

- **Development**: URLs take the form `/nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202`, a slugified title appended with the Notion ID. Helpful for quick ID reference.

- **Production**: URLs are cleaner, like `/nextjs-notion-blog`, omitting the ID.

URL mapping occurs automatically during the build. If you change titles, ensure that old links remain functional. Next.js [redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects) can help, but we don't offer built-in detection of old links.

Refer to [mapPageUrl](./lib/map-page-url.ts) and [getCanonicalPageId](https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-canonical-page-id.ts) for details.

Custom slugs can be defined using a `Slug` text property in your Notion database.

⚠️ Duplicated slugs across pages will trigger an error.

## Image Optimization

We employ [next/image](https://nextjs.org/docs/api-reference/next/image) along with optional [lqip-modern](https://github.com/transitive-bullshit/lqip-modern) for highly efficient images.

Preview images are on by default. To disable, set `isPreviewImageSupportEnabled` to `false` in `site.config.ts`.

### Redis Caching

For faster preview image loading, enable Redis caching by setting `isRedisEnabled` to `true` in `site.config.ts`. Define `REDIS_HOST` and `REDIS_PASSWORD` in a `.env` file.

```bash
REDIS_HOST='TODO'
REDIS_PASSWORD='TODO'
```

Recommended Redis provider: [Redis Labs](https://redis.com) (free plan available).

Preview images and Redis caching are optional; disable in config if unwanted.

### Custom Styling

CSS for Notion content is in [styles/notion.css](./styles/notion.css), targeting classes from react-notion-x [styles.css](https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css).

For specific Notion blocks:

```css
.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
display: none;
}
```

### Dark Theme

Dark mode toggle is available; click sun/moon icon in footer.
```
```

## Auto-Generated Social Images

Open Graph and social meta tags stem from your Notion content, ensuring polished social sharing. Social images are auto-created via [Vercel OG Image Generation](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation). Modify the default React template at [api/social-images.tsx](./pages/api/social-image.tsx).

View a live example [here](https://transitivebullsh.it/api/social-image?id=ID).

## Dynamic Table of Contents

Each article features a dynamic table of contents (`aside` on desktop) with scrollspy functionality. If an article has fewer than `minTableOfContentsItems` (default 3), the ToC is hidden. It's also hidden on index pages or small windows.

For implementation details, see [getPageTableOfContents](https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-page-table-of-contents.ts).

## Mobile-Responsive Design

Pages adapt to various device sizes.

## Web Analytics Options

### Fathom

[Fathom](https://usefathom.com/ref/42TFOZ) is a Google Analytics alternative. To enable, add `NEXT_PUBLIC_FATHOM_ID` as an environment variable (production-only).

### PostHog

[PostHog](https://posthog.com/) offers an open-source alternative. Activate it by adding `NEXT_PUBLIC_POSTHOG_ID` as an environment variable (production-only).

## Environment Setup

For utilizing Redis, analytics, or any other services requiring environment variables, [configure them in your Vercel project](https://vercel.com/docs/concepts/projects/environment-variables).

To test Redis integration with GitHub Actions, update the [build action YAML](./.github/workflows/build.yml) to include `REDIS_HOST` and `REDIS_PASSWORD`. See this [branch example for reference](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/transitive-bullshit/.github/workflows/build.yml#L17-L21). These variables should also be added to your GitHub repo as [encrypted secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets).

## How to Contribute
Check out the contribution guide to join our list of amazing contributors.