Skip to content

Commit 3e89f4f

Browse files
Nebelung-DevNebelung-Dev
committed
add components and examples
1 parent 7f6fd83 commit 3e89f4f

File tree

11 files changed

+301
-1
lines changed

11 files changed

+301
-1
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# Website
2+
23
Website for Chemical.

‎src/layouts/Docs.astro

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ const folders = [
4646
title: "Building",
4747
dir: "building",
4848
pages: ["build"]
49+
},
50+
{
51+
title: "Components",
52+
dir: "components",
53+
pages: ["setup", "link", "input", "button", "iframe", "controls"]
54+
},
55+
{
56+
title: "Examples",
57+
dir: "examples",
58+
pages: ["basic", "fancy"]
4959
}
5060
];
5161

‎src/pages/docs/client/setup.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ You can change the default Wisp server with the `data-wisp` attribute.
2525
<script data-wisp="wss://wisp.mercurywork.shop/" src="/chemical.js"></script>
2626
```
2727

28-
## Wisp
28+
## Transport
2929

3030
You can change the default transport with the `data-transport` attribute. Use `libcurl` or `epoxy`.
3131

‎src/pages/docs/components/button.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: "Button"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7+
8+
# Button
9+
10+
Adds a button that triggers an [input](/docs/components/input).
11+
12+
```html
13+
<input id="my-input" data-target="_blank" is="chemical-input">
14+
<button data-for="my-input" is="chemical-button">Go!</button>
15+
```
16+
17+
## Config
18+
19+
<Table className="not-prose">
20+
<TableHeader>
21+
<TableRow>
22+
<TableHead>Property</TableHead>
23+
<TableHead>Value</TableHead>
24+
<TableHead className="text-right">Description</TableHead>
25+
</TableRow>
26+
</TableHeader>
27+
<TableBody>
28+
<TableRow>
29+
<TableCell>data-for</TableCell>
30+
<TableCell>string</TableCell>
31+
<TableCell className="text-right">ID of input component.</TableCell>
32+
</TableRow>
33+
</TableBody>
34+
</Table>

‎src/pages/docs/components/controls.mdx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Controls"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7+
8+
# Controls
9+
10+
Adds controls for an [iframe](/docs/components/iframe).
11+
12+
`chemicalAction` takes two arguments, a command (back, forward, reload, or close) and an ID of a iframe component.
13+
14+
The close function hides the iframe and controls.
15+
16+
```html
17+
<input data-frame="my-iframe" is="chemical-input">
18+
<section id="my-controls" is="chemical-controls">
19+
<button onclick="chemicalAction('back', 'my-iframe')">←Back</button>
20+
<button onclick="chemicalAction('forward', 'my-iframe')">Forward</button>
21+
<button onclick="chemicalAction('reload', 'my-iframe')">Reload</button>
22+
<button onclick="chemicalAction('close', 'my-iframe')">Close</button>
23+
</section>
24+
<iframe data-controls="my-controls" id="my-iframe" is="chemical-iframe"></iframe>
25+
```
26+
27+
## Config (For iFrame)
28+
29+
<Table className="not-prose">
30+
<TableHeader>
31+
<TableRow>
32+
<TableHead>Property</TableHead>
33+
<TableHead>Value</TableHead>
34+
<TableHead className="text-right">Description</TableHead>
35+
</TableRow>
36+
</TableHeader>
37+
<TableBody>
38+
<TableRow>
39+
<TableCell>data-controls</TableCell>
40+
<TableCell>string</TableCell>
41+
<TableCell className="text-right">ID of controls component.</TableCell>
42+
</TableRow>
43+
</TableBody>
44+
</Table>

‎src/pages/docs/components/iframe.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: "iFrame"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7+
8+
# iFrame
9+
10+
A hidden iframe that is show and set to the encoded URL from a [input](/docs/components/input).
11+
12+
```html
13+
<input data-frame="my-iframe" is="chemical-input">
14+
<iframe id="my-iframe" is="chemical-iframe"></iframe>
15+
```
16+
17+
## Config (For Input)
18+
19+
<Table className="not-prose">
20+
<TableHeader>
21+
<TableRow>
22+
<TableHead>Property</TableHead>
23+
<TableHead>Value</TableHead>
24+
<TableHead className="text-right">Description</TableHead>
25+
</TableRow>
26+
</TableHeader>
27+
<TableBody>
28+
<TableRow>
29+
<TableCell>data-frame</TableCell>
30+
<TableCell>string</TableCell>
31+
<TableCell className="text-right">ID of iframe component.</TableCell>
32+
</TableRow>
33+
</TableBody>
34+
</Table>

‎src/pages/docs/components/input.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "Input"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7+
8+
# Input
9+
10+
An input that encodes the value and does something with it on enter.
11+
12+
```html
13+
<input data-target="_self" is="chemical-input">
14+
```
15+
16+
The `data-action` attribute runs a custom function on enter. This example logs the encoded url in the console.
17+
18+
```html
19+
<input data-action="logURL" is="chemical-input">
20+
<script>
21+
function logURL(url) {
22+
console.log(url)
23+
}
24+
</script>
25+
```
26+
27+
## Options
28+
29+
<Table className="not-prose">
30+
<TableHeader>
31+
<TableRow>
32+
<TableHead>Property</TableHead>
33+
<TableHead>Value</TableHead>
34+
<TableHead className="text-right">Description</TableHead>
35+
</TableRow>
36+
</TableHeader>
37+
<TableBody>
38+
<TableRow>
39+
<TableCell>data-target</TableCell>
40+
<TableCell>_self | _blank</TableCell>
41+
<TableCell className="text-right">Self opens in current tab, blank in new tab.</TableCell>
42+
</TableRow>
43+
<TableRow>
44+
<TableCell>data-action</TableCell>
45+
<TableCell>string</TableCell>
46+
<TableCell className="text-right">Function name that is called on enter.</TableCell>
47+
</TableRow>
48+
<TableRow>
49+
<TableCell>data-service</TableCell>
50+
<TableCell>uv | scramjet | rammerhead</TableCell>
51+
<TableCell className="text-right">The proxy service to use.</TableCell>
52+
</TableRow>
53+
<TableRow>
54+
<TableCell>data-auto-http</TableCell>
55+
<TableCell>add with to value for true</TableCell>
56+
<TableCell className="text-right">Automatically add https://.</TableCell>
57+
</TableRow>
58+
<TableRow>
59+
<TableCell>data-search-engine</TableCell>
60+
<TableCell>string</TableCell>
61+
<TableCell className="text-right">URL with %s for query.</TableCell>
62+
</TableRow>
63+
</TableBody>
64+
</Table>

‎src/pages/docs/components/link.mdx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Link"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7+
8+
# Link
9+
10+
A simple link that is encoded.
11+
12+
```html
13+
<a data-href="https://example.com" is="chemical-link">Link</a>
14+
```
15+
16+
## Options
17+
18+
<Table className="not-prose">
19+
<TableHeader>
20+
<TableRow>
21+
<TableHead>Property</TableHead>
22+
<TableHead>Value</TableHead>
23+
<TableHead className="text-right">Description</TableHead>
24+
</TableRow>
25+
</TableHeader>
26+
<TableBody>
27+
<TableRow>
28+
<TableCell>data-href</TableCell>
29+
<TableCell>string</TableCell>
30+
<TableCell className="text-right">The URL to encode.</TableCell>
31+
</TableRow>
32+
<TableRow>
33+
<TableCell>data-service</TableCell>
34+
<TableCell>uv | scramjet | rammerhead</TableCell>
35+
<TableCell className="text-right">The proxy service to use.</TableCell>
36+
</TableRow>
37+
<TableRow>
38+
<TableCell>data-auto-http</TableCell>
39+
<TableCell>add with to value for true</TableCell>
40+
<TableCell className="text-right">Automatically add https://.</TableCell>
41+
</TableRow>
42+
<TableRow>
43+
<TableCell>data-search-engine</TableCell>
44+
<TableCell>string</TableCell>
45+
<TableCell className="text-right">URL with %s for query.</TableCell>
46+
</TableRow>
47+
</TableBody>
48+
</Table>

‎src/pages/docs/components/setup.mdx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: "Setup"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
# Setup
7+
8+
Chemical components is an even easior way to setup Chemical with minimal scripting.
9+
10+
## Installation
11+
12+
To install the components script, add it to the head of your website with the main client script.
13+
14+
```html
15+
<head>
16+
<script src="/chemical.js"></script>
17+
<script src="/chemical.components.js"></script>
18+
</head>
19+
```

‎src/pages/docs/examples/basic.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "Basic"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
# Basic
7+
8+
A simple example using Chemical.
9+
10+
## Setup
11+
First, clone the GitHub repo.
12+
13+
```bash
14+
git clone https://github.com/chemicaljs/basic-example.git
15+
```
16+
17+
Next, run `npm install` to install dependencies.
18+
19+
Finally run `npm start` to start the app on `localhost:3000`.
20+
21+
## License
22+
23+
Basic Example uses the AGPL 3.0 license.

‎src/pages/docs/examples/fancy.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "Fancy"
3+
layout: "../../../layouts/Docs.astro"
4+
---
5+
6+
# Fancy
7+
8+
An advanced example using Chemical components.
9+
10+
## Setup
11+
First, clone the GitHub repo.
12+
13+
```bash
14+
git clone https://github.com/chemicaljs/fancy-example.git
15+
```
16+
17+
Next, run `npm install` to install dependencies.
18+
19+
Finally run `npm start` to start the app on `localhost:3000`.
20+
21+
## License
22+
23+
Fancy Example uses the AGPL 3.0 license.

0 commit comments

Comments
 (0)