Merge pull request #223 from eikek/documentation

Documentation

website/elm/Demo.elm

@@ -0,0 +1,51 @@
+module Demo exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Markdown
+
+
+type alias Demo =
+    { title : String
+    , url : String
+    , info : String
+    }
+
+
+demo : Demo -> Html msg
+demo data =
+    div [ class "columns is-vcentered box mb-5" ]
+        [ div [ class "column" ]
+            [ h2 [ class "title" ]
+                [ text data.title
+                ]
+            , if data.info == "" then
+                span [] []
+
+              else
+                p []
+                    [ Markdown.toHtml [] data.info
+                    ]
+            , div [ class "mt-5" ]
+                [ video
+                    [ src data.url
+                    , controls True
+                    ]
+                    []
+                ]
+            ]
+        ]
+
+
+navigateDemo =
+    { title = "Navigation"
+    , url = "/videos/docspell-dd-2020-08-09.mp4"
+    , info = "Shows basic navigation through documents using tags and tag categories."
+    }
+
+
+processDemo =
+    { title = "Processing"
+    , url = "/videos/docspell-process-2020-08-09.mp4"
+    , info = "Presents the basic idea: maintain an address book and let docspell find matches for new uploaded documents and attach them automatically."
+    }

website/elm/GetStarted.elm

@@ -8,7 +8,7 @@ import Markdown
 
 getStarted : String -> List (Html msg)
 getStarted version =
-    [ div [ class "content container is-size-5" ]
+    [ div [ class "content container" ]
         [ Markdown.toHtml []
             """Docspell consists of several components. The easiest way to get started is probably to use docker and
 [docker-compose](https://docs.docker.com/compose/)."""

website/elm/Main.elm

@@ -2,6 +2,7 @@ module Main exposing (..)
 
 import Browser exposing (Document)
 import Browser.Navigation exposing (Key)
+import Demo
 import ExtraAttr exposing (..)
 import Feature exposing (Feature)
 import GetStarted
@@ -126,6 +127,13 @@ view model =
                        ]
                 )
             ]
+        , demoHero
+        , section [ class "section" ]
+            [ div [ class "container" ]
+                [ Demo.demo Demo.processDemo
+                , Demo.demo Demo.navigateDemo
+                ]
+            ]
         , getStartedHero model
         , div [ class "section" ]
             (GetStarted.getStarted model.flags.version)
@@ -193,6 +201,24 @@ getStartedHero _ =
         ]
 
 
+demoHero : Html msg
+demoHero =
+    section
+        [ id "demos"
+        , class "hero is-info is-bold"
+        ]
+        [ div
+            [ class "hero-body"
+            ]
+            [ div [ class "container" ]
+                [ h2 [ class "title" ]
+                    [ text "Screencasts"
+                    ]
+                ]
+            ]
+        ]
+
+
 featureHero : Model -> Html Msg
 featureHero model =
     section
@@ -307,6 +333,12 @@ mainHero model =
                         ]
                         [ text "Features"
                         ]
+                    , a
+                        [ class "button is-info is-medium"
+                        , href "#demos"
+                        ]
+                        [ text "Screencast"
+                        ]
                     ]
                 ]
             ]

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

@@ -57,6 +57,8 @@ description = "A list of features and limitations."
     - [eml](https://en.wikipedia.org/wiki/Email#Filename_extensions)
       (e-mail files in plain text MIME)
 - Tooling:
+  - [Android App](@/docs/tools/android.md) to quickly upload files
+    from your android devices
   - [Watch a folder](@/docs/tools/consumedir.md): watch folders for
     changes and send files to docspell
   - [Simple CLI for uploading files](@/docs/tools/ds.md)

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

@@ -1,6 +1,6 @@
 +++
 title = "Tools"
-description = "There are several tools distributed with docspell, like a program to watch a folder and import files to docspell."
+description = "There are several tools distributed with docspell, like a program to watch a folder and import files or a simple android app."
 weight = 60
 insert_anchor_links = "right"
 template = "pages.html"

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

@@ -0,0 +1,87 @@
++++
+title = "Android Client"
+description = "A simple Android App to upload files from your devices."
+weight = 20
++++
+
+# Android Client
+
+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.
+
+The project lives at a [repository on
+github](https://github.com/docspell/android-client). It is planned to
+be available from the [F-Droid](https://f-droid.org) store, meanwhile
+download the APK from
+[here](https://github.com/docspell/android-client/releases/latest).
+
+
+# Usage
+
+The app is very simple:
+
+- You maintain a list of upload URLs. These can be inserted
+  conveniently by scanning the QR code. You need to create these
+  upload urls at docspell as described
+  [here](@/docs/webapp/uploading.md#anonymous-upload).
+- Start this app on your device and add a new URL
+- Then start some other app, and try to share a file. The *Share with*
+  or *Open with* dialog should contain now the docspell app. Choose
+  it.
+- 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">
+  {{ imgnormal(file="screenshot-create.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (A) </p>
+  </div>
+  <div class="column">
+  {{ imgnormal(file="screenshot-choose.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (B) </p>
+  </div>
+  <div class="column">
+  {{ imgnormal(file="screenshot-options.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (C) </p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column">
+  {{ imgnormal(file="screenshot-default.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (D) </p>
+  </div>
+  <div class="column">
+  {{ imgnormal(file="screenshot-share.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (E) </p>
+  </div>
+  <div class="column">
+  {{ imgnormal(file="screenshot-uploading.jpg", width="") }}
+  <p class="has-text-centered subtitle"> (F) </p>
+  </div>
+</div>
+
+## Create an URL
+
+Add a new one With the *Plus* button. The name (A-1) is to distinguish
+it in the list. The url (A-2) is used to upload files. You can add
+multiple URLs. You can give permissions to access the camera and use
+(A-3) to scan a QR code from the screen.
+
+## Edit and Default
+
+Tapping an item in the list switches the view that shows some options.
+You can set one URL as the default (C-1). When uploading a file, the
+screen to choose an URL is skipped then and the file is uploaded
+immediately.
+
+Other actions are editing the url (C-2), going back (C-3) or deleting the
+item (4).
+
+The screen (D) shows a default URL with a green background.
+
+## Upload
+
+Use some other app, for example OpenNoteScanner, and share the
+resulting files using the *Share With* menu (E). Then this app opens
+and uploads the file to your server (F).

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

@@ -1,7 +1,7 @@
 +++
 title = "Browser Extension (Firefox)"
 description = "An extension for firefox to upload files from your browser via right-click → upload to docspell."
-weight = 30
+weight = 40
 +++
 
 The idea is to click on a file in firefox and send it to docspell. It

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

@@ -1,7 +1,7 @@
 +++
 title = "Consume Directory"
 description = "A script to watch a directory for new files and upload them to docspell."
-weight = 20
+weight = 30
 +++
 
 # Introduction

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

@@ -1,7 +1,7 @@
 +++
 title = "SMTP Gateway with Exim"
 description = "Start a SMTP server that forwards all mails to docspell."
-weight = 40
+weight = 50
 +++
 
 One possible use case for the [integration

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

@@ -43,6 +43,14 @@ When you change something in the form, it is immediatly applied. Only
 when changing text fields, a click on the *Save* symbol next to the
 field is required.
 
+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>
 
 # Confirm
 

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

@@ -67,30 +67,69 @@ Clicking the checkbox "Only new" shows items that have not been
 "Confirmed". All items that have been created by docspell and not
 looked at are marked as "new" automatically.
 
+## Tags & Tag Categories
+
+Click on a tag to show only items with this tag, the tag is marked
+with a check (✔) icon. Click again, to show only items that are not
+tagged with the tag. Then the tag is marked with a minus (–) icon.
+Clicking a third time deselects the tag and the icon goes back to an
+"tag" icon.
+
+By default, a few tags are shown and you can expand to list all using
+the *Show more* link. How many tags are displayed can be changed in
+the ui settings (go to *User Settings* ‣ *Ui Settings*).
+
+When multiple tags are checked (✔), only tags are shown that have all
+the tags. When multiple tags are excluded (–), then only tags are
+shown that don't have at least one of these tags.
+
+The same applies to tag categories. You can show all items that have
+at least on tag of a checked (✔) category. Or you can list all items
+that have no tag of a category (–).
+
+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>
+
+## Folder
+
+Select a folder to only show items in that folder. Only folders where
+the current user has access are displayed. As with tags, there are
+only a few folders shown and you can expand all with a *Show more*
+link. How many folders are displayed without this link can be
+configured in the ui settings.
+
+If no folder is set, all accessible items are shown. These are all
+items that either have no folder set, or a folder where the current
+user is member.
+
+It is possible to put items into a folder in this view via drag&drop.
+Simply drag an item card and drop it on a folder. If dropped on the
+*Folders* header, the item is moved outside the folder.
+
+## Correspondent
+
+Pick a correspondent to show only these items.
+
+## Concerned
+
+Pick a concerned entity to show only these items.
+
 ## Names
 
 Searches in names of certain properties. The `Names` field is the same
 as the search in the search bar ([see above](#names)).
 
-## Folder
-
-Set a folder to only show items in that folder. If no folder is set,
-all accessible items are shown. These are all items that either have
-no folder set, or a folder where the current user is member.
-
-## Tags
-
-Specify a list of tags that the items must have. When adding tags to
-the "Include" list, an item must have all these tags in order to be
-included in the results.
-
-When adding tags to the "Exclude" list, then an item is removed from
-the results if it has at least one of these tags.
-
 ## Content
 
 You can choose tags or correspondents in the search menu and further
-restrict the results using full text search using the *content* field.
+restrict the results using full text search with the *content* field.
 
 {% infobubble(mode="warning", title="Please note") %}
 This field is intended to be used in conjunction with other fields in
@@ -102,15 +141,6 @@ Use the search-bar with option *Contents Only* to do quick fulltext
 searches.
 {% end %}
 
-
-## Correspondent
-
-Pick a correspondent to show only these items.
-
-## Concerned
-
-Pick a concerned entity to show only these items.
-
 ## Date
 
 Specify a date range to show only items whose date property is within
@@ -178,4 +208,6 @@ 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(file="search-content-results.png") }}
+<figure class="image">
+  <img src="/img/fts-feature.png">
+</figure>

website/site/templates/shortcodes/imgnormal.html

@@ -0,0 +1,3 @@
+{% set len = page.components | length %}
+{% set p = page.components | slice(end=len - 1) | join(sep='/') %}
+<img src="{{ get_url(path=p  ~ "/" ~ file) }}" width="{{ width }}">