Docs - new engine (contentlayer)

[SutuSebastian]

• I have followed the Your First Code Contribution section of the Contributing guide

Summary

An overall improvement of the code structure, homepage and docs page, with a big emphasis on DX.

Changes

• rewrite docs to use https://contentlayer.dev/
  • all docs content was moved to content/docs
    • mdx files now have required variables: title and description that are used as page meta tags
  • convert to RSC - fixes flicker on code blocks and table-of-contents (check video below)
    • pre-generate all docs pages at build-time, serving already cached versions of them
  • highlight code on server, let the client only take care of the styling
  • replace random examples links with mock link of # - avoid random page change and loss of context resulting in bad UX when navigating the app for something specific -> reduce bounce rate
  • cleanup all mdx files and extract code demos to examples (I know, I know, lots of files, but u'll thank me later)
    • pros:
      • full type-safe environment
      • better code structure and isolation leading to improved DX (and this is crucial for contributors)
      • full RSC support where the case allows (eg: rendering Alert demo) resulting in less JS bundle for the client to download and execute (previously impossible)
      • all code examples (raw) are now formatted using the same formatting rules as the repo
      • all code examples have 2 tabs (client.tsx, server.tsx) that are RSC friendly, those that are only client will only have the client.tsx tab, there are two reasons why:
        • 1. the component is capable of RSC but has onClick, onSubmit (etc) props passed to it which require the component to be client
        • 2. the component is not capable of RSC (requires by default client props such as: onClick, onSubmit, etc)
• refactor homepage to be full RSC (removes flicker)
  • fetch all metadata on server
  • move landing page sections into own files, allowing for server/client toggling individually
• remove mr-1 from kbd component
• rewrite CodePreview (now named CodeDemo) to support multiple tabs + multiple variants (check screenshots below)
  • show expand/collapse button only when height goes beyond max-h overflow (done in SSR, no flicker)
• move app/components to components (root)
• move app/data to data (root)
• cleanup unused/redundant code
• cleanup *.css imports
• remove <Flowbite> wrapper since its redundant now
• split .css files and move them to styles/
• create DocSearch abstraction [less copy-paste]
• remove unused packages

Result

Homepage - Before/After

Before

Screen.Recording.2023-10-31.at.17.38.27.mov

Screen.Recording.2023-10-31.at.17.39.30.mov

After

Screen.Recording.2023-10-31.at.17.39.57.mov

Screen.Recording.2023-10-31.at.17.39.47.mov

Docs - Before/After

Before

Screen.Recording.2023-10-31.at.17.36.33.mov

After

Screen.Recording.2023-10-31.at.17.37.09.mov

Usage - Docs

mdx files

code examples structure

output

Code demo - multiple tabs

Screen.Recording.2023-10-31.at.17.45.43.mov

Build output differences

Before

After

mdx files downsize

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2023 5:41pm

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7461173) 99.54% compared to head (144eb08) 93.56%.
Report is 129 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1096      +/-   ##
==========================================
- Coverage   99.54%   93.56%   -5.99%     
==========================================
  Files         163      205      +42     
  Lines        6621     8546    +1925     
  Branches      401      468      +67     
==========================================
+ Hits         6591     7996    +1405     
- Misses         30      550     +520     

see 133 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rluders]

lgtm