This is an automated email from the ASF dual-hosted git repository.
bdelacretaz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sling-whiteboard.git
The following commit(s) were added to refs/heads/master by this push:
new 16d0d25 Handlebars client-side rendering + navigation
16d0d25 is described below
commit 16d0d253bd1f94b8f51cb8d1f624d0b08be3de38
Author: Bertrand Delacretaz <[email protected]>
AuthorDate: Wed May 27 13:08:41 2020 +0200
Handlebars client-side rendering + navigation
---
.../apps/samples/article/article.html | 89 +++++++++++++++-------
.../initial-content/apps/samples/tag/tag.html | 64 ++++++++++++++++
.../content/graphql-website-demo.html | 19 +++--
3 files changed, 140 insertions(+), 32 deletions(-)
diff --git
a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/article/article.html
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/article/article.html
index 576e553..198a29c 100644
---
a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/article/article.html
+++
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/article/article.html
@@ -20,35 +20,70 @@
<html>
<head>
<title data-sly-set.title="${properties.title}">${title}</title>
+
+ <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css";>
+ <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css";>
+
+ <script
+ src="https://code.jquery.com/jquery-3.5.1.js";
+ integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
+ crossorigin="anonymous">
+ </script>
+
+ <script
+
src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js";>
+ </script>
+
+ <script>
+ $.ajax({
+ url: document.URL + ".json",
+ success: function( result ) {
+ var template = Handlebars.compile($("#content").html());
+ result.data.article.tagsQuery = "";
+ for(i in result.data.article.tags) {
+ result.data.article.tagsQuery += result.data.article.tags[i] +
"+";
+ }
+ $("#content").html(template({ article : result.data.article }));
+ }
+ });
+ </script>
+
</head>
<body>
- <div class="content">
- <h1>${title}</h1>
-
- <div class="tags">
- <h2>Tags</h2>
- <ul>
- <sly data-sly-list.tag="${properties.tags}">
- <li>${tag}</li>
- </sly>
- </ul>
- </sly>
-
- <div class="tags">
- <h2>See Also</h2>
- <em>
- Most of these links fail for now - only the ones which
happen to be from the same
- folder works.
- </em>
- <ul>
- <sly data-sly-list.seeAlso="${properties.seeAlso}">
- <li><a href="./${seeAlso}.html">${seeAlso}</a></li>
- </sly>
- </ul>
- </sly>
+ <div id="content">
+ <div class="title">
+ <h1>{{article.title}}</h1>
+ <hr/>
+ </div>
+
+ <div class="tags">
+ Tags:
+ {{#each article.tags}}
+ <span class="tag">
+ <a href="/tags/{{this}}.html">{{this}}</a>
+ </span>
+ {{/each}}
+ - Find articles <a href="/tags/{{article.tagsQuery}}.html">with all
these tags</a>
+ <hr/>
+ </div>
+
+ <div class="seeAlso">
+ <h2>See Also</h2>
+ <ul>
+ {{#each article.seeAlso}}
+ <li class="seeAlso">
+ <a href="{{this.path}}.html">{{this.title}}</a>
+ </li>
+ {{/each}}
+ </ul>
+ <hr/>
+ </div>
- <hr/>
- <div>${properties.text}</div>
+ <div class="text">
+ {{{article.text}}}
+ <hr/>
</div>
+
+ </div>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git
a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/tag/tag.html
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/tag/tag.html
new file mode 100644
index 0000000..8de3625
--- /dev/null
+++
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/tag/tag.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Licensed to the Apache Software Foundation (ASF) under one
+ ~ or more contributor license agreements. See the NOTICE file
+ ~ distributed with this work for additional information
+ ~ regarding copyright ownership. The ASF licenses this file
+ ~ to you under the Apache License, Version 2.0 (the
+ ~ "License"); you may not use this file except in compliance
+ ~ with the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+<html>
+ <head>
+ <title data-sly-set.title="${properties.title}">${title}</title>
+
+ <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css";>
+ <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css";>
+
+ <script
+ src="https://code.jquery.com/jquery-3.5.1.js";
+ integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
+ crossorigin="anonymous">
+ </script>
+
+ <script
+
src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js";>
+ </script>
+
+ <script>
+ $.ajax({
+ url: document.URL + ".json",
+ success: function( result ) {
+ var template = Handlebars.compile($("#content").html());
+ $("#content").html(template({ data : result.data }));
+ }
+ });
+ </script>
+
+ </head>
+ <body>
+ <div id="content">
+ <h1>Articles with tag (TODO: which tag?)</h1>
+ <ul>
+ {{#each data.articlesByTag}}
+ <li class="seeAlso">
+ <a href="{{this.path}}.html">{{this.title}}</a>
+ </li>
+ Tags:
+ {{#each this.tags}}
+ <span class="tag">{{this}}</span>
+ {{/each}}
+ {{/each}}
+ </ul>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git
a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/graphql-website-demo.html
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/graphql-website-demo.html
index 185e42b..00c539a 100644
---
a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/graphql-website-demo.html
+++
b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/graphql-website-demo.html
@@ -17,14 +17,26 @@
~ specific language governing permissions and limitations
~ under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-<html>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Sling GraphQL demo website</title>
+ <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css";>
+ <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css";>
+ </head>
<body>
<h1>Sling GraphQL demo website</h1>
- <p>This is early days...</p>
+ <p>This page lists interesting entry points.</p>
<ul>
<li>
+ <a
href="/content/articles/news/willow-mclaughlin-on-the-capacitor-of-back-end-similique-voluptas-aka-http.html">
+ Example page</a> - starting point for the navigation which
should fully work now.
+ </li>
+ <li>
<a
href="/content/articles/news/willow-mclaughlin-on-the-capacitor-of-back-end-similique-voluptas-aka-http.json">
Content aggregation using a server-side GraphQL query</a>
(raw json data <a
href="/content/articles/news/willow-mclaughlin-on-the-capacitor-of-back-end-similique-voluptas-aka-http.rawjson">here</a>)
@@ -41,9 +53,6 @@
<li>
<a href="/graphql.json">GraphQL servlet</a>
</li>
- <li>
- <a
href="/content/articles/news/willow-mclaughlin-on-the-capacitor-of-back-end-similique-voluptas-aka-http.html">Example
page</a>
- </li>
</ul>
</body>
</html>
