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 <bdelacre...@apache.org> 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/new.css@1.1.2/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/new.css@1.1.2/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/new.css@1.1.2/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>