~nicoco/nicoco.fr

ref: 9e0eee03e4ebf35bde80b1b6b108f4bcc6f25af2 nicoco.fr/templates/layout.html -rw-r--r-- 3.0 KiB
9e0eee03nicoco Improve noJS comments layout 2 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="{{ '/css/style.css'|url }}">
{% if this.require_pygments %}
<link rel="stylesheet" href="{{ get_pygments_stylesheet()|url }}">
{% endif %}
<title>{{ this.title }} — nicoco.fr</title>

<body>
  <div class="container">
    <div class="header">
      <h1>{{ this.suptitle }} — nicoco.fr</h1>
      <nav class="navigation">
        <ul>
          {% for title in ['~', '/blog', '/publis', '/code'] %}
          <li>
            {% if this._path == title or title == "~" and this._path == "/" %}
            {{ title }}
            {% else %}
            <a href="{{ '/' if title == '~' else title|url }}">{{ title }}</a>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </nav>
    </div>
    <div class="body">
      {% block body %}{% endblock %}
    </div>
    {% if this.commentable %}
    <template id="commentTemplate">
      <div class="comment">
        <div id="main">
          by <slot id="author"></slot> (<slot id="date"></slot>)
          <div id="content"></div>
        </div>
        <div id="edit">
          <details>
            <summary>Edit<button id="delete">Delete</button><button id="undelete">Undelete</button></summary>
            <input type="text" id="editAuthor" required="">
            <textarea id="editText" required=""></textarea>
            <button id="save">Save</button>
          </details>
        </div>
        <div id="admin">
          <button id="approve">Approve</button>
          <button id="unapprove">Unapprove</button>
          <button id="purge">Purge</button>
        </div>
      </div>
      <link rel="stylesheet" href="{{ '/css/style.css'|url }}">
      <link rel="stylesheet" href="{{ '/css/comments.css'|url }}">
    </template>
    <template id="commentThreadTemplate">
      <p id="commentNumber"></p>
      <div id="comments"></div>
    </template>
    <noscript><small>
      <hr>
      Comments are not visible here without javascript, but if you feel like reading some JSON,
      <a href="/owncomments/thread_by_referer">go ahead</a>.
      Posting a comment should work nonetheless.
      <hr>
    </small></noscript>
    <div id="commentThreadContainer"></div>
    <form id="newCommentForm" action="/owncomments/comments/form" method="POST">
      <input type="text" name="author_name" id="commenterName" placeholder="Your name" required="" />
      <textarea id="commentBody" name="text" placeholder="Your comment" required=""></textarea>
      <button id="commentSubmit">
        Add
      </button>
    </form>
    <script type="module">
      import { OwnComments } from '/js/comments.js'
      window.comments = new OwnComments("/owncomments")
    </script>
    {% endif %}
    <hr>
    <footer class="footer">
      Made with <a href="https://fsfe.org/campaigns/ilovefs/" style="color: #bf616a;">&lt;3</a>
      - <a href="mailto:nicoco@nicoco.fr">Contact</a>
      - <a href="https://git.sr.ht/~nicoco/nicoco.fr">Source</a>
    </footer>
  </div>
</body>