diff --git a/README.md b/README.md
index c2d211d..1e86475 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,9 @@ anlegen kann.
Um auf einer Wiki-Seite ein Page-Listing hinzuzufügen muss in den Metadaten der Seite der Inhalt von
`metapage.js.html` als Skript gesetzt werden.
-Dann kann an der gewünschten Stelle ein HTML-Element folgender Form eingefügt werden:
+Dann können im Dokument die beiden folgenden HTML-Elemente benutzt werden:
+
+### Gefilterte Liste mit Seiten aus dem ganzen Wiki
```html
@@ -28,7 +30,24 @@ creatorId: Int
authorId: Int
```
-### Beispiele
+#### Details
+
+- Mehrere Parameter müssen mit einem Komma getrennt werden
+- Mehrere Tags im `tags`-Parameter müssen ebenfalls mit Komma getrennt werden
+- Parameter vom Typ `String` müssen in einfache Anführungszeichen `'` eingeschlossen werden
+- Parameter vom Typ `Int` und vom Typ `Enum` müssen ohne Anführungszeichen angegeben werden
+
+### Liste mit allen Unterseiten von einer Seite
+
+```html
+
+```
+
+Dabei muss `ID` die interne ID von der Seite sein, deren Unterseiten aufgelistet werden sollen. Die
+ID der Seite herauszufinden ist etwas nervig, es ist nicht die ID welche man im Admin-Interface
+findet, man muss über die [GraphQL](https://wiki.ctdo.de/graphql) `tree` API die ID herausfinden.
+
+## Beispiele
Liste aller Seiten die mit den Tags `top` und `new` versehen sind:
@@ -45,12 +64,11 @@ Liste der 10 zuletzt bearbeiteten Seiten:
>
```
-### Details
+Liste der Unterseiten von der Events-Seite:
-- Mehrere Parameter müssen mit einem Komma getrennt werden
-- Mehrere Tags im `tags`-Parameter müssen ebenfalls mit Komma getrennt werden
-- Parameter vom Typ `String` müssen in einfache Anführungszeichen `'` eingeschlossen werden
-- Parameter vom Typ `Int` und vom Typ `Enum` müssen ohne Anführungszeichen angegeben werden
+```html
+
+```
## Features und Einschränkungen
diff --git a/metapage.js.html b/metapage.js.html
index aa3c980..3c5f738 100644
--- a/metapage.js.html
+++ b/metapage.js.html
@@ -12,8 +12,8 @@
return await res.json();
}
- async function loadPagelists() {
- console.log('populating pagelists');
+ async function loadPageLists() {
+ console.log('populating page lists');
const pagelists = [...document.getElementsByClassName('pagelist')];
pagelists.forEach(async (element) => {
@@ -21,28 +21,59 @@
const parameters = element
.getAttribute('data-query')
.replaceAll("'", '"');
- const query = `query { pages { list(${parameters}) { path, title } }}`;
+ const query = `query { pages { list(${parameters}) { path, title } } }`;
const result = await graphql(query);
console.log({ query, result });
const pages = result.data.pages.list.filter(
(page) => !page.path.includes('/_')
);
- const pagelist = pages.map((page) => {
- const link = document.createElement('a');
- link.href = `/${page.path}`;
- link.classList.add('is-internal-link');
- link.classList.add('is-valid-page');
- link.textContent = page.title;
-
- const listItem = document.createElement('li');
- listItem.appendChild(link);
- return listItem;
- });
-
- pagelist.forEach((page) => element.appendChild(page));
+ appendLinks(pages, element);
});
}
+ async function loadSubpageLists(parentId) {
+ console.log('populating subpage lists');
+
+ const pagelists = [...document.getElementsByClassName('subpagelist')];
+ pagelists.forEach(async (element) => {
+ console.log('processing', element);
+ /* currently not working, GraphQL gives wrong ID
+ // get page id from the given page
+ const parameters = element.getAttribute('data-query');
+ let query = `query { pages { singleByPath(path:"${parameters}", locale: "de") {id, path, title } }}`;
+ let result = await graphql(query);
+ console.log({ query, result });
+ */
+
+ //const pageId = result.data.pages.singleByPath.id;
+ let pageId = element.getAttribute('data-page-id');
+
+ const query = `query { pages { tree(parent: ${pageId}, mode: ALL, locale: "de") { id, path, title } } }`;
+ const result = await graphql(query);
+ console.log({ query, result });
+ const pages = result.data.pages.tree.filter(
+ (page) => !page.path.includes('/_')
+ );
+ appendLinks(pages, element);
+ });
+ }
+
+ function appendLinks(pages, element) {
+ const pagelist = pages.map((page) => {
+ const link = document.createElement('a');
+ link.href = `/${page.path}`;
+ link.classList.add('is-internal-link');
+ link.classList.add('is-valid-page');
+ link.textContent = page.title;
+
+ const listItem = document.createElement('li');
+ listItem.appendChild(link);
+ return listItem;
+ });
+
+ pagelist.forEach((page) => element.appendChild(page));
+ }
+
async function isElementLoaded(selector) {
while (document.querySelector(selector) === null) {
await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -50,5 +81,8 @@
return document.querySelector(selector);
}
- isElementLoaded('.contents').then(() => loadPagelists());
+ isElementLoaded('.contents').then(() => {
+ loadPageLists();
+ loadSubpageLists();
+ });