Wilfred/metawiki

View on GitHub
src/frontend/index.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Metawiki -- A truly editable website</title>

        <link rel="stylesheet" href="/serve/codemirror/lib/codemirror.css"/>
        <link rel="stylesheet" href="/serve/codemirror/addon/hint/show-hint.css"/>

        <link rel="stylesheet" href="/serve/metawiki/metawiki.css"/>
        <link rel="stylesheet" href="/serve/codemirror/addon/lint/lint.css"/>
             
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
    </head>
            
    <body>
        
        <noscript>
            <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
                        height: 100%; width: 100%; background-color: #FFFFFF">
                <p style="margin-left: 10px">It
                    looks like you've disabled JavaScript. Please enable it.
                    JS is fundamental to how this metawiki is designed.
                </p>
            </div>
        </noscript>
        
        <div id="content">
            <h2>Oh no!</h2>
            
            <p>If you can see this, something has gone wrong. Please
                take a look at your browser console.
            </p>

            <p>If you still
                have a tab open with a working wiki instance, you may be
                able to use that to fix the bug.

                Otherwise, you can use <a href="/safe">safe mode</a>
                to access your metawiki even when the JS is broken.
            </p>
        </div>
        
        <script type="text/template" id="page-template">
            <nav>
                <h2><a href="#page/Home">&#8734; metawiki</a></h2>
                <div class="header-links">
                    {{#if path}}
                    <a href="#edit?{{path}}">Edit</a>
                    {{/if}}
                    <a href="#new">New</a>
                    <a href="#all">All</a>
                </div>
                <div class="clearfix"></div>
            </nav>
            {{content}}
        </script>
        
        <script type="text/template" id="page-missing-template">
            <h2>No such page: {{path}}</h2>
            
            <p>
                There's no such page '{{path}}'. Would you like to
                <a href="#new?{{path}}">create it</a>?
            </p>
        </script>
        
        <script type="text/template" id="all-resources-template">
            <h2>All Resources</h2>
            
            <table>
                <thead>
                    <tr>
                        <th>Path</th>
                        <th>ID</th>
                        <th>MIME Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this}}
                    <tr>
                        <td>{{path}}</td>
                        <td>{{id}}</td>
                        <td>{{mimeType}}</td>
                        <td>
                            <a href="#edit?{{path}}">edit</a>
                            {{#ifEqual mimeType "text/x-markdown"}}
                            <a href="#{{path}}">view</a>
                            {{/ifEqual}}
                            <a href="/serve/{{path}}">raw</a>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>

        </script>

        <script type="text/template" id="editor-template">
            <h2>{{heading}}</h2>
            <form>
                <input type="text" name="path" value="{{path}}"/>
                <select name="mimeType">
                    <!-- this should be a database value, not hard-coded. -->
                    <option value="text/x-markdown" {{#ifEqual mimeType "text/x-markdown"}}selected{{/ifEqual}}>
                        Markdown
                    </option>
                    <option value="application/javascript" {{#ifEqual mimeType "application/javascript"}}selected{{/ifEqual}}>
                        JavaScript
                    </option>
                    <option value="text/html" {{#ifEqual mimeType "text/html"}}selected{{/ifEqual}}>
                        HTML
                    </option>
                    <option value="text/css" {{#ifEqual mimeType "text/css"}}selected{{/ifEqual}}>
                        CSS
                    </option>
                </select>
                <button class="format-source hidden">Format</button>
                <textarea id="editor">{{content}}</textarea>
                {{#ifEqual mimeType "application/javascript"}}
                <input type="button" value="Execute" name="execute"/>
                {{/ifEqual}}
                <input type="submit" value="Save"/>
                <input type="submit" value="Save and continue editing" name="save-continue"/>
            </form>
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.4/jshint.min.js"></script>
        <script src="/serve/requirejs/require.js"
                data-main="/serve/metawiki/app.js" async></script>

    </body>
</html>