Skip to content

Commit 5f97a6b

Browse files
jamiehensonclaude
jamiehenson
and
claude
committed
temp: add test page for admonitions and tables
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 2326675 commit 5f97a6b

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed

‎src/pages/docs/test-mdx-components.mdx‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: "MDX Components Test Page"
3+
meta_description: "Test page for showcasing Admonition and Table components in MDX templates"
4+
meta_keywords: "MDX, components, testing, admonitions, tables"
5+
---
6+
7+
This is a test page to showcase the new **Admonition** and **Table** components available in our MDX templates.
8+
9+
## Admonition Components
10+
11+
### Blue Admonition (Default)
12+
13+
<Admonition variant="blue" title="Note">
14+
The machine on which you are running your auth server should have an accurate clock, as tokens and Timekeepers contain a timestamp. You can use an NTP daemon, or if you are not able to control your server's clock, you can wish to use the querytime auth option.
15+
</Admonition>
16+
17+
### Green Admonition
18+
19+
<Admonition variant="green" title="Further reading">
20+
The machine on which you are running your auth server should have an accurate clock, as tokens and Timekeepers contain a timestamp. You can use an NTP daemon, or if you are not able to control your server's clock, you can wish to use the querytime auth option.
21+
</Admonition>
22+
23+
### Red Admonition
24+
25+
<Admonition variant="red" title="Important">
26+
The machine on which you are running your auth server should have an accurate clock, as tokens and Timekeepers contain a timestamp. You can use an NTP daemon, or if you are not able to control your server's clock, you can wish to use the querytime auth option.
27+
</Admonition>
28+
29+
### Yellow Admonition
30+
31+
<Admonition variant="yellow" title="Category">
32+
The machine on which you are running your auth server should have an accurate clock, as tokens and Timekeepers contain a timestamp. You can use an NTP daemon, or if you are not able to control your server's clock, you can wish to use the querytime auth option.
33+
</Admonition>
34+
35+
### Neutral Admonition
36+
37+
<Admonition variant="neutral" title="Category">
38+
The machine on which you are running your auth server should have an accurate clock, as tokens and Timekeepers contain a timestamp. You can use an NTP daemon, or if you are not able to control your server's clock, you can wish to use the querytime auth option.
39+
</Admonition>
40+
41+
### Admonition without Custom Title
42+
43+
<Admonition variant="blue">
44+
This admonition doesn't have a custom title, so it won't display a bold header.
45+
</Admonition>
46+
47+
---
48+
49+
## Table Components
50+
51+
### Standard Markdown Table (GFM Syntax)
52+
53+
This uses GitHub Flavored Markdown syntax, which should be rendered with our new Table components:
54+
55+
| Character name | Episodes | Status |
56+
|----------------|----------|--------|
57+
| Ned Stark | 1-9 | Dead |
58+
| Jon Snow | 1-55 | Alive |
59+
| Hodor | 1-37 | Dead |
60+
| The Mountain | 1-27 | Dead |
61+
| Tyrion Lannister | 1-55 | Alive |
62+
63+
### Custom Table using JSX Syntax
64+
65+
This demonstrates using the Table component directly with the Radix Themes-style composition:
66+
67+
<Table.Root>
68+
<Table.Header>
69+
<Table.Row>
70+
<Table.Head>Character name</Table.Head>
71+
<Table.Head>Episodes</Table.Head>
72+
<Table.Head>Status</Table.Head>
73+
</Table.Row>
74+
</Table.Header>
75+
<Table.Body>
76+
<Table.Row>
77+
<Table.Cell>Ned Stark</Table.Cell>
78+
<Table.Cell>1-9</Table.Cell>
79+
<Table.Cell>Dead</Table.Cell>
80+
</Table.Row>
81+
<Table.Row>
82+
<Table.Cell>Jon Snow</Table.Cell>
83+
<Table.Cell>1-55</Table.Cell>
84+
<Table.Cell>Alive</Table.Cell>
85+
</Table.Row>
86+
<Table.Row>
87+
<Table.Cell>Hodor</Table.Cell>
88+
<Table.Cell>1-37</Table.Cell>
89+
<Table.Cell>Dead</Table.Cell>
90+
</Table.Row>
91+
<Table.Row>
92+
<Table.Cell>The Mountain</Table.Cell>
93+
<Table.Cell>1-27</Table.Cell>
94+
<Table.Cell>Dead</Table.Cell>
95+
</Table.Row>
96+
<Table.Row>
97+
<Table.Cell>Tyrion Lannister</Table.Cell>
98+
<Table.Cell>1-55</Table.Cell>
99+
<Table.Cell>Alive</Table.Cell>
100+
</Table.Row>
101+
</Table.Body>
102+
</Table.Root>
103+
104+
### Table with More Complex Content
105+
106+
<Table.Root>
107+
<Table.Header>
108+
<Table.Row>
109+
<Table.Head>Feature</Table.Head>
110+
<Table.Head>Description</Table.Head>
111+
<Table.Head>Availability</Table.Head>
112+
</Table.Row>
113+
</Table.Header>
114+
<Table.Body>
115+
<Table.Row>
116+
<Table.Cell>**Realtime Messaging**</Table.Cell>
117+
<Table.Cell>Pub/Sub messaging with presence and history</Table.Cell>
118+
<Table.Cell>All plans</Table.Cell>
119+
</Table.Row>
120+
<Table.Row>
121+
<Table.Cell>**LiveSync**</Table.Cell>
122+
<Table.Cell>Database synchronization in realtime</Table.Cell>
123+
<Table.Cell>Enterprise</Table.Cell>
124+
</Table.Row>
125+
<Table.Row>
126+
<Table.Cell>**Spaces**</Table.Cell>
127+
<Table.Cell>Collaborative environments with avatars and cursors</Table.Cell>
128+
<Table.Cell>Pro and above</Table.Cell>
129+
</Table.Row>
130+
</Table.Body>
131+
</Table.Root>
132+
133+
### Table without Header Row
134+
135+
This demonstrates a table with no header, showing that the top corners are properly rounded:
136+
137+
<Table.Root>
138+
<Table.Body>
139+
<Table.Row>
140+
<Table.Cell>Ned Stark</Table.Cell>
141+
<Table.Cell>1-9</Table.Cell>
142+
<Table.Cell>Dead</Table.Cell>
143+
</Table.Row>
144+
<Table.Row>
145+
<Table.Cell>Jon Snow</Table.Cell>
146+
<Table.Cell>1-55</Table.Cell>
147+
<Table.Cell>Alive</Table.Cell>
148+
</Table.Row>
149+
<Table.Row>
150+
<Table.Cell>Hodor</Table.Cell>
151+
<Table.Cell>1-37</Table.Cell>
152+
<Table.Cell>Dead</Table.Cell>
153+
</Table.Row>
154+
<Table.Row>
155+
<Table.Cell>Tyrion Lannister</Table.Cell>
156+
<Table.Cell>1-55</Table.Cell>
157+
<Table.Cell>Alive</Table.Cell>
158+
</Table.Row>
159+
</Table.Body>
160+
</Table.Root>

0 commit comments

Comments
 (0)