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

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