minor on docs

docs/_drafts/admin.md

@@ -1,19 +1,41 @@
 ---
 layout: default
 title: Admin
-permalink: /admin
+permalink: /usage/admin
-nav_order: 5
+nav_order: 1
+parent: Usage
 ---
 
 
-# Admin
+### CLI
-{: .no_toc }
+
+#### Manage accounts
+
+
+```bash
+$ gancio accounts
+
+Manage accounts
+
+Commands:
+  gancio accounts list    List all accounts
+
+```
+
+#### List accounts
+
+```
+$ gancio accounts list
+📅 gancio - v1.4.3 - A shared agenda for local communities (nodejs: v16.13.0)
+> Reading configuration from: ./config.json
+
+1	admin: true	enabled: true	email: admin
+2	admin: false	enabled: true	email: lesion@autistici.org
+```
 
-1. TOC
-{:toc}
 
 ## Basics
 ## Add user
 ## Enable registration
 ## Confirm registration
-## Confirm event
+## Confirm event

docs/index.md

@@ -24,14 +24,14 @@ nowhere on gancio does the identity of who posted an event appear, not even unde
 
 - **Anonymous events**: optionally a visitor can create events without being registered (an administrator must confirm them)
 
-- **We don't care about making hits** so we export events in many ways: via RSS feeds, via global or individual ics, allowing you to embed list of events or single event via [iframe or webcomponent]({% link embed.md %}) on other websites, via [AP]({% link federation.md %}), [microdata](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) and [microformat](https://developer.mozilla.org/en-US/docs/Web/HTML/microformats#h-event)
+- **We don't care about making hits** so we export events in many ways: via RSS feeds, via global or individual ics, allowing you to embed list of events or single event via [iframe or webcomponent]({% link usage/embed.md %}) on other websites, via [AP]({% link federation.md %}), [microdata](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) and [microformat](https://developer.mozilla.org/en-US/docs/Web/HTML/microformats#h-event)
 
 - Very easy UI
 - Multi-day events (festival, conferences...)
 - Recurring events (each monday, each two monday, each monday and friday, each two saturday, etc.)
 - Filter events for tags or places
 - RSS and ICS export (with filters)
-- embed your events in your website with [webcomponents]({% link embed.md %}) or iframe ([example](https://gancio.cisti.org/embed/list?title=Upcoming events))
+- embed your events in your website with [webcomponents]({% link usage/embed.md %}) or iframe ([example](https://gancio.cisti.org/embed/list?title=Upcoming events))
 - boost / bookmark / comment events from the fediverse!
 - Lot of configurations available (dark/light theme, user registration open/close, enable federation, enable recurring events)
 

docs/usage/embed.md

@@ -0,0 +1,100 @@
+---
+layout: default
+title: Embed events in webpages
+permalink: /usage/embed
+nav_order: 1
+parent: Usage
+---
+
+
+
+## Embed a single event or a list of events in your webpage
+{: .no_toc }
+
+You can embed a list of filtered events or a specific event card in your webpage using a classic old-school `iframe` or a shiny new webcomponent.
+
+1. TOC
+{:toc}
+## Webcomponents
+[Webcomponents](https://www.webcomponents.org/introduction) usage requires a small (~5kB gzipped) js script to be loaded in your page (note that you should use your instance name):
+```html
+<script src='https://demo.gancio.org/gancio-events.es.js'></script>
+```
+
+### Embed a single event
+To embed an event in webpages you use `<gancio-event>` custom element, you can copy the required code in **event's page > Embed > Copy**, should be like the following:
+
+```html
+<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
+```
+
+<script src='/assets/js/gancio-events.es.js'></script>
+<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>  
+
+
+### Embed event lists
+You can also embed a list of events using `<gancio-events>` custom element, you can copy the required code in **Export > List > Copy**
+
+
+```html
+<gancio-events baseurl='https://gancio.cisti.org'>
+  <a href='https://gancio.cisti.org'>Gancio Events</a>
+</gancio-events>
+```
+
+<script>
+  var theme = 'light';
+  var sidebar = 'true';
+  function toggleDark() {
+    var items = document.getElementsByTagName('gancio-events');
+    theme = theme === 'dark' ? 'light' : 'dark';
+    items[0].setAttribute('theme', theme );
+  }
+
+  function toggleSidebar() {
+    var items = document.getElementsByTagName('gancio-events');
+    sidebar = sidebar === 'true' ? 'false' : 'true';
+    items[0].setAttribute('sidebar', sidebar );
+  }
+
+
+  function changeMax(value) {
+    var items = document.getElementsByTagName('gancio-events');
+    items[0].setAttribute('maxlength', value);
+  }
+
+  function changeTitle (title) {
+    var items = document.getElementsByTagName('gancio-events');
+    items[0].setAttribute('title', title)
+  }
+</script>
+
+<style>
+  label {
+    display: block;
+    margin: 0px;
+    padding: 10px;
+  }
+</style>
+<label><input type='checkbox' onchange="toggleDark()"/> Dark</label>
+<label><input type='checkbox' checked onchange="toggleSidebar()"/> Sidebar</label>
+<label>Max items <input value=4 type='number' label='Max items' onchange="changeMax(this.value)"/></label>
+<label>Title <input value='Gancio' type='text' onkeyup="changeTitle(this.value)"/></label>
+<gancio-events sidebar='true' title='Gancio' theme='light' maxlength=4 baseurl='https://gancio.cisti.org'><a href='https://gancio.cisti.org'>Gancio Events</a></gancio-events>  
+
+> info "Customize"
+> Note that you can modify the title (or completely remove it using an empty `title` param),
+> you can limit the list to a maximum number of events using the `maxlength` parameter and filter events by `tags` or `places` using that parameters (it's easier using **gancio** than to explain it here)
+
+
+## IFrame
+You can also use the old iframe method
+<iframe src='https://demo.gancio.org/embed/17' style="width: 410px; border: none; height: 210px; overflow: hidden;"></iframe>
+
+```html
+<iframe src='https://demo.gancio.org/embed/17' style="width: 410px; border: none; height: 210px; overflow: hidden;"></iframe>
+```
+
+
+## Wordpress
+To embed an event or a list of events into a [WordPress](https://wordpress.com) website you can use the [WPGancio](https://wordpress.org/plugins/wpgancio/) plugin, this allows you to use webcomponents and shortcodes and automatically includes the needed script in each page and post.

docs/usage/usage.md

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Usage
+permalink: /usage
+nav_order: 1
+has_children: true
+---
+
+## Usage
+
+ehmmm, help needed here :smile: feel free to send a PR => [here](https://framagit.org/les/gancio/tree/master/docs)
+
+

package.json

@@ -13,7 +13,7 @@
     "doc:dev": "cd docs && bundle exec jekyll s --drafts",
     "migrate": "NODE_ENV=production sequelize db:migrate",
     "migrate:dev": "sequelize db:migrate",
-    "build:wc": "cd webcomponents; yarn build:lib; cd .."
+    "build:wc": "cd webcomponents; yarn build:lib; cp dist/gancio-events.es.js ../wp-plugin/js/; cp dist/gancio-events.es.js ../assets/; cp dist/gancio-events.es.js ../docs/assets/js/"
   },
   "files": [
     "server/",