notebook/app/views/api/api_docs/index.html.erb

<div class="row">
  <div class="col s12 m10 offset-m1 l8 offset-l2">
    <%= link_to api_path do %>
      <%= image_tag 'logos/both-original.png', style: 'width: 100%' %>
    <% end %>
  </div>

  <div class="col s12 m10 offset-m1 l8 offset-l2">
    <div class="card">
      <div class="card-content">
        <div class="card-title">
          Supercharge your writing applications with Notebook.ai's world-class worldbuilding resources
        </div>

        <div class="row">
          <div class="col s12 m6 l5">
            <br />
            <p>
              <% Rails.application.config.content_types[:all].each do |content_type| %>
                <i class="material-icons small <%= content_type.text_color %> tooltipped" data-tooltip="Interact with <%= content_type.name.downcase.pluralize %>"><%= content_type.icon %></i>
              <% end %>
            </p>
            <br />
            <p>
              We now offer an API for developers that would like to take advantage of the
              features and worlds in Notebook.ai. 
            </p>
            <br />
            <p>
              To get started, you'll want to <%= link_to 'register an application', api_applications_path %>
              and get your API key. In order to access any user's notebook, you'll first need
              them to <%= link_to 'authenticate your application', api_approvals_path %> and give you an
              access key specific to their notebook. 
            </p>
          </div>
          <div class="col s12 m6 l6 offset-l1">
            <p>
              In other words, it's just three easy steps to get started:
            </p>

            <ul class="stepper">
              <li class="step active">
                <div data-step-label="Register your application" class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-content">
                  <div class="row">
                    <p class="col s12">
                      To receive an access token for your application, you'll first need to register it for use.
                    </p>
                  </div>
                  <div class="step-actions">
                    <%= link_to 'Register application', api_applications_path, class: 'blue white-text btn' %>
                    <button class="waves-effect waves-dark btn white black-text next-step">Next step</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div data-step-label="Receive user approval" class="step-title waves-effect waves-dark">Step 2</div>
                <div class="step-content">
                  <div class="row">
                    <p class="col s12">
                      In order to access or modify a user's notebook pages on their behalf, you'll first need that user to
                      approve your application. You can set up an approval flow that notifies your application whenever
                      a user authorizes its use, or you can direct them to <%= link_to 'their integrations page', api_integrations_path %>
                      and have them paste their authorization code directly into your app.
                    </p>
                  </div>
                  <div class="step-actions">
                    <%= link_to 'Create approval flow', api_approvals_path, class: 'btn blue white-text' %>
                    <button class="waves-effect waves-dark btn white black-text next-step">Next step</button>
                  </div>
                </div>
              </li>
              <li class="step">
                <div data-step-label="Make API calls!" class="step-title waves-effect waves-dark">Step 3</div>
                <div class="step-content" style="display: none;">
                  <div class="row">
                    <p class="col s12">
                      Once you've received an application token and your first user authorization token, you can start making
                      API calls on that user's behalf. You will need to provide these tokens with every API call.
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%= link_to api_docs_path do %>
    <div class="card hoverable blue col s12 m10 offset-m1 l8 offset-l2">
      <div class="card-content white-text center">
        <div class="card-title">Browse available API endpoints</div>
        <p>Documentation for developers, by developers</p>
      </div>
    </div>
  <% end %>

  <div class="card col s12 m10 offset-m1 l8 offset-l2">
    <div class="card-content">
      <div class="card-title">
        Gain full access to 
        <% Rails.application.config.content_types[:all_non_universe].each do |type| %>
          <span class="<%= type.text_color %>"><%= type.name.downcase.pluralize %>,</span>
        <% end %>
        and <span class="<%= Universe.text_color %>">universes</span>.
      </div>
      <div class="row">
        <div class="col s12 m12 l6">
          <p>
            After a user authenticates your application, you'll have full access to integrate their worldbuilding pages into your app.
            You can show them their characters, let them edit one of their existing creatures, pin their towns and landmarks to your maps, 
            create new items, and more &mdash; all without leaving your app. 
          </p>
          <br />
          <p>
            <%= link_to 'See the available endpoints by clicking here.', api_docs_path %>
          </p>
        </div>
        <div class="col s12 m12 l6">
          <%= image_tag 'screenshots/page-types.png', width: '100%', class: 'materialboxed', data: { caption: "A few of the page types available on Notebook.ai" } %>
        </div>
      </div>
    </div>
  </div>

  <div class="card col s12 m10 offset-m1 l8 offset-l2">
    <div class="card-content">
      <div class="card-title">
        Generate two-way mentions for your content and drive traffic back to your site
      </div>
      <div class="row">
        <div class="col s12 m5 l5">
          <%= image_tag 'screenshots/integrations.png', width: '100%', class: 'materialboxed', data: { caption: "Each integration gets its own tab on Notebook.ai pages" } %>
        </div>
        <div class="col s12 m7 l7">
          <p>
            When a user links their notebook page in your app, we can automatically show a link back to your page from that notebook page, too.
          </p>
          <br />
          <p>
            For example, if a user publishes a story about Alice and Bob on your site and links their Alice and Bob pages from Notebook.ai, we'll
            show a link to that story on both Alice and Bob's Notebook.ai pages also.
          </p>
          <br />
          <p>
            <%= link_to 'See the available endpoints by clicking here.', api_docs_path %>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="col s12">
    <p class="grey-text center">
      Want to build something our API doesn't support yet?
      <%= link_to 'Get in touch!', 'https://github.com/indentlabs/notebook/issues' %>
    </p>
  </div>
</div>