diff --git a/code/mdx-content-controller.mdx b/code/mdx-content-controller.mdx deleted file mode 100644 index 88881cc2b..000000000 --- a/code/mdx-content-controller.mdx +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: "MDXContentController" -description: "Documentation for MDXContentController, useMDXContentController, MDXContentContext, useMDXContent and MDXContentReducer" ---- - -## Summary - -MDXContentController is a component that combines state and components required to display MDXContent, Headers, -Footers, and other additional content. - -## State - -The state of MDXContentController is managed in `useMDXContentController`. - - - -```tsx MDXContentController -const ctx = useMDXContentController(props); -``` - -```tsx MDXContentControllerState -export type MDXContentControllerState = { - apiBaseIndex: number; - apiComponents: ApiComponent[]; - openApiPlaygroundProps: OpenApiPlaygroundProps; - pageMetadata: PageMetaTags; - isApi: boolean; - isBlogMode: boolean; - requestExample?: ReactNode; - responseExample?: ReactNode; - apiPlaygroundInputs: Record; - tableOfContents: TableOfContentsSection[]; - headings: HeadingType[]; - currentSection: string | undefined; -}; -``` - -```tsx MDXContentState -export type MDXContentState = MDXContentControllerState & - ApiPlaygroundType & - ParamGroupsType & - ContentWidthType; -``` - - - -### Hooks - -`useMDXContentController` triggers state updates and returns a `MDXContentContext` object. -Hooks that affect `MDXContentState` are called from `useMDXContentController`. - -`useMDXContentController` calls other hooks that update state. - -New hooks can be added next to the existing ones in `useMDXContentController` or in a child component. - - - Hooks, that should be called once in the tree or that are not exclusive to a - child component, should be added to `useMDXContentController`. - - -`eslint-plugin-react-hooks` should automatically check [these](https://reactjs.org/docs/hooks-rules.html) rules. - - - Be careful not to introduce infinite loops when updating dependency arrays in - any hook that involves complex state. - - -### Usage - -Child components of `MDXContentContext.Provider` can access `state` and `dispatch` through `useMDXContent`. - -Use `useMDXContent` to access the existing context. - - - -```tsx useMDXContent -const [state, dispatch] = useMDXContent(); -``` - -```tsx MDXContentController -export function MDXContentController({ - children, - ...props -}: MDXContentControllerProps) { - const ctx = useMDXContentController(props); - return ( - - ... - {children} - ... - - ); -} -``` - - - -### Context - -The state is part of `MDXContentContext`, -which consists of `MDXContentState` and a `dispatch` function that takes an action. - - - Adding a new `MDXContentActionEnum` and a `MDXContentAction` can be done in - `MDXContentContext`. - - -An Action consists of a `MDXContentActionEnum`, used to determine the Action type, and a payload. - -Handling state logic of all defined actions is required. - -In `MDXContentReducer` the state update logic has to be handled for every action type, -that has been added, otherwise there will be errors in the `MDXContentReducer` declaration. - - - -```tsx MDXContentActionEnum -/** -* Enumeration of action types that can be dispatched in MDXContentReducer. -*/ -export enum MDXContentActionEnum { - SET_STATE, - SET_API_BASE_INDEX, - SET_IS_API, - // other action types - ... -} -``` - -```tsx MDXContentAction -/** -* Actions that can be dispatched in the MDXContentReducer. -*/ -export type MDXContentAction = -| { type: MDXContentActionEnum.SET_STATE; payload: Partial } -| { type: MDXContentActionEnum.SET_API_BASE_INDEX; payload: number } -// other actions -... -``` - - - -### Reducer - -`MDXContentReducer` consolidates state and update logic of MDXContentController. - -| Param | Description | Type | -| -------- | ------------------------ | ------------------ | -| `State` | current state | `MDXContentState` | -| `Action` | state action to dispatch | `MDXContentAction` | - -Returns the updated `MDXContentState`. - - - A - [Reducer](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer) - is used to extract all state logic. - - -The state can be updated through `MDXContentReducer`'s dispatch function with actions defined in the `MDXContentAction` type. - - - -```tsx dispatch -dispatch({ - type: MDXContentActionEnum.SET_STATE, - payload: newState, -}); -``` - -```tsx MDXContentReducer -/** -* Consolidates state and update logic of MDXContentController. -* @param state - current state. -* @param action - state action to dispatch. -* @returns MDXContentState - new state. -*/ -export const MDXContentReducer: Reducer = ( - state: MDXContentState, - action -) => { - const type = action.type; - switch (type) { - case MDXContentActionEnum.SET_STATE: - return { - ...state, - ...action.payload, - }; - // other cases - ... - } -}; - -export const useMDXContentReducer = () => useReducer(MDXContentReducer, initialState); -``` - -```tsx MDXContentContext -export type MDXContentContextType = ReturnType; - -export const MDXContentContext = createContext([ - initialState, - () => null, -]); -``` - - - -### Debugging - -A `console.log` or breakpoint at the start of `MDXContentReducer` can be helpful with debugging the state. - -```tsx -console.log(MDXContentActionEnum[action.type],action.payload) -``` diff --git a/component-library.mdx b/component-library.mdx deleted file mode 100644 index c7ff82037..000000000 --- a/component-library.mdx +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'Components' -description: 'Enhance your docs with our pre-built components ' ---- - -Mintlify provides a library of built-in components to make your docs beautiful without formatting things yourself. They can be added **directly within your files**. Some components are rendered from [Markdown syntax](https://www.markdownguide.org/basic-syntax/), while other components work the same way as [React components](https://reactjs.org/docs/components-and-props.html). - - - Customize the style of components with [Tailwind - CSS](https://tailwindcss.com/). Simply add `className="tailwind styles"` onto - the component. - - -## Examples - -### Code Blocks - -The following example is a [Code](/content/code) component, which lets you display syntax-highlighted code. - -```java -class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } -} -``` - -It's rendered using the following code. - -````md -```java -class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } -} -``` -```` - -### Callouts - -To present additional context outside of the main content, you can use a [Callout](/content/components/callouts) component. Find Warnings and Notes in addition to Tip callouts here. - -This suggests a helpful tip - -```md -This suggests a helpful tip -``` - -### Accordions - -Use the [Accordian](/content/components/accordion) component to create a dropdown with additional content. - - - You can put any content in here. - - -```md - - You can put any content in here. - -``` - -### Cards - -To highlight important points and links, you can use a [Card](/content/components/cards) component. - - - This is how you use a card with an icon and a link. Clicking on this card - brings you to the Card components page. - - -```md - - This is how you use a card with an icon and a link. Clicking on this card - brings you to the Card components page. - -``` - -### Other - -For a full list of pre-built components, see our [Components library](/content/components). You can also contribute to our components in our [repository](https://github.com/mintlify/components). - -### Requests - -If there are any components that you would like to have but aren't currently available, contact our team at [support@mintlify.com](mailto:support@mintlify.com).