Website redesign

website/site/content/docs/webapp/autotagging.md

@@ -5,6 +5,7 @@ weight = 90
 mktoc = true
 +++
 
+# Auto-Tagging
 
 Auto-Tagging must be enabled in the collective profile. Docspell can
 go through your items periodically and learn from your existing tags.
@@ -20,7 +21,7 @@ determined by looking at the text of the document. It would mean that
 Docspell could learn relationships that are not correct and then tag
 the next incoming items with `Done`.
 
-{{ figure(file="collective-settings-autotag.png") }}
+{{ figure2(light="collective-settings-autotag.png", dark="collective-settings-autotag_dark.png") }}
 
 That is why you need to specify what tags to learn. This is done by
 defining whitelist or a blacklist of tag categories. When defining a

website/site/content/docs/webapp/bookmarks.md

@@ -5,6 +5,8 @@ weight = 35
 mktoc = true
 +++
 
+# Bookmarks
+
 Bookmarks allow you to save queries under a name and refer to it from the search menu.
 
 ## Creating bookmarks
@@ -12,13 +14,13 @@ Bookmarks allow you to save queries under a name and refer to it from the search
 Bookmarks can be created from the search view. Apply some criteria to
 select items and then click on the top left menu.
 
-{{ figure(file="bookmarks-02.png") }}
+{{ figure2(light="bookmarks-02.png", dark="bookmarks-02_dark.png") }}
 
 This opens a small form right below the search bar where you can
 adjust the query and enter the name. You can also decide whether this
 bookmark is for all users or just for you.
 
-{{ figure(file="bookmarks-03.png") }}
+{{ figure2(light="bookmarks-03.png", dark="bookmarks-03_dark.png") }}
 
 The other way is to go to *Manage Data* where you can edit and delete
 existing bookmarks and also create new ones.
@@ -31,8 +33,8 @@ that shows you all your bookmarks as well as your shares. Clicking one
 "enables" it, meaning the query is used in conjunction with other
 criteria.
 
-<div class="columns is-centered">
-  {{ imgnormal(file="bookmarks-01.png", width="") }}
+<div class="flex items-center justify-center">
+  {{ imgnormal2(light="bookmarks-01.png", dark="bookmarks-01_dark.png", width="") }}
 </div>
 
 An active bookmark has a check icon next to its name.
@@ -47,7 +49,7 @@ registered users), expired shares are shown as well.
 The *Manage Data* page has a section for bookmarks. There you can
 delete and edit bookmarks.
 
-{{ figure(file="bookmarks-04.png") }}
+{{ figure2(light="bookmarks-04.png", dark="bookmarks-04_dark.png") }}
 
 The personal bookmarks are only visible to you. The collective
 bookmarks are visible to every user in the collective, which also

website/site/content/docs/webapp/curate.md

@@ -3,11 +3,13 @@ title = "Curate Items"
 weight = 20
 +++
 
+# Curate items
+
 Curating the items meta data helps finding them later. This page
 describes how you can quickly go through those items and correct or
 amend with existing data.
 
-# Select New items
+## Select New items
 
 After files have been uploaded and the job executor created the
 corresponding items, they will show up on the main page. All items the
@@ -15,14 +17,14 @@ job executor has just created are initially marked as *New*. The
 option *Inbox* in the left search menu can be used to select only new
 items:
 
-{{ figure(file="docspell-curate-1.png") }}
+{{ figure2(light="docspell-curate-1.png", dark="docspell-curate-1_dark.png") }}
 
 Then you can go through all new items and check their metadata: Click
 on the first item to open the detail view. This shows the documents
 and the meta data in the header.
 
 
-# Modify if necessary
+## Modify if necessary
 
 You can compare the data with the documents and change as you like.
 Since the item status is *New*, you'll see the suggestions docspell
@@ -31,7 +33,7 @@ select another one by clicking its name in the suggestion list. In
 state *New* the left menu is fully expanded so you see all suggestions
 immediatly.
 
-{{ figure(file="docspell-curate-3.png") }}
+{{ figure2(light="docspell-curate-3.png", dark="docspell-curate-3_dark.png") }}
 
 
 When you change something in the form, it is immediatly applied.
@@ -39,13 +41,11 @@ When you change something in the form, it is immediatly applied.
 It is also possible to change tags and folders in the list view via
 drag&drop.
 
-<div class="columns is-centered">
-  <div class="column is-narrow">
-  {{ imgnormal(file="drop-tag.png", width="500px") }}
-  </div>
+<div class="flex items-center justify-center">
+  {{ imgnormal2(light="drop-tag.png", dark="drop-tag_dark.png", width="500px") }}
 </div>
 
-# Confirm
+## Confirm
 
 If everything looks good, click the *Confirm* button to confirm the
 current data. The *New* status goes away and also the suggestions are
@@ -54,10 +54,10 @@ before. You can always go back by clicking the *Unconfirm* button at
 the right of the menu bar.
 
 
-{{ figure(file="docspell-curate-5.png") }}
+{{ figure2(light="docspell-curate-5.png", dark="docspell-curate-5_dark.png") }}
 
 
-# Proceed with next item
+## Proceed with next item
 
 To look at the next item in the search results, click the *Next*
 button in the menu (next to the *Edit* button). Clicking next, will
@@ -65,4 +65,4 @@ keep the current view, so you can continue checking the data. If you
 are on the last item, the view switches to the listing view when
 clicking *Next*.
 
-{{ figure(file="docspell-curate-6.png") }}
+{{ figure2(light="docspell-curate-6.png", dark="docspell-curate-6_dark.png") }}

website/site/content/docs/webapp/customfields.md

@@ -3,6 +3,8 @@ title = "Custom Fields"
 weight = 18
 +++
 
+# Custom Fields
+
 Custom fields allow to attach user defined metadata to items. For
 example, you may want to track the amount of each receipt or the
 invoice number etc. You can define fields that can be associated to
@@ -15,7 +17,7 @@ Custom fields can be deactivated in the user settings.
 Go to the _Manage Data_ page, that can be reached from the top right
 menu. One entry at the left shows _Custom Fields_:
 
-{{ figure(file="custom-fields-01.png") }}
+{{ figure2(light="custom-fields-01.png", dark="custom-fields-01_dark.png") }}
 
 Fields are defined per collective. They can also be created in the
 item edit menu (just like creating organizations). The `#Usage`
@@ -23,7 +25,7 @@ columns show how many items have a value for this field.
 
 A field consists of a name, a format and optional a label:
 
-{{ figure(file="custom-fields-02.png") }}
+{{ figure2(light="custom-fields-02.png", dark="custom-fields-02_dark.png") }}
 
 The name and format is required. The name must be unique among all
 your fields and it is special in that it must be a valid _identifier_:
@@ -73,7 +75,7 @@ corresponding input field is shown asking for values. You can select
 multiple fields. Only one value is allowed to set per item and field.
 The example below shows a text field and a money field:
 
-{{ figure(file="custom-fields-03.png") }}
+{{ figure2(light="custom-fields-03.png", dark="custom-fields-03_dark.png") }}
 
 You can create new fields right here without going to the _Manage
 Data_ page, by clicking the plus icon (1). The format of each field is
@@ -83,14 +85,13 @@ As soon as a correct value is typed in, it is saved to the item and
 shown in the header next to the tags. If you click the trash-can icon
 next to an input, the value is removed from the item.
 
-{{ figure(file="custom-fields-04.png") }}
+{{ figure2(light="custom-fields-04.png", dark="custom-fields-04_dark.png") }}
 
 The item card also shows custom fields, in the same place as tags:
 
-<div class="columns is-centered">
-    <div class="column is-one-quarter">
-    {{ imgnormal(file="custom-fields-05.png", width=300) }}
-    </div>
+
+<div class="flex flex-row items-center justify-center">
+{{ imgnormal2(light="custom-fields-05.png", dark="custom-fields-05_dark.png", width=300) }}
 </div>
 
 Adding values for custom fields in
@@ -102,13 +103,13 @@ Adding values for custom fields in
 The search menu shows the same dropdown for selecting a custom field.
 Then you can set values that are matched against your items.
 
-{{ figure(file="custom-fields-06.png") }}
+{{ figure2(light="custom-fields-06.png", dark="custom-fields-06_dark.png") }}
 
 Values are also validated in the search form. Only valid values are
 sent to the server for searching. There is one exception: you can use
 a wildcard at beginning and/or end to do a substring match:
 
-{{ figure(file="custom-fields-07.png") }}
+{{ figure2(light="custom-fields-07.png", dark="custom-fields-07_dark.png") }}
 
 For all numeric and money values, a little summary is displayed next
 to the overall item count at the top of the page.

website/site/content/docs/webapp/dashboards.md

@@ -5,18 +5,20 @@ weight = 5
 mktoc = true
 +++
 
+# Dashboards
+
 The main page shows a dashboard that can be configured to show some
 aspects of your documents. The following shows the default dashboard
 that is bundled in the application:
 
-{{ figure(file="dashboards-01.png") }}
+{{ figure2(light="dashboards-01.png", dark="dashboards-01_dark.png") }}
 
 It shows a predefined set of information, which can be customized. You
 can create multiple dashboards and switch between them, you can also
 define one as the "default" which is shown when the page loads.
 
 
-# Side menu
+## Side menu
 
 The side menu contains a list of useful links. The first loads the
 default dashboard. All others (and more) are available through the
@@ -29,7 +31,7 @@ The _Settings_ section contains some links to useful settings and the
 _Manage_ section has links to metadata that can be managed separately.
 These links are fixed and cannot be changed.
 
-# Dasbhoard properties
+## Dasbhoard properties
 
 The main component on this page is the "dashboard". A dashboard has
 the following properties (all required):
@@ -57,7 +59,7 @@ removing boxes and the dashboard properties.
 
 After clicking _Edit Dashboard_ the dashboard changes into a form:
 
-{{ figure(file="dashboards-02.png") }}
+{{ figure2(light="dashboards-02.png", dark="dashboards-02_dark.png") }}
 
 Note the message on the top: it indicates that this dashboard is the
 bundled one that is used only if there are no custom ones available.
@@ -72,19 +74,19 @@ reorder the boxes using the arrow buttons or drag and drop. When
 satisfied, click _Submit_. In the example, the last two boxes are
 removed and box decorations are enabled for the field overview box.
 
-{{ figure(file="dashboards-03.png") }}
+{{ figure2(light="dashboards-03.png", dark="dashboards-03_dark.png") }}
 
 When you now edit this dasbhoard again, the message is gone and you
 can change the dashboard and also delete it. You can also create a new
 dashboard or copy the current one.
 
-{{ figure(file="dashboards-04.png") }}
+{{ figure2(light="dashboards-04.png", dark="dashboards-04_dark.png") }}
 
 In this example, the dashboard was copied, then the message was
 changed and it was set to the default dashboard. This is how it looks
 now:
 
-{{ figure(file="dashboards-05.png") }}
+{{ figure2(light="dashboards-05.png", dark="dashboards-05_dark.png") }}
 
 When there is more than one dashboard, the side menu shows all of
 them. The little house icon indicates whether this is the default

website/site/content/docs/webapp/emailsettings.md

@@ -5,6 +5,8 @@ weight = 40
 mktoc = true
 +++
 
+# E-Mail Settings
+
 Docspell has a good integration for E-Mail. You can send e-mails
 related to an item and you can import e-mails from your mailbox into
 docspell.
@@ -24,7 +26,7 @@ your e-mail account to send mails on behalf of you and receive your
 mails.*
 
 
-# SMTP Settings
+## SMTP Settings
 
 For sending mail, you need to provide information to connect to a SMTP
 server. Every e-mail provider has this information somewhere
@@ -32,7 +34,7 @@ available.
 
 Configure this in *User Settings -> E-Mail Settings (SMTP)*:
 
-{{ figure(file="mail-settings-1.png") }}
+{{ figure2(light="mail-settings-1.png", dark="mail-settings-1_dark.png") }}
 
 First, you need to provide some name that is used to recognize this
 account. This name is also used in URLs to docspell and so it must not
@@ -61,7 +63,7 @@ possible to set up these settings for multiple providers, so you can
 choose from which account you want to send mails.
 
 
-# IMAP Settings
+## IMAP Settings
 
 For receiving e-mails, you need to provide information to connect to
 an IMAP server. Your e-mail provider should have this information
@@ -69,7 +71,7 @@ somewhere available.
 
 Configure this in *User Settings -> E-Mail Settings (IMAP)*:
 
-{{ figure(file="mail-settings-2.png") }}
+{{ figure2(light="mail-settings-2.png", dark="mail-settings-2_dark.png") }}
 
 First you need to define a *Name* to recognize this connection inside
 docspell. This name is also used in URLs to docspell and so it must

website/site/content/docs/webapp/finding.md

@@ -5,6 +5,8 @@ weight = 30
 mktoc = true
 +++
 
+# Finding items
+
 Items can be searched by their annotated meta data and their contents
 using full text search. The landing page shows a list of current
 items. Items are displayed sorted by their date, newest first.
@@ -12,8 +14,6 @@ items. Items are displayed sorted by their date, newest first.
 
 # Search Bar
 
-{{ imgright(file="search-bar.png") }}
-
 The search bar let's you search in item and attachment names names and
 do fulltext search. The icon next to the search field can switch
 between these modes.
@@ -44,7 +44,7 @@ unmodified.
 
 # Search Menu
 
-{{ imgright(file="search-menu.png") }}
+{{ imgright2(light="search-menu.png", dark="search-menu_dark.png") }}
 
 The search menu can be opened by clicking the left icon in the top
 bar. It shows some options to constrain the item list:
@@ -79,11 +79,11 @@ You can also use drag&drop to tag items in this view. Simply drag an
 item card and drop it on a tag, this will toggle the tag on the item.
 If the item was tagged already, the tag is removed, otherwise added.
 
-<div class="columns is-centered">
-  <div class="column">
-  {{ imgnormal(file="drop-tag.png", width="400px") }}
-  </div>
-</div>
+<figure style="width:430px">
+    <img class="dark:hidden" src="../drop-tag.png" >
+    <img class="hidden dark:inline-block" src="../drop-tag_dark.png" >
+</figure>
+
 
 ## Folder
 
@@ -186,6 +186,7 @@ contents, attachment names, item name and item notes.
 When using full text search, each item in the result list is annotated
 with the highlighted occurrence of the match.
 
-<figure class="image">
-  <img src="/img/fts-feature.png">
+<figure>
+    <img src="/img/fts-feature.png" class="light-block">
+    <img src="/img/fts-feature_dark.png" class="dark-block">
 </figure>

website/site/content/docs/webapp/itemcard-customize.md

@@ -1,10 +1,10 @@
 +++
 title = "Customize Item Card"
 weight = 39
-[extra]
-mktoc = true
 +++
 
+# Customize item card
+
 The search view or list view displays the search results as a list of
 item cards. Each cards represents one item.
 
@@ -12,7 +12,7 @@ The item card can be customized a bit in the user settings. In the
 user menu (the user icon, top right), choose _User Profile_ and then
 _UI Settings_. Among other things, there is a _Item Cards_ section:
 
-{{ figure(file="itemcard-customize-01.png") }}
+{{ figure2(light="itemcard-customize-01.png", dark="itemcard-customize-01_dark.png") }}
 
 ### Max Note Length
 
@@ -33,14 +33,14 @@ specified via this setting. A _small_ preview uses about 80px width, a
 _medium_ one 160px and _large_ means to use the available space in the
 card.
 
-<div class="columns">
-    <div class="column">
+<div class="grid grid-cols-3 gap-4">
+    <div class="">
       {{ imgnormal(file="itemcard-customize-04.png", width="300")}}
     </div>
-    <div class="column">
+    <div class="">
       {{ imgnormal(file="itemcard-customize-03.png", width="300")}}
     </div>
-    <div class="column">
+    <div class="">
       {{ imgnormal(file="itemcard-customize-02.png", width="300")}}
     </div>
 </div>

website/site/content/docs/webapp/mailitem.md

@@ -1,19 +1,16 @@
 +++
 title = "Send items via E-Mail"
 weight = 50
-[extra]
-mktoc = true
 +++
 
+# E-Mail Settings (SMTP)
+
 You can send e-mails from within docspell attaching the files of an
 item. This is useful to collaborate or share certain documents with
 people outside docspell.
 
 All sent mails are stored attached to the item.
 
-
-# E-Mail Settings (SMTP)
-
 To send mails, there are SMTP settings required. Please see the page
 about [e-mail settings](@/docs/webapp/emailsettings.md#smtp-settings).
 
@@ -27,7 +24,7 @@ item, or you may choose to send the mail without any attachments.
 In the item detail view, click on the envelope icon to open the mail
 form:
 
-{{ figure(file="mail-item-1.png") }}
+{{ figure2(light="mail-item-1.png", dark="mail-item-1_dark.png") }}
 
 Then write the mail. Multiple recipients may be specified. The input
 field shows completion proposals from all contacts in your address
@@ -61,8 +58,8 @@ database and you'll see a message in the form.
 If there is an e-mail for an item, another section is rendered below
 the item notes.
 
-{{ figure(file="mail-item-2.png") }}
+{{ figure2(light="mail-item-2.png", dark="mail-item-2_dark.png") }}
 
 Clicking on a the eye icon opens the mail.
 
-{{ figure(file="mail-item-4.png") }}
+{{ figure2(light="mail-item-4.png", dark="mail-item-4_dark.png") }}

website/site/content/docs/webapp/merge.md

@@ -5,12 +5,14 @@ weight = 100
 mktoc = true
 +++
 
+# Merge Items
+
 Merging multiple items into one lets you transfer metadata and
 attachments from multiple items into a single one. The items that have
 been merged are removed afterwards.
 
-# Usage
-## Select items to merge
+## Usage
+### Select items to merge
 
 Multiple items can be merged where all metadata is copied into the
 target item. This can be done by selecting multiple items to merge via
@@ -19,26 +21,26 @@ the multi selection tool as described
 
 Then select some items (at least 2) and click the merge tool button.
 
-{{ figure(file="merge-01.png") }}
+{{ figure2(light="merge-01.png", dark="merge-01_dark.png") }}
 
 
-## Edit order of items
+### Edit order of items
 
 This opens the merge view, where you can change the order of the
 selected items.
 
-{{ figure(file="merge-02.png") }}
+{{ figure2(light="merge-02.png", dark="merge-02_dark.png") }}
 
 The order of this list can matter when merging (see below). You can
 move items via drag and drop or the buttons on the right.
 
 
-## Click merge
+### Click merge
 
 Once you clicke the *Merge* button, the items are merged and you will
 be taken to the search view.
 
-{{ figure(file="merge-04.png") }}
+{{ figure2(light="merge-04.png", dark="merge-04_dark.png") }}
 
 As you can see, tags are all combined. Custom fields of same name are
 also merged, where possible. For text fields, the values are

website/site/content/docs/webapp/multiedit.md

@@ -3,6 +3,8 @@ title = "Multi Edit"
 weight = 25
 +++
 
+# Multi-Edit
+
 Docspell allows to edit and delete multiple items at once.
 
 ## Toggle Selection Mode
@@ -12,7 +14,7 @@ changing into "select mode". This changes the view slightly by
 changing the menu to the main area and the item cards have a dashed
 border:
 
-{{ figure(file="multiedit-01.png") }}
+{{ figure2(light="multiedit-01.png", dark="multiedit-01_dark.png") }}
 
 Then select items by clicking on the card. You can also change the
 search form and add more items to the selection. The top left shows
@@ -20,7 +22,7 @@ how many items are selected and allows to select and deselect all
 visible items. Selected items are displayed grey-ed out with a big
 check icon. Clicking this icon deselects the item.
 
-{{ figure(file="multiedit-02.png") }}
+{{ figure2(light="multiedit-02.png", dark="multiedit-02_dark.png") }}
 
 
 ## Choose an Action: Edit
@@ -29,12 +31,12 @@ Once all desired items are selected, choose an action. Currently you
 can edit or delete them. When clicking "edit", the left side menu
 changes to a form for changing the metadata:
 
-{{ figure(file="multiedit-03.png") }}
+{{ figure2(light="multiedit-03.png", dark="multiedit-03_dark.png") }}
 
 Changing the metadata in that form immediately applies it to all
 selected items. You can change the selection anytime.
 
-{{ figure(file="multiedit-04.png") }}
+{{ figure2(light="multiedit-04.png", dark="multiedit-04_dark.png") }}
 
 
 If you are done, just click on the *Close* button or the icon from the
@@ -61,5 +63,3 @@ When choosing the delete action, a confirmation dialog shows up. If
 you confirm the deletion, then all selected items are deleted at the
 server and the view is switched back to normal mode afterwards. Note
 that deleting a lot of items may take a while to finish.
-
-{{ figure(file="multiedit-06.png") }}

website/site/content/docs/webapp/notification.md

@@ -5,6 +5,8 @@ weight = 60
 mktoc = true
 +++
 
+# Notifications
+
 Docspell can notify on specific events and it can run queries
 periodically and notify about the result.
 
@@ -16,11 +18,10 @@ item. Periodic queries can be used for running queries regularly and
 get the result sent as message.
 
 Both require to first select a channel, for how the message should be
-sent.
+sent. This can be done in *User profile → Notification Channels*.
 
-{{ imgnormal(file="notification-01.png", width="250px") }}
 
-# Channels
+## Channels
 
 Channels are means to deliver a message. Currently, docspell supports
 these channels:
@@ -32,7 +33,12 @@ these channels:
 - [Matrix](https://matrix.org)
 - [Gotify](https://gotify.net)
 
-## Matrix
+<div class="justify-center flex">
+{{ imgnormal2(light="notification-01.png", dark="notification-01_dark.png", width="250px") }}
+</div>
+
+
+### Matrix
 
 Matrix is an open network for secure and decentralized communication.
 It relies on open standards and can be self-hosted.
@@ -45,9 +51,9 @@ You can find the room id in your room settings under "Advanced" in
 Element. The access key is in your user settings under tab "Help &
 About" in Element.
 
-{{ figure(file="notification-02.png") }}
+{{ figure2(light="notification-02.png", dark="notification-02_dark.png") }}
 
-## Gotify
+### Gotify
 
 Gotify is a simple application for receiving messages to be notified
 on several clients via websockets. It is great for connecting
@@ -55,10 +61,10 @@ applications to your devices.
 
 It requires only your gotify url and the application secret.
 
-{{ figure(file="notification-03.png") }}
+{{ figure2(light="notification-03.png", dark="notification-03_dark.png") }}
 
 
-## E-Mail
+### E-Mail
 
 E-Mails are sent using one of your configured [SMTP
 connections](@/docs/webapp/emailsettings.md#smtp-settings).
@@ -66,22 +72,22 @@ connections](@/docs/webapp/emailsettings.md#smtp-settings).
 The part `docspell.joex.send-mail.list-id` in joex' configuration file
 can be used to add a `List-Id` mail header to every notification mail.
 
-## HTTP Request
+### HTTP Request
 
 The most generic form is the channel *HTTP Request*. This just sends a
 POST request to a configured endpoint. The requests contains a JSON
 body with the event details.
 
-# Webhooks
+## Webhooks
 
 Webhooks are http requests that are generated on specific events in
 Docspell.
 
-## Events
+### Events
 
 You need to choose which events you are interested in.
 
-{{ figure(file="notification-04.png") }}
+{{ figure2(light="notification-04.png", dark="notification-04_dark.png") }}
 
 You can do so by selecting multiple event types or by clicking the
 *Notify on all events* checkbox.
@@ -93,7 +99,9 @@ a message from it.
 Additionally, it is possible to filter the events using an expression
 that is applied to the event data JSON structure.
 
-## Testing
+Events can be send to multiple channels.
+
+### Testing
 
 The webhook form allows you to look at some sample events. These
 events are generated from random data and show how the message would
@@ -105,7 +113,7 @@ event of the first of the selected event (or some chosen one, if
 *Notify on all events* is active) and sends it via the current
 channel.
 
-## JSON filter expression
+### JSON filter expression
 
 This filter allows to further constrain the events that trigger a
 notification. For example, it can be used to be notified only when
@@ -117,7 +125,7 @@ good way is to look at the sample events for the *HTTP Request*
 channel. These show the exact JSON structure that this filter is
 applied to (that applies to every channel).
 
-{{ figure(file="notification-05.png") }}
+{{ figure2(light="notification-05.png", dark="notification-05_dark.png") }}
 
 As an example: Choose the event *TagsChanged* and this filter
 expression: `content.added,removed.category=document_type` to be
@@ -127,12 +135,10 @@ notified whenever a tag is added or removed whose category is
 Please see [this page](@/docs/jsonminiquery/_index.md) for details
 about it.
 
-{% infobubble(mode="info", title="⚠ Please note") %}
-
+{% infobubble(title="Note") %}
 The webhook feature is still experimental. It starts out with only a
 few events to choose from and the JSON structure of events might
 change in next versions.
-
 {% end %}
 
 # Periodic Queries
@@ -146,7 +152,7 @@ items tagged *Todo* etc.
 
 ## Due Items Task
 
-{{ figure(file="notification-06.png") }}
+{{ figure2(light="notification-06.png", dark="notification-06_dark.png") }}
 
 The settings allow to customize the query for searching items. You can
 choose to only include items that have one or more tags (these are
@@ -180,9 +186,9 @@ selecting the items via form elements, you can define a custom
 [query](@/docs/query/_index.md) and optionally in combination with a
 [bookmark](@/docs/webapp/bookmarks.md).
 
-{{ figure(file="notification-07.png") }}
+{{ figure2(light="notification-07.png", dark="notification-07_dark.png") }}
 
-## Schedule
+### Schedule
 
 Both tasks have a *Schedule* field to specify the periodicity of the
 task. The syntax is similiar to a date-time string, like `2019-09-15

website/site/content/docs/webapp/processing.md

@@ -1,11 +1,13 @@
 +++
-title = "Processing Queue"
+title = "Job Queue"
 weight = 80
 [extra]
 mktoc = true
 +++
 
 
+# Job Queue
+
 The page *Processing Queue* shows the current state of document
 processing for your uploads. The page currently only shows at most the
 80 newest jobs. There is a maximum of 40 done jobs (successful,