Library plugins (#192)

blocks/edit/da-library/da-library.css

@@ -122,6 +122,10 @@ button span {
  background: url('/blocks/edit/img/library-back.svg') center center / 18px no-repeat;
 }
 
+.da-library-item-list-main button {
+ background: #FFF;
+}
+
 .da-library-item-list-main button.blocks {
  background: url('/blocks/edit/img/Smock_Table_18_N.svg') 18px center / 18px no-repeat;
 }
@@ -142,7 +146,8 @@ button span {
  background: url('/blocks/edit/img/Smock_Image_18_N.svg') 18px center / 18px no-repeat;
 }
 
-.da-library-item-list-main button.plugins {
+.da-library-item-list-main button.plugins,
+.da-library-item-list-main button.is-plugin {
  background: url('/blocks/edit/img/Smock_Plug_18_N.svg') 18px center / 18px no-repeat;
 }
 
@@ -408,3 +413,19 @@ ul {
  opacity: 1;
  z-index: 1;
 }
+
+/* Plugins */
+.da-library-type-plugin {
+ position: absolute;
+ top: 44px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.da-library-type-plugin iframe {
+ border: none;
+ display: block;
+ width: 100%;
+ height: 100%;
+}

blocks/edit/da-library/da-library.js

@@ -1,5 +1,5 @@
 import { DOMParser as proseDOMParser } from 'da-y-wrapper';
-import { LitElement, html, until } from '../../../deps/lit/lit-all.min.js';
+import { LitElement, html, until, nothing } from '../../../deps/lit/lit-all.min.js';
 import { getBlocks, getBlockVariants } from './helpers/index.js';
 import getSheet from '../../shared/sheet.js';
 import inlinesvg from '../../shared/inlinesvg.js';
@@ -173,7 +173,22 @@ class DaLibrary extends LitElement {
  </ul>`;
  }
 
- async renderLibrary({ name, sources, format }) {
+ renderPlugin(url) {
+ return html`
+ <div class="da-library-type-plugin">
+ <iframe
+ src="${url}"
+ allow="clipboard-write *"
+ scrolling="no"></iframe>
+ </div>`;
+ }
+
+ async renderLibrary({ name, sources, url, format }) {
+ // Only plugins have a URL
+ if (url) {
+ return this.renderPlugin(url);
+ }
+
  if (name === 'blocks') {
  const blocks = await getBlocks(sources);
  return this.renderGroups(blocks);
@@ -203,7 +218,7 @@ class DaLibrary extends LitElement {
  <ul class="da-library-item-list da-library-item-list-main">
  ${this._libraryList.map((library) => html`
  <li>
- <button class="${library.name}" @click=${this.handleLibSwitch}>
+ <button class="${library.name} ${library.url ? 'is-plugin' : ''}" @click=${this.handleLibSwitch}>
  <span class="library-type-name">${library.name}</span>
  </button>
  </li>

blocks/edit/da-library/helpers/helpers.js

@@ -58,24 +58,13 @@ let currOwner;
 let currRepo;
 let libraries;
 
-export async function getLibraryList() {
- const { owner, repo } = getPathDetails();
- if (!owner || !repo) return [];
-
- if (currOwner === owner
- && currRepo === repo
- && libraries) {
- return libraries;
- }
- currOwner = owner;
- currRepo = repo;
-
+async function getDaLibraries(owner, repo) {
  const resp = await daFetch(`${DA_ORIGIN}/source/${owner}/${repo}${DA_CONFIG}`);
  if (!resp.ok) return [];
 
  const { data } = await resp.json();
 
- libraries = data.reduce((acc, item) => {
+ return data.reduce((acc, item) => {
  const keySplit = item.key.split('-');
  if (keySplit[0] === 'library') {
  acc.push({
@@ -86,6 +75,36 @@ export async function getLibraryList() {
  }
  return acc;
  }, []);
+}
+
+async function getAemPlugins(owner, repo, ref = 'main') {
+ const resp = await daFetch(`https://admin.hlx.page/sidekick/${owner}/${repo}/${ref}/config.json`);
+ if (!resp.ok) return [];
+ const json = await resp.json();
+ if (json.plugins.length === 0) return [];
+ return json.plugins.reduce((acc, plugin) => {
+ if (plugin.daLibrary) acc.push({ name: plugin.title, url: plugin.url });
+ return acc;
+ }, []);
+}
+
+export async function getLibraryList() {
+ const { owner, repo } = getPathDetails();
+ if (!owner || !repo) return [];
+
+ if (currOwner === owner
+ && currRepo === repo
+ && libraries) {
+ return libraries;
+ }
+ currOwner = owner;
+ currRepo = repo;
+
+ const daLibraries = getDaLibraries(owner, repo);
+ const aemPlugins = getAemPlugins(owner, repo);
+
+ const [da, aem] = await Promise.all([daLibraries, aemPlugins]);
+ libraries = [...da, ...aem];
 
  return libraries;
 }