🧨 (revamp) NICE-43 Next RSC, Notion API, & Tailwind [b] [!]

[JeromeFitz]

⚠️ Please Note

This is a bit bigger than I would want, but this is a complete refactor to better utilize a Notion CMS within a Next 13 App structure taking advantage of RSC. And then for good measure started the migration back to Tailwind (but now I think Stitches|Vanilla Extract are oaky with Next 13).

✨ NICE-43 revamp Next RSC, Notion API, & Tailwind

BREAKING CHANGE: New Notion Implementation through Next 13 RSC (App)

Complete Refactor for Next RSC

• Redis KV Cache

  • Good for quicker Vercel builds / and reducing Notion random limits
  • Next will still limit due to deduplicated requests
    • Sidenote: Need to get better at not prop-drilling and just calling function again

• Image Component

  • Next Refactor
  • Notion Refactor

• Tailwind

  • Move away from Stitches
  • Temporary move to @jeromefitz/ds localized version
  • Radix UI Refactor
  • Use internal Component Library for now

• Notion Refactor

  • Image: Hosted by Notion Expiration Refresh
  • Rely less on custom queries and manipulation, more on out of the box Notion API, React, and Next
    • Move from nodes to more straight-forward components
    • Refactor logic for
      • Column|ColumnList
      • ListBulleted|ListItem|ListNumbered
      • TextAnnotations
    • New: Embed|Video
      • Embed.Twitter <= Twitter is self-imploding, so good timing.
      • Embed.YouTube <= YouTube is ... no comment.

• Next

  • preload => hold on this for now not working as expected
  • generateMetadata => move away from next-seo (rip)
    • Need to re-incorporate @vercel/og -- or not temporarily.
  • generateStaticParams => hack if isDev to stop running all the time :?
  • not-found => Instead of customizing every route, use notFound()
  • robots.ts|sitemap.ts => move away from next-sitemap (rip)

• Package Upgrades

  • Basically everything except plaiceholder|semantic-release|syncpack

• Other refactors

  • EmojiWrapper
  • Config Packages
    • ./packages/* – this all needs to be ported to @jeromefitz/packages
      • Was borderline impossible to do these in-tandem (need to get better at pnpm linking)

• Fathom advises against custom domains now :/

Layout

Not to be lost in the backend type stuff but this is a complete rehaul of presentation.

The eventual goal of this Notion + Next implementation is you can take the data in any way and display it as you would like. For now though still tightly coupled with a lot of decisions until I can abstract away further. Which -- at teh rate I am going may never happen.

Notion

Do not "normalize" data from Notion, embrace it.

• This is the CMS why are we going through all the trouble to hack it
• Create new Block Components to match and mimic needs

Formulas

The "big change" here is utilizing Notion Formulas in the CMS.

Slug

Before we had Slug now we populated Slug.Preview where we are able to have Notion mimic Routes better Server Side than figuring it all out on the fly in next.

Note: For Events we need to manually write the Slug for now. The potential clash of having multiple Headline Acts means we could have a url like:

• ../jerome-and,alex-o-jerome

Which I think could work because we could loop through but also very confusing as a URL to share, haha.

To recap:

• Slug.Preview for example will create the matching Next Segment Route
  • Before: jerome-and (shows); After: /shows/jerome-and
  • Before: jerome-and (events); After: /events/2023/06/16/jerome-and
  • Before: homepage (pages); After: /

Date

Same here, instead of getting the data from Notion then running through date-fns, Notion uses moment (I think). So we can do more preparation which makes for a more straight-forward:

- Date: July 15, 2023 9:00PM
- Date.DayOfMonth: 15
- Date.DayOfMonthOrdinal: 15th
- Date.DayOfWeek: Saturday
- Date.DayOfWeekAbbr: Sat
- Date.DaysUntilEvent: 15
- Date.HoursUntilEvent: 360
- Date.ISO: 2023-07-15T21:00:00-04:00
- Date.Month: 07
- Date.MonthName: July
- Date.MonthNameAbbr: Jul
- Date.Time: 09:00 PM
- Date.Timezone: EDT
- Date.WeekNumber: 28
- Date.Year: 2023

Next

App

The gains of doing [[...catchAll]] for everything at root was not worth it. 😅

Especially if we want to be able to change layout, RSC data points and more based on the Segment (Notion Database Type).

So there is some duplication of code throughout but will look into better ways of lifting the "same" stuff.

Events

Ability to see a range of events depending on Date (say for a week, or a weekend):

• events/yyyy/mm/dd/to/yyyy/mm/dd
• events/2023/06/29/to/2023/07/02

Props to Katie T. as we came up with this idea in a brainstorm session.

• events/[from]/to/[to]
• events/2023/06/15/to/2023/06/18 (THU-SUN)
• events/2023/06/29/to/2023/05/01 (Across Months)
• events/2023/12/28/to/2025/01/07 (Across Years)

Probably need to do something for malformed dates, but I reckon 404 will do that.

Up next would be ideas for Landing Pages.

In-House

next-seo and next-sitemap will eventually be absorded, or their functionality at least, within next itself. This gets the ball rolling on that. They were awesome, and thank you.

Depending on your use case those will still be very valid for use!

Packages

This just covers the sites/jeromefitzgerald.com for now

Upgrade:

@mantine/[email protected]
@notionhq/[email protected]
@radix-ui/...@latest
@upstash/[email protected]
@vercel/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

@types/[email protected]
@types/[email protected]
@types/[email protected]
@types/[email protected]
[email protected]

Add:

[email protected]
[email protected]
[email protected] # use framer-motion instead
[email protected] # 3.x has no release notes

@types/[email protected]

Remove:

next-seo
next-sitemap
next-unused

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
jeromefitzgerald	❌ Failed (Inspect)		Jul 2, 2023 5:54pm

[JeromeFitz]

• Remove Vercel Bot do not want it to run before the checks
• Add new Environment Variables to GitHub|Vercel 😑
  • And of course now not 100% how to multi-site again without making these not environment variables 🤣

[JeromeFitz]

Okay calling it here so I can then break out the rest of the work into smaller PRs. Anything not finished in the checklist will be a to-do.

• generateMetaData hook up with @vercel/og is biggest missing piece (to me).
• inter4@beta
• refactor away from app/(notion)/(utils) to either next-notion or @jeromefitz/notion
• refactor away from customized packages/... and move to packages monorepo
• better documentation
• really like e2e testing but ... it is like 10 minutes on GitHub a bit much for this project (and more POC than anything)

And then as I go over this one last time (this is months in the making heh):

• Not a fan of getPropertyTypeData currently
  • Make a decision on how data is returned per notion type
  • Possible to not just create a new object for later? Slug.Preview => href, Date.ISO => dateIso, and so on.
    • Or "automate" it -- btu ideally if someone set up [Notion-DB].types they could re-use that for type validation instead of re-creating it twice (but ... I truly digress here I don't think anyone else uses this, haha)

Kind of wish I put this as canary as I could promote to Production manually from Vercel and keep away from main.

But I digress.

[BotJerome]

This pull request has been deployed to Vercel.

Latest commit:	d7bb5da
✅ Preview:	https://jeromefitzgerald-k1g7ot85p-jerome5.vercel.app
🔍 Inspect:	https://vercel.com/jerome/jeromefitzgerald/FyMnE6XDDusxuH61T2rmtJ66p7G2

View Workflow Logs