From 01c801108f1f5429436e4fc930018bf96ed31f79 Mon Sep 17 00:00:00 2001 From: Luca Di Gianventura Date: Fri, 27 Oct 2023 11:45:02 +0200 Subject: [PATCH 1/7] Fix: Markdoc Integration build when root folder contains spaces (#8759) Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com> --- .changeset/seven-files-punch.md | 5 +++ .../markdoc/src/content-entry-type.ts | 4 +-- .../render with-space/astro.config.mjs | 7 ++++ .../fixtures/render with-space/package.json | 9 ++++++ .../src/content/blog/simple.mdoc | 7 ++++ .../render with-space/src/pages/index.astro | 19 +++++++++++ .../integrations/markdoc/test/render.test.js | 32 +++++++++++++++++++ pnpm-lock.yaml | 9 ++++++ 8 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 .changeset/seven-files-punch.md create mode 100644 packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs create mode 100644 packages/integrations/markdoc/test/fixtures/render with-space/package.json create mode 100644 packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc create mode 100644 packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro diff --git a/.changeset/seven-files-punch.md b/.changeset/seven-files-punch.md new file mode 100644 index 000000000000..d46a27422282 --- /dev/null +++ b/.changeset/seven-files-punch.md @@ -0,0 +1,5 @@ +--- +'@astrojs/markdoc': patch +--- + +Fix build process on markdoc integration when root folder contains spaces diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts index f682e114fc8e..07c5268e4cc2 100644 --- a/packages/integrations/markdoc/src/content-entry-type.ts +++ b/packages/integrations/markdoc/src/content-entry-type.ts @@ -106,7 +106,7 @@ export async function getContentEntryType({ import { createGetHeadings, createContentComponent } from '@astrojs/markdoc/runtime'; ${ markdocConfigUrl - ? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};` + ? `import markdocConfig from ${JSON.stringify(fileURLToPath(markdocConfigUrl))};` : 'const markdocConfig = {};' } @@ -230,7 +230,7 @@ function getStringifiedImports( ? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }` : componentNamePrefix + toImportName(key); const resolvedPath = - config.type === 'local' ? new URL(config.path, root).pathname : config.path; + config.type === 'local' ? fileURLToPath(new URL(config.path, root)) : config.path; stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};\n`; } diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs new file mode 100644 index 000000000000..29d846359bb2 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import markdoc from '@astrojs/markdoc'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/package.json b/packages/integrations/markdoc/test/fixtures/render with-space/package.json new file mode 100644 index 000000000000..daae654430f9 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-with-space", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc new file mode 100644 index 000000000000..2dbe492fe17a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc @@ -0,0 +1,7 @@ +--- +title: Simple post with root folder containing a space +--- + +## Simple post with root folder containing a space + +This is a simple Markdoc post with root folder containing a space. diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro new file mode 100644 index 000000000000..940eef154005 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'simple'); +const { Content } = await post.render(); +--- + + + + + + + + Content + + + + + diff --git a/packages/integrations/markdoc/test/render.test.js b/packages/integrations/markdoc/test/render.test.js index 3ac9c3ac4714..f1760a8e61f8 100644 --- a/packages/integrations/markdoc/test/render.test.js +++ b/packages/integrations/markdoc/test/render.test.js @@ -69,6 +69,18 @@ describe('Markdoc - render', () => { await server.stop(); }); + + it('renders content - with root folder containing space', async () => { + const fixture = await getFixture('render with-space'); + const server = await fixture.startDevServer(); + + const res = await fixture.fetch('/'); + const html = await res.text(); + + renderWithRootFolderContainingSpace(html); + + await server.stop(); + }); }); describe('build', () => { @@ -116,6 +128,15 @@ describe('Markdoc - render', () => { renderNullChecks(html); }); + + it('renders content - with root folder containing space', async () => { + const fixture = await getFixture('render with-space'); + await fixture.build(); + + const html = await fixture.readFile('/index.html'); + + renderWithRootFolderContainingSpace(html); + }); }); }); @@ -189,3 +210,14 @@ function renderSimpleChecks(html) { const p = document.querySelector('p'); expect(p.textContent).to.equal('This is a simple Markdoc post.'); } + +/** @param {string} html */ +function renderWithRootFolderContainingSpace(html) { + const { document } = parseHTML(html); + const h2 = document.querySelector('h2'); + expect(h2.textContent).to.equal('Simple post with root folder containing a space'); + const p = document.querySelector('p'); + expect(p.textContent).to.equal( + 'This is a simple Markdoc post with root folder containing a space.' + ); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e6527923763..86f4cee5b516 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3836,6 +3836,15 @@ importers: specifier: workspace:* version: link:../../../../../astro + packages/integrations/markdoc/test/fixtures/render with-space: + dependencies: + '@astrojs/markdoc': + specifier: workspace:* + version: link:../../.. + astro: + specifier: workspace:* + version: link:../../../../../astro + packages/integrations/markdoc/test/fixtures/render-html: dependencies: '@astrojs/markdoc': From e21fef7da2292414f55b58ffe7d9bbfd25904ca3 Mon Sep 17 00:00:00 2001 From: Florian Lefebvre Date: Fri, 27 Oct 2023 11:54:41 +0200 Subject: [PATCH 2/7] fix(partytown): allow overriding the lib option (close #8760) (#8892) Co-authored-by: Sarah Rainsberger --- .changeset/forty-eggs-raise.md | 5 +++++ packages/integrations/partytown/src/index.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/forty-eggs-raise.md diff --git a/.changeset/forty-eggs-raise.md b/.changeset/forty-eggs-raise.md new file mode 100644 index 000000000000..a5acddde6c9b --- /dev/null +++ b/.changeset/forty-eggs-raise.md @@ -0,0 +1,5 @@ +--- +'@astrojs/partytown': patch +--- + +Adds the ability to override the `lib` option in `astro.config.mjs` diff --git a/packages/integrations/partytown/src/index.ts b/packages/integrations/partytown/src/index.ts index 755026512399..cfe1293c995d 100644 --- a/packages/integrations/partytown/src/index.ts +++ b/packages/integrations/partytown/src/index.ts @@ -27,8 +27,8 @@ export default function createPlugin(options?: PartytownOptions): AstroIntegrati 'astro:config:setup': ({ config: _config, command, injectScript }) => { const lib = `${appendForwardSlash(_config.base)}~partytown/`; const partytownConfig = { - ...options?.config, lib, + ...options?.config, debug: options?.config?.debug ?? command === 'dev', }; partytownSnippetHtml = partytownSnippet(partytownConfig); From ca90b47cfc5e00f5065cf461e2fe50db62215e49 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 27 Oct 2023 12:09:05 +0200 Subject: [PATCH 3/7] Fix dev overlay UI Toolkit component names (#8928) Co-authored-by: Sarah Rainsberger Co-authored-by: Nate Moore Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> --- .changeset/violet-ants-bow.md | 5 +++++ .../src/runtime/client/dev-overlay/overlay.ts | 20 ++++++++++--------- .../client/dev-overlay/plugins/astro.ts | 8 ++++---- .../client/dev-overlay/plugins/audit.ts | 2 +- .../dev-overlay/plugins/utils/highlight.ts | 2 +- .../client/dev-overlay/plugins/xray.ts | 2 +- 6 files changed, 23 insertions(+), 16 deletions(-) create mode 100644 .changeset/violet-ants-bow.md diff --git a/.changeset/violet-ants-bow.md b/.changeset/violet-ants-bow.md new file mode 100644 index 000000000000..9ba4f9408bd2 --- /dev/null +++ b/.changeset/violet-ants-bow.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Renames dev overlay UI Toolkit component names for consistency. diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 57ca72d633f4..85bdf73e127a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -192,13 +192,13 @@ document.addEventListener('DOMContentLoaded', async () => { width: 1px; } - astro-overlay-plugin-canvas { + astro-dev-overlay-plugin-canvas { position: absolute; top: 0; left: 0; } - astro-overlay-plugin-canvas:not([data-active]) { + astro-dev-overlay-plugin-canvas:not([data-active]) { display: none; } @@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => { } getPluginCanvasById(id: string) { - return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`); + return this.shadowRoot.querySelector( + `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]` + ); } togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) { @@ -486,11 +488,11 @@ document.addEventListener('DOMContentLoaded', async () => { } customElements.define('astro-dev-overlay', AstroDevOverlay); - customElements.define('astro-overlay-window', DevOverlayWindow); - customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas); - customElements.define('astro-overlay-tooltip', DevOverlayTooltip); - customElements.define('astro-overlay-highlight', DevOverlayHighlight); - customElements.define('astro-overlay-card', DevOverlayCard); + customElements.define('astro-dev-overlay-window', DevOverlayWindow); + customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas); + customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip); + customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight); + customElements.define('astro-dev-overlay-card', DevOverlayCard); const overlay = document.createElement('astro-dev-overlay'); overlay.style.zIndex = '999999'; @@ -498,7 +500,7 @@ document.addEventListener('DOMContentLoaded', async () => { // Create plugin canvases plugins.forEach((plugin) => { - const pluginCanvas = document.createElement('astro-overlay-plugin-canvas'); + const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); pluginCanvas.dataset.pluginId = plugin.id; overlay.shadowRoot?.append(pluginCanvas); }); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index 3629776ea564..11e7bb7e0aca 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -6,7 +6,7 @@ export default { name: 'Astro', icon: 'astro:logo', init(canvas) { - const astroWindow = document.createElement('astro-overlay-window') as DevOverlayWindow; + const astroWindow = document.createElement('astro-dev-overlay-window') as DevOverlayWindow; astroWindow.windowTitle = 'Astro'; astroWindow.windowIcon = 'astro:logo'; @@ -19,7 +19,7 @@ export default { justify-content: center; } - #buttons-container astro-overlay-card { + #buttons-container astro-dev-overlay-card { flex: 1; } @@ -53,8 +53,8 @@ export default {

Welcome to Astro!

- Report an issue - View Astro Docs + Report an issue + View Astro Docs