Docs - new engine (contentlayer) (#1096)

* refactor: docs - use `contentlayer` [WIP, unstable]

* remove `remark-gfm`

* add: `rehypeSlug, rehypeAutolinkHeadings`

* remove redundant `import React`

* add docs content layout

* flat path

* `next.config` minify with `swc`

* remove unused layout

* add some TODO's

* add back `remark-toc`

* highlight with `prism` on server; avoid flicker + heavy lifting client side work

* remove deprecated mdx components map

* new docs engine [WIP, `alert` only]

* add `CodeDemo` styles from deprecated `CodePreview`

* add TODO:

* `CodeDemo` render tabs dynamically

* fix eslint errors

* undo

* refactor: `CodeDemo` tabs; add active state + hover effect

* ++ accesibility

* docs.content: add `githubSlug`

* extend `CodeHighlight` languages type

* refactor docs layout; render table-of-contents on server (fixes flicker)

* move code from `layout` into `page`, simplify flow and DX

* fix alert.all-options content

* fix: add `Mdx` fallback for `<Example />` and `<Theme />` custom components in case of not found

* fix `Mdx` fallback for `<Example />` #2

* fix: docs - avatar

* refactor props sturcture of `CodeDemo`

* extend `CodeDemo` to support variants

* update all instances of `CodeData` for variants support; add `type` property

* `CodeData` display variants and handle select

* `CodeData` show variant select if variants exist

* cleanup `*.css` imports

* `CodeData` enforce min 1 elements when array structure

* `CodeData` add type `variant` inference

* remove redundant `'use client'`

* refactor:
- landing page: make it full RSC
- move landing page sections into own files, allowing for server/client toggling individually + fetch data on server [less JS bundle size to client]
- remove `<Flowbite>` wrapper since its redundant now
- split `.css` files and move them to `styles/`
- create `DocSearch` abstraction [less copy-paste]

* add TODO

* docs page cleanup; co-locate more

* rename doc-search to docsearch, keep consistent

* rename `landing -> homepage`

* deprecate old table-of-contents in .mdx files

* fix: docs - accordion

* fix: docs - badge

* fix: docs - breadcumb

* fix: docs - navbar

* fix typo

* fix: docs - footer

* fix: docs - timeline

* fix: docs - list group

* fix: docs - table

* fix typo

* fix: docs - progress

* fix: docs - progress #2

* fix: docs - banner

* fix: docs - rating

* fix: docs - button group

* fix: docs - spinner

* fix: docs - floating label

* cleanup `tailwind.config`

* fix: docs - sidebar

* fix eslint

* fix: docs - tooltip

* fix: docs - tabs

* fix: docs - toast

* change `githubSlug` to link to demo file instead of root .mdx file

* fix: docs - kbd

* add `/examples` folder to tailwind config

* cleanup

* fix docs layout styles

* fix `kbd` component style: remove `mr-1` from theme and adjust docs

* docs - remove `banner` theme until its ready

* fix: docs - pagination; fix range, now shows even if its 1 page

* fix: docs - datepicker

* fix: docs - modal

* fix: docs - carousel

* update `examples` index

* fix: docs - dropdown

* fix: docs - button

* fix: docs - blockquote

* fix: docs - forms

* 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

* fix self closing tags

* fix: docs - card

* cleanup: add client/server versions for first iterations of docs (before multi-tab was implemented); rename `dismissable` to `dismissible`; rename burger-case file names to camelCase for easier DX name matching (mdx file -> tsx file -> exported variable name)

* remove `'use client';` from docs single import example since its Next.js specific for now, and RSC support is here + code examples reflect if `'use client';` is needed or not

* remove deprecated `CodePreview` component

* remove unused packages

* enhance `CodeDemo`: show expand/collapse button only when height goes beyond max-h overflow (done in SSR, no flicker)

* enhance `CodeDemo`: expand/collapse - take padding into account

* move `components` to root level

* move `data` to root level

* fix linting errors; disable `react/no-unescaped-entities` eslint rule

* pagination helpers: revert change causing test failure

* fix: add `data` folder to tailwind content paths due to `classes` key in `Component` interface

NOTE: maybe handle classes in the card component with `aspectRatio` or something

---------

Co-authored-by: Sebastian Sutu <[email protected]>

Author: SutuSebastian

.gitignore

@@ -13,3 +13,4 @@ tsconfig.tsbuildinfo
 yarn-debug.log*
 yarn-error.log*
 dist
+.contentlayer

.prettierignore

@@ -15,4 +15,5 @@ storybook-static
 npm-debug.log*
 tsconfig.tsbuildinfo
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+.contentlayer

README.md

@@ -127,7 +127,7 @@ module.exports = {
 
 How you use Flowbite React depends on your project setup. In general, you can just import the components you want to use from `flowbite-react` and use them in a React `.jsx` file:
 
-```jsx
+```tsx
 import { Button } from 'flowbite-react';
 
 export default function MyPage() {