summaryrefslogtreecommitdiff
path: root/internal/template/templates/common/layout.html
blob: ce501cf6f44f4d02c1396d2e451d8d9e2e174c2e (plain) (blame)
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
{{ define "base" }}
<!DOCTYPE html>
<html lang="{{ replace .language "_" "-"}}">
<head>
    <meta charset="utf-8">
    <title>{{template "title" .}} - Miniflux</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="Miniflux">
    <link rel="manifest" href="{{ route "webManifest" }}" crossorigin="use-credentials">

    <meta name="robots" content="noindex,nofollow">
    <meta name="referrer" content="no-referrer">
    <meta name="google" content="notranslate">

    <!-- Favicons -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{ route "appIcon" "filename" "favicon-16.png" }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ route "appIcon" "filename" "favicon-32.png" }}">

    <!-- Android icons -->
    <link rel="icon" type="image/png" sizes="128x128" href="{{ route "appIcon" "filename" "icon-128.png" }}">
    <link rel="icon" type="image/png" sizes="192x192" href="{{ route "appIcon" "filename" "icon-192.png" }}">

    <!-- iOS icons -->
    <link rel="apple-touch-icon" sizes="120x120" href="{{ route "appIcon" "filename" "icon-120.png" }}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ route "appIcon" "filename" "icon-152.png" }}">
    <link rel="apple-touch-icon" sizes="167x167" href="{{ route "appIcon" "filename" "icon-167.png" }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ route "appIcon" "filename" "icon-180.png" }}">

    <meta name="theme-color" content="{{ theme_color .theme "light" }}" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="{{ theme_color .theme "dark" }}" media="(prefers-color-scheme: dark)">

    <link rel="stylesheet" type="text/css" href="{{ route "stylesheet" "name" .theme "checksum" .theme_checksum }}">

    {{ if and .user .user.Stylesheet }}
    {{ $stylesheetNonce := nonce }}
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data:; media-src *; frame-src *; style-src 'self' 'nonce-{{ $stylesheetNonce }}'">
    <style nonce="{{ $stylesheetNonce }}">{{ .user.Stylesheet | safeCSS }}</style>
    {{ else }}
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data:; media-src *; frame-src *">
    {{ end }}

    <script src="{{ route "javascript" "name" "app" "checksum" .app_js_checksum }}" defer></script>
    <script src="{{ route "javascript" "name" "service-worker" "checksum" .sw_js_checksum }}" defer id="service-worker-script"></script>
</head>
<body
    {{ if .csrf }}data-csrf-token="{{ .csrf }}"{{ end }}
    data-add-subscription-url="{{ route "addSubscription" }}"
    data-entries-status-url="{{ route "updateEntriesStatus" }}"
    data-refresh-all-feeds-url="{{ route "refreshAllFeeds" }}"
    {{ if .webAuthnEnabled }}
    data-webauthn-register-begin-url="{{ route "webauthnRegisterBegin" }}"
    data-webauthn-register-finish-url="{{ route "webauthnRegisterFinish" }}"
    data-webauthn-login-begin-url="{{ route "webauthnLoginBegin" }}"
    data-webauthn-login-finish-url="{{ route "webauthnLoginFinish" }}"
    data-webauthn-delete-all-url="{{ route "webauthnDeleteAll" }}"
    {{ end }}
    {{ if .user }}{{ if not .user.KeyboardShortcuts }}data-disable-keyboard-shortcuts="true"{{ end }}{{ end }}>

    {{ if .user }}

    <a class="skip-to-content-link" href="#main">
      Skip to content
    </a>
    <div class="header">
        <nav>
            <div class="logo">
                <a aria-label="{{ t "menu.home_page" }}" href="{{ route .user.DefaultHomePage }}">
                    Mini<span>flux</span>
                </a>
                <button aria-controls="header-menu" aria-expanded="false" aria-label="{{ t "menu.title" }}">
                    <svg aria-label="{{ t "menu.title" }}" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
                    </svg>
                </button>
            </div>
            <ul id="header-menu">
                <li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
                    <a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
                      {{ if gt .countUnread 0 }}
                          <span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
                      {{ end }}
                    </a>
                </li>
                <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
                    <a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
                </li>
                <li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
                    <a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
                </li>
                <li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
                    <a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
                      {{ if gt .countErrorFeeds 0 }}
                          <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
                      {{ end }}
                    </a>
                    <a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
                        (+)
                    </a>
                </li>
                <li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
                    <a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
                </li>
                <li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
                    <a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
                </li>
                {{ if not hasAuthProxy }}
                    <li>
                        <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
                    </li>
                {{ end }}
            </ul>
        </nav>
        <search role="search" class="search">
            <details {{ if $.searchQuery }}open{{ end }}>
                <summary>
                    <span>{{ t "search.label" }}</span>
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
                    </svg>
                </summary>
                <form action="{{ route "searchEntries" }}" aria-labelledby="search-input-label">
                    <input type="search" name="q" aria-label="{{ t "search.label" }}" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
                    <button type="submit">{{ t "search.submit" }}</button>
                </form>
            </details>
        </search>
    </div>
    {{ end }}
    {{ if .flashMessage }}
        <div class="flash-message alert alert-success">{{ .flashMessage }}</div>
    {{ end }}
    {{ if .flashErrorMessage }}
        <div class="flash-error-message alert alert-error">{{ .flashErrorMessage }}</div>
    {{ end }}

    {{template "header" .}}

    <main id="main">
        {{template "content" .}}
    </main>
    <template id="keyboard-shortcuts">
        <div id="modal-left">
            <button class="btn-close-modal" aria-label="Close">x</button>
            <h3 tabindex="-1" id="dialog-title">{{ t "page.keyboard_shortcuts.title" }}</h3>

            <div class="keyboard-shortcuts">
                <p>{{ t "page.keyboard_shortcuts.subtitle.sections" }}</p>
                <ul>
                    <li>{{ t "page.keyboard_shortcuts.go_to_unread" }} = <strong>g + u</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_starred" }} = <strong>g + b</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_history" }} = <strong>g + h</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_feeds" }} = <strong>g + f</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_categories" }} = <strong>g + c</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_settings" }} = <strong>g + s</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.show_keyboard_shortcuts" }} = <strong>?</strong></li>
                    <li>{{ t "menu.add_feed" }} = <strong>+</strong></li>
                </ul>

                <p>{{ t "page.keyboard_shortcuts.subtitle.items" }}</p>
                <ul>
                    <li>{{ t "page.keyboard_shortcuts.go_to_previous_item" }} = <strong>p</strong>, <strong>k</strong>, <strong>&#x23F4;</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_next_item" }} = <strong>n</strong>, <strong>j</strong>, <strong>&#x23F5;</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_feed" }} = <strong>F</strong></li>
                </ul>

                <p>{{ t "page.keyboard_shortcuts.subtitle.pages" }}</p>
                <ul>
                    <li>{{ t "page.keyboard_shortcuts.go_to_previous_page" }} = <strong>h</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_next_page" }} = <strong>l</strong></li>
                </ul>

                <p>{{ t "page.keyboard_shortcuts.subtitle.actions" }}</p>
                <ul>
                    <li>{{ t "page.keyboard_shortcuts.open_item" }} = <strong>o</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.open_original" }} = <strong>v</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.open_original_same_window" }} = <strong>V</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.open_comments" }} = <strong>c</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.open_comments_same_window" }} = <strong>C</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.toggle_read_status_next" }} = <strong>m</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.toggle_read_status_prev" }} = <strong>M</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.mark_page_as_read" }} = <strong>A</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.download_content" }} = <strong>d</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.toggle_bookmark_status" }} = <strong>f</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.save_article" }} = <strong>s</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.toggle_entry_attachments" }} = <strong>a</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.scroll_item_to_top" }} = <strong>z + t</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.refresh_all_feeds" }} = <strong>R</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.remove_feed" }} = <strong>#</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.go_to_search" }} = <strong>/</strong></li>
                    <li>{{ t "page.keyboard_shortcuts.close_modal" }} = <strong>Esc</strong></li>
                </ul>
            </div>
        </div>
    </template>

    <template id="icon-read">{{ icon "read" }}</template>
    <template id="icon-unread">{{ icon "unread" }}</template>
    <template id="icon-star">{{ icon "star" }}</template>
    <template id="icon-unstar">{{ icon "unstar" }}</template>
    <template id="icon-save">{{ icon "save" }}</template>

    <div id="toast-wrapper" role="alert" aria-live="assertive" aria-atomic="true">
        <span id="toast-msg"></span>
    </div>
</body>
</html>
{{ end }}