feat: NX2 - support custom background images and dark scheme on da-sites

blocks/browse/browse.css

@@ -0,0 +1,30 @@
+.light-scheme {
+  .browse:has(da-sites) {
+    [data-scheme="light"] {
+      display: block;
+    }
+  }
+}
+
+.dark-scheme {
+  .browse:has(da-sites) {
+    [data-scheme="dark"] {
+      display: block;
+    }
+  }
+}
+
+picture {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: auto;
+  mask-image: linear-gradient(to bottom, rgb(0 0 0) 50%, transparent 100%);
+}

blocks/browse/browse.js

@@ -1,54 +1,43 @@
-import getPathDetails from '../shared/pathDetails.js';
+import { getNx } from '../../scripts/utils.js';
 
-// Preload Lit
-import('../../deps/lit/dist/index.js');
+const { hashChange, loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
-async function loadComponent(el, cmpName, details) {
-  el.innerHTML = '';
+const styles = await loadStyle(import.meta.url);
+document.adoptedStyleSheets.push(styles);
+
+async function loadComponent(el, cmpName, pathDetails) {
+  const existing = el.querySelector(cmpName);
+  if (existing && pathDetails) {
+    existing.details = pathDetails;
+    return;
+  }
+  // Swapping views — remove whichever component is currently mounted.
+  el.querySelector('da-sites, da-browse')?.remove();
   await import(`./${cmpName}/${cmpName}.js`);
   const cmp = document.createElement(cmpName);
-  if (details) cmp.details = details;
+  cmp.details = pathDetails;
   el.append(cmp);
 }
 
 function setRecentSite(details) {
-  if (!details.repo) return;
-  if (details.repo.startsWith('.')) return;
+  if (!details.site) return;
+  // .trash, .da, .helix, .versions
+  if (details.site.startsWith('.')) return;
   const currentSites = JSON.parse(localStorage.getItem('da-sites')) || [];
-  const siteString = `${details.owner}/${details.repo}`;
+  const siteString = `${details.org}/${details.site}`;
   const foundIdx = currentSites.indexOf(siteString);
   if (foundIdx === 0) return;
   if (foundIdx !== -1) currentSites.splice(foundIdx, 1);
   localStorage.setItem('da-sites', JSON.stringify([siteString, ...currentSites].slice(0, 8)));
 }
 
-async function setupExperience(el, e) {
-  const details = getPathDetails();
-  if (details) setRecentSite(details);
-  if (e) {
-    const oldHash = new URL(e.oldURL).hash;
-    const newHash = new URL(e.newURL).hash;
-
-    // Are they already browsing
-    if (oldHash.startsWith('#/') && newHash.startsWith('#/')) {
-      document.querySelector('da-browse').details = details;
-      return;
-    }
-  }
-  if (!details) {
-    await loadComponent(el, 'da-sites');
-  } else {
-    await loadComponent(el, 'da-browse', details);
-  }
-}
-
-export default async function init(el) {
-  await setupExperience(el);
+export default function init(el) {
+  hashChange.subscribe((pathDetails) => {
+    const cmpName = pathDetails ? 'da-browse' : 'da-sites';
+    loadComponent(el, cmpName, pathDetails);
+    if (pathDetails) setRecentSite(pathDetails);
+  });
 
   // Lazily preload the editor
   setTimeout(() => { import('da-y-wrapper'); }, 3000);
-
-  window.addEventListener('hashchange', async (e) => {
-    await setupExperience(el, e);
-  });
 }

blocks/browse/da-actionbar/da-actionbar.css

@@ -4,11 +4,11 @@ button {
 
 .da-action-bar {
   bottom: 12px;
-  position: fixed;
-  background: #BC1C74;
+  position: absolute;
+  background-color: rgb(188 28 116);
   min-height: 48px;
-  border-radius: 6px;
-  width: var(--grid-container-width);
+  border-radius: var(--s2-corner-radius-700);
+  width: var(--se-grid-container-width);
   z-index: 400;
   filter: drop-shadow(rgb(0 0 0 / 15%) 0 1px 4px);
   display: flex;
@@ -25,7 +25,7 @@ button {
   height: 32px;
   color: #FFF;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--s2-corner-radius-500);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -43,14 +43,14 @@ button {
 }
 
 .da-action-bar-left-rail {
-  margin-left: 14px;
+  margin-left: 3px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
 .da-action-bar-right-rail {
-  margin: 0 3px;
+  margin-right: 3px;
   display: flex;
   gap: 8px;
 }

blocks/browse/da-actionbar/da-actionbar.js

@@ -2,8 +2,8 @@ import { LitElement, html } from 'da-lit';
 import { getNx } from '../../../scripts/utils.js';
 
 // Styles
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
-const STYLE = await getStyle(import.meta.url);
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+const STYLE = await loadStyle(import.meta.url);
 
 export default class DaActionBar extends LitElement {
   static properties = {

blocks/browse/da-breadcrumbs/da-breadcrumbs.css

@@ -29,7 +29,7 @@ button {
 
 .da-breadcrumb-list-item-link-wrapper {
   padding: 0 10px;
-  background: #dcdcdc;
+  background: var(--s2-gray-200);
   border-radius: 6px;
   line-height: 32px;
   display: flex;
@@ -38,7 +38,7 @@ button {
 
 .da-breadcrumb-list-item a {
   text-decoration: none;
-  color: rgb(44 44 44);
+  color: var(--s2-gray-800);
 }
 
 .da-breadcrumb-list-item-config {
@@ -54,7 +54,7 @@ button {
 }
 
 .da-breadcrumb-list-item-config:hover {
-  background-color: #147af3;
+  background-color: var(--s2-blue-900);
   color: #FFF;
 }
 
@@ -90,7 +90,7 @@ button {
   }
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .da-breadcrumb {
     margin-bottom: 12px;
     display: flex;

blocks/browse/da-breadcrumbs/da-breadcrumbs.js

@@ -1,24 +1,18 @@
-import { LitElement, html } from 'da-lit';
+import { LitElement, html, nothing } from 'da-lit';
 import { getNx } from '../../../scripts/utils.js';
 
-// Styles & Icons
-const getStyle = (await import(`${getNx()}/public/utils/styles.js`)).default;
-const getSvg = (await import(`${getNx()}/public/utils/svg.js`)).default;
-
-const STYLE = await getStyle(import.meta.url);
-const ICONS = await getSvg({ paths: ['/blocks/browse/da-browse/img/Smock_Settings_18_N.svg'] });
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+const style = await loadStyle(import.meta.url);
 
 export default class DaBreadcrumbs extends LitElement {
   static properties = {
-    fullpath: { type: String },
-    depth: { type: Number },
+    details: { attribute: false },
     _breadcrumbs: { state: true },
   };
 
   connectedCallback() {
     super.connectedCallback();
-    this.shadowRoot.adoptedStyleSheets = [STYLE];
-    this.shadowRoot.append(...ICONS);
+    this.shadowRoot.adoptedStyleSheets = [style];
   }
 
   update(props) {
@@ -27,23 +21,23 @@ export default class DaBreadcrumbs extends LitElement {
   }
 
   getBreadcrumbs() {
-    const pathSplit = this.fullpath.split('/').filter((part) => part !== '');
+    const pathSplit = this.details.fullpath.split('/').filter((part) => part !== '');
     this._breadcrumbs = pathSplit.map((part, idx) => ({
       name: part,
       path: `#/${pathSplit.slice(0, idx + 1).join('/')}`,
     }));
   }
 
-  renderConfig(length, crumb, idx) {
-    if (this.depth <= 2 && idx + 1 === length) {
-      return html`
-        <a class="da-breadcrumb-list-item-config"
-           href="/config${crumb.path}/"
-           aria-label="Config">
-           <svg class="da-breadcrumb-list-item-icon"><use href="#spectrum-settings"/></svg>
-        </a>`;
-    }
-    return null;
+  renderConfig(crumb) {
+    if (this.details.path) return nothing;
+    return html`
+      <a class="da-breadcrumb-list-item-config"
+        href="/config${crumb.path}/"
+        aria-label="Config">
+        <svg class="da-breadcrumb-list-item-icon" viewBox="0 0 20 20">
+          <use href="/img/icons/s2-icon-settings-20-n.svg#icon"/>
+        </svg>
+      </a>`;
   }
 
   render() {
@@ -54,7 +48,7 @@ export default class DaBreadcrumbs extends LitElement {
             <li class="da-breadcrumb-list-item">
               <div class=da-breadcrumb-list-item-link-wrapper>
                 <a href="${crumb.path}">${crumb.name}</a>
-                ${this.renderConfig(this._breadcrumbs.length, crumb, idx)}
+                ${this._breadcrumbs.length === idx + 1 ? this.renderConfig(crumb) : nothing}
                 </a>
             </li>
           `)}

blocks/browse/da-browse/da-browse.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  max-width: var(--grid-container-width);
+  max-width: var(--se-grid-container-width);
   margin: 0 auto;
   padding: 80px 0;
 }
@@ -19,7 +19,7 @@
     padding: 0 0 6px;
     margin: 0;
     box-sizing: border-box;
-    color: rgb(143 143 143);
+    color: var(--s2-gray-700);
     text-transform: uppercase;
     font-size: 22px;
     font-weight: 700;
@@ -34,12 +34,12 @@
     width: 100%;
     opacity: 0;
     transition: opacity 0.2s ease-in-out 0s;
-    background: rgb(19 19 19);
+    background: var(--s2-gray-900);
     border-radius: 3px;
   }
 
   button[aria-selected="true"] {
-    color: rgb(19 19 19);
+    color: var(--s2-gray-900);
   }
 
   button[aria-selected="true"]::after {
@@ -51,7 +51,7 @@
   display: none;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .da-list-header.context-browse {
     display: flex;
     flex-wrap: wrap;

blocks/browse/da-browse/da-browse.js

@@ -1,5 +1,4 @@
 import { LitElement, html, nothing } from 'da-lit';
-import { DA_ORIGIN } from '../../shared/constants.js';
 import { daFetch, getFirstSheet } from '../../shared/utils.js';
 import { getNx, sanitizePathParts } from '../../../scripts/utils.js';
 
@@ -9,9 +8,9 @@ import '../da-new/da-new.js';
 import '../da-search/da-search.js';
 import '../da-list/da-list.js';
 
-// Styles
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
-const STYLE = await getStyle(import.meta.url);
+const { DA_ADMIN, loadStyle } = await import(`${getNx()}/utils/utils.js`);
+
+const style = await loadStyle(import.meta.url);
 
 export default class DaBrowse extends LitElement {
   static properties = {
@@ -38,7 +37,7 @@ export default class DaBrowse extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.shadowRoot.adoptedStyleSheets = [STYLE];
+    this.shadowRoot.adoptedStyleSheets = [style];
     document.addEventListener('keydown', this.handleShortcuts.bind(this));
   }
 
@@ -72,7 +71,7 @@ export default class DaBrowse extends LitElement {
   async update(props) {
     if (props.has('details') && this.details) {
       // Only re-fetch if the orgs are different
-      const reFetch = props.get('details')?.owner !== this.details.owner;
+      const reFetch = props.get('details')?.org !== this.details.org;
       this.editor = await this.getEditor(reFetch);
     }
 
@@ -83,7 +82,7 @@ export default class DaBrowse extends LitElement {
     const DEF_EDIT = '/edit#';
 
     if (reFetch) {
-      const resp = await daFetch(`${DA_ORIGIN}/config/${this.details.owner}/`);
+      const resp = await daFetch(`${DA_ADMIN}/config/${this.details.org}/`);
       if (!resp.ok) return DEF_EDIT;
       const json = await resp.json();
 
@@ -188,7 +187,7 @@ export default class DaBrowse extends LitElement {
         })}
       </div>
       <div class="da-list-header context-${this.context}">
-        <da-breadcrumbs fullpath="${this.details.fullpath}" depth="${this.details.depth}"></da-breadcrumbs>
+        <da-breadcrumbs .details="${this.details}"></da-breadcrumbs>
         ${this._tabItems.map((tab) => html`
           <div class="da-list-header-action" data-visible="${tab.selected}">
             ${tab.id === 'browse' ? this.renderNew() : this.renderSearch()}