placeholder content

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)
+
+<Tabs>
+  <TabItem value="apple" label="Apple" default>
+    This is an apple 🍎
+  </TabItem>
+  <TabItem value="orange" label="Orange">
+    This is an orange 🍊
+  </TabItem>
+  <TabItem value="banana" label="Banana">
+    This is a banana 🍌
+  </TabItem>
+</Tabs>
+
+## 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]
+
+<Tabs>
+  <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
+</Tabs>
+
+:::
+
+## 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
+
+<TOCInline
+  toc={toc.filter((node) => node.level === 2 || node.level === 4)}
+  minHeadingLevel={2}
+  maxHeadingLevel={4}
+/>
+
+## Details
+
+[Documentation](https://docusaurus.io/docs/markdown-features#details)
+
+<summary>Click to expand</summary>
+<details>
+This content is hidden by default.
+</details>
+
+## 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
+
+<BrowserWindow url="https://lttle.cloud/">
+
+Hello world
+
+</BrowserWindow>
+
+### IframeWindow
+
+<IframeWindow url="https://lttle.cloud/" />

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)

sidebars.ts

@@ -18,6 +18,10 @@ const sidebars: SidebarsConfig = {
       type: "doc",
       id: "introduction",
     },
+    {
+      type: "doc",
+      id: "placeholder",
+    },
     {
       type: "category",
       label: "Getting Started",

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 (
+    <div style={{ padding: 10 }}>
+      <BrowserWindow
+        url={url}
+        style={{
+          minWidth: "min(100%,45vw)",
+          width: 800,
+          maxWidth: "100%",
+          overflow: "hidden",
+        }}
+        bodyStyle={{ padding: 0 }}
+      >
+        <iframe
+          src={url}
+          title={url}
+          style={{ display: "block", width: "100%", height: 300 }}
+        />
+      </BrowserWindow>
+    </div>
+  );
+}

src/components/BrowserWindow/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * https://github.com/facebook/docusaurus/blob/3dacdf33c9eeec14a1e7ca05f9dc83a69d8fd506/website/src/components/BrowserWindow/index.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 clsx from "clsx";
+import { type CSSProperties, type ReactNode } from "react";
+
+import styles from "./styles.module.css";
+
+interface Props {
+  children: ReactNode;
+  minHeight?: number;
+  url: string;
+  style?: CSSProperties;
+  bodyStyle?: CSSProperties;
+}
+
+export default function BrowserWindow({
+  children,
+  minHeight,
+  url = "http://localhost:3000",
+  style,
+  bodyStyle,
+}: Props): ReactNode {
+  return (
+    <div className={styles.browserWindow} style={{ ...style, minHeight }}>
+      <div className={styles.browserWindowHeader}>
+        <div className={styles.buttons}>
+          <span className={styles.dot} style={{ background: "#f25f58" }} />
+          <span className={styles.dot} style={{ background: "#fbbe3c" }} />
+          <span className={styles.dot} style={{ background: "#58cb42" }} />
+        </div>
+        <div className={clsx(styles.browserWindowAddressBar, "text--truncate")}>
+          {url}
+        </div>
+        <div className={styles.browserWindowMenuIcon}>
+          <div>
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.browserWindowBody} style={bodyStyle}>
+        {children}
+      </div>
+    </div>
+  );
+}