Skip to content

Commit 9c6ae9b

Browse files
aifrimaifrim
authored
placeholder content (#9)
1 parent e950853 commit 9c6ae9b

7 files changed

Lines changed: 448 additions & 0 deletions

File tree

‎docs/placeholder.mdx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
toc_min_heading_level: 2
3+
toc_max_heading_level: 6
4+
---
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
import TOCInline from '@theme/TOCInline';
8+
import BrowserWindow from '@site/src/components/BrowserWindow';
9+
import IframeWindow from '@site/src/components/BrowserWindow/IframeWindow';
10+
11+
# Placeholder
12+
13+
## Tabs
14+
15+
[Documentation](https://docusaurus.io/docs/markdown-features/tabs)
16+
17+
<Tabs>
18+
<TabItem value="apple" label="Apple" default>
19+
This is an apple 🍎
20+
</TabItem>
21+
<TabItem value="orange" label="Orange">
22+
This is an orange 🍊
23+
</TabItem>
24+
<TabItem value="banana" label="Banana">
25+
This is a banana 🍌
26+
</TabItem>
27+
</Tabs>
28+
29+
## Code Block
30+
31+
[Documentation](https://docusaurus.io/docs/markdown-features/code-blocks)
32+
33+
### Simple
34+
35+
```ts title="example.ts"
36+
function add(a: number, b: number): number {
37+
return a + b;
38+
}
39+
```
40+
41+
And here is some inline code: `const x = 10;`
42+
43+
### With line numbers
44+
45+
```ts title="example.ts" showLineNumbers
46+
function add(a: number, b: number): number {
47+
return a + b;
48+
}
49+
```
50+
51+
### With highlighted lines
52+
53+
#### Highlight line
54+
55+
```ts title="example.ts"
56+
function add(a: number, b: number): number {
57+
// highlight-next-line
58+
return a + b;
59+
}
60+
```
61+
62+
#### Highligh error line
63+
64+
```ts title="example.ts"
65+
function divide(a: number, b: number): number {
66+
// code-block-error-line
67+
return a / b;
68+
}
69+
```
70+
71+
## Admonitions
72+
73+
[Documentation](https://docusaurus.io/docs/markdown-features/admonitions)
74+
75+
:::note
76+
77+
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
78+
79+
:::
80+
81+
:::tip
82+
83+
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
84+
85+
:::
86+
87+
:::info
88+
89+
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
90+
91+
:::
92+
93+
:::warning
94+
95+
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
96+
97+
:::
98+
99+
:::danger
100+
101+
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
102+
103+
:::
104+
105+
### Nested admonitions
106+
107+
:::::info[Parent]
108+
109+
Parent content
110+
111+
::::danger[Child]
112+
113+
Child content
114+
115+
:::tip[Deep Child]
116+
117+
Deep child content
118+
119+
:::
120+
121+
::::
122+
123+
:::::
124+
125+
#### Admonitions with MDX
126+
127+
:::tip[Use tabs in admonitions]
128+
129+
<Tabs>
130+
<TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
131+
<TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
132+
<TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
133+
</Tabs>
134+
135+
:::
136+
137+
## Headings
138+
139+
[Documentation](https://docusaurus.io/docs/markdown-features/headings)
140+
141+
### H3 Lorem ipsum
142+
143+
#### H4 Dolor sit amet
144+
145+
##### H5 Consectetur
146+
147+
###### H6 Sed do eiusmod
148+
149+
### Table of contents
150+
151+
<TOCInline
152+
toc={toc.filter((node) => node.level === 2 || node.level === 4)}
153+
minHeadingLevel={2}
154+
maxHeadingLevel={4}
155+
/>
156+
157+
## Details
158+
159+
[Documentation](https://docusaurus.io/docs/markdown-features#details)
160+
161+
<summary>Click to expand</summary>
162+
<details>
163+
This content is hidden by default.
164+
</details>
165+
166+
## Table
167+
168+
| Syntax | Description | Test |
169+
| ----------- | ----------- | ---- |
170+
| Header | Title | Here's this |
171+
| Paragraph | Text | And more |
172+
| Multiline | Text | And more |
173+
| With breaks | Text | And more |
174+
175+
### Browser
176+
177+
### Browser Window
178+
179+
<BrowserWindow url="https://lttle.cloud/">
180+
181+
Hello world
182+
183+
</BrowserWindow>
184+
185+
### IframeWindow
186+
187+
<IframeWindow url="https://lttle.cloud/" />

‎docusaurus.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,12 @@ export const getConfig = (cfg: LttleDocusaurusConfig): Config => ({
130130
prism: {
131131
theme: prismThemes.github,
132132
darkTheme: prismThemes.dracula,
133+
magicComments: [
134+
{
135+
className: "code-block-error-line",
136+
line: "code-block-error-line",
137+
},
138+
],
133139
},
134140
// TypeSense is configured with the same cfg as Algolia
135141
// But it uses a different search engine (Typesense)

‎sidebars.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ const sidebars: SidebarsConfig = {
1818
type: "doc",
1919
id: "introduction",
2020
},
21+
{
22+
type: "doc",
23+
id: "placeholder",
24+
},
2125
{
2226
type: "category",
2327
label: "Getting Started",

‎src/components/BrowserWindow/IframeWindow.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/website/src/components/BrowserWindow/IframeWindow.tsx
5+
*
6+
* https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/LICENSE
7+
*
8+
* MIT License
9+
*
10+
* Copyright (c) Facebook, Inc. and its affiliates.
11+
*
12+
* Permission is hereby granted, free of charge, to any person obtaining a copy
13+
* of this software and associated documentation files (the "Software"), to deal
14+
* in the Software without restriction, including without limitation the rights
15+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16+
* copies of the Software, and to permit persons to whom the Software is
17+
* furnished to do so, subject to the following conditions:
18+
*
19+
* The above copyright notice and this permission notice shall be included in all
20+
* copies or substantial portions of the Software.
21+
*
22+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28+
* SOFTWARE.
29+
*/
30+
31+
import { type ReactNode } from "react";
32+
33+
import BrowserWindow from "./index";
34+
35+
// Quick and dirty component, to improve later if needed
36+
export default function IframeWindow({ url }: { url: string }): ReactNode {
37+
return (
38+
<div style={{ padding: 10 }}>
39+
<BrowserWindow
40+
url={url}
41+
style={{
42+
minWidth: "min(100%,45vw)",
43+
width: 800,
44+
maxWidth: "100%",
45+
overflow: "hidden",
46+
}}
47+
bodyStyle={{ padding: 0 }}
48+
>
49+
<iframe
50+
src={url}
51+
title={url}
52+
style={{ display: "block", width: "100%", height: 300 }}
53+
/>
54+
</BrowserWindow>
55+
</div>
56+
);
57+
}

‎src/components/BrowserWindow/index.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/website/src/components/BrowserWindow/index.tsx
5+
*
6+
* https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/LICENSE
7+
*
8+
* MIT License
9+
*
10+
* Copyright (c) Facebook, Inc. and its affiliates.
11+
*
12+
* Permission is hereby granted, free of charge, to any person obtaining a copy
13+
* of this software and associated documentation files (the "Software"), to deal
14+
* in the Software without restriction, including without limitation the rights
15+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16+
* copies of the Software, and to permit persons to whom the Software is
17+
* furnished to do so, subject to the following conditions:
18+
*
19+
* The above copyright notice and this permission notice shall be included in all
20+
* copies or substantial portions of the Software.
21+
*
22+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28+
* SOFTWARE.
29+
*/
30+
31+
import clsx from "clsx";
32+
import { type CSSProperties, type ReactNode } from "react";
33+
34+
import styles from "./styles.module.css";
35+
36+
interface Props {
37+
children: ReactNode;
38+
minHeight?: number;
39+
url: string;
40+
style?: CSSProperties;
41+
bodyStyle?: CSSProperties;
42+
}
43+
44+
export default function BrowserWindow({
45+
children,
46+
minHeight,
47+
url = "http://localhost:3000",
48+
style,
49+
bodyStyle,
50+
}: Props): ReactNode {
51+
return (
52+
<div className={styles.browserWindow} style={{ ...style, minHeight }}>
53+
<div className={styles.browserWindowHeader}>
54+
<div className={styles.buttons}>
55+
<span className={styles.dot} style={{ background: "#f25f58" }} />
56+
<span className={styles.dot} style={{ background: "#fbbe3c" }} />
57+
<span className={styles.dot} style={{ background: "#58cb42" }} />
58+
</div>
59+
<div className={clsx(styles.browserWindowAddressBar, "text--truncate")}>
60+
{url}
61+
</div>
62+
<div className={styles.browserWindowMenuIcon}>
63+
<div>
64+
<span className={styles.bar} />
65+
<span className={styles.bar} />
66+
<span className={styles.bar} />
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div className={styles.browserWindowBody} style={bodyStyle}>
72+
{children}
73+
</div>
74+
</div>
75+
);
76+
}

0 commit comments

Comments
 (0)