diff --git a/.husky/pre-commit b/.husky/pre-commit index 1c0ebcad2..2312dc587 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1 @@ npx lint-staged -npm test diff --git a/nx/blocks/loc/connectors/glaas/api.js b/nx/blocks/loc/connectors/glaas/api.js index 5af3a209e..5b10caed0 100644 --- a/nx/blocks/loc/connectors/glaas/api.js +++ b/nx/blocks/loc/connectors/glaas/api.js @@ -1,4 +1,4 @@ -import makeBatches from '../../../../public/utils/batch.js'; +import makeBatches from '../../../../../nx2/public/utils/batch.js'; export async function throttle(ms = 500) { return new Promise((resolve) => { diff --git a/nx/blocks/loc/connectors/glaas/index.js b/nx/blocks/loc/connectors/glaas/index.js index 6e020c1d4..4c092c25a 100644 --- a/nx/blocks/loc/connectors/glaas/index.js +++ b/nx/blocks/loc/connectors/glaas/index.js @@ -1,4 +1,4 @@ -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; import { checkSession, createTask, addAssets, updateStatus, getTask, downloadAsset, prepareTargetPreview, getGlaasFilename, diff --git a/nx/blocks/loc/connectors/glaas/multimodalApi.js b/nx/blocks/loc/connectors/glaas/multimodalApi.js index a15095d10..b390eb1e7 100644 --- a/nx/blocks/loc/connectors/glaas/multimodalApi.js +++ b/nx/blocks/loc/connectors/glaas/multimodalApi.js @@ -1,6 +1,6 @@ -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { Queue } from '../../../../public/utils/tree.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; import { buildGlaasCreateMetadata, getOpts, glaasSourcePreviewUrl, throttle, } from './api.js'; @@ -430,7 +430,7 @@ const CONTENT_DA_LIVE_ORIGIN = `https://${CONTENT_DA_LIVE}`; /** Map delivery URL to DA Admin source (same path after /source/). */ export function contentDaLiveToDaSourceUrl(imageUrl) { - return imageUrl.replace(CONTENT_DA_LIVE_ORIGIN, `${DA_ORIGIN}/source`); + return imageUrl.replace(CONTENT_DA_LIVE_ORIGIN, `${DA_ADMIN}/source`); } export function contentDaLivePathKey(href) { @@ -650,7 +650,7 @@ async function fetchMultimodalImage({ imageIndex, imageUrl, logRequest }) { logRequest?.('fetch-image', { imageIndex, contentDaLiveUrl: imageUrl, daSourceUrl: imageSourceUrl }); let imageResp; try { - imageResp = await daFetch(imageSourceUrl); + imageResp = await daFetch({ url: imageSourceUrl }); } catch { return { error: 'Error fetching content.da.live image.', step: `fetch-image-${imageIndex}` }; } @@ -913,7 +913,7 @@ export async function postImageToDaMedia({ const body = new FormData(); body.append('data', data, mediaPath.split('/').pop()); try { - const resp = await daFetch(`${DA_ORIGIN}/media/${org}/${site}${mediaPath}`, { method: 'POST', body }); + const resp = await daFetch({ url: `${DA_ADMIN}/media/${org}/${site}${mediaPath}`, opts: { method: 'POST', body } }); if (!resp.ok) { if (resp.status === 413) { return skippedOversizedMediaUpload({ glaasName, sizeCheck }); diff --git a/nx/blocks/loc/connectors/glaas/translationMetadata.js b/nx/blocks/loc/connectors/glaas/translationMetadata.js index 177c20d7f..b622df04f 100644 --- a/nx/blocks/loc/connectors/glaas/translationMetadata.js +++ b/nx/blocks/loc/connectors/glaas/translationMetadata.js @@ -1,5 +1,5 @@ -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; const BLOCK_SCHEMA_PATH = '/.da/block-schema.json'; const SEO_GLOSSARY_PATH = '/.da/seo/glossary.json'; @@ -80,9 +80,9 @@ export function parseBlockSchema(schemaData) { } async function fetchJson(org, site, relativePath) { - const url = `${DA_ORIGIN}/source/${org}/${site}${relativePath}`; + const url = `${DA_ADMIN}/source/${org}/${site}${relativePath}`; try { - const resp = await daFetch(url); + const resp = await daFetch({ url }); if (!resp.ok) return null; return resp.json(); } catch (error) { @@ -112,17 +112,17 @@ export async function fetchKeywordsFile(org, site, pagePath) { const cleanPath = pagePath.replace(/\.html$/, ''); const keywordsPath = `${cleanPath}-keywords.json`; // Try primary path - let url = `${DA_ORIGIN}/source/${org}/${site}${keywordsPath}`; + let url = `${DA_ADMIN}/source/${org}/${site}${keywordsPath}`; try { - const resp = await daFetch(url); + const resp = await daFetch({ url }); if (resp.ok) { return resp.json(); } // If 404 and path contains /langstore/, try fallback if (resp.status === 404 && keywordsPath.includes('/langstore/')) { const fallbackPath = keywordsPath.replace(/\/langstore\/[^/]+\//, '/'); - url = `${DA_ORIGIN}/source/${org}/${site}${fallbackPath}`; - const fallbackResp = await daFetch(url); + url = `${DA_ADMIN}/source/${org}/${site}${fallbackPath}`; + const fallbackResp = await daFetch({ url }); if (fallbackResp.ok) { return fallbackResp.json(); } diff --git a/nx/blocks/loc/connectors/google/index.js b/nx/blocks/loc/connectors/google/index.js index e972bc65b..0c92f28b6 100644 --- a/nx/blocks/loc/connectors/google/index.js +++ b/nx/blocks/loc/connectors/google/index.js @@ -1,5 +1,5 @@ import { addDnt, removeDnt } from '../../dnt/dnt.js'; -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; import { convertPath } from '../../utils/utils.js'; const MAX_LENGTH = 5000; diff --git a/nx/blocks/loc/connectors/smartling/index.js b/nx/blocks/loc/connectors/smartling/index.js index bf58b5890..d38b42359 100644 --- a/nx/blocks/loc/connectors/smartling/index.js +++ b/nx/blocks/loc/connectors/smartling/index.js @@ -1,4 +1,4 @@ -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; import { addDnt, removeDnt } from '../../dnt/dnt.js'; export const dnt = { addDnt }; diff --git a/nx/blocks/loc/connectors/trados/auth.js b/nx/blocks/loc/connectors/trados/auth.js index cb638226b..83cddc504 100644 --- a/nx/blocks/loc/connectors/trados/auth.js +++ b/nx/blocks/loc/connectors/trados/auth.js @@ -1,4 +1,4 @@ -import { daFetch } from '../../../../utils/daFetch.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; const LOGIN_ORIGIN = 'https://da-etc.adobeaem.workers.dev'; const TOKEN_BUFFER = 300000; // 5 min buffer before expiry @@ -32,7 +32,7 @@ export async function getAccessToken(service) { const opts = { method: 'POST' }; - const resp = await daFetch(`${LOGIN_ORIGIN}/${org}/sites/${site}/integrations/trados/login`, opts); + const resp = await daFetch({ url: `${LOGIN_ORIGIN}/${org}/sites/${site}/integrations/trados/login`, opts }); if (!resp.ok) return null; const { access_token: accessToken, expires_in: expiresIn } = await resp.json(); diff --git a/nx/blocks/loc/connectors/trados/index.js b/nx/blocks/loc/connectors/trados/index.js index af6af2d23..6738fb342 100644 --- a/nx/blocks/loc/connectors/trados/index.js +++ b/nx/blocks/loc/connectors/trados/index.js @@ -1,4 +1,4 @@ -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; import { addDnt, removeDnt } from '../../dnt/dnt.js'; import authReady, { getAccessToken } from './auth.js'; import { corsFetch } from './utils.js'; diff --git a/nx/blocks/loc/loc.css b/nx/blocks/loc/loc.css index 1b6565523..627359f52 100644 --- a/nx/blocks/loc/loc.css +++ b/nx/blocks/loc/loc.css @@ -1,11 +1,11 @@ :host { display: block; color: var(--s2-gray-900); - font-size: var(--type-body-s-size); + font-size: var(--s2-body-size-s); } .nx-loc-step { display: block; - max-width: var(--grid-container-width); - margin: 0 auto var(--spacing-500) auto; + max-width: var(--se-grid-container-width); + margin: 0 auto var(--s2-spacing-500) auto; } diff --git a/nx/blocks/loc/loc.js b/nx/blocks/loc/loc.js index e385ec5b2..ac3b990be 100644 --- a/nx/blocks/loc/loc.js +++ b/nx/blocks/loc/loc.js @@ -1,9 +1,6 @@ import { LitElement, html, nothing } from 'da-lit'; -import { getConfig } from '../../scripts/nexter.js'; -import getStyle from '../../utils/styles.js'; import { getHashDetails, loadProject, updateProject } from './utils/utils.js'; - -import '../../public/sl/components.js'; +import { loadStyle } from '../../../nx2/scripts/nx.js'; import './views/header/header.js'; import './views/steps/steps.js'; @@ -18,11 +15,11 @@ import './views/rollout/rollout.js'; import './views/complete/complete.js'; import './views/url-details/url-details.js'; +import '../../../nx2/public/sl/components.js'; + const EL_NAME = 'nx-loc'; -const { nxBase: nx } = getConfig(); -const sl = await getStyle(`${nx}/public/sl/styles.css`); -const styles = await getStyle(import.meta.url); +const styles = await loadStyle(import.meta.url); class NxLoc extends LitElement { static properties = { @@ -36,7 +33,7 @@ class NxLoc extends LitElement { connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [sl, styles]; + this.shadowRoot.adoptedStyleSheets = [styles]; } update(props) { @@ -178,7 +175,7 @@ function handleHashCallback() { } export default function init(el) { - el.innerHTML = ''; + el.replaceChildren(); handleHashCallback(); setup(el); window.addEventListener('hashchange', () => { setup(el); }); diff --git a/nx/blocks/loc/project/index.js b/nx/blocks/loc/project/index.js index 5e9ebe698..2baa3a15b 100644 --- a/nx/blocks/loc/project/index.js +++ b/nx/blocks/loc/project/index.js @@ -1,8 +1,8 @@ -import getElementMetadata from '../../../utils/getElementMetadata.js'; +import getElementMetadata from '../../../../nx2/utils/getElementMetadata.js'; import { regionalDiff, removeLocTags } from '../regional-diff/regional-diff.js'; -import { daFetch, saveToDa } from '../../../utils/daFetch.js'; -import { DA_ORIGIN } from '../../../public/utils/constants.js'; -import { Queue } from '../../../public/utils/tree.js'; +import { daFetch, source as daSource } from '../../../../nx2/utils/api.js'; +import { DA_ADMIN } from '../../../../nx2/utils/utils.js'; +import { Queue } from '../../../../nx2/public/utils/tree.js'; // Max concurrent /source/ reads from da-admin. Prevents flooding da-admin // with OPTIONS+GET bursts during content scans (translate, rollout, validate). @@ -28,7 +28,7 @@ let projPath; let projJson; async function fetchData(path) { - const resp = await daFetch(path); + const resp = await daFetch({ url: path }); if (!resp.ok) return null; return resp.json(); } @@ -88,7 +88,7 @@ export async function detectService(config, env = 'stage') { export async function getDetails() { projPath = window.location.hash.replace('#', ''); - const data = await fetchData(`${DA_ORIGIN}/source${projPath}.json`); + const data = await fetchData(`${DA_ADMIN}/source${projPath}.json`); return data; } @@ -110,7 +110,7 @@ export async function saveStatus(json) { const file = new Blob([JSON.stringify(proj)], { type: 'application/json' }); body.append('data', file); const opts = { body, method: 'POST' }; - const resp = await daFetch(`${DA_ORIGIN}/source${projPath}.json`, opts); + const resp = await daFetch({ url: `${DA_ADMIN}/source${projPath}.json`, opts }); if (!resp.ok) return { error: 'Could not update project' }; return json; } @@ -125,7 +125,7 @@ async function saveVersion(path, label) { try { const opts = { method: 'POST' }; if (label) opts.body = JSON.stringify({ label }); - await daFetch(`${DA_ORIGIN}/versionsource${path}`, opts); + await daFetch({ url: `${DA_ADMIN}/versionsource${path}`, opts }); } finally { versionSaving.delete(path); } @@ -146,7 +146,7 @@ function collapseInnerTextSpaces(html) { const getHtml = async (path, html) => { const fetchHtml = async () => { - const res = await daFetch(`${DA_ORIGIN}/source${path}`); + const res = await daFetch({ url: `${DA_ADMIN}/source${path}` }); if (!res.ok) return null; const str = await res.text(); return str; @@ -163,6 +163,43 @@ const getDaUrl = (url) => { return { org, repo, pathname }; }; +function replaceHtml(text, fromOrg, fromRepo, options = {}) { + const { daMetadata = {}, replaceRelative = true } = options; + let inner = text; + + if (fromOrg && fromRepo && replaceRelative) { + const fromOrigin = `https://main--${fromRepo}--${fromOrg}.aem.live`; + inner = text + .replaceAll('./media', `${fromOrigin}/media`) + .replaceAll('href="/', `href="${fromOrigin}/`); + } + + let metadataHTML = ''; + if (Object.keys(daMetadata).length > 0) { + const daRows = Object.entries(daMetadata) + .map(([key, value]) => { + const textContent = value?.text ?? value ?? ''; + return `
${key}
${textContent}
`; + }) + .join(''); + metadataHTML = `\n
${daRows}
\n`; + } + + return ` + +
+
${inner}
+ ${metadataHTML} + + `; +} + +function saveHtml(url, content, { daMetadata = {}, replaceRelative = false } = {}) { + const { org, repo, pathname } = getDaUrl(url); + const body = replaceHtml(content, org, repo, { daMetadata, replaceRelative }); + return daSource.save({ org, site: repo, path: `${pathname}.html`, body }); +} + export async function overwriteCopy(url, title) { let resp; if (url.sourceContent) { @@ -173,7 +210,7 @@ export async function overwriteCopy(url, title) { body: new FormData(), }; opts.body.append('data', blob); - resp = await daFetch(`${DA_ORIGIN}/source${url.destination}`, opts); + resp = await daFetch({ url: `${DA_ADMIN}/source${url.destination}`, opts }); } else { const srcHtml = await getHtml(url.source); if (srcHtml) { @@ -181,11 +218,7 @@ export async function overwriteCopy(url, title) { const daMetadata = getElementMetadata(srcHtml.querySelector(DA_METADATA_SELECTOR)); delete daMetadata?.acceptedhashes; delete daMetadata?.rejectedhashes; - resp = await saveToDa( - srcHtml.querySelector('main').innerHTML, - getDaUrl(url), - { daMetadata, replaceRelative: false }, - ); + resp = await saveHtml(url, srcHtml.querySelector('main').innerHTML, { daMetadata }); } } @@ -245,15 +278,14 @@ export async function rolloutCopy( if (labelUpstream) daMetadata['diff-label-upstream'] = labelUpstream; return new Promise((resolve) => { - const daUrl = getDaUrl(url); - const savePromise = saveToDa(diffed.innerHTML, daUrl, { daMetadata, replaceRelative: false }); + const savePromise = saveHtml(url, diffed.innerHTML, { daMetadata }); const timedout = setTimeout(() => { url.status = 'timeout'; resolve('timeout'); }, DEFAULT_TIMEOUT); - savePromise.then(({ daResp }) => { + savePromise.then((daResp) => { clearTimeout(timedout); url.status = daResp.ok ? 'success' : 'error'; if (daResp.ok) { @@ -307,12 +339,7 @@ export async function mergeCopy( if (labelLocal) daMetadata['diff-label-local'] = labelLocal; if (labelUpstream) daMetadata['diff-label-upstream'] = labelUpstream; - const daUrl = getDaUrl(url); - const { daResp } = await saveToDa( - diffed.innerHTML, - daUrl, - { daMetadata, replaceRelative: false }, - ); + const daResp = await saveHtml(url, diffed.innerHTML, { daMetadata }); if (daResp.ok) { url.status = 'success'; saveVersion(url.destination, `${projectTitle} - Rolled Out`); @@ -338,8 +365,14 @@ export async function saveLangItems(sitePath, items, lang, removeDnt) { const body = new FormData(); body.append('data', blob); const opts = { body, method: 'POST' }; - const resp = await daFetch(`${DA_ORIGIN}/source${path}`, opts); - results[idx] = { success: resp.status }; + try { + const resp = await daFetch({ url: `${DA_ADMIN}/source${path}`, opts }); + results[idx] = resp.ok + ? { success: resp.status } + : { error: 'Could not save item.', status: resp.status }; + } catch (e) { + results[idx] = { error: e.message }; + } }, MAX_CONCURRENT_WRITES); await Promise.all(items.map((item, idx) => queue.push({ item, idx }))); diff --git a/nx/blocks/loc/project/project.css b/nx/blocks/loc/project/project.css index 171f597f3..e1292c10b 100644 --- a/nx/blocks/loc/project/project.css +++ b/nx/blocks/loc/project/project.css @@ -1,6 +1,6 @@ :host { display: block; - max-width: var(--grid-container-width); + max-width: var(--se-grid-container-width); margin: var(--spacing-800) auto; } diff --git a/nx/blocks/loc/project/project.js b/nx/blocks/loc/project/project.js index 21da62fd3..aa69e73db 100644 --- a/nx/blocks/loc/project/project.js +++ b/nx/blocks/loc/project/project.js @@ -1,8 +1,8 @@ -import { LitElement, html, nothing } from '../../../deps/lit/dist/index.js'; -import getStyle from '../../../utils/styles.js'; +import { LitElement, html, nothing } from 'da-lit'; +import { loadStyle } from '../../../../nx2/utils/utils.js'; import { getDetails } from './index.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); class NxLocProject extends LitElement { static properties = { diff --git a/nx/blocks/loc/project/views/rollout.js b/nx/blocks/loc/project/views/rollout.js index b71612e94..f493d86f9 100644 --- a/nx/blocks/loc/project/views/rollout.js +++ b/nx/blocks/loc/project/views/rollout.js @@ -1,7 +1,7 @@ -import { LitElement, html, nothing } from '../../../../deps/lit/dist/index.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import { getSvg } from '../../../../utils/svg.js'; -import getStyle from '../../../../utils/styles.js'; +import { LitElement, html, nothing } from 'da-lit'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { calculateTime, formatDate, @@ -11,16 +11,15 @@ import { saveStatus, timeoutWrapper, } from '../index.js'; -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const shared = await getStyle(`${nxBase}/blocks/loc/project/views/shared.js`); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const { nxBase: nx } = config; +const style = await loadStyle(import.meta.url); const ICONS = [ - `${nxBase}/blocks/loc/img/Smock_ChevronRight_18_N.svg`, + `${nx}/public/icons/Smock_ChevronRight_18_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocRollout extends LitElement { static properties = { @@ -32,8 +31,8 @@ class NxLocRollout extends LitElement { connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [style, shared, buttons]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.adoptedStyleSheets = [style]; + this.shadowRoot.append(...icons); setTimeout(() => { this.toggleExpand(); }, 100); } diff --git a/nx/blocks/loc/project/views/sync.js b/nx/blocks/loc/project/views/sync.js index 303cb8fae..3e21bfd89 100644 --- a/nx/blocks/loc/project/views/sync.js +++ b/nx/blocks/loc/project/views/sync.js @@ -1,19 +1,18 @@ -import { LitElement, html, nothing } from '../../../../deps/lit/dist/index.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import { LitElement, html, nothing } from 'da-lit'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { overwriteCopy, rolloutCopy, formatDate, MAX_CONCURRENT_WRITES, saveStatus } from '../index.js'; -import { Queue } from '../../../../public/utils/tree.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const shared = await getStyle(`${nxBase}/blocks/loc/project/views/shared.js`); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const { nxBase: nx } = config; +const style = await loadStyle(import.meta.url); const ICONS = [ - `${nxBase}/blocks/loc/img/Smock_Checkmark_18_N.svg`, - `${nxBase}/blocks/loc/img/Smock_ChevronRight_18_N.svg`, + `${nx}/public/icons/Smock_Checkmark_18_N.svg`, + `${nx}/public/icons/Smock_ChevronRight_18_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocSync extends LitElement { static properties = { @@ -28,8 +27,8 @@ class NxLocSync extends LitElement { connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [style, shared, buttons]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.adoptedStyleSheets = [style]; + this.shadowRoot.append(...icons); } async syncDone() { diff --git a/nx/blocks/loc/project/views/translate.css b/nx/blocks/loc/project/views/translate.css index 219c24952..b906eb83c 100644 --- a/nx/blocks/loc/project/views/translate.css +++ b/nx/blocks/loc/project/views/translate.css @@ -20,7 +20,7 @@ .da-error-box { color: #fff; width: 48px; - background: var(--s2-red); + background: var(--s2-red-900); font-family: monospace; font-size: 14px; font-weight: 700; diff --git a/nx/blocks/loc/project/views/translate.js b/nx/blocks/loc/project/views/translate.js index 8142fd9ca..7f19390a7 100644 --- a/nx/blocks/loc/project/views/translate.js +++ b/nx/blocks/loc/project/views/translate.js @@ -1,19 +1,17 @@ -import { LitElement, html, nothing } from '../../../../deps/lit/dist/index.js'; -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import { daFetch } from '../../../../utils/daFetch.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import { LitElement, html, nothing } from 'da-lit'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; +import { DA_ADMIN, loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { detectService, saveLangItems, saveStatus, formatDate } from '../index.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const shared = await getStyle(`${nxBase}/blocks/loc/project/views/shared.css`); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const { nxBase: nx } = config; +const style = await loadStyle(import.meta.url); const ICONS = [ - `${nxBase}/blocks/loc/img/Smock_ChevronRight_18_N.svg`, + `${nx}/public/icons/Smock_ChevronRight_18_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocTranslate extends LitElement { static properties = { @@ -29,8 +27,8 @@ class NxLocTranslate extends LitElement { connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [style, shared, buttons]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.adoptedStyleSheets = [style]; + this.shadowRoot.append(...icons); this.connectService(); this.formatUrls(); } @@ -151,9 +149,9 @@ class NxLocTranslate extends LitElement { } async getSiteConfig() { - let resp = await daFetch(`${DA_ORIGIN}/source/${this.state.org}/${this.state.site}/.da/translate.json`); + let resp = await daFetch({ url: `${DA_ADMIN}/source/${this.state.org}/${this.state.site}/.da/translate.json` }); if (!resp.ok) { - resp = await fetch(`${nxBase}/blocks/loc/setup/translate.json`); + resp = await fetch(`${nx}/blocks/loc/setup/translate.json`); } return resp.json(); } @@ -164,7 +162,7 @@ class NxLocTranslate extends LitElement { const siteConfig = await this.getSiteConfig(); await Promise.all(this.urls.map(async (url) => { - const resp = await daFetch(`${DA_ORIGIN}/source${url.srcPath}`); + const resp = await daFetch({ url: `${DA_ADMIN}/source${url.srcPath}` }); if (!resp.ok) { url.error = 'Error fetching document for DNT.'; url.status = 520; diff --git a/nx/blocks/loc/utils/utils.js b/nx/blocks/loc/utils/utils.js index 802b5c13c..9558112a6 100644 --- a/nx/blocks/loc/utils/utils.js +++ b/nx/blocks/loc/utils/utils.js @@ -1,12 +1,7 @@ -import { getConfig } from '../../../scripts/nexter.js'; -import { DA_ORIGIN } from '../../../public/utils/constants.js'; -import { daFetch } from '../../../utils/daFetch.js'; -import { loadIms } from '../../../utils/ims.js'; - -const { nxBase: nx } = getConfig(); +import { DA_ADMIN } from '../../../../nx2/utils/utils.js'; +import { daFetch, loadIms } from '../../../../nx2/utils/api.js'; const CONFIG_PATH = '/.da/translate.json'; -const CONFIG_PATH_V2 = '/.da/translate-v2.json'; export const VIEWS = [ 'dashboard', @@ -199,7 +194,7 @@ export async function fetchConfig(org, site) { const fetchConf = async (path) => { try { - const resp = await daFetch(path); + const resp = await daFetch({ url: path }); if (!resp.ok) return { error: 'Options not available.' }; return resp.json(); } catch { @@ -208,21 +203,17 @@ export async function fetchConfig(org, site) { }; // Attempt a site based config - let options = await fetchConf(`${DA_ORIGIN}/source/${org}/${site}${CONFIG_PATH}`); - - // Attempt the old V2 config path - if (options.error) { - options = await fetchConf(`${DA_ORIGIN}/source/${org}${CONFIG_PATH_V2}`); - } + let options = await fetchConf(`${DA_ADMIN}/source/${org}/${site}${CONFIG_PATH}`); // Attempt an org based config if (options.error) { - options = await fetchConf(`${DA_ORIGIN}/source/${org}${CONFIG_PATH}`); + options = await fetchConf(`${DA_ADMIN}/source/${org}${CONFIG_PATH}`); } // Fallback to zero config defaults if (options.error) { - options = await fetchConf(`${nx}/blocks/loc/connectors/google/translate.json`); + const fallbackUrl = new URL('../connectors/google/translate.json', import.meta.url).href; + options = await fetchConf(fallbackUrl); } CONFIG_CACHE = options; @@ -265,7 +256,7 @@ async function fetchProject({ path, updates, updateDocTitle = true }) { opts.body = body; } - const resp = await daFetch(`${DA_ORIGIN}/source${path}.json`, opts); + const resp = await daFetch({ url: `${DA_ADMIN}/source${path}.json`, opts }); if (!resp.ok) { if (resp.status === 401 || resp.status === 403) { const [org, site] = path.substring(1).split('/'); diff --git a/nx/blocks/loc/views/actions/actions.css b/nx/blocks/loc/views/actions/actions.css index 38f5f1d6b..4991f8db1 100644 --- a/nx/blocks/loc/views/actions/actions.css +++ b/nx/blocks/loc/views/actions/actions.css @@ -1,9 +1,9 @@ :host { display: block; - margin: 0 auto var(--spacing-400) auto; + margin: 0 auto var(--s2-spacing-400) auto; button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family); font-weight: 700; } @@ -22,7 +22,7 @@ font-weight: 700; font-size: 14px; flex: 1 1 auto; - border-radius: var(--s2-radius-100); + border-radius: var(--s2-corner-radius-500); background-color: var(--s2-blue-200); color: var(--s2-blue-1000); border: 1px solid var(--s2-blue-400); @@ -79,5 +79,6 @@ .icon { display: block; + fill: currentcolor; } } diff --git a/nx/blocks/loc/views/actions/actions.js b/nx/blocks/loc/views/actions/actions.js index 65a7e9973..e94db4f9e 100644 --- a/nx/blocks/loc/views/actions/actions.js +++ b/nx/blocks/loc/views/actions/actions.js @@ -1,17 +1,18 @@ import { LitElement, html, nothing } from 'da-lit'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { VIEWS } from '../../utils/steps.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = config; const ICONS = [ - `${nx}/img/icons/Smock_ChevronLeft_18_N.svg`, - `${nx}/img/icons/Smock_ChevronRight_18_N.svg`, + `${nx}/public/icons/Smock_ChevronLeft_18_N.svg`, + `${nx}/public/icons/Smock_ChevronRight_18_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocActions extends LitElement { static properties = { @@ -24,7 +25,7 @@ class NxLocActions extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); this.getActions(); } diff --git a/nx/blocks/loc/views/basics/basics.css b/nx/blocks/loc/views/basics/basics.css index 0810695b5..da00169a4 100644 --- a/nx/blocks/loc/views/basics/basics.css +++ b/nx/blocks/loc/views/basics/basics.css @@ -4,7 +4,7 @@ label { } .nx-loc-title-wrapper { - margin-bottom: var(--spacing-200); + margin-bottom: var(--s2-spacing-200); } .nx-loc-title-actions { @@ -24,8 +24,8 @@ sl-textarea { .error { align-content: center; padding: 6px 12px; - background: var(--s2-red); - border-radius: var(--s2-radius-100); + background: var(--s2-red-800); + border-radius: var(--s2-corner-radius-500); font-weight: 700; color: #fff; font-size: 14px; diff --git a/nx/blocks/loc/views/basics/basics.js b/nx/blocks/loc/views/basics/basics.js index 311f47884..8950c002f 100644 --- a/nx/blocks/loc/views/basics/basics.js +++ b/nx/blocks/loc/views/basics/basics.js @@ -1,8 +1,8 @@ import { LitElement, html } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; +import { loadStyle } from '../../../../../nx2/scripts/nx.js'; import formatBasics from './index.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); const MOCK_URLS = ''; // const MOCK_URLS = 'https://main--da-bacom--adobecom.aem.page/drafts/cmillar/loc-test/main-doc'; diff --git a/nx/blocks/loc/views/complete/complete.js b/nx/blocks/loc/views/complete/complete.js index 2989976e3..f4eb650e2 100644 --- a/nx/blocks/loc/views/complete/complete.js +++ b/nx/blocks/loc/views/complete/complete.js @@ -1,16 +1,16 @@ import { LitElement, html } from 'da-lit'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; -import loadScript from '../../../../utils/script.js'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle, loadScript } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = config; const ICONS = [ `${nx}/public/icons/S2_Icon_Emoji_20_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); let makeConfetti; @@ -20,7 +20,7 @@ class NxLocComplete extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); this.loadConfetti(); } diff --git a/nx/blocks/loc/views/dashboard/buttons.css b/nx/blocks/loc/views/dashboard/buttons.css new file mode 100644 index 000000000..aab84b87e --- /dev/null +++ b/nx/blocks/loc/views/dashboard/buttons.css @@ -0,0 +1,11 @@ +button, +input[type="submit"], +input[type="button"] { + background: none; + font-family: var(--s2-font-family); + display: inline-block; + font-style: normal; + font-weight: 700; + text-decoration: none; + cursor: pointer; +} diff --git a/nx/blocks/loc/views/dashboard/dashboard.css b/nx/blocks/loc/views/dashboard/dashboard.css index 0181e4abf..0a4981c70 100644 --- a/nx/blocks/loc/views/dashboard/dashboard.css +++ b/nx/blocks/loc/views/dashboard/dashboard.css @@ -2,10 +2,6 @@ svg { display: none; } -button { - font-family: var(--font-family); -} - .icon { display: block; width: 20px; @@ -29,8 +25,8 @@ p { gap: 24px; grid-template-columns: 1fr 180px 170px 210px 80px; background-color: var(--s2-gray-75); - border: 1px solid rgb(230 230 230); - border-radius: var(--s2-radius-100) var(--s2-radius-100) 0 0; + border: 1px solid var(--s2-gray-200); + border-radius: var(--s2-corner-radius-500) var(--s2-corner-radius-500) 0 0; p { font-weight: 700; @@ -55,9 +51,9 @@ ul { padding: 0; list-style: none; background-color: var(--s2-gray-50); - border: 1px solid rgb(230 230 230); + border: 1px solid var(--s2-gray-200); border-top: none; - border-radius: 0 0 var(--s2-radius-100) var(--s2-radius-100); + border-radius: 0 0 var(--s2-corner-radius-500) var(--s2-corner-radius-500); overflow: hidden; li { @@ -78,7 +74,7 @@ ul { position: absolute; content: ""; display: block; - background-color: rgb(230 230 230); + background-color: var(--s2-gray-200); height: 1px; left: 24px; right: 24px; @@ -94,14 +90,14 @@ ul { } &:hover { - background: rgb(228 240 255); + background: var(--s2-blue-200); z-index: 2; &::before, &::after { left: 0; right: 0; - background-color: rgb(22 122 243); + background-color: var(--s2-blue-900); } a { diff --git a/nx/blocks/loc/views/dashboard/dashboard.js b/nx/blocks/loc/views/dashboard/dashboard.js index 845f758ed..441cbccca 100644 --- a/nx/blocks/loc/views/dashboard/dashboard.js +++ b/nx/blocks/loc/views/dashboard/dashboard.js @@ -1,22 +1,26 @@ import { LitElement, html, nothing } from 'da-lit'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; -import { loadIms } from '../../../../utils/ims.js'; + +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; +import { loadIms } from '../../../../../nx2/utils/api.js'; + import { archiveProject, copyProject } from './index.js'; import './pagination.js'; import './filter-bar.js'; import createProjectData from './project-data.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); +const buttons = await loadStyle(new URL('./buttons.css', import.meta.url).href); -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = config; const ICONS = [ `${nx}/public/icons/S2_Icon_Copy_20_N.svg`, `${nx}/public/icons/S2_Icon_ProjectAddInto_20_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); const ITEMS_PER_PAGE = 25; const DRAFT_STATUS_HTML = html`

Draft

`; @@ -134,8 +138,8 @@ class NxLocDashboard extends LitElement { this._showTo = ITEMS_PER_PAGE; this._currentPage = 0; this._isLoading = true; - this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.adoptedStyleSheets = [buttons, style]; + this.shadowRoot.append(...icons); // not awaiting to not block UI this.ensureInitialized(); } diff --git a/nx/blocks/loc/views/dashboard/filter-bar.css b/nx/blocks/loc/views/dashboard/filter-bar.css index 25d6a4217..30cb784eb 100644 --- a/nx/blocks/loc/views/dashboard/filter-bar.css +++ b/nx/blocks/loc/views/dashboard/filter-bar.css @@ -9,7 +9,7 @@ svg { } input { - font-family: var(--body-font-family); + font-family: var(--s2-font-family); } .filter-bar { @@ -28,7 +28,7 @@ input { .search-input { flex: 1; padding: 8px 32px 8px 12px; - border: 1px solid #ccc; + border: 1px solid var(--s2-gray-400); border-radius: 4px; font-size: 1rem; } @@ -63,7 +63,7 @@ input { .date-picker { padding: 8px 16px; - border: 1px solid #ccc; + border: 1px solid var(--s2-gray-400); border-radius: 4px; font-weight: bold; text-transform: uppercase; @@ -71,26 +71,26 @@ input { .date-picker:focus { outline: none; - border-color: #007bff; + border-color: var(--s2-blue-900); } .search-input:focus { outline: none; - border-color: #007bff; + border-color: var(--s2-blue-900); } .filter-button { padding: 8px 12px; - border: 1px solid rgb(204 204 204); - background-color: rgb(255 255 255); + border: 1px solid var(--s2-gray-400); + background-color: var(--s2-gray-25); border-radius: 4px; cursor: pointer; } .filter-popup { position: absolute; - background-color: white; - border: 1px solid #ddd; + background-color: var(--s2-gray-25); + border: 1px solid var(--s2-gray-300); border-radius: 4px; box-shadow: 0 2px 6px rgb(0 0 0 / 20%); padding: 16px; @@ -134,7 +134,7 @@ input { .apply-filter-button { padding: 10px; border: none; - background-color: #007bff; + background-color: var(--s2-blue-900); color: #fff; border-radius: 4px; cursor: pointer; @@ -144,7 +144,7 @@ input { } .apply-filter-button:hover { - background-color: #0056b3; + background-color: var(--s2-blue-1000); } .filter-bar .toggle-switch { @@ -171,7 +171,7 @@ input { display: inline-block; width: 50px; height: 24px; - background-color: #ccc; + background-color: var(--s2-gray-400); border-radius: 24px; cursor: pointer; transition: background-color 0.3s ease; @@ -190,7 +190,7 @@ input { } .filter-bar .toggle-switch input:checked + .slider { - background-color: #007bff; + background-color: var(--s2-blue-900); } .filter-bar .toggle-switch input:checked + .slider::before { @@ -199,10 +199,10 @@ input { .filter-bar .toggle-label { font-size: 0.9rem; - color: #333; + color: var(--s2-gray-800); font-weight: bold; } .filter-bar .toggle-switch label:hover .slider { - background-color: #0056b3; + background-color: var(--s2-blue-1000); } diff --git a/nx/blocks/loc/views/dashboard/filter-bar.js b/nx/blocks/loc/views/dashboard/filter-bar.js index 3a006f16d..72d6c0181 100644 --- a/nx/blocks/loc/views/dashboard/filter-bar.js +++ b/nx/blocks/loc/views/dashboard/filter-bar.js @@ -1,15 +1,16 @@ -import { LitElement, html, nothing } from '../../../../deps/lit/lit-core.min.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import { LitElement, html, nothing } from 'da-lit'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const { nxBase: nx } = config; +const style = await loadStyle(import.meta.url); +const buttons = await loadStyle(new URL('./buttons.css', import.meta.url).href); const FILTER_BAR_ICONS = [ - `${nxBase}/blocks/loc/img/clear.svg`, + `${nx}/public/icons/clear.svg`, ]; +const icons = await loadIcons({ paths: FILTER_BAR_ICONS }); const PROJECT_STATUSES = ['not started', 'in progress', 'complete', 'cancelled']; @@ -121,8 +122,8 @@ class NxFilterBar extends LitElement { connectedCallback() { super.connectedCallback(); window.addEventListener('click', this._boundHandleOutsideClick); - this.shadowRoot.adoptedStyleSheets = [style, buttons]; - getSvg({ parent: this.shadowRoot, paths: FILTER_BAR_ICONS }); + this.shadowRoot.adoptedStyleSheets = [buttons, style]; + this.shadowRoot.append(...icons); } disconnectedCallback() { @@ -164,7 +165,7 @@ class NxFilterBar extends LitElement {
- + ${this.searchQuery ? html`` : nothing}
@@ -202,9 +203,9 @@ class NxFilterBar extends LitElement { - + to - +
diff --git a/nx/blocks/loc/views/dashboard/index.js b/nx/blocks/loc/views/dashboard/index.js index 0db0637ca..0a45c9ce7 100644 --- a/nx/blocks/loc/views/dashboard/index.js +++ b/nx/blocks/loc/views/dashboard/index.js @@ -1,5 +1,5 @@ -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; const TRANSLATION_PATH_ACTIVE = 'translation/active'; const TRANSLATION_PATH_ARCHIVE = 'translation/archive'; @@ -11,7 +11,7 @@ const TRANSLATION_PATH_ARCHIVE = 'translation/archive'; * @returns {Promise<{ok: boolean, status: number, data?: Object}>} */ export async function fetchProject(projectPath, options = {}) { - const resp = await daFetch(`${DA_ORIGIN}/source${projectPath}`, options); + const resp = await daFetch({ url: `${DA_ADMIN}/source${projectPath}`, opts: options }); if (!resp.ok) { return { ok: false, status: resp.status, statusText: resp.statusText }; @@ -58,7 +58,7 @@ export async function copyProject(project, email) { // Replace the last path segment (timestamp) with the new timestamp const newPath = path.substring(0, path.lastIndexOf('/') + 1) + newTimestamp; - await daFetch(`${DA_ORIGIN}/source${newPath}.json`, { body, method: 'POST' }); + await daFetch({ url: `${DA_ADMIN}/source${newPath}.json`, opts: { body, method: 'POST' } }); // Return just the path and timestamp for the new project return { path: newPath, lastModified: newTimestamp, newProject }; @@ -71,6 +71,6 @@ export async function archiveProject(project) { const newPath = path.replace(TRANSLATION_PATH_ACTIVE, TRANSLATION_PATH_ARCHIVE); formData.append('destination', `${newPath}.json`); const opts = { body: formData, method: 'POST' }; - await daFetch(`${DA_ORIGIN}/move${path}.json`, opts); + await daFetch({ url: `${DA_ADMIN}/move${path}.json`, opts }); return newPath; } diff --git a/nx/blocks/loc/views/dashboard/pagination.css b/nx/blocks/loc/views/dashboard/pagination.css index 3c63fcb6d..5ef176651 100644 --- a/nx/blocks/loc/views/dashboard/pagination.css +++ b/nx/blocks/loc/views/dashboard/pagination.css @@ -8,7 +8,7 @@ .pagination-info { font-size: 0.9rem; - color: #555; + color: var(--s2-gray-700); } .pagination-controls { @@ -18,7 +18,7 @@ .pagination-ellipsis { padding: 8px 2px; - background-color: #fff; + background-color: var(--s2-gray-25); border-radius: 4px; text-align: center; white-space: nowrap; @@ -29,8 +29,8 @@ .pagination-btn { padding: 8px 2px; - border: 1px solid #ccc; - background-color: #fff; + border: 1px solid var(--s2-gray-400); + background-color: var(--s2-gray-25); border-radius: 4px; cursor: pointer; text-align: center; @@ -44,7 +44,7 @@ } .pagination-btn:hover { - background-color: #f3f3f3; + background-color: var(--s2-gray-75); } .pagination-btn.active { diff --git a/nx/blocks/loc/views/dashboard/pagination.js b/nx/blocks/loc/views/dashboard/pagination.js index 1c1e0a5b1..fd8af645d 100644 --- a/nx/blocks/loc/views/dashboard/pagination.js +++ b/nx/blocks/loc/views/dashboard/pagination.js @@ -1,10 +1,8 @@ -import { LitElement, html, nothing } from '../../../../deps/lit/lit-core.min.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; +import { LitElement, html, nothing } from 'da-lit'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const style = await loadStyle(import.meta.url); +const buttons = await loadStyle(new URL('./buttons.css', import.meta.url).href); const ELLIPSIS_HTML = html`. . .`; @@ -25,7 +23,7 @@ class NxPagination extends LitElement { async connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [style, buttons]; + this.shadowRoot.adoptedStyleSheets = [buttons, style]; } get totalPages() { diff --git a/nx/blocks/loc/views/dashboard/project-data.js b/nx/blocks/loc/views/dashboard/project-data.js index cea5cdfa2..3c245a49a 100644 --- a/nx/blocks/loc/views/dashboard/project-data.js +++ b/nx/blocks/loc/views/dashboard/project-data.js @@ -15,11 +15,13 @@ * from Adobe. ************************************************************************* */ -import { Queue } from '../../../../public/utils/tree.js'; -import createProjectCache from './project-cache.js'; -import { daFetch } from '../../../../utils/daFetch.js'; -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; + +import { Queue } from '../../../../../nx2/public/utils/tree.js'; + import { fetchProject } from './index.js'; +import createProjectCache from './project-cache.js'; import { MAX_CONCURRENT_READS } from '../../project/index.js'; const createProjectData = async ({ @@ -75,7 +77,7 @@ const createProjectData = async ({ }; const fetchProjectList = async (signal, type) => { - const resp = await daFetch(`${DA_ORIGIN}/list/${org}/${site}/.da/translation/${type}`, { signal }); + const resp = await daFetch({ url: `${DA_ADMIN}/list/${org}/${site}/.da/translation/${type}`, opts: { signal } }); if (!resp.ok) { setError(resp.status, resp.statusText); return { projects: [] }; diff --git a/nx/blocks/loc/views/header/header.css b/nx/blocks/loc/views/header/header.css index 43e77456e..0fdd24ad4 100644 --- a/nx/blocks/loc/views/header/header.css +++ b/nx/blocks/loc/views/header/header.css @@ -17,7 +17,7 @@ display: flex; justify-content: space-between; position: relative; - max-width: var(--grid-container-width); + max-width: var(--se-grid-container-width); margin: 0 auto; width: 100%; } @@ -35,7 +35,7 @@ } .heading { - font-size: var(--s2-font-size-800); + font-size: var(--s2-heading-size-xl); font-weight: 400; margin: 0; } diff --git a/nx/blocks/loc/views/header/header.js b/nx/blocks/loc/views/header/header.js index 724a1571d..6433f66f3 100644 --- a/nx/blocks/loc/views/header/header.js +++ b/nx/blocks/loc/views/header/header.js @@ -1,8 +1,8 @@ import { LitElement, html, nothing } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; const root = import.meta.url.replace('/views/header/header.js', ''); -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); class NxLocHeader extends LitElement { static properties = { diff --git a/nx/blocks/loc/views/options/options.css b/nx/blocks/loc/views/options/options.css index 075e20c15..6e5072e40 100644 --- a/nx/blocks/loc/views/options/options.css +++ b/nx/blocks/loc/views/options/options.css @@ -31,8 +31,8 @@ sl-select { .detail-card { flex: 1; - border-radius: var(--s2-radius-100); - background-color: #efefef; + border-radius: var(--s2-corner-radius-500); + background-color: var(--s2-gray-100); padding: 24px; } @@ -45,7 +45,7 @@ sl-select { } .detail-card-locales { - background-color: var(--s2-fuchsia-300); + background-color: var(--s2-pink-300); } .detail-card-translate { @@ -53,7 +53,7 @@ sl-select { } .detail-card-rollout { - background-color: var(--s2-turquoise-300); + background-color: var(--s2-seafoam-300); } } @@ -65,9 +65,9 @@ sl-select { .nx-loc-options-panel { padding: 32px; - background-color: rgb(250 250 250); - border: 1px solid rgb(230 230 230); - border-radius: var(--s2-radius-100); + background-color: var(--s2-gray-50); + border: 1px solid var(--s2-gray-200); + border-radius: var(--s2-corner-radius-500); &.nx-loc-options-panel-languages { padding: 0 32px 32px; @@ -103,7 +103,7 @@ sl-select { } .lang-group { - border-bottom: 1px solid rgb(190 190 190); + border-bottom: 1px solid var(--s2-gray-400); padding: 32px 0; &:last-child { @@ -130,7 +130,7 @@ sl-select { } .locale-heading { - margin: 0 0 var(--spacing-200); + margin: 0 0 var(--s2-spacing-200); } } } @@ -141,23 +141,23 @@ sl-select { padding: 0; display: flex; flex-wrap: wrap; - gap: var(--spacing-200); + gap: var(--s2-spacing-200); } .locale-list button { - border-radius: var(--s2-radius-100); - background: rgb(225 225 225); - border: 1px solid rgb(225 225 225); + border-radius: var(--s2-corner-radius-500); + background: var(--s2-gray-200); + border: 1px solid var(--s2-gray-200); line-height: 1; padding: 6px 8px 6px 12px; font-size: 12px; display: flex; align-items: center; - gap: var(--spacing-100); + gap: var(--s2-spacing-100); } .locale-list li.inactive button { - background: #fff; + background: var(--s2-gray-25); } .locale-list span { diff --git a/nx/blocks/loc/views/options/options.js b/nx/blocks/loc/views/options/options.js index 47c75059e..cd1bc6d2d 100644 --- a/nx/blocks/loc/views/options/options.js +++ b/nx/blocks/loc/views/options/options.js @@ -1,18 +1,19 @@ import { LitElement, html, nothing } from 'da-lit'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import nxConfig from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { fetchConfig } from '../../utils/utils.js'; import { getAllActions, formatLangs, formatConfig, finalizeOptions, getCustomOptions } from './utils/utils.js'; -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = nxConfig; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); const ICONS = [ - `${nx}/blocks/loc/img/Smock_Close_18_N.svg`, - `${nx}/blocks/loc/img/Smock_Add_18_N.svg`, + `${nx}/public/icons/Smock_Close_18_N.svg`, + `${nx}/public/icons/Smock_Add_18_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocOptions extends LitElement { static properties = { @@ -30,7 +31,7 @@ class NxLocOptions extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); this._message = { text: 'Starting the project will lock sources, options, and languages.' }; this.formatOptions(); } diff --git a/nx/blocks/loc/views/rollout/index.js b/nx/blocks/loc/views/rollout/index.js index e0cc3f190..9d23ba9ee 100644 --- a/nx/blocks/loc/views/rollout/index.js +++ b/nx/blocks/loc/views/rollout/index.js @@ -1,6 +1,6 @@ -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { Queue } from '../../../../public/utils/tree.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; import { MAX_CONCURRENT_READS, MAX_CONCURRENT_WRITES, mergeCopy, overwriteCopy } from '../../project/index.js'; import { convertPath, createSnapshotPrefix } from '../../utils/utils.js'; @@ -30,7 +30,7 @@ function getRespStatusText(status) { async function fetchLangSources(lang, urls) { const fetchUrl = async (url) => { - const resp = await daFetch(`${DA_ORIGIN}/source${url.source}`); + const resp = await daFetch({ url: `${DA_ADMIN}/source${url.source}` }); if (!resp.ok) { url.error = `Error fetching content from ${url.source} - ${getRespStatusText(resp.status)}`; return url; diff --git a/nx/blocks/loc/views/rollout/rollout.css b/nx/blocks/loc/views/rollout/rollout.css index f51afacef..b36274d5d 100644 --- a/nx/blocks/loc/views/rollout/rollout.css +++ b/nx/blocks/loc/views/rollout/rollout.css @@ -3,7 +3,7 @@ svg { } button { - font-family: var(--font-family); + font-family: var(--s2-font-family); } p { @@ -27,14 +27,15 @@ nx-loc-actions { text-indent: -1000px; overflow: hidden; transition: transform 0.2s ease-in-out; - background: url("/blocks/browse/img/Smock_ChevronRight_18_N.svg") center center / 18px no-repeat; + background-color: currentcolor; + mask: url("/blocks/browse/img/Smock_ChevronRight_18_N.svg") center / 18px no-repeat; } .summary { display: grid; grid-template-columns: repeat(4, 1fr); - gap: var(--spacing-400); - margin: var(--spacing-400) 0; + gap: var(--s2-spacing-400); + margin: var(--s2-spacing-400) 0; .summary-card { display: flex; @@ -44,7 +45,7 @@ nx-loc-actions { border: none; border-radius: 18px; overflow: hidden; - padding: var(--spacing-400) var(--spacing-300) var(--spacing-400) var(--spacing-400); + padding: var(--s2-spacing-400) var(--s2-spacing-300) var(--s2-spacing-400) var(--s2-spacing-400); margin: 0; cursor: pointer; border-width: 3px; @@ -108,7 +109,7 @@ nx-loc-actions { } p:last-child { - font-size: var(--s2-font-size-600); + font-size: var(--s2-heading-size-l); } } } @@ -138,8 +139,8 @@ ul.lang-list { padding: 0; list-style: none; background-color: var(--s2-gray-50); - border: 1px solid rgb(230 230 230); - border-radius: var(--s2-radius-100); + border: 1px solid var(--s2-gray-200); + border-radius: var(--s2-corner-radius-500); overflow: hidden; li.lang-item { @@ -151,7 +152,7 @@ ul.lang-list { position: absolute; content: ""; display: block; - background-color: rgb(230 230 230); + background-color: var(--s2-gray-200); height: 1px; left: 24px; right: 24px; @@ -175,7 +176,7 @@ ul.lang-list { &::after { left: 0; right: 0; - background-color: rgb(22 122 243); + background-color: var(--s2-blue-900); } } } @@ -214,7 +215,7 @@ ul.lang-list { padding: 12px 24px; &:nth-child(even) { - background-color: rgb(0 0 0 / 2%); + background-color: light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 6%)); } } diff --git a/nx/blocks/loc/views/rollout/rollout.js b/nx/blocks/loc/views/rollout/rollout.js index aaf51a0d1..7ac8bb81a 100644 --- a/nx/blocks/loc/views/rollout/rollout.js +++ b/nx/blocks/loc/views/rollout/rollout.js @@ -1,17 +1,18 @@ import { LitElement, html, nothing } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import { getSvg } from '../../../../utils/svg.js'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { sortLangs, rolloutLang, getFilteredLangs, getSummaryCards } from './index.js'; -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = config; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); const ICONS = [ `${nx}/public/icons/S2_Icon_CheckmarkCircleGreen_20_N.svg`, `${nx}/public/icons/S2_Icon_AlertDiamondOrange_20_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocRollout extends LitElement { static properties = { @@ -28,7 +29,7 @@ class NxLocRollout extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); this._langs = this.project.langs; this._urls = this.project.urls; this._sortedLangs = sortLangs(this._langs); diff --git a/nx/blocks/loc/views/steps/steps.css b/nx/blocks/loc/views/steps/steps.css index 3a6f33f0d..a3955a970 100644 --- a/nx/blocks/loc/views/steps/steps.css +++ b/nx/blocks/loc/views/steps/steps.css @@ -6,7 +6,7 @@ } button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family); font-weight: 700; } @@ -20,9 +20,9 @@ } .nx-steps-container { - max-width: var(--grid-container-width); + max-width: var(--se-grid-container-width); margin: 0 auto; - padding: var(--spacing-600) 0; + padding: var(--s2-spacing-600) 0; display: flex; justify-content: space-between; align-items: center; @@ -65,7 +65,7 @@ color: var(--s2-gray-500); &.filled { - color: #000; + color: var(--s2-gray-900); } &.highlight { @@ -98,7 +98,7 @@ font-weight: 700; font-size: 14px; flex: 1 1 auto; - border-radius: var(--s2-radius-100); + border-radius: var(--s2-corner-radius-500); background-color: var(--s2-blue-200); color: var(--s2-blue-1000); border: 1px solid var(--s2-blue-400); @@ -111,8 +111,8 @@ } .nx-loc-actions-header { - max-width: var(--grid-container-width); - margin: 24px auto var(--spacing-500) auto; + max-width: var(--se-grid-container-width); + margin: 24px auto var(--s2-spacing-500) auto; padding: 0 12px; display: flex; justify-content: space-between; diff --git a/nx/blocks/loc/views/steps/steps.js b/nx/blocks/loc/views/steps/steps.js index 2f809e9a5..9bfc2a76e 100644 --- a/nx/blocks/loc/views/steps/steps.js +++ b/nx/blocks/loc/views/steps/steps.js @@ -1,15 +1,15 @@ import { LitElement, html, nothing } from 'da-lit'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { getSvg } from '../../../../utils/svg.js'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; import { VIEWS } from '../../utils/steps.js'; -const { nxBase: nx } = getConfig(); -const style = await getStyle(import.meta.url); +const { nxBase: nx } = config; +const style = await loadStyle(import.meta.url); const ICONS = [ - `${nx}/img/icons/Smock_ChevronLeft_18_N.svg`, - `${nx}/img/icons/Smock_ChevronRight_18_N.svg`, + `${nx}/public/icons/Smock_ChevronLeft_18_N.svg`, + `${nx}/public/icons/Smock_ChevronRight_18_N.svg`, `${nx}/public/icons/S2_Icon_Archive_20_N.svg`, `${nx}/public/icons/S2_Icon_Emoji_20_N.svg`, `${nx}/public/icons/S2_Icon_FileConvert_20_N.svg`, @@ -20,6 +20,7 @@ const ICONS = [ `${nx}/public/icons/S2_Icon_GlobeGrid_20_N.svg`, `${nx}/public/icons/S2_Icon_CheckmarkCircleGreen_20_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocSteps extends LitElement { static properties = { @@ -30,7 +31,7 @@ class NxLocSteps extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); } update(props) { diff --git a/nx/blocks/loc/views/sync/sync.css b/nx/blocks/loc/views/sync/sync.css index ce2e79d54..7dca95d54 100644 --- a/nx/blocks/loc/views/sync/sync.css +++ b/nx/blocks/loc/views/sync/sync.css @@ -12,9 +12,9 @@ ul { padding: 0; list-style: none; background-color: var(--s2-gray-50); - border: 1px solid rgb(230 230 230); + border: 1px solid var(--s2-gray-200); border-top: none; - border-radius: 0 0 var(--s2-radius-100) var(--s2-radius-100); + border-radius: 0 0 var(--s2-corner-radius-500) var(--s2-corner-radius-500); overflow: hidden; li { @@ -35,7 +35,7 @@ ul { position: absolute; content: ""; display: block; - background-color: rgb(230 230 230); + background-color: var(--s2-gray-200); height: 1px; left: 24px; right: 24px; @@ -51,14 +51,14 @@ ul { } &:hover { - background: rgb(228 240 255); + background: var(--s2-blue-200); z-index: 2; &::before, &::after { left: 0; right: 0; - background-color: rgb(22 122 243); + background-color: var(--s2-blue-900); } } } @@ -95,8 +95,8 @@ nx-loc-actions { grid-template-columns: 1fr 1fr 80px; gap: 12px; background-color: var(--s2-gray-75); - border: 1px solid rgb(230 230 230); - border-radius: var(--s2-radius-100) var(--s2-radius-100) 0 0; + border: 1px solid var(--s2-gray-200); + border-radius: var(--s2-corner-radius-500) var(--s2-corner-radius-500) 0 0; p { font-weight: 700; @@ -136,7 +136,8 @@ nx-loc-actions { text-indent: -1000px; overflow: hidden; transition: transform 0.2s ease-in-out; - background: url("/blocks/browse/img/Smock_ChevronRight_18_N.svg") center center / 18px no-repeat; + background-color: currentcolor; + mask: url("/blocks/browse/img/Smock_ChevronRight_18_N.svg") center / 18px no-repeat; } .url-details { diff --git a/nx/blocks/loc/views/sync/sync.js b/nx/blocks/loc/views/sync/sync.js index 5bb7fb76f..c4fc7f1a2 100644 --- a/nx/blocks/loc/views/sync/sync.js +++ b/nx/blocks/loc/views/sync/sync.js @@ -1,19 +1,20 @@ import { LitElement, html, nothing } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import { getSvg } from '../../../../utils/svg.js'; -import { Queue } from '../../../../public/utils/tree.js'; +import config from '../../../../../nx2/utils/nxToggle.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; +import loadIcons from '../../../../../nx2/utils/svg.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; import { getSyncUrls } from './index.js'; import { MAX_CONCURRENT_WRITES, mergeCopy, overwriteCopy } from '../../project/index.js'; -const { nxBase: nx } = getConfig(); +const { nxBase: nx } = config; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); const ICONS = [ `${nx}/public/icons/S2_Icon_CheckmarkCircleGreen_20_N.svg`, `${nx}/public/icons/S2_Icon_AlertDiamondOrange_20_N.svg`, ]; +const icons = await loadIcons({ paths: ICONS }); class NxLocSync extends LitElement { static properties = { @@ -26,7 +27,7 @@ class NxLocSync extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + this.shadowRoot.append(...icons); this._message = this._defaultMessage; this.getSyncUrls(); } diff --git a/nx/blocks/loc/views/translate/index.js b/nx/blocks/loc/views/translate/index.js index 11a9d2004..3d44665ef 100644 --- a/nx/blocks/loc/views/translate/index.js +++ b/nx/blocks/loc/views/translate/index.js @@ -1,6 +1,7 @@ -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { Queue } from '../../../../public/utils/tree.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; + import { convertPath, createSnapshotPrefix, fetchConfig } from '../../utils/utils.js'; import { MAX_CONCURRENT_READS, MAX_CONCURRENT_WRITES, mergeCopy, overwriteCopy } from '../../project/index.js'; @@ -48,11 +49,8 @@ export async function getUrls( // Fetch the content and add DNT const fetchUrl = async (url) => { - const resp = await daFetch(`${DA_ORIGIN}/source/${org}/${site}${url.daDestPath}`, { - headers: { - 'Cache-Control': 'no-cache', - }, - }); + const opts = { headers: { 'Cache-Control': 'no-cache' } }; + const resp = await daFetch({ url: `${DA_ADMIN}/source/${org}/${site}${url.daDestPath}`, opts }); if (!resp.ok) { url.error = `Error fetching content from ${url.daDestPath} - ${resp.status}`; return; diff --git a/nx/blocks/loc/views/translate/translate.css b/nx/blocks/loc/views/translate/translate.css index eb9621061..4ebf1f0dd 100644 --- a/nx/blocks/loc/views/translate/translate.css +++ b/nx/blocks/loc/views/translate/translate.css @@ -13,8 +13,8 @@ p { gap: 12px; grid-template-columns: 1fr 92px 92px 92px 92px 120px; background-color: var(--s2-gray-75); - border: 1px solid rgb(230 230 230); - border-radius: var(--s2-radius-100) var(--s2-radius-100) 0 0; + border: 1px solid var(--s2-gray-200); + border-radius: var(--s2-corner-radius-500) var(--s2-corner-radius-500) 0 0; p { font-weight: 700; @@ -34,9 +34,9 @@ ul { padding: 0; list-style: none; background-color: var(--s2-gray-50); - border: 1px solid rgb(230 230 230); + border: 1px solid var(--s2-gray-200); border-top: none; - border-radius: 0 0 var(--s2-radius-100) var(--s2-radius-100); + border-radius: 0 0 var(--s2-corner-radius-500) var(--s2-corner-radius-500); overflow: hidden; li { @@ -61,7 +61,7 @@ ul { position: absolute; content: ""; display: block; - background-color: rgb(230 230 230); + background-color: var(--s2-gray-200); height: 1px; left: 24px; right: 24px; @@ -77,14 +77,14 @@ ul { } &:hover { - background: rgb(228 240 255); + background: var(--s2-blue-200); z-index: 2; &::before, &::after { left: 0; right: 0; - background-color: rgb(22 122 243); + background-color: var(--s2-blue-900); } } } @@ -150,7 +150,7 @@ nx-loc-actions { } &.is-created { - background-color: var(--s2-turquoise-300); + background-color: var(--s2-seafoam-300); } &.is-translated { diff --git a/nx/blocks/loc/views/translate/translate.js b/nx/blocks/loc/views/translate/translate.js index 8dab1599b..f8a4445c9 100644 --- a/nx/blocks/loc/views/translate/translate.js +++ b/nx/blocks/loc/views/translate/translate.js @@ -1,7 +1,5 @@ import { LitElement, html, nothing } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import { getSvg } from '../../../../utils/svg.js'; +import { loadStyle } from '../../../../../nx2/scripts/nx.js'; import { setupConnector, getUrls, @@ -12,14 +10,7 @@ import { removeWaitingLanguagesFromConf, } from './index.js'; -const { nxBase: nx } = getConfig(); - -const style = await getStyle(import.meta.url); - -const ICONS = [ - `${nx}/public/icons/S2_Icon_CheckmarkCircleGreen_20_N.svg`, - `${nx}/public/icons/S2_Icon_AlertDiamondOrange_20_N.svg`, -]; +const style = await loadStyle(import.meta.url); class NxLocTranslate extends LitElement { static properties = { @@ -38,7 +29,6 @@ class NxLocTranslate extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); this.setupService(); } diff --git a/nx/blocks/loc/views/url-details/index.js b/nx/blocks/loc/views/url-details/index.js index c428c14df..a121c96e0 100644 --- a/nx/blocks/loc/views/url-details/index.js +++ b/nx/blocks/loc/views/url-details/index.js @@ -1,5 +1,5 @@ -import { AEM_ORIGIN } from '../../../../public/utils/constants.js'; -import { daFetch } from '../../../../utils/daFetch.js'; +import { HLX_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; import { getHasExt, formatDate } from '../../utils/utils.js'; function getDate(suppliedDate) { @@ -42,7 +42,7 @@ export function getAemPaths(path) { export async function getAemDetails(path) { const [org, site, ...parts] = splitPath(path); - const resp = await daFetch(`${AEM_ORIGIN}/status/${org}/${site}/main/${parts.join('/')}`); + const resp = await daFetch({ url: `${HLX_ADMIN}/status/${org}/${site}/main/${parts.join('/')}` }); if (!resp.ok) return { preview: 'Unknown', publish: 'Unknown' }; const json = await resp.json(); diff --git a/nx/blocks/loc/views/url-details/url-details.css b/nx/blocks/loc/views/url-details/url-details.css index 63bcd227f..dfe3c80d6 100644 --- a/nx/blocks/loc/views/url-details/url-details.css +++ b/nx/blocks/loc/views/url-details/url-details.css @@ -10,7 +10,7 @@ text-decoration: none; display: flex; gap: 8px; - color: #000; + color: var(--s2-gray-900); z-index: 1; &::after { @@ -18,7 +18,7 @@ content: ""; position: absolute; inset: -8px; - background-color: rgb(255 255 255 / 80%); + background-color: var(--s2-gray-25); border-radius: 8px; z-index: -1; opacity: 0; @@ -33,11 +33,11 @@ width: 33.33px; height: 32px; border-radius: 5px; - background-color: #959595; + background-color: var(--s2-gray-500); flex: 0 0 auto; &.is-active { - background-color: rgb(250 15 0); + background-color: var(--s2-red-900); } } diff --git a/nx/blocks/loc/views/url-details/url-details.js b/nx/blocks/loc/views/url-details/url-details.js index 6388e3579..58426ef69 100644 --- a/nx/blocks/loc/views/url-details/url-details.js +++ b/nx/blocks/loc/views/url-details/url-details.js @@ -1,8 +1,8 @@ import { LitElement, html } from 'da-lit'; -import getStyle from '../../../../utils/styles.js'; +import { loadStyle } from '../../../../../nx2/utils/utils.js'; import { getEditPath, getAemPaths, getAemDetails } from './index.js'; -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); class NxLocUrlDetails extends LitElement { static properties = { diff --git a/nx/blocks/loc/views/validate/validate.css b/nx/blocks/loc/views/validate/validate.css index 51de336ab..d1c96cd99 100644 --- a/nx/blocks/loc/views/validate/validate.css +++ b/nx/blocks/loc/views/validate/validate.css @@ -7,31 +7,31 @@ .details { display: grid; grid-template-columns: 1fr; - gap: var(--spacing-400); - margin: var(--spacing-400) 0; + gap: var(--s2-spacing-400); + margin: var(--s2-spacing-400) 0; } .detail-card { - background: #d7f7e1; + background: var(--s2-green-200); border-radius: 18px; overflow: hidden; - padding: var(--spacing-400); + padding: var(--s2-spacing-400); } .detail-card-pages { - background: #b5e6fc; + background: var(--s2-cyan-300); } .detail-card-sheets { - background: #caffa4; + background: var(--s2-green-300); } .detail-card-fragments { - background: #caf8fa; + background: var(--s2-seafoam-300); } .detail-card-errors { - background: #ffd6d1; + background: var(--s2-red-300); } .detail-card p { @@ -44,17 +44,17 @@ } .detail-card p:last-child { - font-size: var(--s2-font-size-600); + font-size: var(--s2-heading-size-l); } ul { padding: 0; margin: 0; list-style: none; - border: 1px solid rgb(209 209 209); + border: 1px solid var(--s2-gray-300); border-radius: 18px; overflow: hidden; - background: rgb(248 248 248); + background: var(--s2-gray-50); } li { @@ -66,14 +66,14 @@ li { justify-content: space-between; align-items: center; gap: 24px; - border-top: 1px solid rgb(209 209 209); - border-bottom: 1px solid rgb(209 209 209); + border-top: 1px solid var(--s2-gray-300); + border-bottom: 1px solid var(--s2-gray-300); } li:hover { - background: rgb(228 240 255); - border-top: 1px solid rgb(20 122 243); - border-bottom: 1px solid rgb(20 122 243); + background: var(--s2-blue-200); + border-top: 1px solid var(--s2-blue-1000); + border-bottom: 1px solid var(--s2-blue-1000); } input[type="checkbox"] { @@ -97,7 +97,7 @@ input[type="checkbox"] { justify-content: center; align-items: center; font-weight: 700; - border-radius: var(--s2-radius-200); + border-radius: var(--s2-corner-radius-700); text-align: center; color: #fff; text-transform: uppercase; @@ -106,18 +106,18 @@ input[type="checkbox"] { } .status-ready { - background: var(--s2-green); + background: var(--s2-green-800); } .status-error { - background: var(--s2-red); + background: var(--s2-red-800); } .actions { display: flex; justify-content: end; align-items: stretch; - gap: var(--spacing-200); + gap: var(--s2-spacing-200); } @media (width > 600px) { diff --git a/nx/blocks/loc/views/validate/validate.js b/nx/blocks/loc/views/validate/validate.js index 02b5e2869..a6f7754d5 100644 --- a/nx/blocks/loc/views/validate/validate.js +++ b/nx/blocks/loc/views/validate/validate.js @@ -1,16 +1,14 @@ import { LitElement, html, nothing } from 'da-lit'; -import { DA_ORIGIN } from '../../../../public/utils/constants.js'; -import { getConfig } from '../../../../scripts/nexter.js'; -import getStyle from '../../../../utils/styles.js'; -import { daFetch } from '../../../../utils/daFetch.js'; -import { Queue } from '../../../../public/utils/tree.js'; +import { DA_ADMIN } from '../../../../../nx2/utils/utils.js'; +import { loadStyle } from '../../../../../nx2/scripts/nx.js'; +import { daFetch } from '../../../../../nx2/utils/api.js'; +import { Queue } from '../../../../../nx2/public/utils/tree.js'; + import { convertPath, createSnapshotPrefix, fetchConfig } from '../../utils/utils.js'; import { getFragmentUrls } from './validate-utils.js'; import { MAX_CONCURRENT_READS } from '../../project/index.js'; -const { nxBase } = getConfig(); -const style = await getStyle(import.meta.url); -const buttons = await getStyle(`${nxBase}/styles/buttons.js`); +const style = await loadStyle(import.meta.url); const DA_LIVE = 'https://da.live'; @@ -28,7 +26,7 @@ class NxLocValidate extends LitElement { connectedCallback() { super.connectedCallback(); - this.shadowRoot.adoptedStyleSheets = [style, buttons]; + this.shadowRoot.adoptedStyleSheets = [style]; this.setupProject(); } @@ -103,8 +101,8 @@ class NxLocValidate extends LitElement { const isSheet = pathname.endsWith('.json'); const extPath = isSheet ? pathname : `${pathname}.html`; const snapshotUrlFragment = createSnapshotPrefix(this._snapshot); - const daUrl = `${DA_ORIGIN}/source/${this._org}/${this._site}${snapshotUrlFragment}${extPath}`; - const resp = await daFetch(daUrl); + const daUrl = `${DA_ADMIN}/source/${this._org}/${this._site}${snapshotUrlFragment}${extPath}`; + const resp = await daFetch({ url: daUrl }); const text = await resp.text(); const ok = resp.status === 200; url.status = ok ? 'ready' : 'error - not found'; diff --git a/nx/public/icons/Smock_ChevronLeft_18_N.svg b/nx/public/icons/Smock_ChevronLeft_18_N.svg new file mode 100644 index 000000000..9f7f956c2 --- /dev/null +++ b/nx/public/icons/Smock_ChevronLeft_18_N.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx/public/icons/Smock_ChevronRight_18_N.svg b/nx/public/icons/Smock_ChevronRight_18_N.svg new file mode 100644 index 000000000..451767ae9 --- /dev/null +++ b/nx/public/icons/Smock_ChevronRight_18_N.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx/public/icons/clear.svg b/nx/public/icons/clear.svg new file mode 100644 index 000000000..b1a147d4f --- /dev/null +++ b/nx/public/icons/clear.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx2/public/icons/Smock_Checkmark_18_N.svg b/nx2/public/icons/Smock_Checkmark_18_N.svg new file mode 100644 index 000000000..04924b42c --- /dev/null +++ b/nx2/public/icons/Smock_Checkmark_18_N.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/nx2/public/icons/Smock_ChevronLeft_18_N.svg b/nx2/public/icons/Smock_ChevronLeft_18_N.svg new file mode 100644 index 000000000..9f7f956c2 --- /dev/null +++ b/nx2/public/icons/Smock_ChevronLeft_18_N.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx2/public/icons/Smock_ChevronRight_18_N.svg b/nx2/public/icons/Smock_ChevronRight_18_N.svg new file mode 100644 index 000000000..451767ae9 --- /dev/null +++ b/nx2/public/icons/Smock_ChevronRight_18_N.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx2/public/icons/clear.svg b/nx2/public/icons/clear.svg new file mode 100644 index 000000000..b1a147d4f --- /dev/null +++ b/nx2/public/icons/clear.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/nx2/scripts/nx.js b/nx2/scripts/nx.js index 01035e1bf..7fa9acf2a 100644 --- a/nx2/scripts/nx.js +++ b/nx2/scripts/nx.js @@ -12,7 +12,7 @@ const LOG = async (ex, el) => (await import('../utils/error.js')).default(ex, el); -const NX_BLOCKS = new Set(['importer', 'site-apps', 'hero', 'card', 'section-metadata', 'schema-editor', 'media-library', 'form']); +const NX_BLOCKS = new Set(['importer', 'site-apps', 'hero', 'card', 'section-metadata', 'schema-editor', 'media-library', 'form', 'loc']); const EW_ORIGINS = { dev: 'http://localhost:3001', @@ -102,6 +102,31 @@ export const loc = ([first], ...values) => { return strings.get(key) ?? key; }; +export const loadStyle = (() => { + const cache = {}; + + return (supplied) => { + // Convenience replacement for WCs + const path = supplied.replace('.js', '.css'); + + try { + cache[path] ??= new Promise((resolve) => { + (async () => { + const resp = await fetch(path); + const text = await resp.text(); + const sheet = new CSSStyleSheet({ baseURL: path }); + sheet.path = path; + sheet.replaceSync(text); + resolve(sheet); + })(); + }); + } catch { + getConfig().log(`Could not load ${path}`); + } + return cache[path]; + }; +})(); + export async function loadBlock(block) { const { nxBase, codeBase, providers, log } = getConfig(); const { classList } = block; @@ -333,28 +358,3 @@ export async function loadArea({ area } = { area: document }) { await restorePanels(); } } - -const cache = {}; - -// eslint-disable-next-line import/prefer-default-export -export const loadStyle = (supplied) => { - // Convenience replacement for WCs - const path = supplied.replace('.js', '.css'); - - try { - cache[path] ??= new Promise((resolve) => { - (async () => { - const resp = await fetch(path); - const text = await resp.text(); - const sheet = new CSSStyleSheet({ baseURL: path }); - sheet.path = path; - sheet.replaceSync(text); - resolve(sheet); - })(); - }); - } catch { - // eslint-disable-next-line no-console - console.warn(`Could not load ${path}`); - } - return cache[path]; -}; diff --git a/nx2/utils/api.js b/nx2/utils/api.js index 9a5c561a8..dc66addc4 100644 --- a/nx2/utils/api.js +++ b/nx2/utils/api.js @@ -1,7 +1,7 @@ /* eslint-disable no-use-before-define */ import { HLX_ADMIN, AEM_API, DA_ADMIN, ALLOWED_TOKEN } from './utils.js'; -const { loadIms, handleSignIn } = await (async () => { +export const { loadIms, handleSignIn } = await (async () => { try { const { getNx } = await import(`${window.location.origin}/scripts/utils.js`); return await import(`${getNx()}/utils/ims.js`); diff --git a/nx2/utils/nxToggle.js b/nx2/utils/nxToggle.js new file mode 100644 index 000000000..1d4f8611a --- /dev/null +++ b/nx2/utils/nxToggle.js @@ -0,0 +1,14 @@ +const config = await (async () => { + try { + // NX1 + const { nxJS, getNx } = await import(`${window.location.origin}/scripts/utils.js`); + const { getConfig } = await import(`${getNx()}${nxJS}`); + return getConfig(); + } catch { + // NX2 + const { getConfig } = await import('../scripts/nx.js'); + return getConfig(); + } +})(); + +export default config; diff --git a/nx2/utils/utils.js b/nx2/utils/utils.js index f28f2b04b..ff97046e4 100644 --- a/nx2/utils/utils.js +++ b/nx2/utils/utils.js @@ -1,4 +1,4 @@ -import { env } from '../scripts/nx.js'; +import { env, loadStyle } from '../scripts/nx.js'; export const SUPPORTED_FILES = { html: 'text/html', @@ -149,5 +149,5 @@ export const loadPageStyle = (href) => new Promise((resolve) => { } }); -export { loadStyle } from '../scripts/nx.js'; +export { loadStyle }; export { default as loadScript } from '../../nx/utils/script.js'; diff --git a/test/loc/glaas/multimodalPageAssets.test.js b/test/loc/glaas/multimodalPageAssets.test.js index 5ca40b5d1..5998c3db7 100644 --- a/test/loc/glaas/multimodalPageAssets.test.js +++ b/test/loc/glaas/multimodalPageAssets.test.js @@ -1,5 +1,6 @@ import { expect } from '@esm-bundle/chai'; import sinon from 'sinon'; +import { DA_ADMIN } from '../../../nx2/utils/utils.js'; import { glaasSourcePreviewUrl } from '../../../nx/blocks/loc/connectors/glaas/api.js'; import { buildMultimodalPageAssetEntry, @@ -219,7 +220,7 @@ describe('GLaaS multimodal image source URLs', () => { expect(contentDaLiveToDaSourceUrl( 'https://content.da.live/adobecom/da-dc/acrobat/test/.acrobat-pro/rect.png', )).to.equal( - 'https://admin.da.live/source/adobecom/da-dc/acrobat/test/.acrobat-pro/rect.png', + `${DA_ADMIN}/source/adobecom/da-dc/acrobat/test/.acrobat-pro/rect.png`, ); }); }); diff --git a/test/loc/glaas/multimodalSave.test.js b/test/loc/glaas/multimodalSave.test.js index 20c809f15..5f34dd4f5 100644 --- a/test/loc/glaas/multimodalSave.test.js +++ b/test/loc/glaas/multimodalSave.test.js @@ -1,6 +1,6 @@ import { expect } from '@esm-bundle/chai'; import sinon from 'sinon'; -import { DA_ORIGIN } from '../../../nx/public/utils/constants.js'; +import { DA_ADMIN } from '../../../nx2/utils/utils.js'; import { blobContentTypeForDaSource, buildTranslatedMediaPath, @@ -46,8 +46,8 @@ describe('GLaaS multimodal save', () => { expect(result.url).to.equal('https://main--da-dc--adobecom.aem.page/media_abc.avif'); expect(fetchStub.calledOnce).to.be.true; const [url, opts] = fetchStub.firstCall.args; - expect(url).to.equal(`${DA_ORIGIN}/media/${org}/${site}${buildTranslatedMediaPath({ langCode, glaasName })}`); - expect(url).to.equal(`${DA_ORIGIN}/media/adobecom/da-dc/de/acrobat/shared/hero.png`); + expect(url).to.equal(`${DA_ADMIN}/media/${org}/${site}${buildTranslatedMediaPath({ langCode, glaasName })}`); + expect(url).to.equal(`${DA_ADMIN}/media/adobecom/da-dc/de/acrobat/shared/hero.png`); expect(url).not.to.include('/media/adobecom/da-dc/de/adobecom/da-dc/'); expect(opts.method).to.equal('POST'); expect(opts.body).to.be.instanceOf(FormData); @@ -67,7 +67,7 @@ describe('GLaaS multimodal save', () => { contentType: 'image/png', }); const [url] = fetchStub.firstCall.args; - expect(url).to.equal(`${DA_ORIGIN}/media/adobecom/da-dc/fr-CA/acrobat/online/test/report.png`); + expect(url).to.equal(`${DA_ADMIN}/media/adobecom/da-dc/fr-CA/acrobat/online/test/report.png`); }); it('postImageToDaMedia skips images above observed upload limit without POST', async () => { @@ -117,7 +117,7 @@ describe('GLaaS multimodal save', () => { const translatedHtml = ``; const deliveryUrl = 'https://main--da-dc--adobecom.aem.page/media_abc.avif'; - const expectedMediaPost = `${DA_ORIGIN}/media/${org}/${site}/de/acrobat/shared/hero.png`; + const expectedMediaPost = `${DA_ADMIN}/media/${org}/${site}/de/acrobat/shared/hero.png`; const fetchStub = sinon.stub(window, 'fetch').callsFake((url) => { const href = String(url); if (href.includes('/api/l10n/v2.0/') && href.includes(encodeURI(imageGlaasName))) { diff --git a/test/loc/saveLangItems.test.js b/test/loc/saveLangItems.test.js index 34125dc07..b251214d1 100644 --- a/test/loc/saveLangItems.test.js +++ b/test/loc/saveLangItems.test.js @@ -107,13 +107,27 @@ describe('saveLangItems', () => { ); }); - it('returns success 500 when the underlying fetch fails with a network error', async () => { + it('returns an error result when the underlying fetch fails with a network error', async () => { globalThis.fetch = sinon.stub().rejects(new Error('network failure')); const items = [makeItem('/fail.html')]; const results = await saveLangItems(SITE_PATH, items, LANG, removeDnt); - expect(results[0]).to.deep.equal({ success: 500 }); + expect(results[0]).to.deep.equal({ error: 'network failure' }); + }); + + it('returns an error result with status when the save response is not ok', async () => { + globalThis.fetch = sinon.stub().resolves({ + ok: false, + status: 403, + headers: new Headers({ 'x-da-actions': 'read=true' }), + text: async () => '', + }); + + const items = [makeItem('/forbidden.html')]; + const results = await saveLangItems(SITE_PATH, items, LANG, removeDnt); + + expect(results[0]).to.deep.equal({ error: 'Could not save item.', status: 403 }); }); it('handles JSON items with correct content-type', async () => {