Skip to content

Commit 6298aff

Browse files
michielbdejongmichielbdejong
committed
both examples working
1 parent f98c7eb commit 6298aff

4 files changed

Lines changed: 23 additions & 8 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,28 @@ User Interface widgets and utilities for Solid
66

77
These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
88

9-
Use:
9+
## Getting started
10+
### In npm-based projects
11+
When including solid-ui in an npm-based project, you can use it with:
1012

1113
```
1214
import { ns, rdf, acl, aclControl, authn, create, dom, icons, log, matrix, media,
1315
messageArea, infiniteMessageArea, pad, preferences, store, style, table, tabs, utils, widgets, versionInfo
1416
} from 'solid-ui'
1517
1618
```
17-
See the ['examples' folder](https://github.com/solid/solid-ui/tree/examples/examples)
19+
### Directly in a webpage
20+
Clone this repo, and in the repo root run:
1821

22+
* npm install
23+
* npm run build
24+
25+
This will generate a `lib/` folder containing, among other artifacts, `lib/webpack-bundle.js`.
26+
Now run `npx serve` and go to http://localhost:5000/examples/ with your browser to see some examples.
27+
See the ['examples' folder](https://github.com/solid/solid-ui/tree/examples/examples) for the
28+
source code of those examples.
29+
30+
## Overview
1931
This has been a place to put any functionality from solid views which has been generalized to be usable in other views.
2032

2133
- Authentication UI: manage the user's logged in/out state.

‎examples/test-matrix.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
/* global $rdf */
1+
if (!window.UI) {
2+
window.alert('Please run "npm install && npm run build" in your repo root first.')
3+
}
4+
window.$rdf = UI.rdf
25

36
document.addEventListener('DOMContentLoaded', function () {
47
/// ///////////////////////////////////////////
58

69
var kb = UI.store
710
var dom = document
8-
window.$rdf = UI.rdf
911

1012
var ICAL = $rdf.Namespace('http://www.w3.org/2002/12/cal/ical#')
1113
var SCHED = $rdf.Namespace('http://www.w3.org/ns/pim/schedule#')

‎examples/test-tabs.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@
3030

3131
]]>
3232
</style>
33-
<script type="text/javascript" src=
34-
"../../../mashlib/dist/mashlib.js">
33+
<script type="text/javascript" src="../lib/webpack-bundle.js">
3534
</script>
3635
<!-- "https://linkeddata.github.io/app-schedule/schedule.js" -->
3736

‎examples/test-tabs.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
/* global panes, $rdf */
1+
if (!window.UI) {
2+
window.alert('Please run "npm install && npm run build" in your repo root first.')
3+
}
4+
window.$rdf = UI.rdf
25

36
document.addEventListener('DOMContentLoaded', function () {
47
/// ///////////////////////////////////////////
58

6-
var UI = panes.UI
79
var kb = UI.store
810
var dom = document
911

0 commit comments

Comments
 (0)