diff --git a/.vscode/devdocs.code-snippets b/.vscode/devdocs.code-snippets index d2ebcf421770b0e450a7db4095ef087766502621..4fdba970ca6e4c7efbd6bd4e22b5be0d370cb7a2 100644 --- a/.vscode/devdocs.code-snippets +++ b/.vscode/devdocs.code-snippets @@ -117,6 +117,22 @@ "description": "Meta description in Markdown header", "scope": "yaml" }, + "Heading pill": { + "prefix": ["headingpill", "pillheading"], + "body": [ + "{{<heading-pill style=\"${1|alpha,beta,early-access,deprecated|}\">}}$0{{</heading-pill>}}", + ], + "description": "Heading pill enclosing some text", + "scope": "markdown" + }, + "Inline pill": { + "prefix": ["inlinepill", "pillinline"], + "body": [ + "{{<inline-pill style=\"${1|alpha,beta,early-access,deprecated|}\">}}", + ], + "description": "Inline pill after some text", + "scope": "markdown" + }, "Render/include partial": { "prefix": ["partialinclude", "renderpartial"], "body": [ @@ -167,4 +183,19 @@ "description": "Creates a new collapsible <details> element with a title and a body", "scope": "markdown" }, + "Create FAQ entry": { + "prefix": ["faqentry", "faqitem"], + "body": [ + "{{<faq-item>}}", + "{{<faq-question text=\"${1:question}\">}}", + "{{<faq-answer>}}", + "", + "$0$TM_SELECTED_TEXT", + "", + "{{</faq-answer>}}", + "{{</faq-item>}}", + ], + "description": "Create FAQ entry (heading level 2, default)", + "scope": "markdown" +}, } diff --git a/README.md b/README.md index 241c5245e703fa22ae0e2e9de07e3dc5eb8907d0..bae0226326f7983a45b281a758aa0c73e3735208 100644 --- a/README.md +++ b/README.md @@ -49,52 +49,9 @@ $ npm run format Our docs are deployed using [Cloudflare Pages](https://pages.cloudflare.com). Every commit pushed to production will automatically deploy to [developers.cloudflare.com](https://developers.cloudflare.com), and any pull requests opened will have a corresponding staging URL available in the pull request comments. -## Visual Studio Code snippets - -This repository includes a file with [Visual Studio Code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) for the most common Hugo shortcodes used Developer Docs. - -The available snippets are: - -Prefixes | Description ----|--- -`asideheader` | Inserts an `Aside` shortcode with header text. -`asidenoheader` | Inserts an `Aside` shortcode without a header. -`ccol` | Surrounds the current selection with `content-column` shortcodes. -`tblwrap` | Surrounds the current selection with `table-wrap` shortcodes. -`directory` | Inserts a `directory-listing` shortcode. -`headerfullfile` | Inserts a file header for a complete Markdown file. -`metatitle` | Inserts meta title fields in existing Markdown header. Used to complement a full file header. -`metadescription` | Inserts meta description fields in existing Markdown header. Used to complement a full file header. -`headerpartialfile` | Inserts a header for a partial Markdown file. -`headerpartialfileparams` | Inserts a header for a partial Markdown file with input parameters. -`partialinclude` or `renderpartial` | Inserts a `render` shortcode to include content from a partial in the current document. -`partialincludeparams` or `renderpartialparams` | Inserts a `render` shortcode to include content from a partial with input parameters in the current document. -`twotabs` or `addtabs` | Inserts a new tabs section with two tabs for dashboard and API instructions. -`detailssection` or `collapsible` | Inserts a collapsible `<details>` HTML element. - -Triggering one of the available snippets will insert their body content at the current cursor position. - -Additionally, the following snippets support surrounding existing text: -* `Aside with header` -* `Aside without header` -* `Surround with content-column` -* `Surround with table-wrap` -* `Create collapsible details section` - -### How to use - -Note: Make sure you open the root folder of your cloned repository in Visual Studio Code (VS Code), so that VS Code correctly detects the snippets file stored in the `.vscode/` sub-folder. - -To enter a snippet: -1. Enter the snippet prefix and press `Ctrl+Space` (`Command+Space` on a Mac). -2. Select the desired snippet and press `Enter`. -3. (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press `Tab` to move to the next placeholder. Keep replacing placeholders and pressing `Tab`. When there are no more placeholders, pressing `Tab` will end the process. - -To surround existing content with a snippet: -1. Select the text you wish to surround with a snippet. -2. Enter the snippet prefix (temporarily replacing the selected text) and press `Ctrl+Space` (`Command+Space` on a Mac). -3. Select the desired snippet and press `Enter`. VS Code will insert the snippet body and paste the previously selected content in the correct location. -4. (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press `Tab` to move to the next placeholder. Keep replacing placeholders and pressing `Tab`. When there are no more placeholders, pressing `Tab` will end the process. +## Available Visual Studio Code snippets + +Refer to [Visual Studio Code snippets](./SNIPPETS.md) for more information. ## For Cloudflare employees diff --git a/SNIPPETS.md b/SNIPPETS.md new file mode 100644 index 0000000000000000000000000000000000000000..8456059c7c6636bb2354be12741f8fbb2d828a36 --- /dev/null +++ b/SNIPPETS.md @@ -0,0 +1,49 @@ +# Visual Studio Code snippets + +This repository includes a file with [Visual Studio Code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) for the most common Hugo shortcodes used in Developer Docs. + +The available snippets are: + +Prefixes | Description +---|--- +`asideheader` | Inserts an `Aside` shortcode with header text. +`asidenoheader` | Inserts an `Aside` shortcode without a header. +`ccol` | Surrounds the current selection with `content-column` shortcodes. +`tblwrap` | Surrounds the current selection with `table-wrap` shortcodes. +`directory` | Inserts a `directory-listing` shortcode. +`faqentry` or `faqitem` | Inserts shortcodes for an entire FAQ entry (question and answer). +`headerfullfile` | Inserts a file header for a complete Markdown file. +`headingpill` or `pillheading` | Inserts shortcode for a heading with a pill stating the release status (for example, Beta). +`metatitle` | Inserts meta title fields in existing Markdown header. Used to complement a full file header (refer to `headerfullfile`). +`metadescription` | Inserts meta description fields in existing Markdown header. Used to complement a full file header (refer to `headerfullfile`). +`headerpartialfile` | Inserts a header for a partial Markdown file. +`headerpartialfileparams` | Inserts a header for a partial Markdown file with input parameters. +`inlinepill` or `pillinline` | Inserts shortcode for an inline pill (appearing after a piece of text) stating the release status (for example, Beta). +`partialinclude` or `renderpartial` | Inserts a `render` shortcode to include content from a partial in the current document. +`partialincludeparams` or `renderpartialparams` | Inserts a `render` shortcode to include content from a partial with input parameters in the current document. +`twotabs` or `addtabs` | Inserts a new tabs section with two tabs for dashboard and API instructions. +`detailssection` or `collapsible` | Inserts a collapsible `<details>` HTML element. + +Triggering one of the available snippets will insert their body content at the current cursor position. + +Additionally, the following snippets support surrounding existing text: +* `Aside with header` +* `Aside without header` +* `Surround with content-column` +* `Surround with table-wrap` +* `Create collapsible details section` + +### How to use + +Note: Make sure you open the root folder of your cloned repository in Visual Studio Code (VS Code), so that VS Code correctly detects the snippets file stored in the `.vscode/` sub-folder. + +To enter a snippet: +1. Enter the snippet prefix and press `Ctrl+Space` (`Command+Space` on a Mac). +2. Select the desired snippet and press `Enter`. +3. (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press `Tab` to move to the next placeholder. Keep replacing placeholders and pressing `Tab`. When there are no more placeholders, pressing `Tab` will end the process. + +To surround existing content with a snippet: +1. Select the text you wish to surround with a snippet. +2. Enter the snippet prefix (temporarily replacing the selected text) and press `Ctrl+Space` (`Command+Space` on a Mac). +3. Select the desired snippet and press `Enter`. VS Code will insert the snippet body and paste the previously selected content in the correct location. +4. (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press `Tab` to move to the next placeholder. Keep replacing placeholders and pressing `Tab`. When there are no more placeholders, pressing `Tab` will end the process.