|
@@ -60,6 +60,44 @@ The video page has in the EDN header
|
|
|
```
|
|
|
|
|
|
|
|
|
+## Create a web app
|
|
|
+
|
|
|
+Adding a new webapp is like adding a web page, but also involves adding a script and interacts
|
|
|
+with the page DOM.
|
|
|
+
|
|
|
+The DOM is generated by Selmer and the path of least resistance to access the DOM is via
|
|
|
+headers with deterministic ID values generated, and then replacing the node or accessing siblings
|
|
|
+for input data.
|
|
|
+
|
|
|
+Since our source file is a Markdown file with an EDN header, we can include script
|
|
|
+by specifying the path in a template. We should start by creating a template with
|
|
|
+the same name as the page, starting with the template we usually use (eg. :page).
|
|
|
+
|
|
|
+
|
|
|
+### Reading data from a table
|
|
|
+
|
|
|
+The code below will set a known ID onto a data table immediately following a known header.
|
|
|
+
|
|
|
+We can inspect the code of some generated pages and find the pattern of element names for
|
|
|
+H1 headers is to lowercase the name and replace spaces with underscores. From there, we can
|
|
|
+find the next element of type table and then assign it an ID. We can then operate on the new
|
|
|
+element in any way that we wish.
|
|
|
+
|
|
|
+```
|
|
|
+function HACK_identifyData () {
|
|
|
+ var el = document.getElementById('roles_by_project');
|
|
|
+ while( el && el.nodeName.toLowerCase() != 'table') {
|
|
|
+ el = el.nextSibling;
|
|
|
+ }
|
|
|
+ if (el) {
|
|
|
+ el.setAttribute('id', 'roles_by_project_data');
|
|
|
+ }
|
|
|
+}
|
|
|
+HACK_identifyData();
|
|
|
+```
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
That's it... see the `Add a page` section for more details.
|
|
|
|
|
|
## Import a video from YouTube
|