Commit 503b005d authored by Robert Knight's avatar Robert Knight Committed by Lyza Gardner

Replace the index page of the dev server with something more useful

Replace the index page of the dev server with a more useful landing
page. The iframe has been removed because it is something we're not
testing most of the time and there are remaining issues with the way
multiple frames are supported in the sidebar. A separate test document
can be added for this purpose in future.
parent 344204ff
...@@ -8,22 +8,7 @@ const Mustache = require('mustache'); ...@@ -8,22 +8,7 @@ const Mustache = require('mustache');
const { createServer, useSsl } = require('./create-server'); const { createServer, useSsl } = require('./create-server');
const DOCUMENT_PATH = './test-documents/'; const DOCUMENT_PATH = './test-documents/';
const DOCUMENT_PATTERN = /\.html\.mustache/; const DOCUMENT_PATTERN = /\.mustache/;
/**
* Render some content in an HTML document with `<pre>` tags
*
* @param {string} filename - source to inject between `<pre>` tags
* @return {string}
*/
function preformattedContent(filename) {
const textContent = fs.readFileSync(filename, 'utf-8');
const template = fs.readFileSync(
`${DOCUMENT_PATH}preformatted.template.mustache`,
'utf-8'
);
return Mustache.render(template, { textContent });
}
/** /**
* Generate `<script>` content for client configuration and injection * Generate `<script>` content for client configuration and injection
...@@ -68,7 +53,8 @@ function buildDocumentRoutes() { ...@@ -68,7 +53,8 @@ function buildDocumentRoutes() {
.filter(filename => filename.match(DOCUMENT_PATTERN)); .filter(filename => filename.match(DOCUMENT_PATTERN));
documentPaths.forEach(filename => { documentPaths.forEach(filename => {
const shortName = filename.replace(DOCUMENT_PATTERN, ''); const shortName = filename.replace(DOCUMENT_PATTERN, '');
documentRoutes[`/document/${shortName}`] = `${DOCUMENT_PATH}${filename}`; const routePath = shortName === 'index' ? '/' : `/document/${shortName}`;
documentRoutes[routePath] = `${DOCUMENT_PATH}${filename}`;
}); });
return documentRoutes; return documentRoutes;
} }
...@@ -88,10 +74,6 @@ function buildDocumentRoutes() { ...@@ -88,10 +74,6 @@ function buildDocumentRoutes() {
*/ */
function DevServer(port, config) { function DevServer(port, config) {
const documentRoutes = buildDocumentRoutes(); const documentRoutes = buildDocumentRoutes();
const preformattedRoutes = {
'/document/code_of_conduct': './CODE_OF_CONDUCT',
'/document/license': './LICENSE',
};
function listen() { function listen() {
const app = function (req, response) { const app = function (req, response) {
...@@ -103,13 +85,10 @@ function DevServer(port, config) { ...@@ -103,13 +85,10 @@ function DevServer(port, config) {
documentRoutes[url.pathname], documentRoutes[url.pathname],
config.clientUrl config.clientUrl
); );
} else if (preformattedRoutes[url.pathname]) {
content = preformattedContent(preformattedRoutes[url.pathname]);
} else { } else {
content = injectClientScript( content = injectClientScript(
`${DOCUMENT_PATH}index.template.mustache`, `${DOCUMENT_PATH}404.mustache`,
config.clientUrl, config.clientUrl,
{ readme: fs.readFileSync('./README.md', 'utf-8') }
); );
} }
response.end(content); response.end(content);
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Route not found</title>
</head>
<body>
Page not found.
{{{ hypothesisScript }}}
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hypothesis Client Test</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 24 28" width="24"><path d="M3.886 3.945H21.03v16.047H3.886z" fill="#fff"></path><path d="M0 2.005C0 .898.897 0 2.005 0h19.99C23.102 0 24 .897 24 2.005v19.99A2.005 2.005 0 0121.995 24H2.005A2.005 2.005 0 010 21.995V2.005zM9 24l3 4 3-4H9zM7.008 4H4v16h3.008v-4.997C7.008 12.005 8.168 12.01 9 12c1 .007 2.019.06 2.019 2.003V20h3.008v-6.891C14.027 10 12 9.003 10 9.003c-1.99 0-2 0-2.992 1.999V4zM19 19.987c1.105 0 2-.893 2-1.994A1.997 1.997 0 0019 16c-1.105 0-2 .892-2 1.993s.895 1.994 2 1.994z" fill="currentColor" fill-rule="evenodd"></path></svg>
<h1>Hypothesis Client development server</h1>
<p>Welcome to the Hypothesis client's development server.</p>
<h2>Test documents</h2>
<ul>
<li><a href="/document/doyle">The Disappearance of Lady Carfax, by Arthur Conan Doyle</a></li>
<li><a href="/document/tolstoy">Anna Karenina, by Leo Tolstoy</a></li>
</ul>
<h2>Page feature tests</h2>
<p>Page elements that interact with the Hypothesis client.</p>
<div>
Number of annotations on this page:
<span data-hypothesis-annotation-count>...</span>
</div>
<button data-hypothesis-trigger>
Open sidebar
</button>
<h2>Useful links</h2>
<ul>
<li><a href="https://github.com/hypothesis/client">GitHub project</a></li>
<li><a href="https://h-client.readthedocs.io">Documentation for publishers and
developers</a></li>
<li><a href="https://h.readthedocs.io/en/latest/api/">Hypothesis API documentation</a></li>
</ul>
{{{hypothesisScript}}}
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hypothesis Client Test</title>
</head>
<body>
<div data-hypothesis-trigger style="margin: 75px 0 0 75px;">
Number of annotations:
<span data-hypothesis-annotation-count>...</span>
</div>
<div style="margin: 10px 0 0 75px;">
<button id="add-test" style="padding: 0.6em; font-size: 0.75em">Toggle 2nd Frame</button>
</div>
<div style="margin: 10px 0 0 75px;">
<iframe enable-annotation id="iframe1" src="/document/license" style="width: 50%;height: 300px;"></iframe>
</div>
<div id="iframe2-container" style="margin: 10px 0 0 75px;">
</div>
<pre style="margin: 20px 75px 75px 75px;">{{{readme}}}</pre>
{{{hypothesisScript}}}
<script>
var iframeIsAdded = false;
var addIframeBtn = document.querySelector('#add-test');
if(addIframeBtn){
addIframeBtn.addEventListener('click', function() {
if (!iframeIsAdded) {
var iframe1 = document.querySelector('#iframe1');
var iframeNew = iframe1.cloneNode();
iframeNew.src = "/document/code_of_conduct";
iframeNew.id = "iframe2";
iframeIsAdded = true;
document.querySelector('#iframe2-container').appendChild(iframeNew);
} else {
var iframe2 = document.querySelector('#iframe2');
iframe2.parentNode.removeChild(iframe2);
iframeIsAdded = false;
}
});
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hypothesis in-line frame document</title>
</head>
<body>
<pre style="margin: 20px;">{{{textContent}}}</pre>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment