Add screencast videos and update docs

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 navigating 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."
+    }

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.navigateDemo
+                , Demo.demo Demo.processDemo
+                ]
+            ]
         , 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 "Demo"
+                    ]
+                ]
+            ]
+        ]
+
+
 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/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