| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"/> |
| |
| <!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
| ~ 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. |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/--> |
| |
| <title>Search Articles</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@4.7.6/dist/handlebars.js" |
| integrity="sha256-ZafrO8ZXERYO794Tx1hPaAcdcXNZUNmXufXOSe0Hxj8=" |
| crossorigin="anonymous"> |
| </script> |
| |
| <script src="./js/graphql.js"></script> |
| |
| <script> |
| var templates = { |
| navigation: {}, |
| results: {} |
| } |
| |
| function queryAndRender(searchText) { |
| var query = `{ |
| navigation { |
| search |
| sections { |
| path |
| name |
| } |
| } |
| article(withText: "${searchText}") { |
| path |
| title |
| seeAlso { |
| path |
| title |
| tags |
| } |
| } |
| }`; |
| console.log(`Querying:\n${query}`); |
| graphQL.query(query, { searchText: searchText}, function(data) { |
| $("#navigation").html(templates.navigation({navigation:data.result.navigation})); |
| $("#results").html(templates.results({data:data})); |
| }); |
| } |
| |
| $(document).ready(function() { |
| templates.results = Handlebars.compile($("#resultsTemplate").html()); |
| templates.navigation = Handlebars.compile($("#navigationTemplate").html()); |
| $("#search").submit(function() { |
| queryAndRender($("#searchText").val()); |
| return false; |
| }); |
| $("#searchText").focus(); |
| queryAndRender($("#searchText").val()); |
| }); |
| </script> |
| </head> |
| <body> |
| <div> |
| <div id="navigation"/> |
| </div> |
| |
| <h1>Search in articles</h1> |
| <hr/> |
| |
| <form id="search"> |
| <input id="searchText" type="text" width="40"/> |
| <input type="submit" value="Search"/> |
| </form> |
| |
| <div> |
| <div id="results"/> |
| </div> |
| |
| <div id="templates" style="display:none"> |
| <div id="navigationTemplate"> |
| {{#each navigation.sections}} |
| <span class="section"> |
| <a href="{{this.path}}.html">{{this.name}}</a> |
| </span> |
| {{/each}} |
| <br/> |
| <a href="{{navigation.search}}.html">Search</a> |
| <hr/> |
| </div> |
| <div id="resultsTemplate"> |
| {{#if data.result.article}} |
| <h2>Found {{data.result.article.length}} articles containing "{{data.info.searchText}}"</h2> |
| <ul> |
| {{#each data.result.article}} |
| <li class="articleLink"> |
| <a href="{{this.path}}.html">{{this.title}}</a> |
| </li> |
| {{/each}} |
| </ul> |
| {{else}} |
| <div class="message">No articles found.</div> |
| {{/if}} |
| </div> |
| </div> |
| </body> |
| </html> |
