diff --git a/static/js/portico/api.js b/static/js/portico/api.js index c8ac04b99d..49fcf78cc5 100644 --- a/static/js/portico/api.js +++ b/static/js/portico/api.js @@ -1,6 +1,21 @@ -$(function () { - $('a[data-toggle="tab"]').on('shown', function (e) { - $("." + $(e.target).data("class")).show(); - $("." + $(e.relatedTarget).data("class")).hide(); +function registerCodeSection($codeSection) { + const $li = $codeSection.find("ul.nav li"); + const $blocks = $codeSection.find(".blocks div"); + + $li.click(function () { + const language = this.dataset.language; + + $li.removeClass("active"); + $li.filter("[data-language="+language+"]").addClass("active"); + + $blocks.removeClass("active"); + $blocks.filter("[data-language="+language+"]").addClass("active"); }); + + $li.eq(0).click(); +} + + +$(".code-section").each(function () { + registerCodeSection($(this)); }); diff --git a/static/styles/portico.css b/static/styles/portico.css index 948e887f56..b0c2ec8d5a 100644 --- a/static/styles/portico.css +++ b/static/styles/portico.css @@ -76,6 +76,57 @@ body { -moz-osx-font-smoothing: grayscale; } +.app.api-docs .sidebar { + background-color: #fff; + border-right: 1px solid #ddd; + color: #444; +} + +.app.api-docs .sidebar h2 { + color: #444; +} + +.app.api-docs .sidebar li { + opacity: 0.8; +} + +.code-section ul.nav { + margin: 0; +} + +.code-section ul.nav li { + display: inline-block; + padding: 3px 10px; + margin: 0; + + border: 1px solid #ddd; + border-bottom: none; + border-radius: 4px 4px 0px 0px; + + cursor: pointer; +} + +.code-section ul.nav li.active { + color: hsl(176, 46%, 41%); +} + +.code-section .blocks { + padding: 20px; + + background-color: #fafafa; + border: 1px solid #ddd; + + border-radius: 0px 4px 4px 4px; +} + +.code-section .blocks > div { + display: none; +} + +.code-section .blocks > .active { + display: block; +} + .app.help { position: fixed; width: 100vw; diff --git a/templates/zerver/api/api-keys.md b/templates/zerver/api/api-keys.md new file mode 100644 index 0000000000..a849b7dac7 --- /dev/null +++ b/templates/zerver/api/api-keys.md @@ -0,0 +1,44 @@ +# API keys + +You can create bots on your [settings page](/#settings). +Once you have a bot, you can use its email and API key to send messages.
+ +Create a bot: + + +Look for the bot's email and API key: + + +If you prefer to send messages as your own user, you can also find your API key on your [settings page](/#settings). +When using our python bindings, you may either specify the user +and API key for each Client object that you initialize, or let the binding look for +them in your `~/.zuliprc`, the default config file, which you can create as follows: + +``` +[api] +key=BOT_API_KEY +email=BOT_EMAIL_ADDRESS +``` + +Additionally, you can also specify the parameters as environment variables as follows: + +``` +export ZULIP_CONFIG=/path/to/zulipconfig +export ZULIP_EMAIL=BOT_EMAIL_ADDRESS +export ZULIP_API_KEY=BOT_API_KEY +``` + +The parameters specified in environment variables would override the parameters +provided in the config file. For example, if you specify the variable `key` +in the config file and specify `ZULIP_API_KEY` as an environment variable, +the value of `ZULIP_API_KEY` would be considered. + +The following variables can be specified: + +1. `ZULIP_CONFIG` +2. `ZULIP_API_KEY` +3. `ZULIP_EMAIL` +4. `ZULIP_SITE` +5. `ZULIP_CERT` +6. `ZULIP_CERT_KEY` +7. `ZULIP_CERT_BUNDLE` diff --git a/templates/zerver/api/index.md b/templates/zerver/api/index.md new file mode 100644 index 0000000000..3f39eda357 --- /dev/null +++ b/templates/zerver/api/index.md @@ -0,0 +1,12 @@ +# We hear you like APIs... + +We have a [well-documented API](/api/endpoints) that allows you to build +custom integrations, in addition to our [existing integrations](/integrations). +For ease-of-use, we've created a Python module that you can drop in to a +project to start interacting with our API. There is also a +[JavaScript library](https://github.com/zulip/zulip-js) that can be used +either in the browser or in Node.js. + +**Don't want to make it yourself?** Zulip [already integrates with lots of services](/integrations). + +{{ render_markdown_path("zerver/api/sidebar.md") }} diff --git a/templates/zerver/api/installation-instructions.md b/templates/zerver/api/installation-instructions.md new file mode 100644 index 0000000000..2c13f68642 --- /dev/null +++ b/templates/zerver/api/installation-instructions.md @@ -0,0 +1,163 @@ +# Installation instructions + +#### Python Installation +Install it with [pip](https://pypi.python.org/pypi/zulip/): +``` +pip install zulip +``` +#### JavaScript Installation +Install it with [npm](https://www.npmjs.com/package/zulip-js): +``` +npm install zulip-js +``` + +### Usage examples +