apps/jotts/templates/view.html 2.3 K raw
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Jotts — {{.Note.Title}}</title>
7
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
8
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
9
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
10
    <link rel="manifest" href="/static/site.webmanifest">
11
    <link rel="icon" href="/static/favicon.ico">
12
    <meta property="og:title" content="Jotts">
13
    <meta property="og:image" content="/static/og.png">
14
    <meta property="og:type" content="website">
15
    <meta name="theme-color" content="#121113" />
16
    <link rel="stylesheet" href="/assets/darkmatter.css">
17
    <link rel="stylesheet" href="/static/styles.css">
18
  </head>
19
  <body>
20
    <header class="header">
21
      <a href="/" class="logo">jotts</a>
22
      <nav class="links"><a href="/notes/new">new</a></nav>
23
    </header>
24
    <main>
25
      <div class="note-header">
26
        <h1>{{.Note.Title}}</h1>
27
        <time class="note-date" datetime="{{.Note.UpdatedAt}}Z">{{.Note.UpdatedAt}}</time>
28
      </div>
29
      <div class="note-actions">
30
        <a href="/notes/{{.Note.ShortID}}/edit">edit</a>
31
        <button type="button" class="link-button" id="copy-md-btn" onclick="copyMarkdown()">copy</button>
32
        <form method="POST" action="/notes/{{.Note.ShortID}}/delete" class="inline-form">
33
          <button type="submit" class="link-button" onclick="return confirm('delete this note?')">delete</button>
34
        </form>
35
      </div>
36
      <template id="raw-md">{{.Note.Content}}</template>
37
      <article class="markdown-body">{{.Rendered}}</article>
38
    </main>
39
    <script>
40
      function copyMarkdown() {
41
        const md = document.getElementById("raw-md").content.textContent;
42
        const btn = document.getElementById("copy-md-btn");
43
        navigator.clipboard.writeText(md).then(() => {
44
          btn.textContent = "copied!";
45
          setTimeout(() => { btn.textContent = "copy"; }, 1500);
46
        });
47
      }
48
      document.querySelectorAll("time.note-date").forEach(el => {
49
        const d = new Date(el.getAttribute("datetime"));
50
        if (!isNaN(d)) { el.textContent = d.toLocaleString(); }
51
      });
52
    </script>
53
  </body>
54
</html>