Set up VS Code support for Markdoc (#29352)

* Add a very simple configuration for the language server

* Un-ignore VS code settings for repo

* Add VS Code settings to support Markdoc

* Reformat existing file

* Flesh out Markdoc snippets

* Better align the Markdoc snippet prefixes with the legacy prefixes

Author: jhgilbert

.gitignore

@@ -226,7 +226,6 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
-.vscode
 
 # jetbrains
 .idea

.vscode/markdoc.code-snippets

@@ -0,0 +1,129 @@
+{
+    "Alert box": {
+        "prefix": ";;alert",
+        "body": ["{% alert level=\"${1|info,warning,danger|}\" %}", "${2:This is an alert message.}", "{% /alert %}"],
+        "description": "Markdoc alert block with a level attribute (info, warning, danger)"
+    },
+
+    "Callout": {
+        "prefix": ";;callout",
+        "body": [
+            "{% callout src=\"${1:https://www.example.com}\" header=\"${2:Join the Preview!}\" btn_hidden=${3|false,true|} %}",
+            "${4:Callout content goes here.}",
+            "{% /callout %}"
+        ],
+        "description": "Markdoc callout block with optional header and button visibility"
+    },
+
+    "Code block": {
+        "prefix": ";;code",
+        "body": [
+            "```${1:javascript} {% filename=\"${2:example.js}\" collapsible=${3|true,false|} disable_copy=${4|false,true|} wrap=${5|false,true|} %}",
+            "${6:// Your code here}",
+            "```"
+        ],
+        "description": "Markdoc code block with attributes and tabstop choices"
+    },
+
+    "Definition list": {
+        "prefix": ";;list",
+        "body": [
+            "Service",
+            "",
+            ": Services are the building blocks of modern microservice architectures - broadly a service groups together endpoints, queries, or jobs for the purposes of building your application.",
+            "",
+            "Resource",
+            "",
+            ": Resources represent a particular domain of a customer application - they are typically an instrumented web endpoint, database query, or background job.",
+            "",
+            "`clusterChecksRunner.affinity.podAffinity.preferredDuringSchedulingIgnoredDuringExecution`",
+            ": Required. A list of node selector terms. The terms are ORed.",
+            "`site`",
+            ": Set the site of the Datadog intake for Agent data:  {{< region-param key=\"dd_site\" code=\"true\" >}}. Defaults to `datadoghq.com`."
+        ],
+        "description": "Description list"
+    },
+
+    "If": {
+        "prefix": ";;if",
+        "body": [
+            "{% if equals($${1:trait_id}, \"${2:option_id}\") %}",
+            "${3:Content shown if condition is true}",
+            "{% /if %}"
+        ],
+        "description": "Markdoc if tag with equals condition"
+    },
+
+    "Image": {
+        "prefix": ";;image",
+        "body": [
+            "{% img src=\"${1:path/to/image.png}\" alt=\"${2:Descriptive alt text}\" style=\"${3:width:80%;}\" /%}"
+        ],
+        "description": "Markdoc image with optional alt and style"
+    },
+
+    "Video": {
+        "prefix": ";;;video",
+        "body": ["{% img src=\"${1:path/to/video.mp4}\" alt=\"${2:Descriptive video alt text}\" video=\"true\" /%}"],
+        "description": "Markdoc video tag using img with video attribute"
+    },
+
+    "Region site address": {
+        "prefix": ";;region-param",
+        "body": [
+            "{% region-param key=\"${1:dd_site}\" code=${2|false,true|} link=${3|false,true|} text=\"${4:Custom link text}\" /%}"
+        ],
+        "description": "Markdoc region-param tag with attribute choices"
+    },
+
+    "Region selector": {
+        "prefix": ";;region",
+        "body": [
+            "{% site-region region=\"${1|us,us3,us5,eu,ap1,gov|}\" %}",
+            "${2:Content for this region.}",
+            "{% /site-region %}"
+        ],
+        "description": "Markdoc site-region block with selectable region"
+    },
+
+    "Table": {
+        "prefix": ";;table",
+        "body": [
+            "{% table %}",
+            "* ${1:Header Col 1}",
+            "* ${2:Header Col 2}",
+            "---",
+            "* ${3:Row 1 Col 1}",
+            "* ${4:Row 1 Col 2}",
+            "---",
+            "* ${5:Row 2 Col 1}",
+            "* ${6:Row 2 Col 2}",
+            "{% /table %}"
+        ],
+        "description": "Markdoc table with 2 rows and 2 columns"
+    },
+
+    "Tabs": {
+        "prefix": ";;tabs",
+        "body": [
+            "{% tabs %}",
+            "",
+            "{% tab label=\"${1:Tab 1}\" %}",
+            "${2:Content for Tab 1. Link URLs go at the bottom of the file, not the bottom of the tab.}",
+            "{% /tab %}",
+            "",
+            "{% tab label=\"${3:Tab 2}\" %}",
+            "${4:Content for Tab 2}",
+            "{% /tab %}",
+            "",
+            "{% /tabs %}"
+        ],
+        "description": "Markdoc tabs block with two labeled tabs"
+    },
+
+    "Check mark": {
+        "prefix": ";;check",
+        "body": "{% x/ %}",
+        "description": "X tag (self-closing) for checkmark"
+    }
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "*.mdoc.md": "markdoc"
+    }
+}

content/en/real_user_monitoring/guide/proxy-mobile-rum-data.mdoc.md

@@ -1,51 +1,57 @@
 ---
 title: Proxy Your Mobile RUM Data
 aliases:
-  - /real_user_monitoring/faq/proxy_mobile_rum_data/
+    - /real_user_monitoring/faq/proxy_mobile_rum_data/
 further_reading:
-  - link: '/real_user_monitoring/'
-    tag: 'Documentation'
-    text: 'Learn about Real User Monitoring'
+    - link: '/real_user_monitoring/'
+      tag: 'Documentation'
+      text: 'Learn about Real User Monitoring'
 content_filters:
-  - trait_id: platform
-    option_group_id: rum_sdk_platform_options
-    label: "SDK"
-  - trait_id: protocol
-    option_group_id: rum_mobile_proxy_protocol_options
+    - trait_id: platform
+      option_group_id: rum_sdk_platform_options
+      label: 'SDK'
+    - trait_id: protocol
+      option_group_id: rum_mobile_proxy_protocol_options
 ---
 
 ## Overview
 
 The RUM Mobile SDKs can be configured to send requests through a proxy.
 
 <!-- Android -->
+
 {% if equals($platform, "android") %}
 Proxies use [OkHttpClient Proxy and Authenticator][2] on Android.
 {% /if %}
 
 <!-- iOS -->
+
 {% if equals($platform, "ios") %}
 Proxies use [URLSessionConfiguration.connectionProxyDictionary][3] on iOS.
 {% /if %}
 
 ## Prerequisite proxy setup
 
 <!-- HTTP/HTTPS -->
+
 {% if equals($protocol, "http_https") %}
 To successfully forward a request to Datadog, your proxy must support [HTTP CONNECT][1] requests.
 {% /if %}
 
 <!-- SOCKS -->
+
 {% if equals($protocol, "socks") %}
 To successfully forward a request to Datadog, your proxy must support [SOCKS5 proxying][4].
 {% /if %}
 
 ## Recommended SDK setup
 
 <!-- HTTP/HTTPS -->
+
 {% if equals($protocol, "http_https") %}
 
 <!-- HTTP/HTTPS > Android -->
+
 {% if equals($platform, "android") %}
 
 When initializing the Android SDK, specify the following proxy configuration:
@@ -65,16 +71,19 @@ configBuilder.setProxy(proxy, authenticator)
 For more information, see the [OkHttpClient Proxy and Authenticator][2] documentation.
 
 {% /if %}
+
 <!-- end HTTP/HTTPS > Android -->
 
 <!-- HTTP/HTTPS > iOS -->
+
 {% if equals($platform, "ios") %}
 
 When initializing the iOS SDK, specify the following proxy configuration:
 
 {% tabs %}
 
 {% tab label="Swift" %}
+
 ```swift
 import DatadogCore
 
@@ -93,9 +102,11 @@ Datadog.initialize(
   trackingConsent: trackingConsent
 )
 ```
+
 {% /tab %}
 
 {% tab label="Objective C" %}
+
 ```objective-c
 @import DatadogObjc;
 
@@ -118,9 +129,11 @@ For more information, see the [URLSessionConfiguration.connectionProxyDictionary
 {% /tabs %}
 
 {% /if %}
+
 <!-- end HTTP/HTTPS > iOS -->
 
 <!-- HTTP/HTTPS > React Native -->
+
 {% if equals($platform, "react_native") %}
 When initializing the React Native SDK, specify the following proxy configuration:
 
@@ -131,16 +144,21 @@ const config = new DatadogProviderConfiguration('<client token>', '<environment>
 
 config.proxyConfig = new ProxyConfiguration(ProxyType.HTTPS, '<www.example.com>', <123>, '<proxy user>', '<proxy password>');
 ```
+
 {% /if %}
+
 <!-- end HTTP/HTTPS > React Native -->
 
 {% /if %}
+
 <!-- end HTTP/HTTPS -->
 
 <!-- SOCKS -->
+
 {% if equals($protocol, "socks") %}
 
 <!-- SOCKS > Android -->
+
 {% if equals($platform, "android") %}
 When initializing the Android SDK, specify the following proxy configuration:
 
@@ -159,15 +177,18 @@ configBuilder.setProxy(proxy, authenticator)
 For more information, see the [OkHttpClient Proxy and Authenticator][2] documentation.
 
 {% /if %}
+
 <!-- end SOCKS > Android -->
 
 <!-- SOCKS > iOS -->
+
 {% if equals($platform, "ios") %}
 When initializing the iOS SDK, specify the following proxy configuration:
 
 {% tabs %}
 
 {% tab label="Swift" %}
+
 ```swift
 import DatadogCore
 
@@ -186,9 +207,11 @@ Datadog.initialize(
   trackingConsent: trackingConsent
 )
 ```
+
 {% /tab %}
 
 {% tab label="Objective C" %}
+
 ```objective-c
 @import DatadogObjc;
 
@@ -210,9 +233,11 @@ For more information, see the [URLSessionConfiguration.connectionProxyDictionary
 {% /tabs %}
 
 {% /if %}
+
 <!-- end SOCKS > iOS -->
 
 <!-- SOCKS > React Native -->
+
 {% if equals($platform, "react_native") %}
 
 When initializing the React Native SDK, specify the following proxy configuration:
@@ -226,12 +251,14 @@ config.proxyConfig = new ProxyConfiguration(ProxyType.SOCKS, '<www.example.com>'
 ```
 
 {% /if %}
+
 <!-- end SOCKS > React Native -->
 
 {% /if %}
+
 <!-- end SOCKS -->
 
 [1]: https://www.rfc-editor.org/rfc/rfc9110#CONNECT
 [2]: https://square.github.io/okhttp/3.x/okhttp/okhttp3/OkHttpClient.html
 [3]: https://developer.apple.com/documentation/foundation/urlsessionconfiguration/1411499-connectionproxydictionary
-[4]: https://datatracker.ietf.org/doc/html/rfc1928
+[4]: https://datatracker.ietf.org/doc/html/rfc1928

markdoc.config.json

@@ -0,0 +1,6 @@
+[
+    {
+        "id": "datadog-docs",
+        "path": "content/en"
+    }
+]