Improve template readme

Signed-off-by: Marc Edwards <[email protected]>

Author: marcedwards

pinwheel/templates/readme.md

@@ -1,8 +1,11 @@
-Pinwheel’s [exporting](/help/pinwheel/exporting/) supports a wide range of common formats. If you need a format we don’t support, a custom template can be used.
+Pinwheel’s [exporting](https://bjango.com/help/pinwheel/exporting/) supports a wide range of common formats. If you need a format we don’t support, a custom template can be used.
 
-Custom templates use the [Stencil template language](https://stencil.fuller.li/en/latest/templates.html).
+Custom templates use the [Stencil template language](https://stencil.fuller.li/en/latest/templates.html). Most of Pinwheel’s built-in exporting uses Stencil templates, and are available in our [Bjango DevKit GitHub repository](https://github.com/bjango/Bjango-DevKit/tree/main/pinwheel/templates/Pinwheel%20Built%20In%20Examples). Feel free to use them as the basis of your own templates, or to learn how templates work.
 
-The data structure availble in templates is a list of `items` at the top level. There is also a `exportFileName` item that corresponds to the file name in the build task. You can iterate through all the items like this:
+
+### Main structure
+
+The data structure available in templates is a list of `items` at the top level. There is also a `exportFileName` item that corresponds to the file name in the build task. You can iterate through all the items like this:
 
 ```
 {% for item in items %}
@@ -20,6 +23,9 @@ And, if you wanted to see if it is a number, you'd use:
 {% if item.number %}
 ```
 
+
+### Appearance, contrast, and color formatters
+
 A `colorItem` has a `color` which can have `light`, `dark`, `highContrast` and `darkHighContrast` appearances. If a color has no appearances, then only the `light` value will be set. You can access it like this:
 
 ```
@@ -29,20 +35,20 @@ A `colorItem` has a `color` which can have `light`, `dark`, `highContrast` and `
 The formatter above is a custom tag. There are lots of format options available for colors. They correspond to all the formats you can use in the Pinwheel color picker:
 
 ```
-colorAsFloatRGBA, 
+colorAsFloatRGBA,
 colorAsFloatHSVA,
-colorAsCSSHexRGB, 
-colorAsCSSRgb, 
-colorAsCSSColor, 
+colorAsCSSHexRGB,
+colorAsCSSRgb,
+colorAsCSSColor,
 colorAsCSSOklch,
-colorAsHex, 
-colorAsHexRGBA, 
+colorAsHex,
+colorAsHexRGBA,
 colorAsHexARGB,
-colorAsSwiftUIColor, 
-colorAsSwiftUIKitColor, 
-colorAsSwiftAppKitColor, 
-colorAsSwiftUIColorHSBA, 
-colorAsSwiftUIKitColorHSBA, 
+colorAsSwiftUIColor,
+colorAsSwiftUIKitColor,
+colorAsSwiftAppKitColor,
+colorAsSwiftUIColorHSBA,
+colorAsSwiftUIKitColorHSBA,
 colorAsSwiftAppKitColorHSBA
 ```
 
@@ -55,6 +61,9 @@ There are 3 parameters to this formatter, the first two are required, the last i
 2. The dark color you want to use
 3. The CSS format you want these colors to be output in. This can be `cssHex` (eg: `#FFFFFF`), `cssRgb` (eg: `rgb(255, 255, 255)`), `cssColor` (eg: `color(srgb 1 1 1)`) or `cssOKLCH` (eg: `oklch(100.0% 0.0 89.9 / 1.0)`). If none is specified `cssColor` will be used.
 
+
+### Code safe names
+
 There is also a formatter for creating safe variable names in most programming languages (things like making sure it doesn't start with a number, removing spaces, etc):
 ```
 codeSafeName
@@ -74,6 +83,9 @@ You can combine multiple formatters, for example say you wanted to create a Swif
 let {%+ codeSafeName color.name +%} = {%+ colorAsSwiftUIColor color.light +%}
 ```
 
+
+### Numbers, strings, and booleans
+
 For `number`, `string` and `boolean` types you can access the `value` of each in a similar way:
 
 ```
@@ -97,6 +109,9 @@ This item is called Green.
 This item is called Important.
 ```
 
+
+### Full example
+
 The full data structure is below for the technically minded:
 
 ```swift