From e4dbc3c6d2a387c5d7236fe5a0261dde4c6ba251 Mon Sep 17 00:00:00 2001 From: Martina Lilja Date: Sat, 2 Mar 2024 07:26:16 +0100 Subject: [PATCH] ESY-6296 Code examples - support for json5 - copy functionality - headers should not have line numbers --- _includes/code-example.html | 20 ++++++++ _sass/code-view.scss | 46 +++++++++++++++++- index.md | 93 ++++++++++++++++++++++++++++--------- 3 files changed, 135 insertions(+), 24 deletions(-) create mode 100644 _includes/code-example.html diff --git a/_includes/code-example.html b/_includes/code-example.html new file mode 100644 index 000000000..856b83ea6 --- /dev/null +++ b/_includes/code-example.html @@ -0,0 +1,20 @@ +{%- comment -%} +**Parameters +title: Title +header: header content +json: json content +{%- endcomment -%} + +

+ {{ include.title}} + +

+````http +{{include.header}} +```` + +````jsonc +{{include.json}} +```` \ No newline at end of file diff --git a/_sass/code-view.scss b/_sass/code-view.scss index 118441168..bcf899741 100644 --- a/_sass/code-view.scss +++ b/_sass/code-view.scss @@ -1,9 +1,25 @@ @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; @@ -11,3 +27,31 @@ } } } + +.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 index a19eaa2bd..a33baaf9f 100644 --- a/index.md +++ b/index.md @@ -56,7 +56,27 @@ POST /psp/consumers HTTP/1.1 Host: api.externalintegration.payex.com Authorization: Bearer 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 +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": "olivia.nyhuus@example.com", - "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 +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 ``{:.language-html .highlight} `{ "code": true }`{:.language-js .highlight}