ESY-6296 Code examples

- support for json5 - copy functionality - headers should not have line numbers
SwedbankPay · Mar 2, 2024 · e4dbc3c · e4dbc3c
1 parent 2bf3e4b
commit e4dbc3c
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 24 deletions.
diff --git a/_includes/code-example.html b/_includes/code-example.html
@@ -0,0 +1,20 @@
+{%- comment -%}
+**Parameters
+title: Title
+header: header content
+json: json content
+{%- endcomment -%}
+
+<p class="code-view-header">
+    {{ include.title}}
+<button class="code-view-copy" aria-label="Copy content to clipboard" value='{{include.json}}' onclick='javascript:navigator.clipboard.writeText(this.value)'>
+    copy json
+</button>
+</p>
+````http
+{{include.header}}
+````
+
+````jsonc
+{{include.json}}
+````
diff --git a/_sass/code-view.scss b/_sass/code-view.scss
@@ -1,13 +1,57 @@
 @import 'colors.scss';
+.code-view-copy {
+    display: flex;
+    font-family: Akkurat Mono,monospace;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    margin: 0;
+    padding: 0;
+    border:none;
+    background-color: #493c3b;
+    color: #FFFFFF;
+    text-decoration: underline;
+}
+
+.code-view-copy:hover {
+    text-decoration: none;
+}
 
 .code-view {
     .code-view-table {
         .code-view-code {
-
             .nc,
             .nf {
                 color: $code-green;
             }
         }
     }
 }
+
+.language-http {   
+    .code-view {
+        .code-view-table {
+            .code-view-numbers {
+                display: none;
+            }
+
+            .code-view-code {
+                padding-left: 1rem;
+            }
+        }
+    }
+}
+
+.language-http:has(+ .language-js)
+.language-http:has(+ .language-json),
+.language-http:has(+ .language-jsonc) {
+    margin-bottom: 0 !important;
+
+    .code-view {
+        margin-bottom: 0;
+
+        .code-view-table {
+            border-radius: 0px;
+        }
+    }
+}
diff --git a/index.md b/index.md
@@ -56,7 +56,27 @@ POST /psp/consumers HTTP/1.1
 Host: api.externalintegration.payex.com
 Authorization: Bearer <AccessToken>
 Content-Type: application/json
+```
+
+{:.code-view-header}
+HTTP response
+
+```http
+HTTP/1.1 200 OK
+Content-Type: application/json
+```
+
+````http
+POST /psp/consumers HTTP/1.1
+Host: api.externalintegration.payex.com
+Authorization: Bearer <AccessToken>
+Content-Type: application/json
+````
+
+{:.code-view-header}
+JSON
 
+```json
 {
     "operation": "initiate-consumer-session",
     "msisdn": "+4798765432",
@@ -70,20 +90,17 @@ Content-Type: application/json
 ```
 
 {:.code-view-header}
-Response
-
-```http
-HTTP/1.1 200 OK
-Content-Type: application/json
+JSONC (JSON with comments)
 
+```jsonc
 {
-    "payment": "/psp/creditcard/payments/{{ page.payment_id }}",
+    "payment": "/psp/creditcard/payments/paymentId",
     "authorization": {
         "direct": true,
-        "cardBrand": "Visa",
-        "cardType": "Credit",
-        "issuingBank": "Utl. Visa",
-        "paymentToken": "{{ page.payment_token }}",
+        "cardBrand": "Visa", // Some comment
+        "cardType": "Credit", // Some comment
+        "issuingBank": "Utl. Visa", // Some comment
+        "paymentToken": "paymentToken",
         "maskedPan": "454778******3329",
         "expiryDate": "12/2020",
         "panToken": "cca2d98d-8bb3-4bd6-9cf3-365acbbaff96",
@@ -114,21 +131,51 @@ Content-Type: application/json
 }
 ```
 
-{:.code-view-header}
-JSON
+To show code examples you can use a code example component.
 
-```json
-{
-    "operation": "initiate-consumer-session",
-    "msisdn": "+4798765432",
-    "email": "[email protected]",
-    "consumerCountryCode": "NO",
-    "nationalIdentifier": {
-        "socialSecurityNumber": "26026708248",
-        "countryCode": "NO"
+{% include code-example.html
+    title='Code example'
+    header='POST /psp/consumers HTTP/1.1
+Host: api.externalintegration.payex.com
+Authorization: Bearer <AccessToken>
+Content-Type: application/json'
+    json= '{
+    "payment": "/psp/creditcard/payments/paymentId",
+    "authorization": {
+        "direct": true,
+        "cardBrand": "Visa", // Some comment
+        "cardType": "Credit", // Some comment
+        "issuingBank": "Utl. Visa", // Some comment
+        "paymentToken": "paymentToken",
+        "maskedPan": "454778******3329",
+        "expiryDate": "12/2020",
+        "panToken": "cca2d98d-8bb3-4bd6-9cf3-365acbbaff96",
+        "panEnrolled": true,
+        "acquirerTransactionTime": "0001-01-01T00:00:00Z",
+        "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/authorizations/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
+        "transaction": {
+            "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/transactions/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
+            "created": "2020-03-10T13:15:01.9586254Z",
+            "updated": "2020-03-10T13:15:02.0493818Z",
+            "type": "Authorization",
+            "state": "AwaitingActivity",
+            "number": 70100366758,
+            "amount": 4201,
+            "vatAmount": 0,
+            "description": "Test transaction",
+            "payeeReference": "1583846100",
+            "isOperational": true,
+            "operations": [
+                {
+                    "method": "GET",
+                    "href": "https://api.stage.payex.com/psp/creditcard/confined/payments/authorizations/authenticate/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
+                    "rel": "redirect-authentication"
+                }
+            ]
+        }
     }
-}
-```
+}'
+    %}
 
 Here's some `<inline>`{:.language-html .highlight}
 `{ "code": true }`{:.language-js .highlight}