Skip to content

Commit 4b9b154

Browse files
angelo-vangelo-v
committed
doc(homepage): PodOS elements installation guide
1 parent 1bf9a86 commit 4b9b154

File tree

5 files changed

+148
-4
lines changed

5 files changed

+148
-4
lines changed

‎homepage/docs/getting-started/.nav.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
nav:
2+
- Building dashboards:
3+
- quick-start.md
4+
- installation.md

‎homepage/docs/getting-started/demo.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>PodOS Getting Started</title>
7+
<script
8+
type="module"
9+
src="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.esm.js"
10+
></script>
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.css"
14+
/>
15+
</head>
16+
<style>
17+
body {
18+
main {
19+
padding: 4rem;
20+
margin: 1rem;
21+
border-radius: 1rem;
22+
background-color: var(--pos-background-color);
23+
}
24+
}
25+
</style>
26+
<body>
27+
<main>
28+
<pos-app>
29+
<pos-resource uri="https://pod-os.solidcommunity.net/profile/card#me">
30+
<div style="display: flex; gap: 1rem; align-items: center">
31+
<pos-picture></pos-picture>
32+
<section>
33+
<h1>
34+
Welcome to
35+
<pos-label></pos-label>
36+
</h1>
37+
<blockquote>
38+
<pos-description></pos-description>
39+
</blockquote>
40+
</section>
41+
</div>
42+
</pos-resource>
43+
</pos-app>
44+
</main>
45+
</body>
46+
</html>

‎homepage/docs/getting-started/installation.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Installing PodOS
2+
3+
## Using a CDN
4+
5+
Instead of installing, you can directly include PodOS into your html page by loading it from a CDN.
6+
7+
Include one of the following snippets to the `<head>` section of your html, depending on which CDN you would like to use.
8+
9+
=== "jsdelivr.net"
10+
11+
```html
12+
<script
13+
type="module"
14+
src="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.esm.js">
15+
</script>
16+
<link
17+
rel="stylesheet"
18+
href="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.css"
19+
/>
20+
```
21+
22+
=== "esm.sh"
23+
24+
```html
25+
<script
26+
type="module"
27+
src="https://esm.sh/@pod-os/elements/dist/elements/elements.esm.js">
28+
</script>
29+
<link
30+
rel="stylesheet"
31+
href="https://esm.sh/@pod-os/elements/dist/elements/elements.css"
32+
/>
33+
```
34+
35+
=== "unpkg.com"
36+
37+
```html
38+
<script
39+
type="module"
40+
src="https://unpkg.com/@pod-os/elements/dist/elements/elements.esm.js">
41+
</script>
42+
<link
43+
rel="stylesheet"
44+
href="https://unpkg.com/@pod-os/elements/dist/elements/elements.css"
45+
/>
46+
```
47+
48+
!!! info
49+
50+
The snippets above will point to the *latest* version of PodOS. If you want to stick to *specific* version, the CDNs allow to add an explicit version number to the URL, e.g. `https://cdn.jsdelivr.net/npm/@pod-os/elements`**@0.28.0**`/dist/elements/elements.esm.js`
51+
52+
53+
## Installing from npm
54+
55+
If you do not want to rely on a CDN, you can install PodOS from npm:
56+
57+
```shell
58+
npm install @pod-os/elements
59+
```
60+
61+
If you are not using a bundler, you can include the JS and CSS files from the `node_modules` folder:
62+
63+
```html
64+
<script
65+
type="module"
66+
src="node_modules/@pod-os/elements/dist/elements/elements.esm.js">
67+
</script>
68+
<link
69+
rel="stylesheet"
70+
href="node_modules/@pod-os/elements/dist/elements/elements.css"
71+
/>
72+
```
73+
74+
If you are using a bundler for your app, you can do the imports in your main JS / CSS files:
75+
76+
=== "JS import"
77+
78+
In your app entry point, e.g. `index.js`, `main.ts` or `app.tsx` add:
79+
80+
```js
81+
import '@pod-os/elements';
82+
```
83+
84+
=== "CSS import"
85+
86+
In a global css file add:
87+
88+
```css
89+
@import '~@pod-os/elements/dist/elements/elements.css';
90+
```

‎homepage/docs/getting-started/quick-start.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Quick start - PodOS elements
1+
# Quick start
22

33
1. Create a plain old html file
44
2. Add latest PodOS script tag and stylesheet to the head
@@ -44,6 +44,6 @@ Try this 🤩:
4444
5. `<pos-label` renders a human-readable name of the resource
4545
6. `<pos-description>` renders a renders a description of the resource
4646

47-
Check out the [📖 Storybook documentation](https://pod-os.github.io/PodOS/storybook/) to learn about the available elements.
47+
Check out the [📖 Storybook documentation](https://pod-os.github.io/PodOS/storybook/) and the [element reference](../reference/elements/index.md) to learn about the available elements.
4848

49-
Also, check out the [🧑‍🏫 tutorial section](../tutorials/index.md) on practical guides.
49+
For advanced topics and practical guides, take a look into the [🧑‍🏫 tutorial section](../tutorials/index.md).

‎homepage/mkdocs.yml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ theme:
4646
markdown_extensions:
4747
- attr_list
4848
- md_in_html
49+
- admonition
50+
- pymdownx.details
4951
- pymdownx.emoji:
5052
emoji_index: !!python/name:material.extensions.emoji.twemoji
5153
emoji_generator: !!python/name:material.extensions.emoji.to_svg
@@ -59,4 +61,6 @@ markdown_extensions:
5961
custom_fences:
6062
- name: mermaid
6163
class: mermaid
62-
format: !!python/name:pymdownx.superfences.fence_code_format
64+
format: !!python/name:pymdownx.superfences.fence_code_format
65+
- pymdownx.tabbed:
66+
alternate_style: true

0 commit comments

Comments
 (0)