Code Monkey home page Code Monkey logo

blog's Introduction

Railway Blog

This repository contains the source code for the Railway blog. We use a NextJS app with Notion as our CMS.

Deploy on Railway

โœจ Features

  • NextJS
  • TypeScript
  • TailwindCSS
  • Notion

๐Ÿ’โ€โ™€๏ธ How to use

We also have a detailed guide on our blog to help users deploy a similar blog using Railway.

Step 1: Create a notion DB

You can find instructions on how to set up the Notion Database, TLDR you need the following fields in a Database - Inline on a page, it needs to be inline, or else it won't work.

  • Page (Title) - The page containing a post
  • Slug (Text) - The URL of a post
  • Published (Checkbox) - Only published blog posts show up on the website
  • Date (Date) - The date the post was published
  • Authors (Person) - A list of users that wrote the post
  • Image (Text) - The URL of the meta image for a post
  • Description (Text) - The preview text for the post
  • Featured (Checkbox) - Show post in the featured section
  • FeaturedImage (Text) - The URL of the image to use when a post is featured
  • Category (Select) - Post category options

Step 2: Create a Notion Integration

This will be done on Notion's Manage Integration page, copy the token, this will be used as NOTION_API_TOKEN

Step 3: Get a hold of your Database ID

You can get this from the URL of the page, which you can obtain by clicking the Share button in the upper-right of the page and clicking Copy Link. The link structure is https://www.notion.so/<user>/<database_Id>?v=.... , the database_Id will be used as POSTS_TABLE_ID during the deploy.

That is it, just make sure the properties on a post within Notion are not empty.

๐Ÿ“ Notes

This blog is heavily based on this example by JJ Kasper.

blog's People

Contributors

coffee-cup avatar dbanys avatar farazpatankar avatar gridonyx avatar gschier avatar half0wl avatar jakecooper avatar ndneighbor avatar ravivyas84 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

blog's Issues

Getting build error "Cannot read properties of undefined (reading 'rich_text')"

Hi team, getting the following build error:

Cannot read properties of undefined (reading 'rich_text'). seem to have to do with the slug (which I have set up as "text" inside Notion as per the tutorial.


TypeError: Cannot read properties of undefined (reading 'rich_text')
at /app/.next/server/chunks/490.js:32:91
at Array.filter (<anonymous>)
at getDatabase (/app/.next/server/chunks/490.js:32:20)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async getStaticPaths (/app/.next/server/pages/p/[slug].js:515:19)
 at async buildStaticPaths (/app/node_modules/next/dist/build/utils.js:497:31)
at async /app/node_modules/next/dist/build/utils.js:640:119
at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:75:20) {
type: 'TypeError'
}
error Command failed with exit code 1.

README: Image and FeaturedImage should be of type url in notion.

The readme says Image and FeaturedImage should be of type text but the code seems to say otherwise.

export const FeaturedPostItem: React.FC<{ post: PostProps }> = ({ post }) => {
  const formattedDate = useMemo(
    () =>
      dayjs(new Date(post.properties.Date.date.start)).format("MMM D, YYYY"),
    [post.properties.Date.date.start]
  );

  const author = post.properties.Authors.people[0];
  const category = post.properties.Category.select?.name;
  const featuredImage = post.properties.FeaturedImage.url;

Once I have changed type of FeaturedImage from text to url in my notion db, it started to display on my blog.
I suggest just update the README.md

Build error

When building the project it gives the following error. Don't know why this is happening but the env value for POSTS_TABLE_ID has hyphens that I didn't put in the env.

APIResponseError: Could not find database with ID: 2369f90d-f8ac-****-ba**-b14******200. Make sure the relevant pages and databases are shared with your integration.

The Database ID shown in the error message is: 2369f90d-f8ac-****-ba**-b14******200 where as the one that I provided in the env is: 2369f90df8ac****ba**b14******200

Instructions in Readme are missing several required fields

If you don't have a field in the database called "Description" you'll get an error on deployment.

"TypeError: Cannot read properties of undefined (reading 'rich_text')"

Other required fields are:

Featured: checkbox
FeaturedImage: text
Category: selection or tags or something? I just renamed the default Tags field to Category

That at least gets it to build and deploy.

There's a lot of work one needs to do after this to clean it all up.

Cannot read properties of undefined (reading 'date')

After following all of the steps in the tutorial, I'm getting this error:

> Build error occurred
 
TypeError: Cannot read properties of undefined (reading 'date')
at /workspace/.next/server/chunks/490.js:32:50
at Array.filter (<anonymous>)
at getDatabase (/workspace/.next/server/chunks/490.js:32:20)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async getStaticPaths (/workspace/.next/server/pages/p/[slug].js:515:19)
at async buildStaticPaths (/workspace/node_modules/next/dist/build/utils.js:497:31)
at async /workspace/node_modules/next/dist/build/utils.js:640:119
at async Span.traceAsyncFn (/workspace/node_modules/next/dist/trace/trace.js:75:20) {
type: 'TypeError'
}
 
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 
error Command failed with exit code 1.
 
ERROR: failed to build: exit status 1
 
ERROR: failed to build: executing lifecycle: failed with status code: 51

If for whatever reason my table has any errors, feel free to check it out here: https://n3rd3x3.notion.site/f1faacfd89bd45ce888b5e335245a176?v=7062f5b173344f50bda90c1dda1ba70c

Using `getStaticProps` for fetching images hosted on Notion?

Hi there, apologies for posting this random question here, but I was curious about how you overcame the issue for rendering images hosted on Notion and also using next/image for optimisation? (As I myself ran into a similar problem when switching to Notion's public API for blog hosting.)

  • The problem I ran into was that Notion's public API responds with URLs of images hosted on Notion that are short-lived - they would expire after a certain amount of time (seems to be 1 hour).
  • This means that there would exist a possible time span where ISR is still revalidating but the images have already expired, resulting in broken images for visitors accessing the site during this particular time - and I've personally ran into this for a couple of times over on my site.
  • It also implies that next/image would have to optimise a whole lot of images with different URLs while they are still the same one in reality - leading to an email from Vercel telling me that I have gone over my limit for image optimisation.

It was not until Next.js 12.1 (released literally yesterday) before we could on-demand ISR with webhooks (On-demand Incremental Static Regeneration). So I was curious about if you had some solutions to this issue without on-demand ISR?

My workaround was that I had to resort to using getServerSideProps without image optimisation for serving fresh images. But I skimmed through your repo and found that you were still using getStaticProps, and hence this question ;)

And thanks for the awesome railway.app, I'm loving it!

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.