Expand quality guidelines (#135)

* quality guidelines: make icon grid template just a link

* quality guidelines: add screenshot example images

* minor: remove leftover import

docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx

@@ -1,5 +1,3 @@
-import AppIconGrid from "/img/app-icon-grid.svg";
-
 # Quality guidelines
 
 For the quick guidelines for the actual content (descriptions, screenshots), see the Appstream [docs](https://www.freedesktop.org/software/appstream/docs/chap-Quickstart.html).
@@ -32,13 +30,8 @@ The icon should be SVG, or a PNG with a size greater or equal to 256x256 pixels.
 ### Reasonable footprint
 
 The icon shouldn't fill too much or too little of the canvas. Avoid filling the entire canvas and having the icon touch the edges of the canvas (except with small protruding elements). Similarly, avoid thin shapes that are hard to see.
-You can use the following grid to check if your icon has a reasonable footprint:
-
-<AppIconGrid className="appIconGrid svgColor" />
 
-<a href="/img/app-icon-grid.svg" download>
-  Download App Grid
-</a>
+You can use our icon grid ([SVG template download](/img/app-icon-grid.svg)) with square and circular base shapes to check if your icon's footprint is too large or too small. The examples below show the grid overlaid on some app icons.
 
 ![Examples of icons with footprints that are too large, too small, and just right.](assets/app-icon-footprint.png)
 
@@ -187,6 +180,9 @@ Screenshots should be tagged with the language they are in. For example, if you
 
 Use the "window screenshot" feature in your native system screenshot tool to get just the app window and its shadow. Do not include the wallpaper behind the app, or even the entire desktop. Do not edit the screenshot, crop it, add text, or include promotional graphics.
 
+![Examples of a screenshot that includes the entire desktop with the window, one that has promotional graphics, and one that's a standalone window.](assets/screenshot-just-window.png)
+
+
 ### Take screenshots on Linux
 
 Do not use screenshots taken on other platforms, especially if it's immediately obvious from window controls and the like.
@@ -195,6 +191,8 @@ Do not use screenshots taken on other platforms, especially if it's immediately
 
 Use the platform default configuration for all settings that affect screenshots, including window controls, interface font, large text, high contrast, dark style, and so on. Having some screenshots to show off that e.g. dark style is supported is fine, but these should not be the only screenshots.
 
+![Examples of screenshots with default settings and custom font, window button layout, and high contrast enabled.](assets/screenshot-default.png)
+
 ### Include window shadow and rounded corners
 
 Screenshots must include the native toolkit shadow and rounding. App stores do not add a shadow after the fact and without one screenshots can look glitchy or have low contrast depending on the background. Apps that are always fullscreen (such as most games) are exempt from this.
@@ -207,13 +205,17 @@ Don't maximize your app window when taking screenshots, since this will remove t
 
 In order to ensure that text and interface elements are visible scaled-down in the app store UI the window size should be 1000x700 pixels or smaller (2000x1400 for HiDPI).
 
+![Examples for screenshots that are too large, and the correct size.](assets/screenshot-size.png)
+
 ### Image captions
 
 Every screenshot should have a [caption](https://www.freedesktop.org/software/appstream/docs/chap-Metadata.html#tag-screenshots) briefly describing it. Captions should only be one sentence and not end with a full stop. Don't start them with a number.
 
 ### Good content
 
-Screenshots for apps that contain content (e.g. media viewers or social media apps) should not show empty states or ugly content. Take some time to select the most beautiful content you can find, it makes all the difference for screenshots.
+Screenshots of apps that display content (media viewers, notes apps, chat, social media, and the like) should not show empty states or ugly content. Take some time to select high quality content, it makes all the difference for screenshots.
+
+![Examples for screenshots with just an empty state and actual content.](assets/screenshot-content.png)
 
 ### Up to date