Notes/src/templates/page.ejs

168 lines
9.2 KiB
Plaintext
Raw Normal View History

2023-09-27 16:20:04 -04:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<% if (note.hasLabel("shareDescription")) { %>
<meta name="description" content="<%= note.getLabelValue("shareDescription") %>">
<% } %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<% if (note.hasRelation("shareFavicon")) { %>
<link rel="shortcut icon" href="api/notes/<%= note.getRelation("shareFavicon").value %>/download">
<% } else { %>
<link rel="shortcut icon" href="../favicon.ico">
<% } %>
<script src="../<%= appPath %>/share.js"></script>
<% if (!note.hasLabel("shareOmitDefaultCss")) { %>
<link href="../<%= assetPath %>/libraries/normalize.min.css" rel="stylesheet">
<!--<link href="../<%= assetPath %>/stylesheets/share.css" rel="stylesheet">-->
<% } %>
<% if (note.hasLabel("shareSwagger")) { %>
<link href="api/notes/woA8jsLWd4QR/download" rel="stylesheet">
<script src="api/notes/RYOdL9flwQfP/download"></script>
2023-09-27 16:20:04 -04:00
<script>
document.addEventListener("DOMContentLoaded", function() {
const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
variables:
protocol:
enum:
- http
- https
default: http
description: Protocol your server is being hosted with
domain:
default: localhost
description: Domain name or localhost or ip
port:
default: 37840
description: Port the app is served over`;
2023-09-27 16:20:04 -04:00
SwaggerUIBundle({
// url: `api/notes/<%= note.noteId %>/download`,
2023-09-27 16:20:04 -04:00
url: `<%= note.getLabelValue("shareSwagger") %>`,
dom_id: "#content",
responseInterceptor: resp => {
if (resp.url !== `<%= note.getLabelValue("shareSwagger") %>`) return resp;
resp.text = resp.text.replace("37740", "37840");
resp.text = resp.text.replace(`- url: http://localhost:8080/etapi`, customServerYml);
return resp;
}
2023-09-27 16:20:04 -04:00
});
});
</script>
<% } %>
<% if (note.type === 'text' || note.type === 'book') { %>
<link href="../<%= assetPath %>/libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
<% } %>
<% for (const cssRelation of note.getRelations("shareCss")) { %>
<link href="api/notes/<%= cssRelation.value %>/download" rel="stylesheet">
<% } %>
<% for (const jsRelation of note.getRelations("shareJs")) { %>
<script type="module" src="api/notes/<%= jsRelation.value %>/download"></script>
<% } %>
<% if (note.hasLabel('shareDisallowRobotIndexing')) { %>
<meta name="robots" content="noindex,follow" />
<% } %>
<%- header %>
<title><%= note.title %><% if (note.noteId !== subRoot.noteId) { %> - <%= subRoot.title %><% } %></title>
<!-- TODO: determine a good way to populate this via labels -->
2023-09-27 22:54:13 -04:00
<!-- HTML Meta Tags -->
<meta name="description" content="A website for guides, reference, showcase, inspiration, and more, all for Trilium Notes! Not convinced? Come see for yourself just what Trilium can do."
><!-- Facebook Meta Tags -->
<meta property="og:url" content="https://trilium.rocks/">
<meta property="og:type" content="website">
<meta property="og:title" content="<%= note.title %><% if (note.noteId !== subRoot.noteId) { %> - <%= subRoot.title %><% } %>">
<meta property="og:description" content="<%= note.getLabelValue("shareDescription") %>">
<meta property="og:image" content="https://github.com/zadam/trilium/wiki/images/screenshot.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="trilium.rocks">
<meta property="twitter:url" content="https://trilium.rocks/">
<meta name="twitter:title" content="<%= note.title %><% if (note.noteId !== subRoot.noteId) { %> - <%= subRoot.title %><% } %>">
<meta name="twitter:description" content="<%= note.getLabelValue("shareDescription") %>">
<meta name="twitter:image" content="https://github.com/zadam/trilium/wiki/images/screenshot.png">
<!-- Meta Tags Generated via https://opengraph.dev -->
<meta name="theme-color" content="#4FA52B">
2023-09-27 16:20:04 -04:00
</head>
<%
const currentTheme = note.getLabel("shareTheme") === "light" ? "light" : "dark";
const themeClass = currentTheme === "light" ? " theme-light" : " theme-dark";
%>
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %><%= themeClass %>">
<div id="mobile-header">
<a href="./<%= subRoot.shareId %>">
<% if (subRoot.hasRelation("shareLogo")) { %>
<img src="api/notes/<%= subRoot.getRelation("shareLogo").value %>/download" alt="Logo" />
<% } %>
<%= subRoot.title %>
</a>
<button id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
</div>
<div id="split-pane">
<div id="left-pane">
<div id="navigation">
<div id="site-header">
<a href="./<%= subRoot.shareId %>">
<% if (subRoot.hasRelation("shareLogo")) { %>
<img src="api/notes/<%= subRoot.getRelation("shareLogo").value %>/download" alt="Logo" />
<% } %>
<%= subRoot.title %>
</a>
<div class="theme-selection">
Site Theme
<label class="switch">
<input type="checkbox" checked="<%= currentTheme === "dark" %>">
<span class="slider"></span>
<svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
<svg class="light-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg>
</label>
</div>
<div class="search-item">
<svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>
<input type="text" class="search-input" placeholder="Search...">
</div>
</div>
<% if (subRoot.hasVisibleChildren()) { %>
<nav id="menu">
<%- include('tree_item', {note: subRoot, activeNote: note, subRoot: subRoot}) %>
</nav>
<% } %>
</div>
</div>
<div id="right-pane">
<div id="main">
2023-09-27 16:20:04 -04:00
<div id="content" class="type-<%= note.type %><% if (note.type === 'text') { %> ck-content<% } %><% if (isEmpty) { %> no-content<% } %>">
<h1 id="title"><%= note.title %></h1>
<% if (isEmpty && (!note.hasVisibleChildren() && note.type !== "book")) { %>
<p>This note has no content.</p>
<% } else { %>
<%- content %>
2023-09-27 16:20:04 -04:00
<% } %>
</div>
2023-09-27 16:20:04 -04:00
<% if (note.hasVisibleChildren() || note.type === "book") { %>
<nav id="childLinks" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
<% if (!isEmpty) { %>
<span>Subpages:</span>
2023-09-27 16:20:04 -04:00
<% } %>
<ul>
<%
const action = note.type === "book" ? "getChildNotes" : "getVisibleChildNotes";
for (const childNote of note[action]()) {
%>
<li>
<a href="<%= childNote.shareId %>"
class="type-<%= childNote.type %>"><%= childNote.title %></a>
</li>
<% } %>
</ul>
</nav>
<% } else %>
</div>
2023-09-27 16:20:04 -04:00
</div>
</div>
</body>
</html>