diff --git a/src/pages/assets/openapi.yaml b/src/pages/assets/openapi.yaml new file mode 100644 index 0000000..817ecb0 --- /dev/null +++ b/src/pages/assets/openapi.yaml @@ -0,0 +1,1054 @@ +{ + "swagger": "2.0", + "info": { + "description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.", + "version": "1.0.7", + "title": "Swagger Petstore", + "termsOfService": "http://swagger.io/terms/", + "contact": { + "email": "apiteam@swagger.io" + }, + "license": { + "name": "Apache 2.0", + "url": "http://www.apache.org/licenses/LICENSE-2.0.html" + } + }, + "host": "petstore.swagger.io", + "basePath": "/v2", + "tags": [ + { + "name": "pet", + "description": "Everything about your Pets", + "externalDocs": { + "description": "Find out more", + "url": "http://swagger.io" + } + }, + { + "name": "store", + "description": "Access to Petstore orders" + }, + { + "name": "user", + "description": "Operations about user", + "externalDocs": { + "description": "Find out more about our store", + "url": "http://swagger.io" + } + } + ], + "schemes": [ + "https", + "http" + ], + "paths": { + "/pet/{petId}/uploadImage": { + "post": { + "tags": [ + "pet" + ], + "summary": "uploads an image", + "description": "", + "operationId": "uploadFile", + "consumes": [ + "multipart/form-data" + ], + "produces": [ + "application/json" + ], + "parameters": [ + { + "name": "petId", + "in": "path", + "description": "ID of pet to update", + "required": true, + "type": "integer", + "format": "int64" + }, + { + "name": "additionalMetadata", + "in": "formData", + "description": "Additional data to pass to server", + "required": false, + "type": "string" + }, + { + "name": "file", + "in": "formData", + "description": "file to upload", + "required": false, + "type": "file" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "$ref": "#/definitions/ApiResponse" + } + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + } + }, + "/pet": { + "post": { + "tags": [ + "pet" + ], + "summary": "Add a new pet to the store", + "description": "", + "operationId": "addPet", + "consumes": [ + "application/json", + "application/xml" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "Pet object that needs to be added to the store", + "required": true, + "schema": { + "$ref": "#/definitions/Pet" + } + } + ], + "responses": { + "405": { + "description": "Invalid input" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + }, + "put": { + "tags": [ + "pet" + ], + "summary": "Update an existing pet", + "description": "", + "operationId": "updatePet", + "consumes": [ + "application/json", + "application/xml" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "Pet object that needs to be added to the store", + "required": true, + "schema": { + "$ref": "#/definitions/Pet" + } + } + ], + "responses": { + "400": { + "description": "Invalid ID supplied" + }, + "404": { + "description": "Pet not found" + }, + "405": { + "description": "Validation exception" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + } + }, + "/pet/findByStatus": { + "get": { + "tags": [ + "pet" + ], + "summary": "Finds Pets by status", + "description": "Multiple status values can be provided with comma separated strings", + "operationId": "findPetsByStatus", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "status", + "in": "query", + "description": "Status values that need to be considered for filter", + "required": true, + "type": "array", + "items": { + "type": "string", + "enum": [ + "available", + "pending", + "sold" + ], + "default": "available" + }, + "collectionFormat": "multi" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "type": "array", + "items": { + "$ref": "#/definitions/Pet" + } + } + }, + "400": { + "description": "Invalid status value" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + } + }, + "/pet/findByTags": { + "get": { + "tags": [ + "pet" + ], + "summary": "Finds Pets by tags", + "description": "Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.", + "operationId": "findPetsByTags", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "tags", + "in": "query", + "description": "Tags to filter by", + "required": true, + "type": "array", + "items": { + "type": "string" + }, + "collectionFormat": "multi" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "type": "array", + "items": { + "$ref": "#/definitions/Pet" + } + } + }, + "400": { + "description": "Invalid tag value" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ], + "deprecated": true + } + }, + "/pet/{petId}": { + "get": { + "tags": [ + "pet" + ], + "summary": "Find pet by ID", + "description": "Returns a single pet", + "operationId": "getPetById", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "petId", + "in": "path", + "description": "ID of pet to return", + "required": true, + "type": "integer", + "format": "int64" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "$ref": "#/definitions/Pet" + } + }, + "400": { + "description": "Invalid ID supplied" + }, + "404": { + "description": "Pet not found" + } + }, + "security": [ + { + "api_key": [] + } + ] + }, + "post": { + "tags": [ + "pet" + ], + "summary": "Updates a pet in the store with form data", + "description": "", + "operationId": "updatePetWithForm", + "consumes": [ + "application/x-www-form-urlencoded" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "petId", + "in": "path", + "description": "ID of pet that needs to be updated", + "required": true, + "type": "integer", + "format": "int64" + }, + { + "name": "name", + "in": "formData", + "description": "Updated name of the pet", + "required": false, + "type": "string" + }, + { + "name": "status", + "in": "formData", + "description": "Updated status of the pet", + "required": false, + "type": "string" + } + ], + "responses": { + "405": { + "description": "Invalid input" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + }, + "delete": { + "tags": [ + "pet" + ], + "summary": "Deletes a pet", + "description": "", + "operationId": "deletePet", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "api_key", + "in": "header", + "required": false, + "type": "string" + }, + { + "name": "petId", + "in": "path", + "description": "Pet id to delete", + "required": true, + "type": "integer", + "format": "int64" + } + ], + "responses": { + "400": { + "description": "Invalid ID supplied" + }, + "404": { + "description": "Pet not found" + } + }, + "security": [ + { + "petstore_auth": [ + "write:pets", + "read:pets" + ] + } + ] + } + }, + "/store/inventory": { + "get": { + "tags": [ + "store" + ], + "summary": "Returns pet inventories by status", + "description": "Returns a map of status codes to quantities", + "operationId": "getInventory", + "produces": [ + "application/json" + ], + "parameters": [], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "type": "object", + "additionalProperties": { + "type": "integer", + "format": "int32" + } + } + } + }, + "security": [ + { + "api_key": [] + } + ] + } + }, + "/store/order": { + "post": { + "tags": [ + "store" + ], + "summary": "Place an order for a pet", + "description": "", + "operationId": "placeOrder", + "consumes": [ + "application/json" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "order placed for purchasing the pet", + "required": true, + "schema": { + "$ref": "#/definitions/Order" + } + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "$ref": "#/definitions/Order" + } + }, + "400": { + "description": "Invalid Order" + } + } + } + }, + "/store/order/{orderId}": { + "get": { + "tags": [ + "store" + ], + "summary": "Find purchase order by ID", + "description": "For valid response try integer IDs with value >= 1 and <= 10. Other values will generated exceptions", + "operationId": "getOrderById", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "orderId", + "in": "path", + "description": "ID of pet that needs to be fetched", + "required": true, + "type": "integer", + "maximum": 10, + "minimum": 1, + "format": "int64" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "$ref": "#/definitions/Order" + } + }, + "400": { + "description": "Invalid ID supplied" + }, + "404": { + "description": "Order not found" + } + } + }, + "delete": { + "tags": [ + "store" + ], + "summary": "Delete purchase order by ID", + "description": "For valid response try integer IDs with positive integer value. Negative or non-integer values will generate API errors", + "operationId": "deleteOrder", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "orderId", + "in": "path", + "description": "ID of the order that needs to be deleted", + "required": true, + "type": "integer", + "minimum": 1, + "format": "int64" + } + ], + "responses": { + "400": { + "description": "Invalid ID supplied" + }, + "404": { + "description": "Order not found" + } + } + } + }, + "/user/createWithList": { + "post": { + "tags": [ + "user" + ], + "summary": "Creates list of users with given input array", + "description": "", + "operationId": "createUsersWithListInput", + "consumes": [ + "application/json" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "List of user object", + "required": true, + "schema": { + "type": "array", + "items": { + "$ref": "#/definitions/User" + } + } + } + ], + "responses": { + "default": { + "description": "successful operation" + } + } + } + }, + "/user/{username}": { + "get": { + "tags": [ + "user" + ], + "summary": "Get user by user name", + "description": "", + "operationId": "getUserByName", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "username", + "in": "path", + "description": "The name that needs to be fetched. Use user1 for testing. ", + "required": true, + "type": "string" + } + ], + "responses": { + "200": { + "description": "successful operation", + "schema": { + "$ref": "#/definitions/User" + } + }, + "400": { + "description": "Invalid username supplied" + }, + "404": { + "description": "User not found" + } + } + }, + "put": { + "tags": [ + "user" + ], + "summary": "Updated user", + "description": "This can only be done by the logged in user.", + "operationId": "updateUser", + "consumes": [ + "application/json" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "username", + "in": "path", + "description": "name that need to be updated", + "required": true, + "type": "string" + }, + { + "in": "body", + "name": "body", + "description": "Updated user object", + "required": true, + "schema": { + "$ref": "#/definitions/User" + } + } + ], + "responses": { + "400": { + "description": "Invalid user supplied" + }, + "404": { + "description": "User not found" + } + } + }, + "delete": { + "tags": [ + "user" + ], + "summary": "Delete user", + "description": "This can only be done by the logged in user.", + "operationId": "deleteUser", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "username", + "in": "path", + "description": "The name that needs to be deleted", + "required": true, + "type": "string" + } + ], + "responses": { + "400": { + "description": "Invalid username supplied" + }, + "404": { + "description": "User not found" + } + } + } + }, + "/user/login": { + "get": { + "tags": [ + "user" + ], + "summary": "Logs user into the system", + "description": "", + "operationId": "loginUser", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "name": "username", + "in": "query", + "description": "The user name for login", + "required": true, + "type": "string" + }, + { + "name": "password", + "in": "query", + "description": "The password for login in clear text", + "required": true, + "type": "string" + } + ], + "responses": { + "200": { + "description": "successful operation", + "headers": { + "X-Expires-After": { + "type": "string", + "format": "date-time", + "description": "date in UTC when token expires" + }, + "X-Rate-Limit": { + "type": "integer", + "format": "int32", + "description": "calls per hour allowed by the user" + } + }, + "schema": { + "type": "string" + } + }, + "400": { + "description": "Invalid username/password supplied" + } + } + } + }, + "/user/logout": { + "get": { + "tags": [ + "user" + ], + "summary": "Logs out current logged in user session", + "description": "", + "operationId": "logoutUser", + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [], + "responses": { + "default": { + "description": "successful operation" + } + } + } + }, + "/user/createWithArray": { + "post": { + "tags": [ + "user" + ], + "summary": "Creates list of users with given input array", + "description": "", + "operationId": "createUsersWithArrayInput", + "consumes": [ + "application/json" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "List of user object", + "required": true, + "schema": { + "type": "array", + "items": { + "$ref": "#/definitions/User" + } + } + } + ], + "responses": { + "default": { + "description": "successful operation" + } + } + } + }, + "/user": { + "post": { + "tags": [ + "user" + ], + "summary": "Create user", + "description": "This can only be done by the logged in user.", + "operationId": "createUser", + "consumes": [ + "application/json" + ], + "produces": [ + "application/json", + "application/xml" + ], + "parameters": [ + { + "in": "body", + "name": "body", + "description": "Created user object", + "required": true, + "schema": { + "$ref": "#/definitions/User" + } + } + ], + "responses": { + "default": { + "description": "successful operation" + } + } + } + } + }, + "securityDefinitions": { + "api_key": { + "type": "apiKey", + "name": "api_key", + "in": "header" + }, + "petstore_auth": { + "type": "oauth2", + "authorizationUrl": "https://petstore.swagger.io/oauth/authorize", + "flow": "implicit", + "scopes": { + "read:pets": "read your pets", + "write:pets": "modify pets in your account" + } + } + }, + "definitions": { + "ApiResponse": { + "type": "object", + "properties": { + "code": { + "type": "integer", + "format": "int32" + }, + "type": { + "type": "string" + }, + "message": { + "type": "string" + } + } + }, + "Category": { + "type": "object", + "properties": { + "id": { + "type": "integer", + "format": "int64" + }, + "name": { + "type": "string" + } + }, + "xml": { + "name": "Category" + } + }, + "Pet": { + "type": "object", + "required": [ + "name", + "photoUrls" + ], + "properties": { + "id": { + "type": "integer", + "format": "int64" + }, + "category": { + "$ref": "#/definitions/Category" + }, + "name": { + "type": "string", + "example": "doggie" + }, + "photoUrls": { + "type": "array", + "xml": { + "wrapped": true + }, + "items": { + "type": "string", + "xml": { + "name": "photoUrl" + } + } + }, + "tags": { + "type": "array", + "xml": { + "wrapped": true + }, + "items": { + "xml": { + "name": "tag" + }, + "$ref": "#/definitions/Tag" + } + }, + "status": { + "type": "string", + "description": "pet status in the store", + "enum": [ + "available", + "pending", + "sold" + ] + } + }, + "xml": { + "name": "Pet" + } + }, + "Tag": { + "type": "object", + "properties": { + "id": { + "type": "integer", + "format": "int64" + }, + "name": { + "type": "string" + } + }, + "xml": { + "name": "Tag" + } + }, + "Order": { + "type": "object", + "properties": { + "id": { + "type": "integer", + "format": "int64" + }, + "petId": { + "type": "integer", + "format": "int64" + }, + "quantity": { + "type": "integer", + "format": "int32" + }, + "shipDate": { + "type": "string", + "format": "date-time" + }, + "status": { + "type": "string", + "description": "Order Status", + "enum": [ + "placed", + "approved", + "delivered" + ] + }, + "complete": { + "type": "boolean" + } + }, + "xml": { + "name": "Order" + } + }, + "User": { + "type": "object", + "properties": { + "id": { + "type": "integer", + "format": "int64" + }, + "username": { + "type": "string" + }, + "firstName": { + "type": "string" + }, + "lastName": { + "type": "string" + }, + "email": { + "type": "string" + }, + "password": { + "type": "string" + }, + "phone": { + "type": "string" + }, + "userStatus": { + "type": "integer", + "format": "int32", + "description": "User Status" + } + }, + "xml": { + "name": "User" + } + } + }, + "externalDocs": { + "description": "Find out more about Swagger", + "url": "http://swagger.io" + } +} \ No newline at end of file diff --git a/src/pages/assets/platform-hero.png b/src/pages/assets/platform-hero.png new file mode 100644 index 0000000..3b879f0 Binary files /dev/null and b/src/pages/assets/platform-hero.png differ diff --git a/src/pages/assets/sidenav.png b/src/pages/assets/sidenav.png new file mode 100644 index 0000000..27e9502 Binary files /dev/null and b/src/pages/assets/sidenav.png differ diff --git a/src/pages/assets/topnav.png b/src/pages/assets/topnav.png new file mode 100644 index 0000000..cffc1b8 Binary files /dev/null and b/src/pages/assets/topnav.png differ diff --git a/src/pages/blocks/accordion/accordion-basic.md b/src/pages/blocks/accordion/accordion-basic.md new file mode 100644 index 0000000..81a06c2 --- /dev/null +++ b/src/pages/blocks/accordion/accordion-basic.md @@ -0,0 +1,42 @@ +--- +title: Basic Accordion Block +description: Simple accordion example with collapsible text sections. +--- + +# Basic Accordion Example + +This example shows a simple accordion with just heading and text content, perfect for FAQs or simple collapsible sections. + + + +### What is this accordion component? + +This is a collapsible content section that can expand and collapse when users click on the heading. It's useful for organizing large amounts of information in a compact, user-friendly way. + + + +### How does it work? + +The accordion component allows you to hide and show content dynamically. When a user clicks on a heading, the corresponding content panel toggles between visible and hidden states. + + + +### Can I use multiple accordions? + +Yes, you can include as many accordion items as needed on a single page. Each item operates independently, allowing users to expand or collapse sections based on their interests. + + + +### What are the benefits? + +Accordions help reduce page clutter by condensing information into expandable sections. This improves readability and helps users focus on the content that matters most to them. + +## Usage + +Use `slots` to identify the markdown content: + +- `heading` (required) - The title of the accordion item +- `text` (required) - The body content + +Each `` component creates a collapsible section that users can expand or collapse by clicking on the heading. + diff --git a/src/pages/blocks/accordion/accordion-with-table-and-code.md b/src/pages/blocks/accordion/accordion-with-table-and-code.md new file mode 100644 index 0000000..d23e91b --- /dev/null +++ b/src/pages/blocks/accordion/accordion-with-table-and-code.md @@ -0,0 +1,124 @@ +--- +title: Accordion Block with Table and Code +description: Complex accordion example with tables and code blocks for detailed technical documentation. +--- + +# Accordion with Table and Code Example + +This example demonstrates a complex accordion with multiple content types including tables, text descriptions, and code blocks. This is ideal for displaying structured data or step-by-step processes. + +Each step shown in the following accordion is described in detail below. Each description includes sample data that demonstrates the different content types available. + +## Accordion Heading + + + +### 1. Initial Setup + +| Step | Description | Duration | Status | Endpoint | +| --- | --- | --- | --- | --- | +| 1 | User initiates the process and the system begins loading resources | 0s | Starting | `/api/initialize` | + +This action represents the beginning of a workflow. The system state transitions from idle to active. A unique identifier is generated and returned to the client for tracking purposes. This identifier will be used in subsequent steps. + +```json +{ + "eventType": "process.start", + "timestamp": "2024-01-15T10:00:00.000Z", + "data": { + "sessionId": "abc123", + "config": { + "name": "Sample Process", + "timeout": 60, + "mode": "standard", + "version": "1.0.0" + } + } +} +``` + + + +### 2. Loading Phase + +| Step | Description | Duration | Status | Endpoint | +| --- | --- | --- | --- | --- | +| 2 | System enters loading state while gathering resources | 1s | Loading | `/api/loading` | + +The process enters a waiting state while necessary resources are retrieved. Progress indicators may be displayed to the user during this phase. + +```json +{ + "eventType": "state.loading", + "timestamp": "2024-01-15T10:00:01.000Z", + "data": { + "sessionId": "abc123", + "progress": 0 + } +} +``` + + + +### 3. Status Check + +| Step | Description | Duration | Status | Endpoint | +| --- | --- | --- | --- | --- | +| 3 | Periodic status update is transmitted | 10s | Active | `/api/heartbeat` | + +A routine status signal is sent to maintain the connection and confirm system health. + + + + +### 4. User Pause + +| Step | Description | Duration | Status | Endpoint | +| --- | --- | --- | --- | --- | +| 4 | User initiates a pause action | 15s | Paused | `/api/pause` | + +The user triggers a pause action, temporarily halting the current process. + +```json +{ + "eventType": "action.pause", + "timestamp": "2024-01-15T10:00:15.000Z", + "data": { + "sessionId": "abc123", + "counter": 12 + } +} +``` + + + +### 5. End Session + +| Step | Description | Duration | Status | Endpoint | +| --- | --- | --- | --- | --- | +| 5 | User terminates the session before completion | 29s | Ended | `/api/end` | + +The user exits the application. A termination signal is sent to close the session immediately. + +```json +{ + "eventType": "process.end", + "timestamp": "2024-01-15T10:00:29Z", + "data": { + "sessionId": "abc123", + "counter": 17 + } +} +``` + +## Usage + +Use `slots` to identify the markdown content for each ``: + +- `heading` (required) - The title of the accordion item +- `table` (optional) - Tabular data +- `text` (optional) - Body text with descriptions +- `code` (optional) - Code blocks with examples + +You can mix and match slots based on your content needs. Each accordion item can have different slot combinations. + diff --git a/src/pages/blocks/accordion/index.md b/src/pages/blocks/accordion/index.md index 607de12..7c621dc 100644 --- a/src/pages/blocks/accordion/index.md +++ b/src/pages/blocks/accordion/index.md @@ -1,199 +1,24 @@ --- -title: Accordion Block Example +title: Accordion Block description: Learn how to use the Accordion block to create collapsible content sections for organizing information in your documentation. --- -# Accordion Block Example +# Accordion Block -Each timeline action shown in the previous table is described in detail below. Each description includes the payload that is sent as part of a Media Edge API request. +The Accordion Block allows you to create collapsible content sections, making it easier to organize and present large amounts of information without overwhelming users. Accordion items can be expanded or collapsed individually, providing a clean and organized way to display content. -## Accordion Heading +## Available Slots - +Each `` can use the following slots: -### 1. Start play Test +- `heading` (required) - The title/header of the accordion item +- `text` (optional) - Body text content +- `table` (optional) - Table data +- `code` (optional) - Code blocks -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 1 | The auto-play function occurs, or play button is pressed, and the video starts loading | 0 | 0 | `/sessionStart?configId=` | +## Variants -This call signals the intention of the user to play a video. The player state is not yet `playing`, but is instead `starting`. This call returns a Session ID which is referenced in the following examples with `{SID}`. The `{SID}`, is returned to the client and is used to identify all subsequent tracking calls within the session. This call also generates a reporting event that is pushed to AEP and/or Analytics, depending on datastream configuration. Mandatory parameters must be included. - -```json -{ - "eventType": "media.sessionStart", - "timestamp": "YYYY-MM-DDT02:00:00.000Z", - "mediaCollection": { - "playhead": 0, - "sessionDetails": { - "name": "VA API Sample Player", - "friendlyName": "ClickMe", - "length": 60, - "contentType": "VOD", - "playerName": "sample-html5-api-player", - "channel": "sample-channel", - "appVersion": "va-api-0.0.0" - } - } -} -``` - - - -### 2. Ping event timer - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 2 | The ping event timer starts | 0 | 0 | `/ping?configId=` | - -The application starts the [ping timer](https://experienceleague.adobe.com/docs/media-analytics/using/implementation/analytics-only/streaming-media-apis/mc-api-impl/mc-api-sed-pings.html). A call is not sent for this event, but the first ping call should be fired 10 seconds later. - - - - -### 3. Track buffer start - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 3 | Tracks the buffer start | 1 | 1 | `/bufferStart?configId=` | - -Player enters the `buffering` state. Because content is not being played the playhead is not advancing. - -```json -{ - "eventType": "media.bufferStart", - "timestamp": "YYYY-MM-DDT02:00:01.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 0 - } -} -``` - - - -### 4. Track buffer end - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 4 | Tracks the end of the buffer and a play event is sent | 4 | 1 | `/play?configId=` | - -Player buffering ends after 3 seconds so a `play` call is sent to put the player into the `playing` state. Sending a `play` call after the `bufferStart` call has been sent automatically ends the `buffering` state. - -```json -{ - "eventType": "media.play", - "timestamp": "YYYY-MM-DDT02:00:04.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 1 - } -} -``` - - - -### 5. Ping - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 5 | Sends a ping | 10 | 7 | `/ping?configId=` | - -A ping call is sent to the backend every 10 seconds. - -```json -{ - "eventType": "media.ping", - "timestamp": "YYYY-MM-DDT02:00:10.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 7 - } -} -``` - - - -### 6. User pauses - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 6 | User presses `pause` | 15 | 12 | `/pauseStart?configId=` | - -The user pauses the video. This moves the play state to `paused`. - -```json -{ - "eventType": "media.pauseStart", - "timestamp": "YYYY-MM-DDT02:00:15.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 12 - } -} -``` - - - - -### 7. Ping - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 7 | Sends a ping | 20 | 12 | `/ping?configId=` | - -A ping call is sent to the backend every 10 seconds. The player remains in a `paused` state. - -```json -{ - "eventType": "media.ping", - "timestamp": "YYYY-MM-DDT02:00:20.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 12 - } -} -``` - - - -### 8. User presses play - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 8 | User presses `play` to resume the main content | 24 | 12 | `/play?configId=` | - -The user presses `play`. This moves the play state to `playing`. There is no need for a separate `resume` event. - -```json -{ - "eventType": "media.play", - "timestamp": "YYYY-MM-DDT02:00:24.000Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 12 - } -} -``` - - - -### 9. User closes player - -| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request | -| --- | --- | --- | --- | --- | -| 9 | User closes the app without watching the content to the end | 29 | 17 | `/sessionEnd?configId=` | - -The user closes the app. `sessionEnd` is sent to the Media Edge API to signal that the session should be closed immediately, with no further processing. - -```json -{ - "eventType": "media.sessionEnd", - "timestamp": "YYYY-MM-DDT02:00:29Z", - "mediaCollection": { - "sessionID": "{SID}", - "playhead": 17 - } -} -``` +There are 2 different variants based on complexity: +- The [basic accordion](accordion-basic.md) variant for simple collapsible text sections, ideal for FAQs or simple content. +- The [accordion with table and code](accordion-with-table-and-code.md) variant for complex content including tables and code blocks, ideal for API documentation or detailed technical content. diff --git a/src/pages/blocks/announcement/announcement-button-only.md b/src/pages/blocks/announcement/announcement-button-only.md new file mode 100644 index 0000000..5c7a018 --- /dev/null +++ b/src/pages/blocks/announcement/announcement-button-only.md @@ -0,0 +1,27 @@ +--- +title: Button-Only Announcement +description: Simple centered call-to-action button without heading or text. +--- + +# Button-Only Announcement Example + +This example shows a minimal announcement with just a centered button, perfect for simple call-to-action prompts. + + + +- [Click Here](https://example.com) + + + +- [Click Here](https://example.com) + +## Usage + +Use `slots` to identify the markdown content: + +- `button` (required) - Call-to-action link + +Available attributes: + +- `variant` - Set to `primary` or `secondary` (default: `primary`) + diff --git a/src/pages/blocks/announcement/announcement-with-heading.md b/src/pages/blocks/announcement/announcement-with-heading.md new file mode 100644 index 0000000..204335e --- /dev/null +++ b/src/pages/blocks/announcement/announcement-with-heading.md @@ -0,0 +1,52 @@ +--- +title: Announcement Block with Heading +description: Full announcement with title, description, and action button. +--- + +# Announcement with Heading Examples + +This example shows full-featured announcements with heading, descriptive text, and an action button. You can customize the variant and background color. + +## Secondary Variant (Subtle) + + + +### Lorem Ipsum Dolor Sit + +Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. + +- [Read more details](https://example.com) + +## Primary Variant (Prominent) + + + +### Amet Consectetur Adipiscing + +Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + +- [View full content](https://example.com) + +## White Background + + + +### Eiusmod Tempor Incididunt + +Ut labore et dolore magna aliqua enim ad minim veniam quis nostrud. + +- [Learn more here](https://example.com) + +## Usage + +Use `slots` to identify the markdown content: + +- `heading` (optional) - The title of the announcement +- `text` (optional) - The descriptive content +- `button` (optional) - Call-to-action link + +Available attributes: + +- `variant` - Set to `primary` or `secondary` (default: `primary`) +- `backgroundColor` - Set to `background-color-gray` or `background-color-white` (default: `background-color-gray`) + diff --git a/src/pages/blocks/announcement/index.md b/src/pages/blocks/announcement/index.md index 70fbd5c..1e16102 100644 --- a/src/pages/blocks/announcement/index.md +++ b/src/pages/blocks/announcement/index.md @@ -3,12 +3,29 @@ title: Announcement Block description: Display important announcements and notices to your users with the Announcement block. --- -# Announcement block +# Announcement Block - + -### Are you an existing developer? +Note: The Announcement block replaces the Teaser block that was previously used in Gatsby. -Action required: Add trader details to continue EU distribution. +The Announcement Block allows you to display important notices, updates, or calls-to-action to your users. It can be customized with different variants, background colors, and positioning options. -- [Add trader details now.](https://new.express.adobe.com/add-ons?mode=submission) +## Available Slots + +- `heading` (optional) - The title of the announcement +- `text` (optional) - The descriptive content +- `button` (optional) - Call-to-action link + +## Available Options + +- **Variants:** `primary` (bold, prominent) or `secondary` (subtle) +- **Background Colors:** `background-color-gray`, `background-color-white` +- **Position:** `center` (for button-only announcements) + +## Variants + +There are 2 main usage patterns: + +- The [announcement with heading](announcement-with-heading.md) variant for full announcements with title, description, and action button. +- The [button-only announcement](announcement-button-only.md) variant for simple, centered call-to-action buttons. diff --git a/src/pages/blocks/code/code-highlighted-line.md b/src/pages/blocks/code/code-highlighted-line.md new file mode 100644 index 0000000..cb56806 --- /dev/null +++ b/src/pages/blocks/code/code-highlighted-line.md @@ -0,0 +1,16 @@ +--- +title: Code with Highlighted Lines +description: Examples of code blocks with specific lines highlighted using data-line and data-line-offset attributes. +--- + +```console data-line="1-2, 5, 9-20" data-line-offset="3" +curl -i -X POST 'https://graffias.adobe.io/graffias/graphql' + -H 'Accept-Encoding: gzip, deflate, br' + -H 'Content-Type: application/json' + -H 'Accept: application/json' + -H 'Connection: keep-alive' + -H 'x-gw-ims-org-id: [OrgId]@AdobeOrg' + -H 'x-gw-ims-user-id: [UserId]@techacct.adobe.com' -H 'x-api-key: [clientId]' + -H 'Authorization: Bearer [access token]' + -d @introspection.json --compressed +``` \ No newline at end of file diff --git a/src/pages/blocks/code/code-in-list.md b/src/pages/blocks/code/code-in-list.md new file mode 100644 index 0000000..f2f14eb --- /dev/null +++ b/src/pages/blocks/code/code-in-list.md @@ -0,0 +1,33 @@ +--- +title: Code in Lists +description: Examples of code blocks embedded within list items and ordered/unordered lists. +--- + +// copied from https://github.com/AdobeDocs/app-builder/blob/main/src/pages/getting_started/first_app.md?plain=1 +// page https://developer.adobe.com/app-builder/docs/getting_started/first_app/ + +## 3. Sign in from CLI + +Once your project is set up in [Adobe Developer Console](/console), let's move onto your local environment. You can always go back to [Adobe Developer Console](/console) to modify your project later. + +1. On your machine, navigate to the Terminal and enter + + ```bash + aio login + ``` + +1. A browser window should open, asking you to sign in with your Adobe ID. If the window did not automatically open, you can also copy paste the URL printed in your browser to log in. + + ```bash + $ aio login + Visit this url to log in: + https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx + ``` + +1. Once you've logged in, you can close the browser window and go back to Terminal. You will see a string printed in the terminal. This is your user token. It is automatically stored in [CLI](https://github.com/adobe/aio-cli) config, allowing the [CLI](https://github.com/adobe/aio-cli) to use the token to talk to [Adobe Developer Console](/console). + + ```bash + eyJ4NXUiOixxxxxxxxxxxxxxxxxxx + ``` + +1. Now you can start building App Builder Applications with the [CLI](https://github.com/adobe/aio-cli)! diff --git a/src/pages/blocks/code/code-in-table.md b/src/pages/blocks/code/code-in-table.md new file mode 100644 index 0000000..48f7255 --- /dev/null +++ b/src/pages/blocks/code/code-in-table.md @@ -0,0 +1,18 @@ +--- +title: Code in Tables +description: Examples of inline code and code formatting within table cells. +--- + +// copied from https://github.com/AdobeDocs/adobe-io-events/blob/main/src/pages/guides/sdk/sdk_signature_verification.md?plain=1#L43 +// page https://developer.adobe.com/events/docs/guides/sdk/sdk_signature_verification/ + +#### SignatureOptions : `object` + +**Properties** + +| Name | Type | Description | +| --- | --- | --- | +| [digiSignature1] | `string` | Value of digital signature retrieved from the x-adobe-digital-signature1 header | +| [digiSignature2] | `string` | Value of digital signature retrieved from the x-adobe-digital-signature2 header | +| [publicKeyPath1] | `string` | Relative path of ioevents public key retrieved from the x-adobe-public-key1-path header | +| [publicKeyPath2] | `string` | Relative path of ioevents public key retrieved from the x-adobe-public-key2-path header | diff --git a/src/pages/blocks/code/code-overload.md b/src/pages/blocks/code/code-overload.md new file mode 100644 index 0000000..b4598de --- /dev/null +++ b/src/pages/blocks/code/code-overload.md @@ -0,0 +1,177 @@ +--- +title: Code Overload Example +description: Complex code examples demonstrating multiple features like line highlighting, offsets, and disabling line numbers. +--- + +// copied from https://github.com/AdobeDocs/adobe-assurance-public-apis/blob/3ab99cac59f3c9026f76e23a24a9db13a330d02c/src/pages/api/index.md?plain=1#L24 +// page https://developer.adobe.com/adobe-assurance-public-apis/api/ + +```console-disableLineNumbers-data-line="2-4,6,"-data-line-offset="2" +curl -i -X POST 'https://graffias.adobe.io/graffias/graphql' + -H 'Accept-Encoding: gzip, deflate, br' + -H 'Content-Type: application/json' + -H 'Accept: application/json' + -H 'Connection: keep-alive' + -H 'x-gw-ims-org-id: [OrgId]@AdobeOrg' + -H 'x-gw-ims-user-id: [UserId]@techacct.adobe.com' -H 'x-api-key: [clientId]' + -H 'Authorization: Bearer [access token]' + -d @introspection.json --compressed +``` + +// copied from https://github.com/AdobeDocs/app-builder/blob/main/src/pages/getting_started/first_app.md?plain=1#L584-L586 +// page https://developer.adobe.com/app-builder/docs/getting_started/first_app/#common-issues + +1. Validation error. If you see the following error, it is because you did not pass in an authorization header to an action expecting one. + + ```bash-data-line="2"-data-line-offset="1" + {"error": "cannot validate token, reason: missing authorization header"} + {"error": "validate token"} + ``` + +// copied from https://github.com/AdobeDocs/app-builder/blob/main/src/pages/getting_started/first_app.md?plain=1#L400-402 +// page https://developer.adobe.com/app-builder/docs/getting_started/first_app/#6developing-the-application + +If you need to test functionality that is not supported by `aio app dev`, you can deploy the actions to Adobe I/O Runtime while running the UI part on your local machine. + +```bash-disableLineNumbers +aio app run --local +``` + +# Adobe I/O Runtime API Reference + +## API endpoints + +Adobe I/O Runtime supports the following API endpoints for interacting programmatically with the service. + +**Notes:** + +1. Unless otherwise noted, all parameters are required. +2. For all the API calls on this page, the base URL is: + `https://api.adobe.io/` + +### GET /runtime/admin/namespaces/{orgId}/{intId} + +Returns the details of the namespace associated with the specified organization and integration. + +#### _Parameters:_ + +| Name | Description | +| ------------------------------------ | ----------------------------------------------- | +| `orgId` (`string`: _path_) | Organization ID | +| `intId` (`string`: _path_) | Integration ID | +| `Authorization` (`string`: _header_) | Authorization token in format: `Bearer {token}` | +| `X-Api-Key` (`string`: _header_) | Api key | + +#### _Responses:_ + + + +### Request + +```graphql-disableLineNumbers-data-line="2,10"-data-line-offset="2" +mutation { + createCustomerV2( + input: { + firstname: "Bob" + lastname: "Loblaw" + email: "bobloblaw@example.com" + password: "b0bl0bl@w" + is_subscribed: true + } + ) { + customer { + firstname + lastname + email + is_subscribed + } + } +} +``` + +### Response + +```json-data-line="7"-data-line-offset="1" +{ + "data": { + "createCustomer": { + "customer": { + "firstname": "Bob", + "lastname": "Loblaw", + "email": "bobloblaw@example.com", + "is_subscribed": true + } + } + } +} +``` + + + +#### iframe + +```html-data-line="3-10,14"-data-line-offset="2"-disableLineNumbers + + + + + + + + Grids add-on + + + + + + Create shape + + + +``` + +#### iframe + +```js-data-line="1-6,10,12"-data-line-offset="2"-disableLineNumbers +// Spectrum imports +import "@spectrum-web-components/styles/typography.css"; +import "@spectrum-web-components/theme/src/themes.js"; +import "@spectrum-web-components/theme/theme-light.js"; +import "@spectrum-web-components/theme/express/theme-light.js"; +import "@spectrum-web-components/theme/express/scale-medium.js"; +import "@spectrum-web-components/theme/sp-theme.js"; +import "@spectrum-web-components/button/sp-button.js"; + +import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js"; + +addOnUISdk.ready.then(async () => { + console.log("addOnUISdk is ready for use."); + const createShapeButton = document.getElementById("createShape"); + + // Get the UI runtime. + const { runtime } = addOnUISdk.instance; + const sandboxProxy = await runtime.apiProxy("documentSandbox"); + sandboxProxy.log("Document Sandbox up and running."); + + // Enabling CTA elements only when the addOnUISdk is ready + createShapeButton.disabled = false; +}); +``` + +#### Document API + +```js-disableLineNumbers +import addOnSandboxSdk from "add-on-sdk-document-sandbox"; +const { runtime } = addOnSandboxSdk.instance; + +function start() { + runtime.exposeApi({ + log: (...args) => { + console.log(...args); + }, + // other properties will go here... + }); +} + +start(); +``` diff --git a/src/pages/blocks/code/code.md b/src/pages/blocks/code/code.md new file mode 100644 index 0000000..f54a04a --- /dev/null +++ b/src/pages/blocks/code/code.md @@ -0,0 +1,65 @@ +--- +title: Code Examples +description: Examples of code blocks with various features including line highlighting, line offset, and inline code. +--- + +// copied from https://github.com/AdobeDocs/adobe-assurance-public-apis/blob/3ab99cac59f3c9026f76e23a24a9db13a330d02c/src/pages/api/index.md?plain=1#L24 +// page https://developer.adobe.com/adobe-assurance-public-apis/api/ + +```console data-line="1-2,6," data-line-offset="2" +curl -i -X POST 'https://graffias.adobe.io/graffias/graphql' + -H 'Accept-Encoding: gzip, deflate, br' + -H 'Content-Type: application/json' + -H 'Accept: application/json' + -H 'Connection: keep-alive' + -H 'x-gw-ims-org-id: [OrgId]@AdobeOrg' + -H 'x-gw-ims-user-id: [UserId]@techacct.adobe.com' -H 'x-api-key: [clientId]' + -H 'Authorization: Bearer [access token]' + -d @introspection.json --compressed +``` + +// copied from https://github.com/AdobeDocs/app-builder/blob/main/src/pages/getting_started/first_app.md?plain=1#L584-L586 +// page https://developer.adobe.com/app-builder/docs/getting_started/first_app/#common-issues + +1. Validation error. If you see the following error, it is because you did not pass in an authorization header to an action expecting one. + + ```bash data-line="2" data-line-offset="1" + {"error": "cannot validate token, reason: missing authorization header"} + {"error": "validate token"} + ``` + +// copied from https://github.com/AdobeDocs/app-builder/blob/main/src/pages/getting_started/first_app.md?plain=1#L400-402 +// page https://developer.adobe.com/app-builder/docs/getting_started/first_app/#6developing-the-application + +If you need to test functionality that is not supported by `aio app dev`, you can deploy the actions to Adobe I/O Runtime while running the UI part on your local machine. + +```bash disableLineNumbers +aio app run --local +``` + +# Adobe I/O Runtime API Reference + +## API endpoints + +Adobe I/O Runtime supports the following API endpoints for interacting programmatically with the service. + +**Notes:** + +1. Unless otherwise noted, all parameters are required. +2. For all the API calls on this page, the base URL is: + `https://api.adobe.io/` + +### GET /runtime/admin/namespaces/{orgId}/{intId} + +Returns the details of the namespace associated with the specified organization and integration. + +#### _Parameters:_ + +| Name | Description | +| ------------------------------------ | ----------------------------------------------- | +| `orgId` (`string`: _path_) | Organization ID | +| `intId` (`string`: _path_) | Integration ID | +| `Authorization` (`string`: _header_) | Authorization token in format: `Bearer {token}` | +| `X-Api-Key` (`string`: _header_) | Api key | + +#### _Responses:_ diff --git a/src/pages/blocks/edition/edition-with-link.md b/src/pages/blocks/edition/edition-with-link.md new file mode 100644 index 0000000..cc83408 --- /dev/null +++ b/src/pages/blocks/edition/edition-with-link.md @@ -0,0 +1,19 @@ +--- +title: Edition Block with Link +description: Display edition-specific content with a clickable link. +--- + +# Edition with Link Example + + + +[Platform](https://www.adobe.io) + + + +Use `slot` to identify the markdown content: + +- `text` (required) - The edition text content with a link + +When you include a link in the text slot, the Edition block will render it as a clickable element, allowing users to navigate to the specified URL. + diff --git a/src/pages/blocks/edition/edition-with-no-link.md b/src/pages/blocks/edition/edition-with-no-link.md new file mode 100644 index 0000000..2cff82e --- /dev/null +++ b/src/pages/blocks/edition/edition-with-no-link.md @@ -0,0 +1,18 @@ +--- +title: Edition Block without Link +description: Display edition-specific content as plain text. +--- + +# Edition without Link Example + + + +PaaS Only + + +Use `slot` to identify the markdown content: + +- `text` (required) - The edition text content + +When you provide plain text without a link, the Edition block will render it as a static label, useful for displaying edition or platform information. + diff --git a/src/pages/blocks/edition/index.md b/src/pages/blocks/edition/index.md index 2635144..001739d 100644 --- a/src/pages/blocks/edition/index.md +++ b/src/pages/blocks/edition/index.md @@ -3,8 +3,18 @@ title: Edition Block description: Display edition-specific content using the Edition block component. --- -# Edition Example +# Edition Block - +The Edition Block allows you to display edition-specific content or labels on your pages. This is useful when you need to indicate which platform or edition a particular feature or content belongs to. + +## Available Slots + +- `text` (required) - The edition text content, can be plain text or a link + +## Variants + +There are 2 different variants: + +- The [with link](edition-with-link.md) variant displays the edition as a clickable link. +- The [without link](edition-with-no-link.md) variant displays the edition as plain text. -PaaS Only diff --git a/src/pages/blocks/index.md b/src/pages/blocks/index.md index f33cb67..363c5ca 100644 --- a/src/pages/blocks/index.md +++ b/src/pages/blocks/index.md @@ -100,3 +100,13 @@ Interactive API documentation using Redocly. - [API Block without Sidebar and Search](blocks/redoclyapiblock/redocly-api-block-no-sidebar-no-search.md) - [API Block without Y-Scroll Offset](blocks/redoclyapiblock/redocly-api-block-no-y-scroll-offset.md) - [Redocly Overflow Example](blocks/redoclyapiblock/redocly-overflow.md) + + + + +![Hero image](../assets/hero.png) + +This is a banner + +* [Get the SDKs](https://developer.adobe.com/console/servicesandapis/ae) + diff --git a/src/pages/blocks/inline-code/index.md b/src/pages/blocks/inline-code/index.md new file mode 100644 index 0000000..b7e6b01 --- /dev/null +++ b/src/pages/blocks/inline-code/index.md @@ -0,0 +1 @@ +Colors in Adobe Express are created as instances of the [`Color`](https://stage--adp-devsite-stage--adobedocs.aem.page/express/add-ons/docs/references/document-sandbox/document-apis/interfaces/color) class: objects with `red`, `green`, `blue`, and `alpha` (optional) values in the range from 0 to 1. The `alpha` value represents the opacity of the color, with 0 being fully transparent and 1 fully opaque. \ No newline at end of file diff --git a/src/pages/blocks/sidenav/index.md b/src/pages/blocks/sidenav/index.md new file mode 100644 index 0000000..ec14e67 --- /dev/null +++ b/src/pages/blocks/sidenav/index.md @@ -0,0 +1,72 @@ +--- +title: Side Navigation +description: Learn how to configure sidebar navigation using subPages in config.md. +--- + +# Side Navigation + +Side Navigation (sidebar) is configured in the `config.md` file using the `subPages` section. It creates a hierarchical navigation menu that appears on the left side of your documentation pages. + +## Configuration Example + +```yaml +- subPages: + - [Overview](blocks/index.md) + - [Accordion](/blocks/accordion/index.md) + - [Accordion Basic](/blocks/accordion/accordion-basic.md) + - [Accordion with Table & Code](/blocks/accordion/accordion-with-table-and-code.md) + - [Announcement](/blocks/announcement/index.md) + - [Announcement Button only](/blocks/announcement/announcement-button-only.md) + - [Announcement With Heading](/blocks/announcement/announcement-with-heading.md) + - [Edition](/blocks/edition/index.md) + - [Edition without Link](/blocks/edition/edition-with-no-link.md) + - [Edition with Link](/blocks/edition/edition-with-link.md) +``` + +## How It Works + +The `subPages` array creates a hierarchical sidebar menu with multiple nesting levels. + +**Hierarchy:** +- No indentation = Top-level section +- 2 spaces indentation = Subsection +- 4 spaces indentation = Nested page + +**Format:** `[Display Text](relative/path.md)` + +- `[Accordion]` - The text displayed in the sidebar +- `(/blocks/accordion/index.md)` - The relative path to the page under `src/pages/` + +Paths can start with or without `/` - both resolve relative to `src/pages/`. + +**Example:** +- `[Accordion](/blocks/accordion/index.md)` displays "Accordion" and links to `src/pages/blocks/accordion/index.md` + +## Visual Result + +The above configuration creates this sidebar structure: + +![sidenav image](../../assets/sidenav.png) + +## Path Resolution + +All paths are relative to `src/pages/` and work with the `pathPrefix` setting: + +| Config Path | Actual File Location | Full URL (with pathPrefix) | +| --- | --- | --- | +| `blocks/index.md` | `src/pages/blocks/index.md` | `/dev-docs-reference/blocks/` | +| `/blocks/accordion/index.md` | `src/pages/blocks/accordion/index.md` | `/dev-docs-reference/blocks/accordion/` | +| `/blocks/accordion/accordion-basic.md` | `src/pages/blocks/accordion/accordion-basic.md` | `/dev-docs-reference/blocks/accordion/accordion-basic` | + +## Best Practices + +- Keep nesting levels to 2-3 maximum for better user experience +- Ensure indentation is consistent (2 spaces per level) +- All paths must point to existing files under `src/pages/` +- Organize sidebar navigation to match your file structure +- Use clear, descriptive labels for each section + +## Related + +For configuring top navigation, see the [TopNav](/blocks/topnav/index.md) documentation. + diff --git a/src/pages/blocks/superhero/index.md b/src/pages/blocks/superhero/index.md index 214692e..1ea0f6d 100644 --- a/src/pages/blocks/superhero/index.md +++ b/src/pages/blocks/superhero/index.md @@ -3,7 +3,7 @@ They are used to set up the tone of the page and optionally add call to actions There are 4 different variants: -- The [default]() variant for Documentation pages. -- The [half width]() variant for Product/Platform authored pages. -- The [centered]() variant for Index home pages. -- The [centered XL]() variant for Index home pages. \ No newline at end of file +- The [default](superhero-default.md) variant for Documentation pages. +- The [half width](superhero-halfwidth.md) variant for Product/Platform authored pages. +- The [centered](superhero-centered.md) variant for Index home pages. +- The [centered XL](superhero-centeredxl.md) variant for Index home pages. \ No newline at end of file diff --git a/src/pages/blocks/superhero/superhero-centeredxl.md b/src/pages/blocks/superhero/superhero-centeredxl.md index d2b701e..12dcfe8 100644 --- a/src/pages/blocks/superhero/superhero-centeredxl.md +++ b/src/pages/blocks/superhero/superhero-centeredxl.md @@ -20,4 +20,5 @@ Use `slots` to identify the markdown content: Use `background` to set a custom background color matching your color scheme. Defaults to `rgb(29, 125, 238)`. -Use `textColor` to customize text color. Available options include white, black, navy, and gray. Defaults to white. \ No newline at end of file +Use `textColor` to customize text color. Available options include white, black, navy, and gray. Defaults to white. + diff --git a/src/pages/blocks/topnav/index.md b/src/pages/blocks/topnav/index.md new file mode 100644 index 0000000..99b6a57 --- /dev/null +++ b/src/pages/blocks/topnav/index.md @@ -0,0 +1,87 @@ +--- +title: Top Navigation +description: Learn how to configure top navigation in config.md for your documentation site. +--- + +# Top Navigation + +Top Navigation is configured in the `config.md` file and controls how pages appear in the main navigation bar of your site. The navigation structure is based on the directory structure under `src/pages/`. + +## Configuration Example + +```yaml +- pathPrefix: + - /dev-docs-reference/ + +- pages: + - [Home](index.md) + - [Documentation](docs/index.md) + - [API Reference](api/index.md) +``` + +## How It Works + +The configuration consists of two main components: + +### pathPrefix + +The `pathPrefix` is the base URL path for your content repository. This prefix is prepended to all page routes. + +```yaml +- pathPrefix: + - /dev-docs-reference/ +``` + +With this configuration, your pages will be accessible at: +- `/dev-docs-reference/` → Home page +- `/dev-docs-reference/docs/` → Documentation page +- `/dev-docs-reference/api/` → API Reference page + +### pages + +The `pages` array defines the top navigation items that appear in the main navigation bar. + +```yaml +- pages: + - [Home](index.md) + - [Documentation](docs/index.md) + - [API Reference](api/index.md) +``` + +**Format:** `[Display Text](relative/path.md)` + +- `[Home]` - The text displayed in the navigation bar +- `(index.md)` - The relative path to the page under `src/pages/` + +## Visual Result + +The above configuration creates a navigation bar at the top of your site with the specified items displayed horizontally. + +In addition to the pages defined in your config, the navigation bar includes: +- **Adobe Developer** (logo/home link) - Links to https://developer.adobe.com/ +- **Products** - Links to https://developer.adobe.com/apis + +These are followed by your custom pages defined in the `pages` array. + +![Top Navigation Example](../../assets/topnav.png) + +## Path Resolution + +All paths are relative to `src/pages/`: + +| Config Path | Actual File Location | +| --- | --- | +| `index.md` | `src/pages/index.md` | +| `docs/index.md` | `src/pages/docs/index.md` | +| `api/index.md` | `src/pages/api/index.md` | + +## Best Practices + +- Keep top navigation items to 3-5 main sections +- Use clear, concise labels for navigation items +- Ensure all paths point to existing files under `src/pages/` +- The pathPrefix should match your repository or deployment path + +## Related + +For configuring sidebar navigation, see the [SideNav](/blocks/sidenav/index.md) documentation. diff --git a/src/pages/config.md b/src/pages/config.md index 0d809b2..f9a236b 100644 --- a/src/pages/config.md +++ b/src/pages/config.md @@ -7,8 +7,12 @@ - subPages: - [Overview](blocks/index.md) - - [Accordion](blocks/accordion/index.md) - - [Announcement](blocks/announcement/index.md) + - [Accordion](/blocks/accordion/index.md) + - [Accordion Basic](/blocks/accordion/accordion-basic.md) + - [Accordion with Table & Code](/blocks/accordion/accordion-with-table-and-code.md) + - [Announcement](/blocks/announcement/index.md) + - [Announcement Button only](/blocks/announcement/announcement-button-only.md) + - [Announcement With Heading](/blocks/announcement/announcement-with-heading.md) - [Code Block](blocks/codeblock/code-block.md) - [Code Block with Picklist](blocks/codeblock/code-block-with-picklist.md) - [Code Block without Picklist](blocks/codeblock/code-block-without-picklist.md) @@ -18,17 +22,24 @@ - [Code Overload](blocks/codeblock/code-overload.md) - [Code](blocks/codeblock/code.md) - [Code-0](blocks/codeblock/code-0.md) - - [Column](blocks/column/index.md) - - [Discover Block](blocks/discoverblock/index.md) - - [Edition](blocks/edition/index.md) - - [Hero Simple](blocks/herosimple/herosimple-default.md) - - [Hero Simple Default](blocks/herosimple/herosimple-default.md) - - [Hero Simple Full Width](blocks/herosimple/herosimple-fullwidth.md) - - [Hero Simple Half Width](blocks/herosimple/herosimple-halfwidth.md) - - [Image](blocks/image/index.md) - - [Inline Alert](blocks/inline-alert/index.md) - - [List](blocks/list/index.md) - - [Redocly API Block](blocks/redoclyapiblock/redocly-api-block-default.md) + - [Code Block](/blocks/codeblock/code-block.md) + - [Code Block (Standard)](/blocks/codeblock/code-block.md) + - [Code Block with Picklist](/blocks/codeblock/code-block-with-picklist.md) + - [Code Block without Picklist](/blocks/codeblock/code-block-without-picklist.md) + - [Column](/blocks/column/index.md) + - [Discover Block](/blocks/discoverblock/index.md) + - [Edition](/blocks/edition/index.md) + - [Edition without Link](/blocks/edition/edition-with-no-link.md) + - [Edition with Link](/blocks/edition/edition-with-link.md) + - [HeroSimple](/blocks/herosimple/herosimple-default.md) + - [HeroSimple (default)](/blocks/herosimple/herosimple-default.md) + - [HeroSimple fullWidth](/blocks/herosimple/herosimple-fullwidth.md) + - [HeroSimple halfWidth](/blocks/herosimple/herosimple-halfwidth.md) + - [Image](/blocks/image/index.md) + - [Inline Alert](/blocks/inline-alert/index.md) + - [Inline Code](/blocks/inline-code/index.md) + - [List](/blocks/list/index.md) + - [Redocly API Block](blocks/redoclyapiblock/redocly-api-block-default.md) - [Redocly API Block Default](blocks/redoclyapiblock/redocly-api-block-default.md) - [Redocly API Block Configs](blocks/redoclyapiblock/redocly-api-block-configs.md) - [Redocly API Block No Layout](blocks/redoclyapiblock/redocly-api-block-no-layout.md) @@ -39,7 +50,8 @@ - [Resources](blocks/resources/resources.md) - [Resources](blocks/resources/resources.md) - [Resources with No Hero](blocks/resources/resources-with-no-hero.md) - - [Superhero](blocks/superhero/superhero-default.md) + - [SideNav](/blocks/sidenav/index.md) + - [Superhero](/blocks/superhero/index.md) - [Superhero Default](blocks/superhero/superhero-default.md) - [Superhero Default with Background Image](blocks/superhero/superhero-default-with-background-image.md) - [Superhero Default with Background Image and Color](blocks/superhero/superhero-default-with-background-image-and-color.md) @@ -49,4 +61,5 @@ - [Superhero Half Width with Background Image](blocks/superhero/superhero-halfwidth-with-background-image.md) - [Superhero Half Width with Background Image and Video](blocks/superhero/superhero-halfwidth-with-background-image-and-video.md) - [Index](blocks/superhero/index.md) - - [Tab](blocks/tab/index.md) + - [Tab](/blocks/tab/index.md) + - [TopNav](/blocks/topnav/index.md)