add superfeedr tutorial

controllers/Controller.php

@@ -68,6 +68,27 @@ class Controller {
     return $response;
   }
 
+  public function superfeedr(Request $request, Response $response) {
+    session_start();
+    if(session('user_id')) {
+      $role = $this->_get_role($request, $response);
+      $site = ORM::for_table('sites')->where_id_is($role->site_id)->find_one();
+    } else {
+      $role = false;
+      $site = false;
+    }
+
+    $response->setContent(view('superfeedr', [
+      'title' => 'Telegraph Superfeedr Documentation',
+      'user' => $this->_user(),
+      'accounts' => $this->_accounts(),
+      'site' => $site,
+      'role' => $role,
+      'return_to' => $request->getRequestURI()
+    ]));
+    return $response;
+  }
+
   private static function _icon_for_status($status) {
     switch($status) {
       case 'success':

public/assets/styles.css

@@ -36,3 +36,10 @@ h2.site-name:hover .edit-site {
   max-width: 620px;
   word-wrap: break-word;
 }
+
+.tutorial-image {
+  max-width: 100%;
+  -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
+  -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);  
+}

public/index.php

@@ -28,6 +28,8 @@ $router->addRoute('GET', '/site/new', 'Controller::new_site');
 $router->addRoute('GET', '/site/edit', 'Controller::new_site');
 $router->addRoute('POST', '/site/save', 'Controller::save_site');
 $router->addRoute('GET', '/api', 'Controller::api');
+$router->addRoute('GET', '/superfeedr', 'Controller::superfeedr');
+
 $router->addRoute('GET', '/webmention/{code}/details', 'Controller::webmention_details');
 $router->addRoute('GET', '/dashboard/send', 'Controller::dashboard_send');
 $router->addRoute('POST', '/dashboard/get_outgoing_links.json', 'Controller::get_outgoing_links');

views/api.php

@@ -8,7 +8,7 @@ $this->layout('layout-loggedin', ['title' => $title, 'accounts' => $accounts, 'u
   <h1>Telegraph API</h1>
 
 <? ob_start(); ?>
-<h2 class="ui dividing header">Send a webmention to a specific page</h2>
+<h2 class="ui dividing header" id="send">Send a webmention to a specific page</h2>
 Post to `https://telegraph.p3k.io/webmention`
 
 * `token` - your API key obtained after signing up
@@ -73,7 +73,7 @@ Content-type: application/json
 }
 ```
 
-<h2 class="ui dividing header">Status API</h2>
+<h2 class="ui dividing header" id="status">Status API</h2>
 
 You can poll the status URL returned after queuing a webmention for more information on the progress of sending the webmention. The response will look like the following:
 
@@ -130,7 +130,7 @@ Other possible status codes are listed below.
 Other status codes may be returned depending on the receiver's status endpoint. You should only assume a webmention was successfully sent if the status is `success` or `accepted`. If the response does not contain a `location` parameter you should not continue polling the endpoint.
 
 
-<h2 class="ui dividing header">Callback Events</h2>
+<h2 class="ui dividing header" id="callbacks">Callback Events</h2>
 After Telegraph processes your request, you will receive a post to the callback URL. The initial callback you receive will be one of the status codes returned by the status API.
 
 Typically, webmention endpoints defer processing until later, so normally the first callback received will indicate that the webmention was queued. This callback will normally be sent relatively quickly after you make the initial request, typically within a few seconds.

views/layout-loggedin.php

@@ -10,6 +10,7 @@
       <a href="/dashboard" class="item">Dashboard</a>
     <? endif; ?>
     <a href="/api" class="item">API</a>
+    <a href="/superfeedr" class="item">Superfeedr</a>
     <div class="ui right simple dropdown item">
       <? if($user): ?>
         <img class="ui mini circular image" src="<?= $user->photo ?: '/assets/default-user.jpg' ?>"> <i class="dropdown icon"></i>

views/new-site.php

@@ -37,9 +37,14 @@
       <div class="field">
         <label>Superfeedr Webhook URL</label>
         <input type="text" readonly="" value="<?= Config::$base ?>superfeedr/<?= $role->token ?>">
-        <p>Create a <a href="https://superfeedr.com/tracker">Superfeedr tracker</a> subscription and set this URL as the web hook URL.</p>
+        <p>Create a <a href="/superfeedr">Superfeedr tracker</a> subscription and set this URL as the web hook URL.</p>
         <p>If you are using Telegraph to send webmentions as well as receive webmentions from Superfeedr, it is recommended you create a separate site for Superfeedr so you can more easily separate the two uses of the service.</p>
       </div>
+      <div class="field">
+        <label>Superfeedr Topic URL</label>
+        <input type="text" readonly="" value="http://track.superfeedr.com/?query=link%3A<?= parse_url($site->url, PHP_URL_HOST) ?>">
+        <p>Your Superfeedr tracker subscription should have this topic URL.</p>
+      </div>
     </form>
 
   <?php endif; ?>

views/superfeedr.php

@@ -0,0 +1,58 @@
+<?
+use \Michelf\MarkdownExtra;
+$this->layout('layout-loggedin', ['title' => $title, 'accounts' => $accounts, 'user' => $user, 'return_to' => $return_to]);
+?>
+
+<div class="ui main text container api-docs" style="margin-top: 80px;">
+
+<h1>Superfeedr Integration</h1>
+<? ob_start(); ?>
+
+You can use Telegraph to receive Webmentions when your site is linked to by any website tracked by Superfeedr, even if that site doesn't send Webmentions itself!
+
+<h2 class="ui dividing header">Setup</h2>
+
+From the top right menu, click the "New Site" link.
+
+<img src="/assets/superfeedr/create-new-website.png" class="tutorial-image">
+
+Enter "Mentions" for the name (or anything you want, but that's what I use), and enter your home page URL. Entering your URL here is how Telegraph knows which links in the Superfeedr feed to send webmentions for.
+
+<img src="/assets/superfeedr/new-site-form.png" class="tutorial-image">
+
+After you create the site, click on the settings icon next to the name.
+
+<img src="/assets/superfeedr/site-created.png" class="tutorial-image">
+
+Near the bottom, there is a Superfeedr Webhook URL. Copy that URL since we'll need it in the next step.
+
+<img src="/assets/superfeedr/site-settings.png" class="tutorial-image">
+
+<h2 class="ui dividing header">Superfeedr Configuration</h2>
+
+Now we need to sign up with Superfeedr and create a tracking feed. Create an account by visiting the [Superfeedr Tracker page](https://superfeedr.com/tracker). Make sure to choose "Tracker" from the account type dropdown. If you already have a Publisher or Subscriber account, you'll need to make a new Tracker account for this.
+
+<img src="/assets/superfeedr/superfeedr-signup.png" class="tutorial-image">
+
+Once you've signed up, you'll land on the Superfeedr dashboard. Click "Search and Track" to create a new tracker.
+
+Enter `link:aaronparecki.com` as the query term, obviously replacing the domain with your own, and set the format to "json". Paste your Telegraph URL from the setup process into the Callback/Webhook URL field. Then click "Subscribe"!
+
+<img src="/assets/superfeedr/superfeedr-configuration.png" class="tutorial-image">
+
+At this point your tracker feed is live, and Superfeedr will begin sending web hooks to Telegraph whenever a new item is found that links to your website!
+
+Unfortunately nothing will happen right away, so you'll have to wait for someone to publish a blog post that links to you. Check back in a little while and you should see some webmentions show up on your Telegraph dashboard!
+
+<img src="/assets/superfeedr/telegraph-dashboard-mentions.png" class="tutorial-image">
+
+Here you can see a few of the mentions I've received from my Superfeedr tracker, including one from Stack Overflow which doesn't yet send webmentions on its own!
+
+
+<br>
+<?
+$source=ob_get_clean();
+echo MarkdownExtra::defaultTransform($source);
+?>
+
+</div>