fix: relative URLs on preview gallery

blinkk · Nov 24, 2021 · 77b6851 · 77b6851
1 parent 48f0805
commit 77b6851
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 19 deletions.
diff --git a/example/.gitignore b/example/.gitignore
diff --git a/src/page-builder.ts b/src/page-builder.ts
@@ -58,7 +58,7 @@ interface InspectorOptions {
   enabled: boolean;
 }
 
-interface PageBuilderOptions {
+export interface PageBuilderOptions {
   inspector?: InspectorOptions;
 
   /** Whether to beautify HTML output. */
@@ -182,7 +182,9 @@ export class PageBuilder {
       sitemapPath: options?.sitemapXml?.path,
     });
     if (PageBuilder.isInspectorEnabled(pod, options)) {
-      PartialPreviewRouteProvider.register(pod);
+      PartialPreviewRouteProvider.register(pod, {
+        pageBuilderOptions: options || {}
+      });
       PageBuilderStaticRouteProvider.register(pod);
     }
     pod.defaultView = async (context: TemplateContext) => {

diff --git a/src/partial-preview.test.ts b/src/partial-preview.test.ts
@@ -0,0 +1,56 @@
+import {Pod, Route} from '@amagaki/amagaki';
+
+import {ExecutionContext} from 'ava';
+import test from 'ava';
+
+test('PatialPreview', async (t: ExecutionContext) => {
+  const pod = new Pod('./example', {dev: true, name: 'staging'});
+  await pod.router.warmup();
+  const html = await (await pod.router.resolve('/preview/') as Route).build();
+  const expected = `
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Preview Gallery</title>
+  <meta name="referrer" content="no-referrer">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="http://localhost/preview/">
+  <meta property="og:title" content="Preview Gallery">
+  <meta property="og:locale" content="en">
+  <meta property="twitter:title" content="Preview Gallery">
+  <meta property="twitter:card" content="summary_large_image">
+  <link href="http://localhost/preview/" rel="canonical">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700&display=swap" rel="stylesheet" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link href="./../static/css/main.css?fingerprint=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <script src="./../static/js/main.js?fingerprint=d41d8cd98f00b204e9800998ecf8427e">
+  </script>
+  <script src="./../_page-builder/page-builder-ui.min.js">
+  </script>
+</head>
+
+<body>
+  <div class="main">
+    <page-module>
+      <page-module-inspector partial="header"></page-module-inspector>
+      <div class="header">
+        <p>Header</p>
+      </div>
+    </page-module>
+    <page-module>
+      <div class="partial-preview-gallery">
+        <ul>
+          <li>/views/partials/header.njk
+          <li>/views/partials/hero.njk
+        </ul>
+      </div>
+    </page-module>
+  </div>
+</body>
+
+</html>
+  `.trim();
+  t.deepEqual(html, expected);
+});
diff --git a/src/partial-preview.ts b/src/partial-preview.ts
@@ -6,26 +6,26 @@ import {
   RouteProvider,
   Router,
   TemplateContext,
+  Url,
   splitFrontMatter,
 } from '@amagaki/amagaki';
+import {PageBuilder, PageBuilderOptions} from './page-builder';
 
-import {PageBuilder} from './page-builder';
 import path from 'path';
 
-interface PartialPreviewRouteProviderOptions {}
+interface PartialPreviewRouteProviderOptions {
+  pageBuilderOptions: PageBuilderOptions;
+}
 
 interface Partial {
   basename: string;
   name: string;
   podPath: string;
 }
 
-interface PartialPreviewRouteOptions {
-  partial: Partial;
-}
-
 interface PartialGalleryRouteOptions {
   partials: Partial[];
+  pageBuilderOptions: PageBuilderOptions;
 }
 
 export class PartialPreviewRouteProvider extends RouteProvider {
@@ -37,8 +37,8 @@ export class PartialPreviewRouteProvider extends RouteProvider {
     this.options = options;
   }
 
-  static register(pod: Pod, options?: PartialPreviewRouteProviderOptions) {
-    const provider = new PartialPreviewRouteProvider(pod.router, options ?? {});
+  static register(pod: Pod, options: PartialPreviewRouteProviderOptions) {
+    const provider = new PartialPreviewRouteProvider(pod.router, options);
     pod.router.addProvider(provider);
     return provider;
   }
@@ -54,7 +54,10 @@ export class PartialPreviewRouteProvider extends RouteProvider {
         basename: filename,
       };
     });
-    routes.push(new PartialGalleryRoute(this, {partials: partials}));
+    routes.push(new PartialGalleryRoute(this, {
+      partials: partials,
+      pageBuilderOptions: this.options.pageBuilderOptions,
+    }));
     return routes;
   }
 }
@@ -89,6 +92,7 @@ class PartialGalleryRoute extends Route {
       },
     ];
     const fakeDoc = {
+      constructor: {name: 'Document'},
       pod: this.provider.pod,
       podPath: '',
       locales: [],
@@ -98,20 +102,18 @@ class PartialGalleryRoute extends Route {
       },
       defaultLocale: this.pod.locale('en'),
       locale: this.pod.locale('en'),
-      url: {
+      url: new Url({
         path: this.urlPath,
-        toString: () => {
-          return '';
-        },
-      },
+        env: this.pod.env,
+      }),
     } as unknown as Document; 
     const context: TemplateContext = {
       doc: fakeDoc,
       env: this.provider.pod.env,
       pod: this.provider.pod,
       process: process,
     };
-    const builder = new PageBuilder(fakeDoc, context, {});
+    const builder = new PageBuilder(fakeDoc, context, this.options.pageBuilderOptions);
     return await builder.buildDocument();
   }
 }
diff --git a/src/ui/page-module-inspector.ts b/src/ui/page-module-inspector.ts
@@ -54,7 +54,8 @@ export class PageBuilderInspector extends LitElement {
           font-weight: 500;
           line-height: 12px;
           padding: 8px 12px;
-          position: absolute;
+          position: sticky;
+          top: 0;
           z-index: 999;
         }
         .help-box__label {