help: Write intial help documentation

Part-of: <https://gitlab.gnome.org/GNOME/Incubator/loupe/-/merge_requests/248>

help/C/duck/image-properties.duck

@@ -0,0 +1,20 @@
+= Image Properties
+  [topic]
+@link[guide >index#additional-features]
+
+@desc View detailed properties of the selected image.
+
+Loupe allows users to view an image's properties. All images will have the following
+basic properties:
+
+* Image size
+* Image format
+* File size
+* File creation date
+* File modification date
+
+If the file has $link[href="https://en.wikipedia.org/wiki/Exif"](Exif) metadata, it
+will be shown below the basic properties.
+
+To view the selected image's properties, press the $gui(Image Properties)
+($media[type="image" src="figures/help-about-symbolic.svg"](help-about-symbolic)) button.

help/C/duck/index.duck

@@ -0,0 +1,22 @@
+= $media[type="image" its:translate="no" src="figures/org.gnome.Loupe.svg" height="48px" width="48px"] Loupe Image Viewer
+  [guide]
+
+@desc Browse through your images and inspect their metadata.
+
+== Introduction
+
+Loupe is an image viewer that supports modern image formats. It provides:
+
+* Fast GPU accelerated image rendering with tiled rendering for SVGs
+* Extendable and sandboxed raster image decoding
+* Extensive support for touchpad and touchscreen gestures
+* Accessible presentation of the most important metadata
+
+== Getting Started
+  [#getting-started .2column]
+
+== Additional Features
+  [#additional-features .2column]
+
+== Technical Information
+  [#technical-information .2column]

help/C/duck/opening-images.duck

@@ -0,0 +1,49 @@
+= Opening Images
+  [topic]
+@link[guide >index#getting-started]
+
+@desc Open and browse through pictures via the file chooser, file manager, or drag and drop.
+
+== Opening Files
+
+=== From The File Chooser
+
+Loupe allows users to pick images with the file chooser at any time.
+
+[steps]
+* Click the $gui(Open Files…) button, the $gui[style="menuitem"](Open…) menu item, or press $keyseq($key(Ctrl)$key(O)). The $gui(Open Image) file dialog will appear.
+* Select the image you want to open, then click $gui(Open).
+
+Loupe will open with the selected image showing, and the other images in the directory can be reached by browsing.
+
+=== From The File Manager
+
+Users can also open images in Loupe directly from their file manager.
+
+[steps]
+* Open your preferred file manager application.
+* Navigate to the image you want to view in Loupe.
+* If Loupe is set as your default image viewer, use the file manager's function for opening files.
+* If Loupe is not your default image viewer, you will need to select $gui(Open With…) or similar in the file manager, and pick Loupe.
+
+=== Drag & Drop
+
+Loupe also accepts local image files dragged from other applications.
+
+[steps]
+* In the source application, begin dragging the image.
+* Drag the image over the Loupe main window. A blue highlighted area should appear.
+* Drop the image while it's still hovered over the main window.
+
+== Browsing
+
+When opening an image from the file chooser or file manager, Loupe will load other files
+in the parent directory of the image and sort them in alphabetical order. Users can
+browse the other images in the directory with the $gui(Previous Image) ($media[type="image" src="figures/go-previous-symbolic.svg"](go-previous-symbolic))
+and $gui(Next Image) ($media[type="image" src="figures/go-next-symbolic.svg"](go-next-symbolic)) buttons.
+Keyboard users can also use the following shortcuts:
+
+* $key(→) to go to the next image.
+* $key(←) to go to the previous image.
+* $key(Home) to jump to the first image in the directory.
+* $key(End) to jump to the last image in the directory.

help/C/duck/sending-to-other-apps.duck

@@ -0,0 +1,24 @@
+= Sending Images To Other Apps
+  [topic]
+@link[guide >index#additional-features]
+
+@desc Learn how to send, copy, and drag images from Loupe to other apps.
+
+== "Open With…" Action
+
+[steps]
+* Click the $gui[style="menuitem"](Open With…) menu item. A dialog with a list of applications will appear.
+* Select the application you want to open the image with.
+
+== Copy & Paste
+
+[steps]
+* Click the $gui(Copy to Clipboard) ($media[type="image" src="figures/edit-copy-symbolic.svg"](edit-copy-symbolic)) button. A toast notifying you that the image is in your clipboard will appear.
+* Paste your image in your application of choice.
+
+== Drag & Drop
+
+[steps]
+* Zoom out from the image completely.
+* Click and hold the selected image.
+* Drag the image to your application of choice.

help/C/duck/supported-formats.duck

@@ -0,0 +1,11 @@
+= Supported Image Formats
+  [topic]
+@link[guide >index#technical-information]
+
+Loupe uses $link[href=https://gitlab.gnome.org/sophie-h/glycin](glycin) for
+loading images. You can check $link[href=https://gitlab.gnome.org/sophie-h/glycin#supported-image-formats](glycin's README)
+for more details about the formats supported by the default loaders and the features
+provided by each format.
+
+Glycin's loaders are configurable, and new loaders can be created by third-parties,
+so the supported formats on your system may vary.

help/C/duck/trashing-images.duck

@@ -0,0 +1,10 @@
+= Moving Images to Trash
+  [topic]
+@link[guide >index#additional-features]
+
+@desc Move unwanted images to the trash directly from Loupe.
+
+If a user wants to remove an image, they can press the $gui(Move To Trash)
+($media[type="image" src="figures/user-trash-symbolic.svg"](user-trash-symbolic))
+button. A toast will appear allowing them to restore the image with the $gui(Undo)
+button.

help/C/duck/viewing-images.duck

@@ -0,0 +1,48 @@
+= Viewing Images
+  [topic]
+@link[guide >index#getting-started]
+
+@desc Learn how to view an image at different scales and orientations.
+
+== Zooming
+
+Users can zoom in with the $gui(Zoom In) ($media[type="image" src="figures/zoom-in-symbolic.svg"](zoom-in-symbolic))
+button and zoom out with the $gui(Zoom Out) ($media[type="image" src="figures/zoom-out-symbolic.svg"](zoom-out-symbolic))
+button. They can also use the following keyboard shortcuts:
+
+* $keyseq($key(Ctrl)$key(+)) or $key(+) to zoom in.
+* $keyseq($key(Ctrl)$key(-)) or $key(-) to zoom out.
+* $keyseq($key(Ctrl)$key(0)) or $key(0) to zoom to the best fitting size for the window size.
+* $keyseq($key(Ctrl)$key(1)) or $key(1) to zoom to the image's original scale.
+* $keyseq($key(Ctrl)$key(2)) or $key(2) to zoom to 200% of the image's original scale.
+
+Touchpad and touchscreen users can also zoom with a two-finger pinch gesture.
+
+== Panning
+
+Mouse and touchpad users can pan the view when zoomed in by clicking and dragging the image.
+Touchscreen users can use a single-finger drag gesture to pan the view. Users with a keyboard
+can also use the following keyboard shortcuts:
+
+* $keyseq($key(Ctrl)$key(←)) to pan left.
+* $keyseq($key(Ctrl)$key(→)) to pan right.
+* $keyseq($key(Ctrl)$key(↑)) to pan up.
+* $keyseq($key(Ctrl)$key(↓)) to pan down.
+
+== Rotating
+
+Users can use the $gui(Rotate Right) ($media[type="image" src="figures/object-rotate-right-symbolic.svg"](object-rotate-right-symbolic))
+and $gui(Rotate Left) ($media[type="image" src="figures/object-rotate-left-symbolic.svg"](object-rotate-left-symbolic))
+buttons under $gui[style="menuitem"](Rotate) in the main menu to rotate clockwise and
+counter-clockwise. They can also use the following keyboard shortcuts:
+
+* $keyseq($key(Ctrl)$key(R)) to rotate clockwise.
+* $keyseq($key(Ctrl)$key(Shift)$key(R)) to rotate counter-clockwise.
+
+Touchpad and touchscreen users can also use a two-finger rotate gesture.
+
+== Fullscreen
+
+Loupe has a simple fullscreen mode. Users can toggle fullscreen mode by pressing the $gui(Toggle Fullscreen)
+($media[type="image" src="figures/view-fullscreen-symbolic.svg"](view-fullscreen-symbolic) / $media[type="image" src="figures/view-restore-symbolic.svg"](view-restore-symbolic)) button.
+Keyboard users can also use $key(F11) to toggle fullscreen mode.