Feat: media folders templates (#3116)

* refactor: typescript backendHelper

* test: add string templating tests

* test: add createPreviewUrl invalid date test

* refactor: move all formatters to one file

* feat: support media folders templating

* feat: add filename and extension template variables

* feat: support paths in string templates

* docs: add media folder templating docs

* style(docs): remove line break

website/content/docs/beta-features.md

@@ -55,7 +55,7 @@ You can now specify a `path` template (similar to the `slug` template) to contro
 
 This allows saving content in subfolders, e.g. configuring `path: '{{year}}/{{slug}}'` will save the content under `2019/post-title.md`.
 
-## Folder Collections Media Folder
+## Folder Collections Media and Public Folder
 
 By default the CMS stores media files for all collections under a global `media_folder` directory as specified in the configuration.
 
@@ -86,6 +86,7 @@ collections:
     folder: content/posts
     path: '{{slug}}/index'
     media_folder: ''
+    public_folder: ''
     fields:
       - label: Title
         name: title
@@ -97,7 +98,7 @@ collections:
 
 More specifically, saving a entry with a title of `example post` with an image named `image.png` will result in a directory structure of:
 
-```
+```bash
 content
   posts
     example-post
@@ -109,6 +110,15 @@ And for the image field being populated with a value of `image.png`.
 
 **Note: When specifying a `path` on a folder collection `media_folder` defaults to an empty string.**
 
+**Available template tags:**
+
+Supports all of the [`slug` templates](/docs/configuration-options#slug) and:
+
+* `{{filename}}` The file name without the extension part.
+* `{{extension}}` The file extension.
+* `{{media_folder}}` The global `media_folder`.
+* `{{public_folder}}` The global `public_folder`.
+
 ## List Widget: Variable Types
 
 Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Netlify CMS.
@@ -343,7 +353,6 @@ Template tags produce the following output:
 
 - `{{author-name}}`: the full name of the author (might be empty based on the user's profile)
 
-
 ## Image widget file size limit
 
 You can set a limit to as what the maximum file size of a file is that users can upload directly into a image field.
@@ -359,4 +368,3 @@ Example config:
     config:
       max_file_size: 512000 # in bytes, only for default media library
 ```
-

website/content/docs/configuration-options.md

@@ -256,6 +256,7 @@ would like to reference that field via `{{slug}}`, you can do so by adding the e
 prefix, eg. `{{fields.slug}}`.
 
 **Available template tags:**
+
 * Any field can be referenced by wrapping the field name in double curly braces, eg. `{{author}}`
 * `{{slug}}`: a url-safe version of the `title` field (or identifier field) for the file
 * `{{year}}`: 4-digit year of the file creation date
@@ -266,16 +267,19 @@ prefix, eg. `{{fields.slug}}`.
 * `{{second}}`: 2-digit second of the file creation date
 
 **Example:**
+
 ```yaml
 slug: "{{year}}-{{month}}-{{day}}_{{slug}}"
 ```
 
 **Example using field names:**
+
 ```yaml
 slug: "{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}"
 ```
 
 **Example using field name that conflicts with a template tag:**
+
 ```yaml
 slug: "{{year}}-{{month}}-{{day}}_{{fields.slug}}"
 ```
@@ -289,11 +293,14 @@ root of a deploy preview.
 **Available template tags:**
 
 Template tags are the same as those for [slug](#slug), with the following exceptions:
+
 * `{{slug}}` is the entire slug for the current entry (not just the url-safe identifier, as is the
     case with [`slug` configuration](#slug)
 * The date based template tags, such as `{{year}}` and `{{month}}`, are pulled from a date field in your entry, and may require additional configuration - see [`preview_path_date_field`](#preview_path_date_field) for details. If a date template tag is used and no date can be found, `preview_path` will be ignored.
+* `{{filename}}` The file name without the extension part.
+* `{{extension}}` The file extension.
 
-**Example:**
+**Examples:**
 
 ```yaml
 collections:
@@ -301,6 +308,12 @@ collections:
     preview_path: "blog/{{year}}/{{month}}/{{slug}}"
 ```
 
+```yaml
+collections:
+  - name: posts
+    preview_path: "blog/{{year}}/{{month}}/{{filename}}.{{extension}}"
+```
+
 ### `preview_path_date_field`
 
 The name of a date field for parsing date-based template tags from `preview_path`. If this field is
@@ -358,13 +371,13 @@ This setting changes options for the editor view of the collection. It has one o
      preview: false
 ```
 
-
 ### `summary`
 
 This setting allows the customisation of the collection list view. Similar to the `slug` field, a string with templates can be used to include values of different fields, e.g. `{{title}}`.
 This option over-rides the default of `title` field and `identifier_field`.
 
 **Example**
+
 ```yaml
     summary: "Version: {{version}} - {{title}}"
 ```