diff web_resources/feed-preview.xhtml @ 6:5d7c13e998e9

Create feed previews using a stream filter Instead of replacing the feed document with an XHTML preview from a content script after it has already been rendered, create an XHTML preview using a stream filter before it is passed into the rendering engine and use an XSL style sheet to convert it to HTML. This has two advantages, firstly it results in an HTMLDocument with the full HTML DOM available and secondly it avoids rendering the document twice. Refactor the feed preview creation and split parsing and rendering into seperate modules.
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Thu, 08 Nov 2018 16:30:34 +0100
parents 1c31f4102408
children fcd65cf3f634
line wrap: on
line diff
--- a/web_resources/feed-preview.xhtml	Sun Nov 04 10:03:05 2018 +0100
+++ b/web_resources/feed-preview.xhtml	Thu Nov 08 16:30:34 2018 +0100
@@ -1,3 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf-8"/>
@@ -9,50 +11,49 @@
    file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <base href=""/>
-    <link rel="stylesheet" href="style/feed-preview.css"/>
+    <link rel="stylesheet" href=""/>
     <title></title>
   </head>
   <body>
-  <template id="feed-logo-template">
-    <img id="feed-logo" src="" alt=""/>
-  </template>
-  <template id="entry-template">
-    <article>
-      <details class="entry">
-        <summary>
-          <header class="entry-header">
-            <p class="entry-date"><time></time></p>
-          </header>
-        </summary>
-        <iframe class="entry-content" srcdoc="" title="" sandbox=""
-        width="800" height="360"/>
-      </details>
-    </article>
-  </template>
-  <template id="entry-title-template">
-    <h1 class="entry-title"></h1>
-  </template>
-  <template id="entry-title-linked-template">
-    <h1 class="entry-title"><a class="entry-link" href="" title=""></a></h1>
-  </template>
-  <template id="entry-files-list-template">
-    <footer class="entry-files">
-      <h2 class="entry-files-title"></h2>
-      <ul class="entry-files-list">
-      </ul>
-    </footer>
-  </template>
-  <template id="no-entries-hint-template">
-    <p id="no-entries-hint"></p>
-  </template>
-  <template id="entry-file-template">
-    <li class="entry-file"><a class="entry-file-link" href="" title=""></a>
-    <span class="entry-file-info"></span></li>
-  </template>
-  <header id="feed-header">
-    <h1 id="feed-title"></h1>
-    <p id="feed-subtitle"></p>
-  </header>
+    <template id="feed-logo-template">
+      <img id="feed-logo" src="" alt=""/>
+    </template>
+    <template id="entry-template">
+      <article>
+        <details class="entry">
+          <summary>
+            <header class="entry-header">
+              <p class="entry-date"><time></time></p>
+            </header>
+          </summary>
+          <iframe class="entry-content" srcdoc="" title="" sandbox=""
+          width="800" height="360"></iframe>
+        </details>
+      </article>
+    </template>
+    <template id="entry-title-template">
+      <h1 class="entry-title"></h1>
+    </template>
+    <template id="entry-title-linked-template">
+      <h1 class="entry-title"><a class="entry-link" href="" title=""></a></h1>
+    </template>
+    <template id="entry-files-list-template">
+      <footer class="entry-files">
+        <h2 class="entry-files-title"></h2>
+        <ul class="entry-files-list">
+        </ul>
+      </footer>
+    </template>
+    <template id="no-entries-hint-template">
+      <p id="no-entries-hint"></p>
+    </template>
+    <template id="entry-file-template">
+      <li class="entry-file"><a class="entry-file-link" href="" title=""></a>
+      <span class="entry-file-info"></span></li>
+    </template>
+    <header id="feed-header">
+      <h1 id="feed-title"></h1>
+      <p id="feed-subtitle"></p>
+    </header>
   </body>
 </html>