flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
asides
author
Florian
date
(Feb 25, 2025, 4:29 PM +0100)
commit
28b627e5
28b627e57870ae6d6560ab80b78c4a95a41b6e08
parent
262fd059
262fd0597b269e3ed3e9dff6774d3ffafc8d4018
+107
-27
+1
-1
src/components/alerts/ErrorAlert.astro
src/components/asides/ErrorAside.astro
+1
-1
src/components/alerts/ErrorAlert.astro
src/components/asides/ErrorAside.astro
+2
-2
src/components/alerts/InfoAlert.astro
src/components/asides/InfoAside.astro
+2
-2
src/components/alerts/InfoAlert.astro
src/components/asides/InfoAside.astro
···
9
9
10
10
<div
11
11
class:list={[
12
-
"rounded-2xl bg-blue-50 dark:bg-blue-500/5 p-4 dark:ring-1 dark:ring-blue-500/10 not-prose max-w-full",
12
+
"rounded-2xl bg-blue-50 mb-6 dark:bg-blue-500/5 p-4 dark:ring-1 dark:ring-blue-500/10 not-prose max-w-full",
13
13
className,
14
14
]}
15
15
>
···
27
27
clip-rule="evenodd"></path>
28
28
</svg>
29
29
</div>
30
-
<div class="ml-3">
30
+
<div class="ml-3 flex items-center flex-col">
31
31
<h3 class="text-sm font-medium text-blue-800 dark:text-blue-500">
32
32
{title ? title : <slot />}
33
33
</h3>
+2
-2
src/components/alerts/SuccessAlert.astro
src/components/asides/SuccessAside.astro
+2
-2
src/components/alerts/SuccessAlert.astro
src/components/asides/SuccessAside.astro
···
9
9
10
10
<div
11
11
class:list={[
12
-
"rounded-2xl bg-green-50 dark:bg-green-500/5 p-4 dark:ring-1 dark:ring-green-500/10 not-prose max-w-full",
12
+
"rounded-2xl bg-green-50 mb-6 dark:bg-green-500/5 p-4 dark:ring-1 dark:ring-green-500/10 not-prose max-w-full",
13
13
className,
14
14
]}
15
15
>
···
27
27
clip-rule="evenodd"></path>
28
28
</svg>
29
29
</div>
30
-
<div class="ml-3">
30
+
<div class="ml-3 flex items-center flex-col">
31
31
<h3 class="text-sm font-medium text-green-800 dark:text-green-500">
32
32
{title ? title : <slot />}
33
33
</h3>
+2
-2
src/components/alerts/WarningAlert.astro
src/components/asides/WarningAside.astro
+2
-2
src/components/alerts/WarningAlert.astro
src/components/asides/WarningAside.astro
···
9
9
10
10
<div
11
11
class:list={[
12
-
"rounded-2xl bg-amber-50 dark:bg-amber-500/5 p-4 dark:ring-1 dark:ring-amber-500/10 not-prose max-w-full",
12
+
"rounded-2xl bg-amber-50 mb-6 dark:bg-amber-500/5 p-4 dark:ring-1 dark:ring-amber-500/10 not-prose max-w-full",
13
13
className,
14
14
]}
15
15
>
···
27
27
clip-rule="evenodd"></path>
28
28
</svg>
29
29
</div>
30
-
<div class="ml-3">
30
+
<div class="ml-3 flex items-center flex-col">
31
31
<h3 class="text-sm font-medium text-amber-800 dark:text-amber-400">
32
32
{title ? title : <slot />}
33
33
</h3>
+9
-2
src/components/sandbox/Sandbox.astro
+9
-2
src/components/sandbox/Sandbox.astro
···
1
1
---
2
2
import { SandpackCodeEditor } from "./SandpackCodeEditor";
3
+
import type { SandboxTemplate } from ".";
3
4
4
-
const { folder, active } = Astro.props;
5
+
type Props = {
6
+
folder: string;
7
+
active: string;
8
+
template: SandboxTemplate;
9
+
};
10
+
11
+
const { folder, active, template = "static" }: Props = Astro.props;
5
12
6
13
const actualFolder = folder.startsWith("/")
7
14
? folder
···
25
32
---
26
33
27
34
<div class="not-prose h-[600px] md:h-[300px]">
28
-
<SandpackCodeEditor client:only="react" files={loadedFiles} />
35
+
<SandpackCodeEditor client:only="react" files={loadedFiles} {template} />
29
36
<noscript>
30
37
<div
31
38
class="text-base-800 dark:text-base-200 text-sm w-full h-full rounded-2xl border border-base-200 dark:border-base-800 p-4"
+2
-1
src/components/sandbox/SandpackCodeEditor.tsx
+2
-1
src/components/sandbox/SandpackCodeEditor.tsx
···
2
2
import { useEffect, useState } from "react";
3
3
import colors from "tailwindcss/colors";
4
4
import config from "../../config";
5
+
import type { SandboxTemplate } from ".";
5
6
6
7
function getColor(color: string, shade: '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950') {
7
8
return colors[color.toLowerCase() as keyof typeof colors][shade];
···
14
15
${isDark ? "@apply dark;" : ""}
15
16
}`
16
17
}
17
-
export const SandpackCodeEditor = ({ files }: { files: Record<string, { code: string; active: boolean }> }) => {
18
+
export const SandpackCodeEditor = ({ files, template }: { files: Record<string, { code: string; active: boolean }>, template: SandboxTemplate }) => {
18
19
const [isDark, setIsDark] = useState(true);
19
20
20
21
const [stylingFile, setStylingFile] = useState<string | null>();
+3
-1
src/components/sandbox/index.ts
+3
-1
src/components/sandbox/index.ts
+1
-1
src/config.ts
+1
-1
src/config.ts
+2
src/content/docs/adding-content.mdx
+2
src/content/docs/adding-content.mdx
+53
src/content/docs/components/asides.mdx
+53
src/content/docs/components/asides.mdx
···
1
+
---
2
+
title: "Asides"
3
+
description: "How to show asides in your documentation"
4
+
category: "Components"
5
+
---
6
+
7
+
# Asides
8
+
9
+
Asides are a way to show additional information in your documentation.
10
+
11
+
```jsx
12
+
import ErrorAside from "$components/asides/ErrorAside.astro";
13
+
14
+
<ErrorAside title="This is an error aside">
15
+
This is an error aside.
16
+
</ErrorAside>
17
+
```
18
+
19
+
### Result:
20
+
21
+
import ErrorAside from "$components/asides/ErrorAside.astro";
22
+
import WarningAside from "$components/asides/WarningAside.astro";
23
+
import SuccessAside from "$components/asides/SuccessAside.astro";
24
+
import InfoAside from "$components/asides/InfoAside.astro";
25
+
26
+
<ErrorAside title="This is an error aside">
27
+
This is an error aside.
28
+
</ErrorAside>
29
+
30
+
There are 4 different asides:
31
+
32
+
- `ErrorAside`
33
+
- `WarningAside`
34
+
- `SuccessAside`
35
+
- `InfoAside`
36
+
37
+
<ErrorAside title="This is an error aside">
38
+
This is an error aside.
39
+
</ErrorAside>
40
+
41
+
<WarningAside title="This is a warning aside">
42
+
This is a warning aside.
43
+
</WarningAside>
44
+
45
+
<SuccessAside title="This is a success aside">
46
+
This is a success aside.
47
+
</SuccessAside>
48
+
49
+
<InfoAside title="This is an info aside">
50
+
This is an info aside.
51
+
</InfoAside>
52
+
53
+
+13
-4
src/content/docs/components/code.mdx
+13
-4
src/content/docs/components/code.mdx
···
2
2
title: "Code and Math"
3
3
description: "How to show inline and multiline code and math in your documentation"
4
4
category: "Components"
5
+
order: 1
5
6
---
6
7
7
8
# Code
···
14
15
this is some `inline code`
15
16
```
16
17
18
+
### Result:
19
+
17
20
this is some `inline code`
18
21
19
22
## Multiline Code
20
23
21
24
Write multiline code like this (specify the language for syntax highlighting):
22
25
23
-
import { Code } from "astro:components";
24
26
25
-
<Code lang="mdx" code={`\`\`\`js
27
+
````mdx
28
+
```js
26
29
console.log("this is some code");
27
-
\`\`\`
28
-
`} />
30
+
```
31
+
````
32
+
33
+
### Result:
29
34
30
35
```js
31
36
console.log("this is some code");
···
39
44
Inline math: $a_x = x^2$
40
45
```
41
46
47
+
### Result:
48
+
42
49
Inline math: $a_x = x^2$
43
50
44
51
Write block math like this:
···
48
55
\int_0^\infty \frac{x^3}{e^x} \, dx
49
56
$$
50
57
```
58
+
59
+
### Result:
51
60
52
61
$$
53
62
\int_0^\infty \frac{x^3}{e^x} \, dx
+8
src/content/docs/components/embeds.mdx
+8
src/content/docs/components/embeds.mdx
···
16
16
https://www.youtube.com/watch?v=dQw4w9WgXcQ
17
17
```
18
18
19
+
### Result:
20
+
19
21
https://www.youtube.com/watch?v=dQw4w9WgXcQ
20
22
21
23
## Link Card
···
25
27
```mdx
26
28
https://flo-bit.dev
27
29
```
30
+
31
+
### Result:
28
32
29
33
https://flo-bit.dev
30
34
···
37
41
:excalidraw[$assets/excalidraw-demo.svg]
38
42
```
39
43
44
+
### Result:
45
+
40
46
:excalidraw[$assets/excalidraw-demo.svg]
41
47
42
48
## Github
···
46
52
```mdx
47
53
https://github.com/flo-bit/svelte-openai-realtime-api
48
54
```
55
+
56
+
### Result:
49
57
50
58
https://github.com/flo-bit/svelte-openai-realtime-api
+4
-3
src/content/docs/components/sandbox.mdx
+4
-3
src/content/docs/components/sandbox.mdx
···
12
12
```astro
13
13
import Sandbox from "$components/sandbox/";
14
14
15
-
<Sandbox folder="example1" active="Counter.js" />
15
+
<Sandbox folder="example1" active="Counter.js" template="react" />
16
16
```
17
17
18
+
### Result:
18
19
19
20
import Sandbox from "$components/sandbox/";
20
21
21
-
<Sandbox folder="example1" active="Counter.js" />
22
+
<Sandbox folder="example1" active="Counter.js" template="react" />
22
23
23
-
Your folder **must** be in the `src/examples` folder.
24
+
Your folder **must** be in the `src/examples` folder, either just use the name of the folder or use the full path (e.g. `/src/examples/example1`).
24
25
25
26
The `active` file is the file that will be shown when the sandbox is opened.
26
27
+5
-8
todo.md
+5
-8
todo.md
···
2
2
- [x] add next and previous buttons
3
3
- [x] start page
4
4
- fix click in sidebar
5
-
- alerts as custom embeds (+ github flavored markdown alerts)
6
5
- edit on github link
7
-
- ignore numbers in ids before -
8
6
- ally: add skip to content button
9
-
- change categories to use frontmatter instead of folder structure
10
7
11
8
## components
12
9
13
10
- [x] sandbox
14
11
- [x] excalidraw graphs
12
+
- [x] asides (still to do: allow using directives or github flavored markdown for the asides, improve light mode design)
15
13
- [ ] mermaid graphs (convert to excalidraw -> svg)
16
14
- [ ] code block/tabs
17
15
- [ ] card
18
16
- [ ] button
19
-
- [ ] badge
17
+
- [ ] badges
20
18
- [ ] collapse
21
19
- [ ] filetree
22
-
- [ ] graphs
20
+
- [ ] graphs (server side rendered svgs)
23
21
- [ ] steps
24
22
- [ ] table
25
-
- [ ] graphs
26
-
27
23
28
24
## later
25
+
29
26
- rest api stuff
30
27
- improve search design
31
-
- switch search to use vanilla js instead of svelte
28
+
- maybe switch search to use vanilla js instead of svelte
32
29
- openapi
33
30
- animate search bar
34
31
- animation copy code button