Admin Docs
If you are a user, you are in the wrong place
The documentation here has a couple conversions from mkdocs items to JSX components.
HTML
You might want to use HTML for more control over your content. Here are some examples of how to do that.
Inline Styling
You can use inline styling in HTML tags. Remember to use double curly braces for style in JSX.
<p style={{color: 'blue', fontSize: '20px'}}>This is a blue paragraph with a font size of 20px.</p>
This is a blue paragraph with a font size of 20px.
Style Blocks
You can use HTML in MDX files. Here is a example of a styled table using the style block. Note the use of the
<style jsx> tag to add styles to the table, which is wrapped with { and } to escape the {} which are used in JSX.<style jsx>{`
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
th, td {
border: 1px solid red;
padding: 8px;
text-align: left;
}
th {
background-color: green;
}
tr:nth-child(even) {
background-color: purple;
}
`}</style>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</tbody>
</table>
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
Style Sheets
You can also create a CSS file in the
public folder and import it into your MDX file.// Colors divs with the custom class yellow
// Note the use of the @ symbol to reference the public folder
import '@/public/styles/custom-example.css';
<div className="custom-class">
This div is styled using a custom CSS file.
</div>
This div is styled using a custom CSS file.
Image
Images are the same, drop them into the
/public/docs folder and reference them using the /docs/ prefix.MDX
HTML
Or you can use HTML for more control. Remember to use double curly braces for style in JSX.
<img src="/docs/file.svg" alt="Image title" style={{height: '30px', width: 'auto'}} />
Alert ( Admonitions )
Previous
!!! warning "This may take a few minutes"
Wait patiently while your server starts. If it takes more than 10 minutes, try refreshing the page or logging out and back in. Wait times may be longer during peak usage periods.
Now
Now you have to use the (Alert component)[https://mui.com/material-ui/react-alert/].
Basic
import Alert from "@mui/material/Alert";
// sx={{ mb: 3 }} adds margin to the bottom to space things out
<Alert severity="info" sx={{ mb: 3 }}>
This is an info alert — check it out!
You can put any markdown content in here, including **bold text**, _italic text_, and [links](https://example.com).
</Alert>
Advanced
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import WhatshotIcon from '@mui/icons-material/Whatshot'; // Find more here: https://mui.com/material-ui/material-icons/
<Alert severity="info" icon={<WhatshotIcon color="info" />} sx={{ mb: 3 }}>
<AlertTitle>Questions or Concerns?</AlertTitle>
See the "Policies" section of the community <a href={"https://example.com"} target={'_blank'}>Discourse forum</a>.
</Alert>
// This is a custom component but takes the same props as Alert but it hides the content until clicked
import AlertDropDown from "@/components/AlertDropDown";
<AlertDropDown title="Click to expand" severity="info">
This is the hidden content that shows when you click to expand. You can put any markdown content in here, including **bold text**, _italic text_, and [links](https://example.com).
</AlertDropDown>
