docs: add custom header and footer component documentation#3478
Conversation
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Assignee Required This PR was opened by Devin AI but the requester's email (info@buildwithfern.com) is not in the username mapping. Please add an assignee manually. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| <Steps> | ||
| ### Create a component file | ||
|
|
||
| Create a TSX or JSX file with a default export that returns your component: |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'TSX' has no definition.
| Custom header and footer components must meet these requirements: | ||
|
|
||
| - The file must have a **default export** returning a React component | ||
| - Use standard React and JSX syntax (TSX or JSX files) |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'TSX' has no definition.
|
🌿 Preview your docs: https://fern-preview-900d30e6-6dcd-4421-ad1b-2d3025cba053.docs.buildwithfern.com/learn Visual changes detected:
|
…ies to site-level settings
| - ./components | ||
| ``` | ||
|
|
||
| Create a TSX or JSX file with a default export: |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'TSX' has no definition.
| } | ||
| ``` | ||
|
|
||
| ## Custom components in MDX |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Headings] 'Custom components in MDX' should use sentence-style capitalization.
| </ParamField> | ||
|
|
||
| <ParamField path="header" type="string" required={false} toc={true}> | ||
| Path to a custom React component file (TSX or JSX) to replace Fern's default header. The component must have a default export. Learn more about [custom header and footer components](/learn/docs/writing-content/custom-react-components#custom-header-and-footer). |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'TSX' has no definition.
| </ParamField> | ||
|
|
||
| <ParamField path="footer" type="string" required={false} toc={true}> | ||
| Path to a custom React component file (TSX or JSX) to replace Fern's default footer. The component must have a default export. Learn more about [custom header and footer components](/learn/docs/writing-content/custom-react-components#custom-header-and-footer). |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'TSX' has no definition.
| - Insert scripts and widgets | ||
|
|
||
| ## Custom components | ||
| ## Custom React components |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[FernStyles.Headings] 'Custom React components' should use sentence-style capitalization.
2 participants
Summary
Documents the new server-side rendered custom header and footer feature from fern-platform#6741.
Changes:
headerandfooterproperty documentation to the site-level settings pageUpdates since last revision
Per feedback, moved the documentation from the custom CSS/JS page to the custom React components page, which is a better fit. Also:
dark:bg-gray-900,dark:text-gray-400)Review & Testing Checklist for Human
headerandfooterdocs.yml configuration syntax matches the actual implementation in fern-platform#6741experimental.mdx-componentsis required for the header/footer feature to work#custom-header-and-footer) resolves correctly on the previewRecommended test plan: Deploy the preview and navigate to
/learn/docs/writing-content/custom-react-components#custom-header-and-footerto verify the new section renders correctly. Also check/learn/docs/customization/custom-css-jsto confirm the old examples are removed and the link to React components works.Notes
Link to Devin run: https://app.devin.ai/sessions/16ddeaa65e924471bb3c20b4afa08c9e
Requested by: Fern Support (info@buildwithfern.com)