diff --git a/docs/placeholder.mdx b/docs/placeholder.mdx new file mode 100644 index 0000000..8507698 --- /dev/null +++ b/docs/placeholder.mdx @@ -0,0 +1,187 @@ +--- +toc_min_heading_level: 2 +toc_max_heading_level: 6 +--- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import TOCInline from '@theme/TOCInline'; +import BrowserWindow from '@site/src/components/BrowserWindow'; +import IframeWindow from '@site/src/components/BrowserWindow/IframeWindow'; + +# Placeholder + +## Tabs + +[Documentation](https://docusaurus.io/docs/markdown-features/tabs) + + + + This is an apple 🍎 + + + This is an orange 🍊 + + + This is a banana 🍌 + + + +## Code Block + +[Documentation](https://docusaurus.io/docs/markdown-features/code-blocks) + +### Simple + +```ts title="example.ts" +function add(a: number, b: number): number { + return a + b; +} +``` + +And here is some inline code: `const x = 10;` + +### With line numbers + +```ts title="example.ts" showLineNumbers +function add(a: number, b: number): number { + return a + b; +} +``` + +### With highlighted lines + +#### Highlight line + +```ts title="example.ts" +function add(a: number, b: number): number { + // highlight-next-line + return a + b; +} +``` + +#### Highligh error line + +```ts title="example.ts" +function divide(a: number, b: number): number { + // code-block-error-line + return a / b; +} +``` + +## Admonitions + +[Documentation](https://docusaurus.io/docs/markdown-features/admonitions) + +:::note + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::tip + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::info + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::warning + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::danger + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +### Nested admonitions + +:::::info[Parent] + +Parent content + +::::danger[Child] + +Child content + +:::tip[Deep Child] + +Deep child content + +::: + +:::: + +::::: + +#### Admonitions with MDX + +:::tip[Use tabs in admonitions] + + + This is an apple 🍎 + This is an orange 🍊 + This is a banana 🍌 + + +::: + +## Headings + +[Documentation](https://docusaurus.io/docs/markdown-features/headings) + +### H3 Lorem ipsum + +#### H4 Dolor sit amet + +##### H5 Consectetur + +###### H6 Sed do eiusmod + +### Table of contents + + node.level === 2 || node.level === 4)} + minHeadingLevel={2} + maxHeadingLevel={4} +/> + +## Details + +[Documentation](https://docusaurus.io/docs/markdown-features#details) + +Click to expand +
+This content is hidden by default. +
+ +## Table + +| Syntax | Description | Test | +| ----------- | ----------- | ---- | +| Header | Title | Here's this | +| Paragraph | Text | And more | +| Multiline | Text | And more | +| With breaks | Text | And more | + +### Browser + +### Browser Window + + + +Hello world + + + +### IframeWindow + + diff --git a/docusaurus.ts b/docusaurus.ts index c2fa52d..eb3a420 100644 --- a/docusaurus.ts +++ b/docusaurus.ts @@ -130,6 +130,12 @@ export const getConfig = (cfg: LttleDocusaurusConfig): Config => ({ prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, + magicComments: [ + { + className: "code-block-error-line", + line: "code-block-error-line", + }, + ], }, // TypeSense is configured with the same cfg as Algolia // But it uses a different search engine (Typesense) diff --git a/sidebars.ts b/sidebars.ts index fb96888..673f630 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -18,6 +18,10 @@ const sidebars: SidebarsConfig = { type: "doc", id: "introduction", }, + { + type: "doc", + id: "placeholder", + }, { type: "category", label: "Getting Started", diff --git a/src/components/BrowserWindow/IframeWindow.tsx b/src/components/BrowserWindow/IframeWindow.tsx new file mode 100644 index 0000000..bde63ce --- /dev/null +++ b/src/components/BrowserWindow/IframeWindow.tsx @@ -0,0 +1,57 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/website/src/components/BrowserWindow/IframeWindow.tsx + * + * https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/LICENSE + * + * MIT License + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { type ReactNode } from "react"; + +import BrowserWindow from "./index"; + +// Quick and dirty component, to improve later if needed +export default function IframeWindow({ url }: { url: string }): ReactNode { + return ( +
+ +