Website redesign

website/site/content/docs/_index.md

@@ -1,9 +1,150 @@
 +++
-title = "Overview"
-template = "overview.html"
+title = "Documentation"
+template = "docs.html"
+page_template = "docs.html"
 insert_anchor_links = "right"
 +++
 
-# Note
 
-This content is not rendered. Everything is in the template.
+# Introduction
+
+Docspell aims to be a simple yet effective document organizer that
+makes stowing documents away very quick and finding them later
+reliable (and also fast). It is a bit opinionated and more targeted
+for home use and small/medium organizations.
+
+In contrast to many DMS, the main focus is not so much to provide all
+kinds of features to manually create organizational structures, like
+folder hierarchies, where you place the documents yourself. The
+approach is to leave it as a big pile of documents, but extract and
+attach metadata from each document. These are mainly properties that
+emerge from the document itself. The reason is that this is possible
+to automate. This makes it very simple to *add* documents, because
+there is no time spent to think about where to put it. And it is
+possible to apply different structures on top later, like show first
+all documents of a specific correspondent, then all with tag
+'invoice', etc. If these properties are attached to all documents, it
+is really easy to find a document. It even can be combined with
+fulltext search for the, hopefully rare, desperate cases.
+
+Of course, it is also possible to add custom properties and arbitrary
+tags.
+
+Docspell analyzes the text to find metadata automatically. It can
+learn from existing data and can apply
+[NLP](https://en.wikipedia.org/wiki/Natural_language_processing)
+techniques to support this. This metadata must be maintained manually
+in the application. Docspell looks for candidates for:
+
+- Correspondents
+- Concerned person or things
+- A date and due date
+- Tags
+
+For tags, it sets all that it thinks do apply. For the others, it will
+propose a few candidates and sets the most likely one to your item.
+
+This might be wrong, so it is recommended to curate the results.
+However, very often the correct one is either set or within the
+proposals where you fix it by a single click.
+
+Besides these properties, there are more metadata you can use to
+organize your files, for example custom fields, folders and notes.
+
+Docspell is also for programmers. Everything is available via a REST
+or HTTP api and can be easily used within your own scripts and tools,
+for example using `curl`. There are also features for "advanced use"
+and many configuration options.
+
+
+# Components
+
+Docspell consists of multiple components that run in separate
+processes:
+
+- REST server
+- JOEX, short for *job executor*
+- Fulltext Search Index (optional, currently Apache SOLR)
+
+The REST server provides the Api and the web application. The web
+application is a
+[SPA](https://en.wikipedia.org/wiki/Single-page_application) written
+in [Elm](https://elm-lang.org) and is a client to the REST api. All
+features are available via a http/rest api.
+
+The *joex* is the component that does the “heavy work”, executing
+long-running tasks, like processing files or importing your mails
+periodically. While the joex component also exposes a small REST api
+for controlling it, the main user interface is all inside the rest
+server api.
+
+The rest server and the job executor can be started multiple times in
+order to scale out. It must be ensured, that all connect to the same
+database. And it is also recommended (though not strictly required),
+that all components can reach each other.
+
+The fulltext search index is another separate component, where
+currently only [SOLR](https://solr.apache.org) is supported.
+Fulltext search is optional, so the SOLR component is not required if
+docspell is run without fulltext search support.
+
+
+# Terms
+
+In order to better understand the following pages, some terms are
+explained.
+
+## Item
+
+An *item* is roughly your document, only that an item may span
+multiple files, which are called *attachments*. An item has *meta
+data* associated:
+
+- a *correspondent*: the other side of the communication. It can be
+  an organization or a person.
+- a *concerning person* or *equipment*: a person or thing that
+  this item is about. Maybe it is an insurance contract about your
+  car.
+- *tag*: an item can be tagged with one or more tags (or labels). A
+  tag can have a *category*. This is intended for grouping tags, for
+  example a category `doctype` could be used to group tags like
+  `bill`, `contract`, `receipt` etc. Usually an item is not tagged
+  with more than one tag of a category.
+- a *folder*: a folder is similiar to a tag, but an item can only be
+  in exactly one folder (or none). Furthermore folders allow to
+  associate users, so that items are only visible to the users who are
+  members of a folder.
+- an *item date*: this is the date of the document – if this is not
+  set, the created date of the item is used.
+- a *due date*: an optional date indicating that something has to be
+  done (e.g. paying a bill, submitting it) about this item until this
+  date
+- a *direction*: one of "incoming" or "outgoing"
+- a *name*: some item name, defaults to the file name of the
+  attachments
+- some *notes*: arbitrary descriptive text. You can use markdown
+  here, which is properly formatted in the web application.
+
+## Collective
+
+The users of the application are part of a *collective*. A
+*collective* is a group of users that share access to the same
+items. The account name is therefore comprised of a *collective name*
+and a *user name*.
+
+All users of a collective are equal; they have same permissions to
+access all items. The items don't belong to a user, but to the
+collective.
+
+That means, to identify yourself when signing in, you have to give the
+collective name and your user name. By default it is separated by a
+slash `/`, for example `smith/john`. If your user name is the same as
+the collective name, you can omit one; so `smith/smith` can be
+abbreviated to just `smith`.
+
+By default, all users can see all items of their collective. A
+*folder* can be used to implement other visibilities: Every user can
+create a folder and associate members. It is possible to put items in
+these folders and docspell shows only items that are either in no
+specific folder or in a folder where the current user is owner or
+member.

website/site/content/docs/api/_index.md

@@ -3,9 +3,6 @@ title = "Api"
 description = "Contains documentation about the REST API."
 weight = 70
 insert_anchor_links = "right"
-template = "pages.html"
+template = "docs.html"
 sort_by = "weight"
-redirect_to = "docs/api/intro"
 +++
-
-No Content

website/site/content/docs/api/intro.md

@@ -3,10 +3,10 @@ title = "Api Introduction"
 description = "Api Basics"
 weight = 10
 insert_anchor_links = "right"
-[extra]
-mktoc = true
 +++
 
+# Api
+
 Docspell is designed as a REST server that uses JSON to exchange
 data. The REST api can be used to integrate docspell into your
 workflow.

website/site/content/docs/api/upload.md

@@ -3,10 +3,10 @@ title = "Upload Request"
 description = "Describes the upload request"
 weight = 20
 insert_anchor_links = "right"
-[extra]
-mktoc = true
 +++
 
+# Upload Request
+
 Uploads of files to docspell are always processed the same way, no
 matter if coming from a source, the integration endpoint or from the
 webapp.

website/site/content/docs/configure/_index.md

@@ -3,10 +3,11 @@ title = "Configuration"
 insert_anchor_links = "right"
 description = "Describes the configuration file and shows all default settings."
 weight = 40
-[extra]
-mktoc = true
+template = "docs.html"
 +++
 
+# Configuration
+
 Docspell's executables (restserver and joex) can take one argument – a
 configuration file. If that is not given, the defaults are used,
 overriden by environment variables. A config file overrides default

website/site/content/docs/dev/adr/_index.md

@@ -4,11 +4,14 @@ description = "Contains some ADRs, which are internal notes on decisions made."
 weight = 300
 sort_by = "weight"
 insert_anchor_links = "right"
-template = "pages.html"
+template = "docs.html"
+page_template = "docs.html"
 [extra]
-mktoc = true
+page_list = true
 +++
 
+# ADR
+
 This contains a list of ADRs, most of them are from very early. It
 often just contains notes that could go nowhere else, but still should
 be captured.

website/site/content/docs/dev/building.md

@@ -3,6 +3,7 @@ title = "Building Docspell"
 weight = 0
 +++
 
+# Building
 
 You must install [sbt](https://scala-sbt.org),
 [nodejs](https://www.npmjs.com/get-npm) (for the `npm` command) and

website/site/content/docs/dev/development.md

@@ -3,7 +3,9 @@ title = "Tips & Setup"
 weight = 20
 +++
 
-# Starting Servers with `reStart`
+# Setup / Tips
+
+## Starting Servers with `reStart`
 
 When developing, it's very convenient to use the [revolver sbt
 plugin](https://github.com/spray/sbt-revolver). Start the sbt console
@@ -29,7 +31,7 @@ sbt:docspell-root> reStart
 ```
 
 
-# Custom config file
+## Custom config file
 
 The sbt build is setup such that a file `dev.conf` in the directory
 `local` (at root of the source tree) is picked up as config file, if

website/site/content/docs/dev/translation.md

@@ -3,6 +3,7 @@ title = "Translating Web-UI"
 weight = 10
 +++
 
+# UI Translation
 
 Help with translating the web-ui is greatly appreciated. I can only
 provide translations for English and German, and these may be wrong -
@@ -16,7 +17,7 @@ messages.
 
 This guide assumes no knowledge about Elm at all.
 
-# TL;DR
+## TL;DR
 
 If you are already familiar with Elm, here is the TL;DR:
 
@@ -92,7 +93,7 @@ sbt:docspell-root> make
 This will take a while, you need to wait until this is finished.
 
 
-## Start the application
+### Start the application
 
 If sbt is not started, start sbt from within the source root. Also
 export the `DOCSPELL_ENV` variable *before* starting sbt:

website/site/content/docs/faq/_index.md

@@ -3,8 +3,8 @@ title = "FAQ"
 weight = 100
 description = "Frequently asked questions."
 insert_anchor_links = "right"
+template = "docs.html"
 [extra]
-mktoc = true
 +++
 
 # FAQ

website/site/content/docs/features/_index.md

@@ -1,8 +1,9 @@
 +++
 title = "Features and Limitations"
-weight = 10
+weight = 9
 insert_anchor_links = "right"
 description = "A list of features and limitations."
+template = "docs.html"
 +++
 
 # Features
@@ -20,7 +21,7 @@ description = "A list of features and limitations."
 - A powerful [query language](@/docs/query/_index.md) to find
   documents
 - use [bookmarks](@/docs/webapp/bookmarks.md) to save more complex queries
-- customizable [dashboads](@/docs/webapp/dashboards.md) as the main page
+- customizable [dashboards](@/docs/webapp/dashboards.md) as the main page
 - Non-destructive: all your uploaded files are never modified and can
   always be downloaded untouched
 - Organize files using tags, folders, [Custom
@@ -80,8 +81,6 @@ description = "A list of features and limitations."
     files, watch folders and many more!
   - [Android App](@/docs/tools/android.md) to quickly upload files
     from your android devices
-  - [Firefox plugin](@/docs/tools/browserext.md): right click on a
-    link and send the file to docspell
   - [SMTP Gateway](@/docs/tools/smtpgateway.md): Setup a SMTP server
     that delivers mails directly to docspell.
 - License: AGPLv3

website/site/content/docs/feed/_index.md

@@ -1,12 +1,15 @@
 +++
 title = "Feed Data into Docspell"
-weight = 5
+weight = 8
 description = "Shows several ways for getting data into Docspell."
 insert_anchor_links = "right"
+template = "docs.html"
 [extra]
 mktoc = true
 +++
 
+# Documents → Docspell
+
 One of the main goals is to stow documents away quickly.
 
 Docspell makes no assumptions about where your documents are. It
@@ -20,19 +23,19 @@ So the idea is to have most flexibility – that is, it is up to you how
 documents arrive. Of course, there is something prepared:
 
 
-# Upload in Webapp
+## Upload in Webapp
 
 This is the simplest way, but also the least flexible. You can just
 login and go to the upload page to submit files.
 
 
-{{ figure(file="web-upload.png") }}
+{{ figure2(light="web-upload.png", dark="web-upload_dark.png") }}
 
 This requires to login at the webapp. Since this is complicated from
 other applications, you can create custom hard-to-guess endpoints to
 use with the following options.
 
-# Scanners / Watch Directories
+## Scanners / Watch Directories
 
 If you have a (document) scanner (or think about getting one), it can
 usually be configured to place scanned documents as image or PDF files
@@ -54,10 +57,10 @@ your scanner is connected to your computer. This can create nice pdf
 files from scanners with ADF, applying corrections and sending them to
 docspell.
 
-{{ buttonright(classes="is-primary ", href="/docs/tools/cli#watch-a-directory", text="More") }}
+{{ buttonright(href="/docs/tools/cli#watch-a-directory", text="More") }}
 
 
-# Android
+## Android
 
 There is an [android
 client](https://github.com/docspell/android-client) provided that lets
@@ -71,42 +74,40 @@ into the Share-With menu and uploads the file to Docspell.
 This is especially useful to quickly upload small things like shopping
 receipts.
 
-<div class="columns is-centered">
-  <div class="column is-one-third">
-    <img src="/docs/tools/screenshot-share.jpg">
-  </div>
-  <div class="column is-one-third">
-    <img src="/docs/tools/screenshot-uploading.jpg">
-  </div>
-</div>
-<div class="columns is-vcentered is-centered">
-    <div class="column is-one-third">
+<div class="grid grid-cols-2 gap-8 divide-x ">
+    <div class="flex items-center justify-center">
         <a href="https://f-droid.org/packages/org.docspell.docspellshare">
             <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
-                 alt="Get it on F-Droid"/>
+                 alt="Get it on F-Droid"
+                 class="w-56"
+                 />
         </a>
     </div>
-    <div class="column is-one-third">
-    Download the APK from <a href="https://github.com/docspell/android-client/releases/latest">here</a>
+    <div class="flex items-center justify-center text-xl">
+        <i class="fa fa-download mr-2"></i>
+        <span>
+           <a href="https://github.com/docspell/android-client/releases/latest">Download the APK</a>
+        </span>
     </div>
+
 </div>
 
-{{ buttonright(classes="is-primary ", href="/docs/tools/android", text="More") }}
+{{ buttonright(href="/docs/tools/android", text="More") }}
 
 
-# Poll E-Mails
+## Poll E-Mails
 
 Your mailbox can be polled periodically to import mails. For example,
 create a dedicated folder in your e-mail client and move mails in
 there that you want to push to Docspell. You can then define a
 recurring job, that looks into this folders and imports the mails.
 
-{{ figure(file="scanmailbox.png") }}
+{{ figure2(light="scanmailbox.png", dark="scanmailbox_dark.png") }}
 
-{{ buttonright(classes="is-primary ", href="/docs/webapp/scanmailbox", text="More") }}
+{{ buttonright(href="/docs/webapp/scanmailbox", text="More") }}
 
 
-# E-Mail Server
+## E-Mail Server
 
 This is a little more involved, but can be quite nice. A SMTP server
 can be setup that simply uploads incoming mails to Docspell (using
@@ -120,29 +121,18 @@ part in Docspell to upload the files to the correct account.
 There is a docker container prepared to get started. Click below to
 read more.
 
-{{ buttonright(classes="is-primary ", href="/docs/tools/smtpgateway", text="More") }}
+{{ buttonright(href="/docs/tools/smtpgateway", text="More") }}
 
 
-# Command-Line
+## Command-Line
 
 I like to use the command line, and so there is a cli that can be used
 for some tasks, for example uploading files. Below is a quick demo, it
 supports many more options, see the link below for details.
 
-<div class="columns is-centered is-full-width">
-  <div class="column">
-    <script id="asciicast-427679" src="https://asciinema.org/a/427679.js" async></script>
-  </div>
-</div>
+<figure>
+  <script id="asciicast-427679" src="https://asciinema.org/a/427679.js" async></script>
+</figure>
 
 
-{{ buttonright(classes="is-primary ", href="/docs/tools/cli", text="More") }}
-
-
-# Browser Extension
-
-For Firefox, there is a browser extension that creates a context-menu
-entry if you right-click on a link. It then downloads the file to your
-disk and uploads it to Docspell.
-
-{{ buttonright(classes="is-primary ", href="/docs/tools/browserext", text="More") }}
+{{ buttonright(href="/docs/tools/cli", text="More") }}

website/site/content/docs/install/_index.md

@@ -1,9 +1,10 @@
 +++
-title = "Installation and Deployment"
+title = "Installation"
 description = "There are multiple ways to install Docspell. This section contains detailed instructions."
-weight = 30
+weight = 5
 sort_by = "weight"
 insert_anchor_links = "right"
-template = "pages.html"
+template = "docs.html"
+page_template = "docs.html"
 redirect_to = "/docs/install/quickstart"
 +++

website/site/content/docs/install/docker.md

@@ -3,7 +3,7 @@ title = "Docker"
 weight = 20
 +++
 
-## Docker Images
+# Docker Images
 
 The docker images are at
 [hub.docker.com](https://hub.docker.com/u/docspell). The `latest` tag
@@ -29,7 +29,7 @@ release page. The images contain all the necessary
   is used to watch a directory for uploading files. This runs the `dsc
   watch` command.
 
-### Examples
+## Examples
 
 These examples use `docker run` to start the restserver and
 jobexecutor. Both must be connected to the same database. For this
@@ -127,7 +127,7 @@ fulltext search. For a more sophisticated docker setup, use
 appropriate tools, for example `docker-compose` which is explained
 below.
 
-## Docker Compose
+# Docker Compose
 
 There is a [docker-compose](https://docs.docker.com/compose/) setup
 available in the `/docker/docker-compose` folder. This setup is
@@ -135,8 +135,8 @@ similiar to the example above, but adding fulltext search and a
 PostgreSQL database by using just one command. It's only a few steps
 to get started.
 
-### Start Docspell
-#### 1. Get the docker-compose files
+## Start Docspell
+### 1. Get the docker-compose files
 
 There are two options. You can clone the whole repository:
 
@@ -159,7 +159,7 @@ You can choose any directory instead of
 make the rest of the guide work for both ways of obtaining the
 docker-compose file.
 
-#### 2. Run `docker-compose up`
+### 2. Run `docker-compose up`
 
 Change into the new `docker-compose` directory, for example:
 
@@ -210,7 +210,7 @@ command:
 to the service definition (or add it to an existing `command:`
 section).
 
-### Override this setup
+## Override this setup
 
 If you want to change this setup, you can simply use your own compose
 file or add a `docker-compose.override.yml` that allows to amend
@@ -251,7 +251,7 @@ volumes:
 ```
 
 
-### Upgrading
+## Upgrading
 
 Since [downgrading](@/docs/install/downgrading.md) is not supported,
 it is recommended to backup your database before upgrading. Should
@@ -267,7 +267,7 @@ $ docker-compose pull
 $ docker-compose up --force-recreate --build -d
 ```
 
-### Backups
+## Backups
 
 When running the docker compose setup, you can use the following to
 backup the database.

website/site/content/docs/install/downgrading.md

@@ -3,7 +3,9 @@ title = "Downgrading"
 weight = 37
 +++
 
-{% infobubble(mode="info", title="⚠ Please note") %}
+# Downgrading
+
+{% warningbubble(title="Note") %}
 Downgrading is currently not supported!
 
 It is not safe to install a previous version, because the database

website/site/content/docs/install/download_run.md

@@ -3,24 +3,23 @@ title = "Download & Run"
 weight = 22
 +++
 
+# Download and Run
+
 You can install via zip or deb archives. Please see the
 [prerequisites](@/docs/install/prereq.md) first.
 
 ## Using zip files
 
-You need to download the two files:
-
-- [docspell-restserver-{{version()}}.zip](https://github.com/eikek/docspell/releases/download/v{{version()}}/docspell-restserver-{{version()}}.zip)
-- [docspell-joex-{{version()}}.zip](https://github.com/eikek/docspell/releases/download/v{{version()}}/docspell-joex-{{version()}}.zip)
-
-
-1. Unzip both files:
+1. Download the two files:
+   - <a href="https://github.com/eikek/docspell/releases/download/v{{version()}}/docspell-restserver-{{version()}}.zip">docspell-restserver-{{version()}}.zip</a>
+   - <a href="https://github.com/eikek/docspell/releases/download/v{{version()}}/docspell-joex-{{version()}}.zip">docspell-joex-{{version()}}.zip</a>
+2. Unzip both files:
    ``` bash
    $ unzip docspell-*.zip
    ```
-2. Open two terminal windows and navigate to the the directory
+3. Open two terminal windows and navigate to the the directory
    containing the zip files.
-3. Start both components executing:
+4. Start both components executing:
    ``` bash
    $ ./docspell-restserver*/bin/docspell-restserver
    ```
@@ -29,8 +28,8 @@ You need to download the two files:
    $ ./docspell-joex*/bin/docspell-joex
    ```
    in the other.
-4. Point your browser to: <http://localhost:7880/app>
-5. Register a new account, sign in and try it.
+5. Point your browser to: <http://localhost:7880/app>
+6. Register a new account, sign in and try it.
 
 Note, that this setup doesn't include watching a directory nor
 fulltext search. Using zip/deb files requires to take care of the
@@ -64,7 +63,7 @@ extracted and installed manually somewhere in your `$PATH`. There are
 no deb files provided.
 
 
-## Running
+# Running
 
 Run the start script (in the corresponding `bin/` directory when using
 the zip files):

website/site/content/docs/install/nix.md

@@ -3,6 +3,7 @@ title = "Nix / NixOS"
 weight = 24
 +++
 
+# Nix
 
 ## Install via Nix
 
@@ -73,7 +74,7 @@ back to the previous version.
 When using the provided nix setup, the `currentPkg` always points to
 the latest release. Thus it is enough to run `nix-build`.
 
-## Docspell on NixOS {#nixos}
+# Docspell on NixOS {#nixos}
 
 If you are running [NixOS](https://nixos.org), there is a module
 definition for installing Docspell as a service using systemd.
@@ -141,7 +142,7 @@ The modules files are only applicable to the newest version of
 Docspell. If you really need an older version, checkout the
 appropriate commit.
 
-### NixOS Example
+## NixOS Example
 
 This is a example system configuration that installs docspell with a
 postgres database. This snippet can be used to create a vm (using

website/site/content/docs/install/prereq.md

@@ -3,6 +3,8 @@ title = "Prerequisites"
 weight = 10
 +++
 
+# Prerequisites
+
 The two components have one prerequisite in common: they both require
 Java to run. While this is the only requirement for the *REST server*,
 the *Joex* components requires some more external programs.
@@ -10,7 +12,7 @@ the *Joex* components requires some more external programs.
 The rest server and joex components are not required to "see" each
 other, though it is recommended.
 
-# Java
+## Java
 
 Very often, Java is already installed. You can check this by opening a
 terminal and typing `java -version`. Otherwise install Java using your
@@ -28,7 +30,7 @@ works on newer java versions. The provided docker images use JDK11.
 The next tools are only required on machines running the *Joex*
 component.
 
-# External Programs for Joex
+## External Programs for Joex
 
 - [Ghostscript](http://pages.cs.wisc.edu/~ghost/) (the `gs` command)
   is used to extract/convert PDF files into images that are then fed
@@ -57,7 +59,7 @@ The performance of `unoconv` can be improved by starting `unoconv -l`
 in a separate process. This runs a libreoffice/openoffice listener and
 therefore avoids starting one each time `unoconv` is called.
 
-## Example Debian
+### Example Debian
 
 On Debian this should install all joex requirements:
 

website/site/content/docs/install/quickstart.md

@@ -1,8 +1,10 @@
 +++
-title = "Quickstart"
+title = "Getting started"
 weight = 0
 +++
 
+# Getting started
+
 To get started, here are some quick links:
 
 - Using [docker and docker-compose](@/docs/install/docker.md). This
@@ -28,7 +30,7 @@ To get started, here are some quick links:
   thread](https://forums.unraid.net/topic/103425-docspell-hilfe/) in
   the German Unraid forum. Thanks for providing these!
 
-Every [component](@/docs/intro/_index.md#components) (restserver,
+Every [component](@/docs/_index.md#components) (restserver,
 joex, dsc watch) can run on different machines and multiple times.
 Most of the time running all on one machine is sufficient and also for
 simplicity, the docker-compose setup reflects this variant.
@@ -39,7 +41,7 @@ file](@/docs/configure/_index.md). If this is not given, the default
 is used, which gets you started on a single machine, but it is very
 likely you want to change these to match your use-case/setup.
 
-{% infobubble(mode="info", title="⚠ Please note") %}
+{% infobubble(title="Note") %}
 
 Please have a look at the [configuration page](/docs/configure/) page,
 before making docspell publicly available. By default, everyone can

website/site/content/docs/install/reverseproxy.md

@@ -3,6 +3,8 @@ title = "Reverse Proxy"
 weight = 50
 +++
 
+# Reverse Proxy
+
 This contains examples for how to use docspell behind a reverse proxy.
 
 For the examples below, assume the following:

website/site/content/docs/install/rpi.md

@@ -1,8 +1,10 @@
 +++
-title = "Raspberry-Pi and Similiar"
+title = "Raspberry-Pi"
 weight = 40
 +++
 
+# Raspberry Pi
+
 Both components can run next to each other on a raspberry pi or
 similiar device.
 

website/site/content/docs/intro/_index.md

@@ -3,149 +3,8 @@ title = "Introduction"
 weight = 0
 description = "Gives a short introduction to the goals of docspell and an overview of the components involved."
 insert_anchor_links = "right"
+redirect_to = "/docs/"
 [extra]
 mktoc = true
+hidden = true
 +++
-
-# Introduction
-
-Docspell aims to be a simple yet effective document organizer that
-makes stowing documents away very quick and finding them later
-reliable (and also fast). It is a bit opinionated and more targeted
-for home use and small/medium organizations.
-
-In contrast to many DMS, the main focus is not so much to provide all
-kinds of features to manually create organizational structures, like
-folder hierarchies, where you place the documents yourself. The
-approach is to leave it as a big pile of documents, but extract and
-attach metadata from each document. These are mainly properties that
-emerge from the document itself. The reason is that this is possible
-to automate. This makes it very simple to *add* documents, because
-there is no time spent to think about where to put it. And it is
-possible to apply different structures on top later, like show first
-all documents of a specific correspondent, then all with tag
-'invoice', etc. If these properties are attached to all documents, it
-is really easy to find a document. It even can be combined with
-fulltext search for the, hopefully rare, desperate cases.
-
-Of course, it is also possible to add custom properties and arbitrary
-tags.
-
-Docspell analyzes the text to find metadata automatically. It can
-learn from existing data and can apply
-[NLP](https://en.wikipedia.org/wiki/Natural_language_processing)
-techniques to support this. This metadata must be maintained manually
-in the application. Docspell looks for candidates for:
-
-- Correspondents
-- Concerned person or things
-- A date and due date
-- Tags
-
-For tags, it sets all that it thinks do apply. For the others, it will
-propose a few candidates and sets the most likely one to your item.
-
-This might be wrong, so it is recommended to curate the results.
-However, very often the correct one is either set or within the
-proposals where you fix it by a single click.
-
-Besides these properties, there are more metadata you can use to
-organize your files, for example custom fields, folders and notes.
-
-Docspell is also for programmers. Everything is available via a REST
-or HTTP api and can be easily used within your own scripts and tools,
-for example using `curl`. There are also features for "advanced use"
-and many configuration options.
-
-
-# Components
-
-Docspell consists of multiple components that run in separate
-processes:
-
-- REST server
-- JOEX, short for *job executor*
-- Fulltext Search Index (optional, currently Apache SOLR)
-
-The REST server provides the Api and the web application. The web
-application is a
-[SPA](https://en.wikipedia.org/wiki/Single-page_application) written
-in [Elm](https://elm-lang.org) and is a client to the REST api. All
-features are available via a http/rest api.
-
-The *joex* is the component that does the “heavy work”, executing
-long-running tasks, like processing files or importing your mails
-periodically. While the joex component also exposes a small REST api
-for controlling it, the main user interface is all inside the rest
-server api.
-
-The rest server and the job executor can be started multiple times in
-order to scale out. It must be ensured, that all connect to the same
-database. And it is also recommended (though not strictly required),
-that all components can reach each other.
-
-The fulltext search index is another separate component, where
-currently only [SOLR](https://solr.apache.org) is supported.
-Fulltext search is optional, so the SOLR component is not required if
-docspell is run without fulltext search support.
-
-
-# Terms
-
-In order to better understand the following pages, some terms are
-explained.
-
-## Item
-
-An *item* is roughly your document, only that an item may span
-multiple files, which are called *attachments*. An item has *meta
-data* associated:
-
-- a *correspondent*: the other side of the communication. It can be
-  an organization or a person.
-- a *concerning person* or *equipment*: a person or thing that
-  this item is about. Maybe it is an insurance contract about your
-  car.
-- *tag*: an item can be tagged with one or more tags (or labels). A
-  tag can have a *category*. This is intended for grouping tags, for
-  example a category `doctype` could be used to group tags like
-  `bill`, `contract`, `receipt` etc. Usually an item is not tagged
-  with more than one tag of a category.
-- a *folder*: a folder is similiar to a tag, but an item can only be
-  in exactly one folder (or none). Furthermore folders allow to
-  associate users, so that items are only visible to the users who are
-  members of a folder.
-- an *item date*: this is the date of the document – if this is not
-  set, the created date of the item is used.
-- a *due date*: an optional date indicating that something has to be
-  done (e.g. paying a bill, submitting it) about this item until this
-  date
-- a *direction*: one of "incoming" or "outgoing"
-- a *name*: some item name, defaults to the file name of the
-  attachments
-- some *notes*: arbitrary descriptive text. You can use markdown
-  here, which is properly formatted in the web application.
-
-## Collective
-
-The users of the application are part of a *collective*. A
-*collective* is a group of users that share access to the same
-items. The account name is therefore comprised of a *collective name*
-and a *user name*.
-
-All users of a collective are equal; they have same permissions to
-access all items. The items don't belong to a user, but to the
-collective.
-
-That means, to identify yourself when signing in, you have to give the
-collective name and your user name. By default it is separated by a
-slash `/`, for example `smith/john`. If your user name is the same as
-the collective name, you can omit one; so `smith/smith` can be
-abbreviated to just `smith`.
-
-By default, all users can see all items of their collective. A
-*folder* can be used to implement other visibilities: Every user can
-create a folder and associate members. It is possible to put items in
-these folders and docspell shows only items that are either in no
-specific folder or in a folder where the current user is owner or
-member.

website/site/content/docs/joex/file-processing.md

@@ -7,6 +7,8 @@ insert_anchor_links = "right"
 mktoc = true
 +++
 
+# File Processing
+
 When uploading a file, it is only saved to the database together with
 the given meta information as a "job". The file is not visible in the
 ui yet. Then joex takes the next such job and starts processing it.
@@ -319,7 +321,7 @@ docspell.joex {
 }
 ```
 
-{% infobubble(mode="warning", title="Please note") %}
+{% warningbubble(title="Please note") %}
 
 When this is changed, you must re-generate all preview images. Check
 the api for this, there is an endpoint to regenerate all preview

website/site/content/docs/joex/intro.md

@@ -7,7 +7,8 @@ insert_anchor_links = "right"
 mktoc = true
 +++
 
-# Introduction
+# Joex
+## Introduction
 
 Joex is short for *Job Executor* and it is the component managing long
 running tasks in docspell. One of these long running tasks is the file
@@ -30,7 +31,7 @@ compete on getting the next job from the queue. After a job finishes
 and no job is waiting in the queue, joex will sleep until notified
 again. It will also periodically notify itself as a fallback.
 
-# Task vs Job
+## Task vs Job
 
 Just for the sake of this document, a task denotes the code that has
 to be executed or the thing that has to be done. It emerges in a job,
@@ -39,7 +40,7 @@ up and executed eventually. A job maintains a state and other things,
 while a task is just code.
 
 
-# Scheduler and Queue
+## Scheduler and Queue
 
 The scheduler is the part that runs and monitors the long running
 jobs. It works together with the job queue, which defines what job to
@@ -62,7 +63,7 @@ logged in, jobs are more important that those submitted when not
 logged in.
 
 
-# Scheduler Config
+## Scheduler Config
 
 The relevant part of the config file regarding the scheduler is shown
 below with some explanations.
@@ -130,7 +131,7 @@ reach a joex component. This periodic wakup is just to ensure that
 jobs are eventually run.
 
 
-# Periodic Tasks
+## Periodic Tasks
 
 The job executor can execute tasks periodically. These tasks are
 stored in the database such that they can be submitted into the job
@@ -139,7 +140,7 @@ something with a task. So a periodic task is never submitted twice. It
 is also not submitted, if a previous task has not finished yet.
 
 
-# Starting on demand
+## Starting on demand
 
 The job executor and rest server can be started multiple times. This
 is especially useful for the job executor. For example, when
@@ -154,7 +155,7 @@ Once the files have been processced you can stop the additional
 executors.
 
 
-# Shutting down
+## Shutting down
 
 If a job executor is sleeping and not executing any jobs, you can just
 quit using SIGTERM or `Ctrl-C` when running in a terminal. But if

website/site/content/docs/jsonminiquery/_index.md

@@ -1,10 +1,15 @@
 +++
 title = "JSON (mini) query"
+weight = 58
+template = "docs.html"
+page_template = "docs.html"
+
 [extra]
-mktoc = true
 hidden = true
 +++
 
+# JSON Miniquery
+
 A "JSON mini query" is a simple expression that evaluates to `true` or
 `false` for any given JSON value.
 

website/site/content/docs/query/_index.md

@@ -3,15 +3,14 @@ title = "Query Language"
 weight = 55
 description = "The query language is a powerful way to search for documents."
 insert_anchor_links = "right"
-[extra]
-mktoc = true
+template = "docs.html"
 +++
 
+# Query Language
 
 Docspell uses a query language to provide a powerful way to search for
-your documents. It is targeted at "power users" and it needs to be
-enabled explicitely in your user settings to be used on the search
-page.
+your documents. It currently needs to be enabled explicitely in your
+user settings to be used on the search page.
 
 <div class="colums">
 

website/site/content/docs/tools/_index.md

@@ -6,6 +6,4 @@ insert_anchor_links = "right"
 template = "pages.html"
 redirect_to = "docs/tools/cli/"
 sort_by = "weight"
-[extra]
-mktoc = false
 +++

website/site/content/docs/tools/android.md

@@ -10,17 +10,22 @@ There is a simple Android App available to conveniently upload files
 from your android devices. Combined with a scanner app, this allows to
 very quickly scan single page documents like receipts.
 
-<div class="columns is-vcentered is-centered">
-    <div class="column">
+<div class="grid grid-cols-2 gap-8 divide-x ">
+    <div class="flex items-center justify-center">
         <a href="https://f-droid.org/packages/org.docspell.docspellshare">
             <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
                  alt="Get it on F-Droid"
-                 style="height:120px;"/>
+                 class="w-56"
+                 />
         </a>
     </div>
-    <div class="column">
-    Download the APK from <a href="https://github.com/docspell/android-client/releases/latest">here</a>
+    <div class="flex items-center justify-center text-xl">
+        <i class="fa fa-download mr-2"></i>
+        <span>
+           <a href="https://github.com/docspell/android-client/releases/latest">Download the APK</a>
+        </span>
     </div>
+
 </div>
 
 
@@ -43,32 +48,30 @@ The app is very simple:
 - You can now either select an URL from the app, or the upload begins
   immediatly if you set a default URL.
 
-<div class="columns">
-  <div class="column">
+<div class="grid grid-cols-3 gap-4 mx-6 my-4">
+  <div class="shadow dark:shadow-stone-600">
   {{ imgnormal(file="screenshot-create.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (A) </p>
+  <p class="text-center font-mono"> (A) </p>
   </div>
-  <div class="column">
+  <div class="box-shadow">
   {{ imgnormal(file="screenshot-choose.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (B) </p>
+  <p class="text-center font-mono"> (B) </p>
   </div>
-  <div class="column">
+  <div class="box-shadow">
   {{ imgnormal(file="screenshot-options.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (C) </p>
+  <p class="text-center font-mono"> (C) </p>
   </div>
-</div>
-<div class="columns">
-  <div class="column">
+  <div class="box-shadow">
   {{ imgnormal(file="screenshot-default.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (D) </p>
+  <p class="text-center font-mono"> (D) </p>
   </div>
-  <div class="column">
+  <div class="box-shadow">
   {{ imgnormal(file="screenshot-share.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (E) </p>
+  <p class="text-center font-mono"> (E) </p>
   </div>
-  <div class="column">
+  <div class="box-shadow">
   {{ imgnormal(file="screenshot-uploading.jpg", width="") }}
-  <p class="has-text-centered subtitle"> (F) </p>
+  <p class="text-center font-mono"> (F) </p>
   </div>
 </div>
 

website/site/content/docs/tools/browserext.md

@@ -1,84 +0,0 @@
-+++
-title = "Browser Extension (Firefox)"
-description = "An extension for firefox to upload files from your browser via right-click → upload to docspell."
-weight = 40
-+++
-
-The idea is to click on a file in firefox and send it to docspell. It
-is downloaded in the context of your current page. Then handed to an
-application that pushes it to docspell. There is a browser add-on
-implementing this in `tools/webextension`. This add-on only works with
-firefox.
-
-Installation is a bit complicated, since you need to install external
-tools and the web extension. Both work together.
-
-# Install `dsc`
-
-First copy the [dsc](@/docs/tools/cli.md) tool somewhere in your
-`PATH`, maybe `/usr/local/bin`.
-
-
-# Install the native part
-
-Then install the "native" part of the web extension:
-
-Copy or symlink the `native.py` script into some known location. For
-example:
-
-``` bash
-ln -s ~/docspell-checkout/tools/webextension/native/native.py /usr/local/share/docspell/native.py
-```
-
-Then copy the `app_manifest.json` to
-`$HOME/.mozilla/native-messaging-hosts/docspell.json`. For example:
-
-``` bash
-cp ~/docspell-checkout/tools/webextension/native/app_manifest.json  ~/.mozilla/native-messaging-hosts/docspell.json
-```
-
-See
-[here](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#manifest_location)
-for details.
-
-And you might want to modify this json file, so the path to the
-`native.py` script is correct (it must be absolute).
-
-If the `dsc` tool is in your `$PATH`, then this should work. You need
-to provide a default source id in your `~/.config/dsc/config.toml` so
-that the upload command can be used without further arguments.
-
-Otherwise, edit the `native.py` script and change the path to the tool
-and/or the arguments. Or create a file
-`$HOME/.config/docspell/dsc.cmd` whose content is the path to the
-`dsc` tool.
-
-
-# Install the extension
-
-An extension file can be build using the `make-xpi.sh` script. But
-installing it in "standard" firefox won't work, because [Mozilla
-requires extensions to be signed by
-them](https://wiki.mozilla.org/Add-ons/Extension_Signing). This means
-creating an account and going through some process…. So here are two
-alternatives:
-
-1. Open firefox and type `about:debugging` in the addressbar. Then
-   click on *'Load Temporary Add-on...'* and select the
-   `manifest.json` file. The extension is now installed. The downside
-   is, that the extension will be removed once firefox is closed.
-2. Use Firefox ESR, which allows to install Add-ons not signed by
-   Mozilla. But it has to be configured: Open firefox and type
-   `about:config` in the address bar. Search for key
-   `xpinstall.signatures.required` and set it to `false`. This is
-   described on the last paragraph on [this
-   page](https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox).
-
-When you right click on a file link, there should be a context menu
-entry *'Docspell Upload Helper'*. The add-on will download this file
-using the browser and then send the file path to the `native.py`
-script. This script will in turn call `dsc` which finally uploads it
-to your configured URLs.
-
-Open the Add-ons page (`Ctrl`+`Shift`+`A`), the new add-on should be
-there.

website/site/content/docs/tools/cli.md

@@ -4,7 +4,8 @@ description = "A command line interface to."
 weight = 5
 +++
 
-# Introduction
+# Docspell CLI
+## Introduction
 
 The **d**oc**s**pell **c**lient, short
 [dsc](https://github.com/docspell/dsc), is a tool to use
@@ -17,7 +18,7 @@ directory.
 It is a work in progress; eventually most of the
 [api](@/docs/api/_index.md) will be covered.
 
-# Usage
+## Usage
 
 Download the binary for your architecture from the [release
 page](https://github.com/docspell/dsc/releases/latest) and rename it
@@ -86,11 +87,9 @@ you need to `login` again.
 
 ## Demo
 
-<div class="columns is-centered is-full-width">
-  <div class="column">
-    <script id="asciicast-427679" src="https://asciinema.org/a/427679.js" async></script>
-  </div>
-</div>
+<figure>
+  <script id="asciicast-427679" src="https://asciinema.org/a/427679.js" async></script>
+</figure>
 
 
 # Use Cases / Examples

website/site/content/docs/tools/paperless-import.md

@@ -4,7 +4,9 @@ description = "Import your data from paperless."
 weight = 60
 +++
 
-# Introduction
+# Import from Paperless
+
+## Introduction
 
 Coming from
 [paperless](https://github.com/the-paperless-project/paperless/), the
@@ -15,7 +17,7 @@ importing your data from paperless into docspell.
 
 The script imports the files and also tags and correspondents.
 
-{% infobubble(mode="info", title="⚠ Please note") %}
+{% infobubble(title="Note") %}
 
 The script was written some while ago. It currently doesn't work out
 of the box, but is a good starting point as the issues are most
@@ -25,7 +27,7 @@ issue](https://github.com/eikek/docspell/issues/1241).
 
 {% end %}
 
-# Usage
+## Usage
 
 Copy the script to the machine where paperless is running. Run it with
 the following arguments:

website/site/content/docs/tools/smtpgateway.md

@@ -4,6 +4,8 @@ description = "Start a SMTP server that forwards all mails to docspell."
 weight = 50
 +++
 
+# SMTP Gateway with Exim
+
 One possible use case for the [integration
 endpoint](@/docs/api/upload.md#integration-endpoint) is a SMTP server
 that forwards all local mail to docspell. This way there is no

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") }}