Skip to content

Commit 9656156

Browse files
timea-solidtimea-solid
committed
build only once in PR branches, improved timestamp, readme update, update dep
1 parent de55542 commit 9656156

File tree

7 files changed

+519
-542
lines changed

7 files changed

+519
-542
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ permissions:
55
on:
66
push:
77
branches:
8-
- "**"
8+
- main
99
pull_request:
1010
branches:
11-
- "**"
11+
- main
1212
workflow_dispatch:
1313

1414
jobs:

‎README.md‎

Lines changed: 209 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,15 @@ See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/)
1111
See [Solid-UI API](https://solidos.github.io/solid-ui/docs/api/) for UI functions.
1212
See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation.
1313

14-
Table of content:
15-
- Getting started(#getting-started)
16-
- Further documentation(#further-ocumentation)
14+
## Table of Contents
15+
- [Getting Started](#getting-started)
16+
- [Install via npm](#install-via-npm)
17+
- [Use Directly in Browser](#use-directly-in-a-browser)
18+
- [UMD Bundle](#umd-bundle-global-variable)
19+
- [ESM Bundle](#esm-bundle-import-as-module)
20+
- [Development](#development-new-components)
21+
- [Testing](#adding-tests)
22+
- [Further Documentation](#further-documentation)
1723

1824

1925
## Getting started
@@ -24,86 +30,227 @@ always appreciated.
2430
## Install via npm
2531

2632
```sh
27-
npm install solid-ui
33+
npm install solid-ui rdflib solid-logic
2834
```
2935

36+
Then import in your JavaScript/TypeScript code:
37+
3038
```js
31-
import * as UI from 'solid-ui'
39+
import * as UI from 'solid-ui'
40+
import * as $rdf from 'rdflib'
41+
import * as SolidLogic from 'solid-logic'
42+
43+
// Example: Create a button
44+
const button = UI.widgets.button(
45+
document,
46+
'https://solidproject.org/assets/img/solid-emblem.svg',
47+
'Click me',
48+
() => alert('Button clicked!')
49+
)
50+
document.body.appendChild(button)
3251
```
3352

34-
## Use directly in a browser
53+
## Use Directly in a Browser
54+
55+
Solid-UI provides both **UMD** and **ESM** bundles for direct browser usage. Both bundles externalize `rdflib` and `solid-logic`, which must be loaded separately.
3556

36-
All bundels, DO NOT bundle rdflin and solid-logic. These need to be provided separately.
57+
### Available Files
3758

38-
## Files
39-
- For browser UMD, without rdflib, solid-logic: `dist/solid-ui.js` (global `window.UI`)
40-
- For browser ESM, without rdflib, solid-logic: `dist/solid-ui.esm.js` (import as module)
41-
- UMD bundles come in chunked files
42-
- both version also containe minified versions.
59+
- **UMD (Universal Module Definition)**:
60+
- Development: `dist/solid-ui.js` (exposes global `window.UI`)
61+
- Production: `dist/solid-ui.min.js` (minified)
62+
63+
- **ESM (ES Modules)**:
64+
- Development: `dist/solid-ui.esm.js`
65+
- Production: `dist/solid-ui.esm.min.js` (minified)
4366

67+
### UMD Bundle (Global Variable)
4468

45-
### UMD bundle (global variable)
69+
Load via `<script>` tags and access through global variables `window.$rdf`, `window.SolidLogic`, and `window.UI`.
4670

4771
```html
48-
<!-- Load dependencies first -->
49-
<script src="https://cdn.jsdelivr.net/npm/rdflib/dist/rdflib.min.js"></script>
50-
<!-- or -->
51-
<!-- script src="https://cdn.jsdelivr.net/npm/rdflib/dist/rdflib.min.js"></script -->
52-
<script src="https://unpkg.com/solid-logic/dist/solid-logic.min.js"></script>
53-
<!-- Load solid-ui UMD bundle -->
54-
<script src="https://unpkg.com/solid-ui/dist/solid-ui.min.js"></script>
55-
<!-- or -->
56-
<!-- script src="https://cdn.jsdelivr.net/npm/solid-ui/dist/solid-ui.min.js"></script -->
57-
<!-- or -->
58-
<!-- script src="dist/solid-ui.js"></script -->
59-
<script>
60-
// Access via global variable
61-
const logic = window.SolidLogic;
62-
const UI = window.UI;
63-
// Create a button
64-
const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg'
65-
const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))
66-
UI.widgets.clearElement(document.body)
67-
document.body.appendChild(myButton)
68-
</script>
72+
<!DOCTYPE html>
73+
<html>
74+
<head>
75+
<title>Solid-UI UMD Example</title>
76+
</head>
77+
<body>
78+
<div id="app"></div>
79+
80+
<!-- Load dependencies first -->
81+
<script src="https://cdn.jsdelivr.net/npm/rdflib/dist/rdflib.min.js"></script>
82+
<script src="https://unpkg.com/solid-logic/dist/solid-logic.min.js"></script>
83+
84+
<!-- Load solid-ui UMD bundle -->
85+
<script src="https://unpkg.com/solid-ui/dist/solid-ui.min.js"></script>
86+
87+
<script>
88+
// Access via global variables
89+
const { store, authn } = window.SolidLogic
90+
const { widgets } = window.UI
91+
92+
// Get the logged-in user
93+
const webId = authn.currentUser()
94+
95+
if (webId) {
96+
// User is logged in - create button with their WebID
97+
const userButton = widgets.button(
98+
document,
99+
'https://solidproject.org/assets/img/solid-emblem.svg',
100+
`Logged in as: ${webId.value}`,
101+
() => alert(`Your WebID: ${webId.value}`)
102+
)
103+
document.getElementById('app').appendChild(userButton)
104+
} else {
105+
// User not logged in - create login button
106+
const loginButton = widgets.button(
107+
document,
108+
'https://solidproject.org/assets/img/solid-emblem.svg',
109+
'Login to Solid',
110+
() => authn.checkUser().then(() => location.reload())
111+
)
112+
document.getElementById('app').appendChild(loginButton)
113+
}
114+
</script>
115+
</body>
116+
</html>
69117
```
70118

119+
### ESM Bundle (Import as Module)
71120

72-
### ESM bundle (import as module)
121+
Use modern JavaScript modules with `import` statements.
73122

74123
```html
75-
<script type="module">
76-
import * as $rdf from 'https://esm.sh/rdflib'
77-
import { store } from 'https://esm.sh/solid-logic'
78-
import { widgets } from 'https://esm.sh/solid-ui'
79-
80-
// Example usage
81-
// someFunction(...)
82-
</script>
124+
<!DOCTYPE html>
125+
<html>
126+
<head>
127+
<title>Solid-UI ESM Example</title>
128+
</head>
129+
<body>
130+
<div id="app"></div>
131+
132+
<script type="module">
133+
// Import from CDN (esm.sh, unpkg, or jsdelivr)
134+
import * as $rdf from 'https://esm.sh/rdflib'
135+
import * as SolidLogic from 'https://esm.sh/solid-logic'
136+
import * as UI from 'https://esm.sh/solid-ui'
137+
138+
// Get the logged-in user
139+
const webId = SolidLogic.authn.currentUser()
140+
141+
if (webId) {
142+
// User is logged in - create personalized button
143+
const userName = await getUserName(webId)
144+
const userButton = UI.widgets.button(
145+
document,
146+
'https://solidproject.org/assets/img/solid-emblem.svg',
147+
userName || 'My Profile',
148+
() => window.open(webId.value, '_blank')
149+
)
150+
document.getElementById('app').appendChild(userButton)
151+
} else {
152+
// User not logged in
153+
const loginButton = UI.widgets.button(
154+
document,
155+
'https://solidproject.org/assets/img/solid-emblem.svg',
156+
'Login to Solid',
157+
async () => {
158+
await SolidLogic.authn.checkUser()
159+
location.reload()
160+
}
161+
)
162+
document.getElementById('app').appendChild(loginButton)
163+
}
164+
165+
// Helper function to fetch user's name from their profile
166+
async function getUserName(webId) {
167+
try {
168+
await SolidLogic.store.fetcher.load(webId.doc())
169+
const name = SolidLogic.store.any(webId, $rdf.sym('http://xmlns.com/foaf/0.1/name'))
170+
return name ? name.value : null
171+
} catch (error) {
172+
console.error('Error fetching user name:', error)
173+
return null
174+
}
175+
}
176+
</script>
177+
</body>
178+
</html>
83179
```
84180

85-
or
181+
### ESM Bundle with Import Maps
86182

87-
### ESM bundle with import map (bare specifiers)
183+
Use import maps for cleaner module specifiers:
88184

89185
```html
90-
<script type="importmap">
91-
{
92-
"imports": {
93-
"rdflib": "https://esm.sh/rdflib",
94-
"solid-logic": "https://esm.sh/solid-logic",
95-
"solid-ui": "https://esm.sh/solid-ui"
96-
}
97-
}
98-
</script>
99-
<script type="module">
186+
<!DOCTYPE html>
187+
<html>
188+
<head>
189+
<title>Solid-UI ESM with Import Maps</title>
190+
</head>
191+
<body>
192+
<div id="app"></div>
193+
194+
<!-- Define import map for bare specifiers -->
195+
<script type="importmap">
196+
{
197+
"imports": {
198+
"rdflib": "https://esm.sh/rdflib",
199+
"solid-logic": "https://esm.sh/solid-logic",
200+
"solid-ui": "https://esm.sh/solid-ui"
201+
}
202+
}
203+
</script>
204+
205+
<script type="module">
206+
// Use clean bare specifiers
100207
import * as $rdf from 'rdflib'
101-
import { store } from 'solid-logic'
102-
import { widgets } from 'solid-ui'
103-
104-
// Example usage
105-
// someFunction(...)
106-
</script>
208+
import * as SolidLogic from 'solid-logic'
209+
import * as UI from 'solid-ui'
210+
211+
const app = document.getElementById('app')
212+
213+
// Create a profile button for logged-in user
214+
async function createUserButton() {
215+
const webId = SolidLogic.authn.currentUser()
216+
217+
if (!webId) {
218+
const loginBtn = UI.widgets.button(
219+
document,
220+
'https://solidproject.org/assets/img/solid-emblem.svg',
221+
'Login',
222+
() => SolidLogic.authn.checkUser()
223+
)
224+
app.appendChild(loginBtn)
225+
return
226+
}
227+
228+
// Fetch user profile
229+
try {
230+
await SolidLogic.store.fetcher.load(webId.doc())
231+
const name = SolidLogic.store.any(
232+
webId,
233+
$rdf.sym('http://xmlns.com/foaf/0.1/name')
234+
)
235+
236+
const profileBtn = UI.widgets.button(
237+
document,
238+
'https://solidproject.org/assets/img/solid-emblem.svg',
239+
name ? name.value : 'My Profile',
240+
() => {
241+
alert(`WebID: ${webId.value}\nName: ${name ? name.value : 'Not set'}`)
242+
}
243+
)
244+
app.appendChild(profileBtn)
245+
} catch (error) {
246+
console.error('Error loading profile:', error)
247+
}
248+
}
249+
250+
createUserButton()
251+
</script>
252+
</body>
253+
</html>
107254
```
108255

109256
### Development new components
@@ -132,7 +279,7 @@ npm run test-coverage
132279
The following document gives guidance on how to add and perform testing in solid-ui.
133280
[Testing in solid-ui](https://github.com/SolidOS/solid-ui/blob/18070a02fa8159a2b83d9503ee400f8e046bf1f6/test/unit/README.md)
134281

135-
## Girhub Pages
282+
## GitHub Pages
136283

137284
* The github pages should contain the storybook and further documentation. In order to make sure it is deployed there is a step in the CI (gh-pages). This depends on the previous `build` step. It MUST contain `build-storybook` otherwise the storybook is not being published.
138285

‎docs/workingWithSolidUI/solid-logic.min.js‎

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)