Merge pull request AdobeDocs#396 from AdobeDocs/ds_graphql

Full-page WebAPI GraphQL API reference

Author: dshevtsov

spectaql/comdox-theme/views/partials/layout/page.hbs

@@ -0,0 +1,29 @@
+<div id="page" class="drawer-layout">
+  {{! DO THE NAVIGATION }}
+  <div id="sidebar">
+    <div class="sidebar-top-container">
+      <div id="logo">
+        {{#if logoData }}
+          <img src="data:image/png;base64,{{logoData}}" title="{{info.title}}" />
+        {{else if logoUrl}}
+          <a href="https://developer.adobe.com/commerce/webapi/graphql/"><img src="{{logoUrl}}" title="{{info.title}}" />
+            <strong class="spectrum-Heading spectrum-Heading--sizeXXS" style="text-align: center; display: block; color: #FA0F00;">Adobe&nbsp;Developer</strong>
+          </a>
+        {{else if logoImageName}}
+          <img src="images/{{logoImageName}}" title="{{info.title}}" />
+        {{/if}}
+      </div>
+      <button class="close-button" type="button">
+        <span aria-hidden="true">×</span>
+        <span class="sr-only">Close menu</span>
+      </button>
+    </div>
+    {{>layout/nav/main}}
+  </div>
+
+  <div id="docs">
+    {{>layout/nav/mobile-navbar}}
+    {{>layout/content/main}}
+    <div class="drawer-overlay"></div>
+  </div>
+</div>

spectaql/config.yml

@@ -6,11 +6,11 @@
 spectaql:
   # Optional Boolean indicating whether to omit the HTML <body/> and generate the documentation content only
   # Default: false
-  embeddable: true
+  # embeddable: true
 
   # Optional Boolean indicating whether to embed all resources (CSS and JS) into the same file
   # Default: false
-  oneFile: false
+  oneFile: true
 
   # Optional path to the target build directory.
   # Set to null to not write the output to the filesystem, making it only available via the API (default: public)
@@ -31,7 +31,7 @@ spectaql:
   # Optional URL to an image to use in your logo. This string will be provided as-is
   # to the HTML output. Should not be used with logoFile and its related options as
   # this will take precedence over the logoFile.
-  # logoUrl: https://yoursite.com/images/logo.png
+  logoUrl: https://developer.adobe.com/shared/images/adobe-social-share.png
   # Control the height of your logo here. Can be useful if your logo is SVG or an
   # inappropriate size.
   #
@@ -51,7 +51,7 @@ spectaql:
   # Optional URL to an image to use in your favicon. This string will be provided as-is
   # to the HTML output. Should not be used with faviconFile and its related options as
   # this will take precedence over the faviconFile.
-  # faviconUrl: https://yoursite.com/images/favicon.png
+  faviconUrl: https://www.adobe.com/favicon.ico
 
   # Optional string specifying a path to a theme directory to use for your build.
   #
@@ -439,8 +439,8 @@ info:
   # A non-standard array of items to display in your Introduction Area
   x-introItems:
     # Can be a Title (for the Nav panel) + URL to simply add a link to somewhere
-    - title: WebAPI guide
-      url: https://developer.adobe.com/commerce/webapi/
+    - title: Back to the GraphQL guide
+      url: https://developer.adobe.com/commerce/webapi/graphql/reference/
     # Can be a Title (for the Nav panel) + description (for the Content panel)
     # - title: Important thing 1
     #   description: Some important stuff we wanted you to know. Supports `markdown`
@@ -454,4 +454,3 @@ info:
 
   # If not using introspection.url OR servers[], you need to provide x-url
   # x-url: https://yoursite.com/graphql
-  

src/pages/graphql/payment-methods/klarna.md

@@ -10,7 +10,7 @@ keywords:
 
 # Klarna payment method
 
-Klarna Payments enables your consumers to try before they buy, finance purchases on your store with Klarna, or let them pay directly. Klarna offers these payment methods through a widget that you can add inline on your checkout page.
+[Klarna Payments](https://docs.klarna.com/platform-solutions/e-commerce-platforms/adobe-commerce/payments/kp-overview/) enables your consumers to try before they buy, finance purchases on your store with Klarna, or let them pay directly. Klarna offers these payment methods through a widget that you can add inline on your checkout page.
 
 ## Klarna payments workflow
 
@@ -80,7 +80,7 @@ In order to always present shoppers with the latest available payment options pr
 
 1. The application returns an updated `cart` object.
 
-1. [Reload the widget](https://docs.klarna.com/klarna-payments/integration-best-practices/purchase-experience/) on the client side.
+1. [Reload the widget](https://docs.klarna.com/payments/web-payments/integrate-with-klarna-payments/step-2-checkout/#display-klarna) on the client side.
 
 The following diagram describes the workflow:
 

src/pages/graphql/reference/index.md

@@ -3,5 +3,11 @@ title: GraphQL API reference
 description: Review comprehensive reference documentation for the Adobe Commerce and Magento Open Source GraphQL API schema.
 keywords:
   - GraphQL
-frameSrc: /graphql-api/index.html
+# frameSrc: /graphql-api/index.html
 ---
+
+# GraphQL API reference
+
+The Adobe Commerce and Magento Open Source GraphQL API provides a flexible, powerful, and efficient alternative to REST and SOAP web APIs for frontend development. The API is organized around a single GraphQL endpoint that provides access to the full range of Adobe Commerce and Magento Open Source features.
+
+See the following page for the full reference documentation for the Adobe Commerce and Magento Open Source GraphQL API schema: [GraphQL API reference](https://developer.adobe.com/commerce/webapi/graphql-api/).