git.squeep.com Git - websub-hub/blob - src/template/root-html.js

   1 'use strict';
   2
   3 const th = require('./template-helper');
   4
   5 /**
   6  *
   7  * @param {string} pageTitle page title
   8  * @param {string} logoUrl logo url
   9  * @returns {string} element
  10  */
  11 function hAppSection(pageTitle, logoUrl) {
  12   return `      <section hidden class="h-app">
  13         <h2>h-app Information for IndieAuth Logins</h2>
  14         <img src="${logoUrl}" class="u-logo">
  15         <a href="" class="u-url p-name">${pageTitle}</a>
  16         <p class="p-summary">
  17           This is a WebSub Hub service, facilitating content distribution.
  18           Authenticated users may view details of any syndications related to their profile.
  19         </p>
  20       </section>`;
  21 }
  22
  23 /**
  24  * @returns {string} element
  25  */
  26 function aboutSection() {
  27   return `      <section class="about">
  28         <h2>What</h2>
  29         <p>
  30           This is a <a class="external" href="https://www.w3.org/TR/websub/">WebSub</a> Hub service.
  31         </p>
  32         <p>
  33           It facilitates the timely distribution of new content from publishers to subscribers.
  34         </p>
  35         <aside>
  36           The typical use-case is where the content is a blog or news feed, but any type of content may be syndicated.
  37         </aside>
  38       </section>`;
  39 }
  40
  41 /**
  42  *
  43  * @param {boolean} isPublicHub is public hub
  44  * @param {string} hubURL hub url
  45  * @returns {string} html
  46  */
  47 function usageSection(isPublicHub, hubURL) {
  48   const usageContent = isPublicHub ? `      <h2>Public Hub</h2>
  49       <p>
  50         This hub is available as a public resource; any topic which lists it as a hub can be syndicated.
  51       </p>
  52       <p>
  53         To use this hub, your content needs to include some Link relations.
  54       </p>
  55       <div>
  56         <h3>For Any Content</h3>
  57         <ul>
  58           <li>
  59             The content must be served with a <code>Link</code> HTTP header indicating this service as the <code>hub</code> relation.
  60             <figure>
  61               <figcaption>Example:</figcaption>
  62               <code>
  63                 Link: &lt;${hubURL}&gt;; rel="hub"
  64               </code>
  65             </figure>
  66           </li>
  67           <li>
  68             The content must be served with a <code>Link</code> HTTP header indicating its own URL with the <code>self</code> relation.
  69             <figure>
  70               <figcaption>Example:</figcaption>
  71               <code>
  72                 Link: &lt;https://example.com/feed/&gt;; rel="self"
  73               </code>
  74             </figure>
  75           </li>
  76           <li>
  77             Ideally, these should be combined in one header.
  78             <figure>
  79               <figcaption>Example:</figcaption>
  80               <code>
  81                 Link: &lt;${hubURL}&gt;; rel="hub", &lt;https://example.com/feed/&gt;; rel="self"
  82               </code>
  83             </figure>
  84           </li>
  85         </ul>
  86       </div>
  87       <div>
  88         <h3>For Atom or RSS feeds</h3>
  89         <ul>
  90           <li>
  91             The feed must include a <code>link</code> element within the <code>http://www.w3.org/2005/Atom</code> namespace with the <code>hub</code> relation and this service as the <code>href</code> attribute.
  92             <figure>
  93               <figcaption>Example:</figcaption>
  94               <code>
  95                 &lt;link xmlns="http://www.w3.org/2005/Atom" href="${hubURL}" rel="hub"&gt;
  96               </code>
  97             </figure>
  98           </li>
  99           <li>
 100             The feed must include a <code>link</code> element within the <code>http://www.w3.org/2005/Atom</code> namespace with the <code>self</code> relation, its own URL as the <code>href</code> attribute, and its content-type as the <code>type</code> attribute.
 101             <figure>
 102               <figcaption>Example:</figcaption>
 103               <code>
 104                 &lt;link xmlns="http://www.w3.org/2005/Atom" href="https://example.com/blog/feed" rel="self" type="application/atom+xml"&gt;
 105               </code>
 106             </figure>
 107           </li>
 108         <ul>
 109       </div>
 110       <div>
 111         <h3>Publishing Updates</h3>
 112         To notify the Hub either of a new topic to syndicate, or that a topic&apos;s content has been updated and should be distributed to subscribers, send a <code>POST</code> request with Form Data (<code>application/x-www-form-urlencoded</code>):
 113         <ul>
 114           <li>
 115             <code>hub.mode</code> set to <code>publish</code>
 116           </li>
 117           <li>
 118             <code>hub.url</code> set to the <code>self</code> link relation of the content (this value may be set multiple times, to update more than one topic)
 119           </li>
 120         </ul>
 121         <figure>
 122           <figcaption>Example:</figcaption>
 123           <code>
 124             curl ${hubURL} -d'hub.mode=publish' -d'hub.url=https://example.com/blog_one/feed' -d'hub.url=https://example.com/blog_two/feed'
 125           </code>
 126         </figure>
 127       </div>`
 128     : `
 129       <h2>Private Hub</h2>
 130       <p>
 131         This hub only serves specific topics.
 132       </p>`;
 133   return `
 134       <section class="usage">
 135 ${usageContent}
 136       </section>`;
 137 }
 138
 139 /**
 140  *
 141  * @param {string} contactHTML html
 142  * @returns {string} html
 143  */
 144 function contactSection(contactHTML) {
 145   let section = '';
 146   if (contactHTML) {
 147     section = `      <section>
 148 ${contactHTML}
 149       </section>`;
 150   }
 151   return section;
 152 }
 153
 154 /**
 155  *
 156  * @param {object} ctx context
 157  * @param {object} options options
 158  * @param {object} options.manager manager options
 159  * @param {string} options.adminContactHTML html
 160  * @param {string} options.manager.pageTitle title
 161  * @param {string} options.manager.publicHub is public
 162  * @param {object} options.dingus dingus options
 163  * @param {string} options.dingus.selfBaseUrl url
 164  * @returns {string} html
 165  */
 166 module.exports = (ctx, options) => {
 167   const pageTitle = options.manager.pageTitle;
 168   const isPublicHub = options.manager.publicHub;
 169   const contactHTML = options.adminContactHTML;
 170   const footerEntries = options.manager.footerEntries;
 171   const hubURL = options.dingus.selfBaseUrl || '<s>https://hub.example.com/</s>';
 172   const navLinks = [{
 173     href: 'admin/',
 174     text: 'Admin',
 175   }];
 176   const htmlOptions = {
 177     pageTitle,
 178     logoUrl: options.manager.logoUrl,
 179     footerEntries,
 180     navLinks,
 181   };
 182   const content = [
 183     aboutSection(),
 184     usageSection(isPublicHub, hubURL),
 185     contactSection(contactHTML),
 186     hAppSection(pageTitle, options.manager.logoUrl),
 187   ];
 188   return th.htmlPage(0, ctx, htmlOptions, content);
 189 };