Custom code & code snippets with GitHub

4min

Integration with GitHub allows you to sync the Custom Code﻿:  customCSS﻿, customJS, footerTemplate, headerTemplate, directly from the GitHub repository. These variables can be raw text or link to a file from the root folder. 
You just need to define the archbee.json file in your repo and add your custom code or custom CSS, like in this example:
archbee.json
summary.md
custom.js
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
﻿
If you push the code to GitHub, Archbee will read the configuration from the archbee.json file and automatically update the Space Settings -> Custom Code section with your new code.
Custom code in Space settings
﻿
Code snippets
You can add code snippets in your GitHub repo, you just need to configure them in the config.md file.
The config.md file must be placed in the same folder as the summary.md file.
Below is an example of a config.md file:
config.md
## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}

## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}
﻿
Example
Assuming that you have the below package.json file (from the above example):
Code snippet example
﻿
And also the config.md file:
config.md
## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}
﻿
You will see the following in the Archbee doc after the import:
JS
      "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": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
      "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": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
﻿
﻿

🤔

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.

﻿

Updated 02 Jul 2024

Did this page help you?

Code Base as Shadow Docs

Zapier