<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
    <link rel="stylesheet" href="css/mvp.css" />

    <title>2chainz.ansonbiggs.com</title>
    <meta name="description" content="A REST API for 2 Chainz Quotes." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="2 Chainz Rest API" />
    <meta property="og:url" content="https://2chainz.ansonbiggs.com" />
    <meta
      property="og:description"
      content="A free REST API for 2 Chainz quotes"
    />

    <style>
      * {
        transition: all 0.2s ease-out; /* Thanks https://news.ycombinator.com/item?id=19594993 */
      }
      body {
        background-color: #d9c06e;
        color: #03252a;
      }
      hr {
        background-color: #03252a;
      }

      section aside {
        border: 1px solid black;
        box-shadow: none;
      }
      nav {
        margin-bottom: 2rem;
      }

      :root {
        --color: darkviolet;
        --color-bg-secondary: black;
      }

      @media screen and (max-width: 400px) {
        #scroll-icon {
          display: none;
        }
      }
    </style>
  </head>

  <body>
    <header style="height: 70vh;">
      <nav>
        <ul>
          <li>
            <a href="https://2chainz.ansonbiggs.com">2chainz.ansonbiggs.com</a> - A REST API for 2
            Chainz Quotes
          </li>
        </ul>
      </nav>
      <section>
        <blockquote>
          <span id="quote"></span>
          <footer><i id="alias">- 2 Chainz</i></footer>
        </blockquote>
      </section>
      <p>
        <a onclick="getQuote()" href="#"
          ><b>
            <ion-icon size="large" name="refresh-circle"></ion-icon><br />
            New Quote</b
          ></a
        >
        <a id="tweet" href="#"
          ><b
            ><ion-icon size="large" name="logo-twitter"></ion-icon> <br />
            Tweet Quote
          </b></a
        >
      </p>
      <a href="#scroll" id="scroll-icon" style="padding-top: 10vh;"
        ><ion-icon size="large" name="arrow-down-sharp"></ion-icon
      ></a>
    </header>
    <main>
      <hr style="padding-top: 0;" />
      <header id="scroll">
        <h2>Usage</h2>
      </header>
      <details open>
        <summary>Quote</summary>

        <p>
          Returns a random 2 Chainz Quote in <code>json</code> format like the
          following example:
        </p>

        <p>
          send a <code>get</code> request to
          <code
            ><a href="https://chainz.ansonbiggs.com/api/quote"
              >https://chainz.ansonbiggs.com/api/quote</a
            ></code
          >
        </p>

        <pre><code>{
          "quote": "I got a pocket full of money, it got me walking all slew-foot"
        }</code></pre>

        <details style="margin-left: 5%;">
          <summary>Parameters</summary>

          <p>
            This endpoint also supports an optional <code>batch</code> parameter
            to get more than one quote per request. Maximum quotes that the
            endpoint will return is the amount of quotes in
            <a
              href="https://gitlab.com/2-chainz/2-chainz-rest/-/blob/master/quote/quotes.py"
              >quotes.py</a
            >
            and is subject to change. An example return from
            <code>
              <a href="https://chainz.ansonbiggs.com/api/quote?batch=2"
                >https://chainz.ansonbiggs.com/api/quote?batch=2</a
              ></code
            >
          </p>

          <pre><code class="json">{
          "quotes": [
          "I'm in the kitchen. Yams errrrrwhere.",
          "Started from the trap, now I rap"
          ]
        }</code></pre>
        </details>
      </details>

      <details
        ><summary>Alias</summary>
        <p>
          Returns a random 2 Chainz alias in <code>json</code> format. The
          return values are weighted and a full list can be seen in
          <a
            href="https://gitlab.com/2-chainz/2-chainz-rest/-/blob/master/alias/aliases.py"
            >aliases.py</a
          >.
        </p>
        <p>
          send a <code>get</code> request to
          <code
            ><a href="https://chainz.ansonbiggs.com/api/alias"
              >https://chainz.ansonbiggs.com/api/alias</a
            ></code
          >
        </p>
        <pre><code>{
          "alias": "Dos Cadenas"
        }</code></pre>
      </details>
      <hr />
      <section>
        <header>
          <h2>
            Projects built using 2chainz.ansonbiggs.com (Your project could be here!)
          </h2>
        </header>
        <aside>
          <h3>
            <a href="https://t.me/twoChainzBot">Telegram Bot</a>
          </h3>
          <p>
            An inline Telegram bot that sends a random 2 Chainz Quote. Hosted on
            a
            <a href="https://m.do.co/c/6b5df7ef55b6">DigitalOcean</a> Kubernetes
            Cluster.
          </p>
          <small
            ><a href="https://gitlab.com/2-chainz/2-chainz-telegram"
              >Source Code</a
            >
          </small>
        </aside>
        <aside>
          <h3>
            <a href="https://twitter.com/bot_chainz">Twitter Bot</a>
          </h3>
          <p>
            A Twitter bot that posts weekly 2 Chainz Quotes. Built with Azure
            Serverless Functions and Python.
          </p>
          <small
            ><a href="https://gitlab.com/2-chainz/2-chainz-twitter-bot"
              >Source Code</a
            >
          </small>
        </aside>
      </section>
      <hr />
      <section>
        <header>
          <h2>Frequently Asked Questions</h2>
        </header>
        <aside>
          <h3>Can I use this?</h3>
          <p>
            Please do! This project uses a
            <a href="https://tldrlegal.com/license/mit-license#summary"
              >MIT License</a
            >
            which means your welcome to do whatever you want.
          </p>
          <p>
            <small
              ><a href="https://twitter.com/Anson_3D"
                >Please let me know if you use it though!</a
              ></small
            >
          </p>
        </aside>
        <aside>
          <h3>Do I need an API key or is this API rate limited?</h3>
          <p>
            No, the API is totally free and unlimited. However, its being hosted
            by a college student so be nice.
          </p>
        </aside>
        <aside>
          <h3>Is this project open source? Can I contribute?</h3>
          <p>
            Yes and Yes! Check out the
            <a href="https://gitlab.com/2-chainz">Project on GitLab.</a>
          </p>
        </aside>
        <aside>
          <h3>Does 2 Chainz know about this?</h3>
          <p>
            Probably not.
          </p>
        </aside>
        <aside>
          <h3>Why?</h3>
          <p>
            Because 2 Chainz has some of the best lines in the rap game.
          </p>
        </aside>
      </section>
    </main>
    <footer>
      <hr />
      <p>
        Made by <a href="https://gitlab.com/MisterBiggs">Anson Biggs</a>,
        <a href="https://twitter.com/Anson_3D">@Anson_3D </a>
      </p>
      <p>
        Inspired By <a href="https://kanye.rest/">kanye.rest</a> which was
        created by:
        <a href="https://ajzbc.com" target="_blank">Andrew Jazbec</a>,
        <a href="https://twitter.com/ajzbc" target="_blank">@ajzbc</a>
      </p>
      <p><small>Truuuuuuuu</small></p>
    </footer>
    <script>
      getQuote();

      function getQuote() {
        fetch("/api/quote", { method: "GET" })
          .then((resp) => resp.json())
          .then(function (data) {
            document.getElementById("quote").innerHTML = data.quote;

            const tweet = encodeURIComponent(
              `"${data.quote}" -@2chainz via https://2chainz.ansonbiggs.com`
            );
            document.getElementById(
              "tweet"
            ).href = `https://twitter.com/intent/tweet?text=${tweet}`;
          });

        fetch("/api/alias", { method: "GET" })
          .then((resp) => resp.json())
          .then(function (data) {
            document.getElementById("alias").innerHTML = "- " + data.alias;
          });
      }
    </script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
  </body>
</html>