Giter Site home page Giter Site logo

octrow / boklanov Goto Github PK

View Code? Open in Web Editor NEW

This project forked from transitive-bullshit/nextjs-notion-starter-kit

1.0 0.0 1.0 2.63 MB

Notion-powered personal website with Next.js and Vercel.

Home Page: https://boklanov.ru

License: MIT License

JavaScript 0.62% TypeScript 82.99% CSS 16.39%
nextjs notion-api redis vercel

boklanov's Introduction

Personal website

Build Status Prettier Code Formatting

Setup

All config is defined in site.config.ts.

This project requires a recent version of Node.js (we recommend >= 16).

  1. Fork / clone this repo
  2. Change a few values in site.config.ts
  3. npm install
  4. npm run dev to test locally
  5. npm run deploy to deploy to vercel 💪

I tried to make configuration as easy as possible — All you really need to do to get started is edit rootNotionPageId.

We recommend duplicating the default page as a starting point, but you can use any public notion page you want.

Make sure your root Notion page is public and then copy the link to your clipboard. Extract the last part of the URL that looks like 7875426197cf461698809def95960ebf, which is your page's Notion ID.

In order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called block which is the Notion data for the current page. If you enter block.space_id, it will print out your page's workspace ID.

I recommend setting up a collection on your home page that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you normally would in Notion.

URL Paths

The app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).

In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.

In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.

The mapping of Notion ID to slugified page titles is done automatically as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js's built-in support for redirects.

See mapPageUrl and getCanonicalPageId for more details.

You can override the default slug generation on a per-page basis by adding a Slug text property to your database. Any page which has a Slug property will use that as its slug.

NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.

Preview Images

Example preview image

We use next/image to serve images efficiently, with preview images optionally generated via lqip-modern. This gives us extremely optimized image support for sexy smooth images.

Preview images are enabled by default, but they can be slow to generate, so if you want to disable them, set isPreviewImageSupportEnabled to false in site.config.ts.

Redis

If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external Redis data store. To enable redis caching, set isRedisEnabled to true in site.config.ts and then set REDIS_HOST and REDIS_PASSWORD environment variables to point to your redis instance.

You can do this locally by adding a .env file:

REDIS_HOST='TODO'
REDIS_PASSWORD='TODO'

If you're not sure which Redis provider to use, we recommend Redis Labs, which provides a free plan.

Note that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config.

Styles

All CSS styles that customize Notion content are located in styles/notion.css. They mainly target global CSS classes exported by react-notion-x styles.css.

Every notion block gets its own unique classname, so you can target individual blocks like this:

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

Contributing

See the contribution guide and join our amazing list of contributors!

License

MIT © Travis Fischer

boklanov's People

Contributors

andrewnt219 avatar bytrangle avatar dizotoff avatar dsarman avatar gobyebye avatar gridexx avatar jaeseokim avatar jorgeruvalcaba avatar jsonmartin avatar octrow avatar ohplz avatar si1k avatar transitive-bullshit avatar vadorequest avatar voidrender avatar

Stargazers

 avatar

Forkers

boklanov

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.