dn42regsrv/StaticRoot/index.html
Simon Marsh c6a608061e
All checks were successful
continuous-integration/drone/push Build is passing
Localise all external resources so that application can be used without requiring clearnet connectivity
Add gzip handler so that assets can be compressed if clients request it
Add cache-control headers so that content can be effectively cached locally
2020-10-24 14:47:18 +01:00

219 lines
7.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<title>DN42 Registry Explorer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="material-icons.css"/>
<!-- Style overrides -->
<style>
.material-icons { display:inline-flex;vertical-align:middle }
body { box-shadow: inset 0 2em 10em rgba(0,0,0,0.4); min-height: 100vh }
</style>
</head>
<body>
<div id="explorer_app">
<nav class="navbar navbar-fixed-top navbar-expand-md navbar-dark bg-dark">
<search-input></search-input>
<div class="collapse navbar-collapse w-100 ml-auto text-nowrap">
<div class="ml-auto"><router-link class="navbar-brand"
to="/">Registry Explorer</router-link>&nbsp;<a class="pull-right navbar-brand"
href="https://dn42.dev/"><img src="/dn42_logo.png" width="173" height="60"/></a>
</div>
</div>
</nav>
<router-view></router-view>
</div>
<footer class="page-footer font-small">
<div style="margin-top: 20px; padding: 5px">
<a href="https://git.burble.com/burble.dn42/dn42regsrv">Source Code</a>.
Powered by
<a href="https://getbootstrap.com/">Bootstrap</a>,
<a href="https://vuejs.org">Vue.js</a>,
<a href="https://github.com/axios/axios">axios</a>,
<a href="http://alexcorvi.github.io/anchorme.js/">Anchorme</a>.
</div>
</footer>
<script type="text/x-template" id="search-input-template">
<form class="form-inline" id="SearchForm">
<input v-bind:value="search"
v-on:input="debounceSearch($event.target.value)"
class="form-control-lg" size="30" type="search"
placeholder="Search the registry" aria-label="Search"/>
</form>
</script>
<script type="text/x-template" id="app-root-template">
<div class="p-3">
<div class="jumbotron">
<h1>DN42 Registry Explorer</h1>
<p class="lead">Just start typing in the search box to start searching the registry</p>
<hr/>
<p>
<p>Search Tips</p>
<ul>
<li>Searches are case independent
<li>No need to hit enter, searches will start immediately
<li>Prefixing the search by a registry type followed by / will narrow the search to
just that type (e.g. <router-link class="text-success"
to="domain/.dn42">domain/.dn42</router-link>)</li>
<li>Searching for <b>type/</b> will return all the objects for that type (e.g.
<router-link class="text-success" to="schema/">schema/</router-link>)</li>
<li>A blank search box will return you to these instructions</li>
<li>Just copy the URL to link to search results</li>
<li>Searches are made on object names; searching the content of objects
is not supported (yet!).</li>
</ul>
<hr/>
<p>
The registry explorer is a simple web app using
<a href="https://git.burble.com/burble.dn42/dn42regsrv">dn42regsrv</a>;
a REST API for the DN42 registry built with <a href="https://golang.org/">Go</a>
<br/>
The DN42 registry contains personal data which is also available through this site.
Please refer to the DN42 registry privacy policy, or contact dn42@burble.com for any
queries.
</p>
</div>
<registry-stats></registry-stats>
</div>
</script>
<script type="text/x-template" id="registry-stats-template">
<div class="container d-flex flex-column w-75">
<h5>Registry Stats</h5>
<section v-if="state == 'error'">
<div class="alert alert-warning clearfix" role="alert">
An error recurred whilst retrieving data from the API
<button type="button" class="float-right btn btn-primary"
v-on:click="reload"><span class="material-icons">refresh</span>
Refresh</button>
</div>
</section>
<section v-else-if="state == 'loading'">
<div class="alert alert-info" role="alert">Loading data ...</div>
</section>
<section v-else>
<p class="p-3 text-center">
<span v-for="(value, key) in store.RegStats"
class="mx-2 text-nowrap d-inline-block">
<router-link v-bind:to="'/'+key+'/'">{{ key }}</router-link>
: <b>{{ value }}</b>
</span>
</p>
</section>
</div>
</script>
<script type="text/x-template" id="app-search-template">
<div class="p-3">
<section v-if="state == 'loading'">
<div class="alert alert-info" role="alert">Loading data ...</div>
</section>
<section v-else-if="state == 'error'">
<div class="alert alert-warning clearfix" role="alert">
An error recurred whilst retrieving search results
</div>
</section>
<section v-else-if="state == 'noresults'">
<h2>Searching for "{{ search }}" ...</h2>
<div class="alert alert-dark" role="alert">
Sorry, no results found
</div>
</section>
<section v-else-if="state == 'resultlist'">
<h2>Listing results for "{{ search }}" ...</h2>
<div class="container d-flex flex-row flex-wrap">
<div class="text-center">
<span v-for="ref in result">
<reg-object class="mx-4 my-2" v-bind:link="ref[0]+'/'+ref[1]"></reg-object>
</span>
</div>
</div>
</section>
<section v-else-if="state == 'result'">
<div v-for="(val, key) in result">
<h2 class="mb-4"><reg-object v-bind:link="key"></reg-object></h2>
<div class="pl-4">
<table class="table">
<thead>
<tr><th scope="col">Key</th><th scope="col">Value</th></tr>
</thead>
<tbody>
<tr v-for="a in val.Attributes">
<th scope="row" class="border-0 py-1 pr-3 text-primary text-nowrap">
{{ a[0] }}
</th>
<td class="border-0 p-1">
<reg-attribute v-bind:content="a[1]"></reg-attribute>
</td>
</tr>
</tbody>
</table>
</div>
<section v-if="val.Backlinks.length != 0">
<p>Referenced by</p>
<div class="pl-4">
<table class="table">
<tbody>
<tr v-for="rlink in val.Backlinks">
<td class="border-0 p-1">
<reg-object v-bind:link="rlink"></reg-object>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</section>
<section v-else>
<div class="alert alert-warning" role="alert">
Something went wrong, an invalid search state was encountered ({{ state }})
<p>{{ $route.params.pathMatch }}</p>
</div>
</section>
</div>
</script>
<script type="text/x-template" id="reg-object-template">
<span class="text-nowrap d-inline-block">
<router-link class="text-success mr-2" v-bind:to="'/'+link">
{{ ( content ? content : obj ) }}
</router-link>
<span class="badge back-pill badge-dark test-muted">{{ rtype }}</span>
</span>
</script>
<script type="text/x-template" id="reg-attribute-template">
<span style="word-break: break-all; white-space: pre-wrap">
<reg-object v-if="isRegObject()" v-bind:link="objectLink"></reg-object>
<span v-else class="text-monospace" v-html="decorated"></span>
</span>
</script>
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script src="axios.min.js"></script>
<script src="anchorme.min.js"></script>
<script src="anchorme.min.js"></script>
<script src="explorer.js"></script>
</body>
</html>