# Add the "Maintained by EkLine" credit

import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';

Find your docs framework below, copy the snippet, and paste it into your site. No account or API key required — the credit is a free hosted asset that adapts to your site's theme automatically.

## Preview

The credit comes in two forms. The **web component** inherits your site's font and color, so it blends in with any theme. The **SVG badge** is a fixed-style image for platforms that strip scripts.

<div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 1.5rem;">
  <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
    <div style="background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1.25rem; display: inline-flex; align-items: center;">
      <img src="https://ekline.io/v1/badges/maintained-by-ekline.svg" alt="Maintained by EkLine badge on a light background" height="20" style="display: block;" />
    </div>
    <span style="font-size: 0.8rem; color: var(--sl-color-gray-3);">Light background</span>
  </div>
  <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
    <div style="background: #1f2937; border-radius: 8px; padding: 0.75rem 1.25rem; display: inline-flex; align-items: center;">
      <img src="https://ekline.io/v1/badges/maintained-by-ekline-dark.svg" alt="Maintained by EkLine badge on a dark background" height="20" style="display: block;" />
    </div>
    <span style="font-size: 0.8rem; color: var(--sl-color-gray-3);">Dark background</span>
  </div>
</div>

## Use an AI agent

If you use an AI coding assistant, paste this prompt to add the credit automatically:

```text
Add the "Maintained by EkLine" credit to the footer of the documentation site.

For framework-specific instructions, fetch https://docs.ekline.io/credit/

Use the web component: load https://ekline.io/v1/credit.js as an async
script, then place <ekline-credit></ekline-credit> in the site footer.
Detect which docs framework this project uses and follow its conventions
for adding a global script and footer element.

If the platform strips <script> tags ( like GitHub README, GitBook, ReadMe),
use this markdown badge instead:
[![Maintained by EkLine](https://ekline.io/v1/badges/maintained-by-ekline.svg)](https://ekline.io)

For GitHub READMEs, use a <picture> element to switch between the light
badge (maintained-by-ekline.svg) and the dark badge
(maintained-by-ekline-dark.svg) based on prefers-color-scheme.
```

## Docs frameworks

These frameworks support the EkLine web component, which inherits your site's color and font.

<Tabs syncKey="framework">
  <TabItem label="Docusaurus">
    ```js title="docusaurus.config.js"
    module.exports = {
      scripts: [
        { src: 'https://ekline.io/v1/credit.js', async: true },
      ],
      themeConfig: {
        footer: {
          copyright: '<ekline-credit></ekline-credit>',
        },
      },
    };
    ```
  </TabItem>
  <TabItem label="Starlight (Astro)">
    Register the script in `astro.config.mjs` and add the element to your footer component:

    ```js title="astro.config.mjs"
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';

    export default defineConfig({
      integrations: [
        starlight({
          head: [
            {
              tag: 'script',
              attrs: {
                src: 'https://ekline.io/v1/credit.js',
                async: true,
              },
            },
          ],
          components: {
            Footer: './src/components/CustomFooter.astro',
          },
        }),
      ],
    });
    ```

    In `CustomFooter.astro`, add `<ekline-credit></ekline-credit>`.
  </TabItem>
  <TabItem label="MkDocs">
    ```yaml title="mkdocs.yml"
    extra_javascript:
      - https://ekline.io/v1/credit.js
    ```

    For **MkDocs Material**, create `overrides/partials/footer.html` and add `<ekline-credit></ekline-credit>` inside the footer block.

    For a quick setup, paste the credit at the bottom of any markdown page — MkDocs passes raw HTML through by default.
  </TabItem>
  <TabItem label="Gatsby">
    ```js title="gatsby-ssr.js"
    import * as React from 'react';

    export const onRenderBody = ({ setPostBodyComponents }) => {
      setPostBodyComponents([
        <script key="ekline-credit" src="https://ekline.io/v1/credit.js" async />,
      ]);
    };
    ```

    Add `<ekline-credit></ekline-credit>` inside your `<Footer>` component.
  </TabItem>
  <TabItem label="Fern">
    ```yaml title="docs.yml"
    js:
      - url: https://ekline.io/v1/credit.js
        strategy: async
    ```
  </TabItem>
  <TabItem label="Mintlify">
    Mintlify sanitizes scripts on regular pages. Use the **Snippets** system instead — create `snippets/MaintainedByEkLine.mdx`:

    ```mdx title="snippets/MaintainedByEkLine.mdx"
    <script src="https://ekline.io/v1/credit.js" async></script>
    <ekline-credit></ekline-credit>
    ```

    Reference it on any page with `<MaintainedByEkLine />`. If Snippets aren't available on your plan, use the [badge option](#markdown-only-platforms) instead.
  </TabItem>
  <TabItem label="More">
    **Nextra**

    ```tsx title="theme.config.tsx"
    export default {
      head: <script src="https://ekline.io/v1/credit.js" async />,
      footer: { content: <ekline-credit /> },
    };
    ```

    ---

    **VuePress**

    ```js title=".vuepress/config.js"
    module.exports = {
      head: [
        ['script', { src: 'https://ekline.io/v1/credit.js', async: true }],
      ],
    };
    ```

    Add `<ekline-credit></ekline-credit>` in your footer component.

    ---

    **Plain HTML**

    ```html
    <footer>
      <script src="https://ekline.io/v1/credit.js" async></script>
      <ekline-credit></ekline-credit>
    </footer>
    ```
  </TabItem>
</Tabs>

## Markdown-only platforms

Platforms that strip `<script>` tags can use the hosted SVG badge instead. The badge links to [ekline.io](https://ekline.io) and renders at 160 &times; 20 pixels:

<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0.5rem 0 1rem;">
  <div style="background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.5rem 1rem; display: inline-flex; align-items: center;">
    <img src="https://ekline.io/v1/badges/maintained-by-ekline.svg" alt="Maintained by EkLine badge (light)" height="20" style="display: block;" />
  </div>
  <div style="background: #1f2937; border-radius: 6px; padding: 0.5rem 1rem; display: inline-flex; align-items: center;">
    <img src="https://ekline.io/v1/badges/maintained-by-ekline-dark.svg" alt="Maintained by EkLine badge (dark)" height="20" style="display: block;" />
  </div>
</div>

<Tabs syncKey="badge-platform">
  <TabItem label="GitHub README">
    This snippet switches between light and dark badges based on the reader's theme:

    ```html
    <p align="center">
      <a href="https://ekline.io">
        <picture>
          <source media="(prefers-color-scheme: dark)" srcset="https://ekline.io/v1/badges/maintained-by-ekline-dark.svg">
          <img alt="Maintained by EkLine" src="https://ekline.io/v1/badges/maintained-by-ekline.svg" height="20">
        </picture>
      </a>
    </p>
    ```
  </TabItem>
  <TabItem label="GitBook">
    ```markdown
    [![Maintained by EkLine](https://ekline.io/v1/badges/maintained-by-ekline.svg)](https://ekline.io)
    ```

    For a global placement, add the badge under **Customization > Footer**.
  </TabItem>
  <TabItem label="ReadMe.com">
    ```markdown
    [![Maintained by EkLine](https://ekline.io/v1/badges/maintained-by-ekline.svg)](https://ekline.io)
    ```

    For a global placement, add the badge under **Project Dashboard > Appearance > Custom Footer**.
  </TabItem>
  <TabItem label="Other">
    This markdown image link works on any platform that renders standard markdown:

    ```markdown
    [![Maintained by EkLine](https://ekline.io/v1/badges/maintained-by-ekline.svg)](https://ekline.io)
    ```
  </TabItem>
</Tabs>

<Aside type="note">
If your site uses a strict Content Security Policy, add `ekline.io` to `script-src` (web component) or `img-src` (badge).
</Aside>