From 93ddb3b75b1f54be60a44792e600a3add7974031 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 29 May 2025 18:44:56 -0400 Subject: [PATCH] update github actions --- .../{client_tests.js.yml => client_tests.yml} | 11 +- .github/workflows/ssr_tests.yml | 11 +- packages/webawesome/docs/_includes/head.njk | 5 +- .../components/page-samples/documentation.md | 237 ----------- .../docs/components/page-samples/media-app.md | 400 ------------------ .../webawesome/docs/docs/components/page.md | 211 --------- .../docs/docs/components/page/demo-page.css | 66 --- .../docs/docs/components/page/demo.css | 23 - .../docs/docs/components/page/demo.js | 51 --- .../docs/docs/components/viewport-demo.md | 71 ---- 10 files changed, 12 insertions(+), 1074 deletions(-) rename .github/workflows/{client_tests.js.yml => client_tests.yml} (85%) delete mode 100644 packages/webawesome/docs/docs/components/page-samples/documentation.md delete mode 100644 packages/webawesome/docs/docs/components/page-samples/media-app.md delete mode 100644 packages/webawesome/docs/docs/components/page.md delete mode 100644 packages/webawesome/docs/docs/components/page/demo-page.css delete mode 100644 packages/webawesome/docs/docs/components/page/demo.css delete mode 100644 packages/webawesome/docs/docs/components/page/demo.js delete mode 100644 packages/webawesome/docs/docs/components/viewport-demo.md diff --git a/.github/workflows/client_tests.js.yml b/.github/workflows/client_tests.yml similarity index 85% rename from .github/workflows/client_tests.js.yml rename to .github/workflows/client_tests.yml index 57c0d24fe..7d44e099d 100644 --- a/.github/workflows/client_tests.js.yml +++ b/.github/workflows/client_tests.yml @@ -9,10 +9,6 @@ on: pull_request: branches: [next] -defaults: - run: - shell: bash - working-directory: ./packages/webawesome jobs: client_test: @@ -35,10 +31,17 @@ jobs: run: npm ci - name: Lint run: npm run prettier + working-directory: ./packages/webawesome + - name: Build run: npm run build + working-directory: ./packages/webawesome + - name: Install Playwright run: npx playwright install --with-deps + working-directory: ./packages/webawesome + - name: Run CSR tests # FAIL_FAST to fail on first failing test. run: FAIL_FAST="true" CSR_ONLY="true" npm run test + working-directory: ./packages/webawesome diff --git a/.github/workflows/ssr_tests.yml b/.github/workflows/ssr_tests.yml index eba1d83c7..5e5f1cf7e 100644 --- a/.github/workflows/ssr_tests.yml +++ b/.github/workflows/ssr_tests.yml @@ -8,11 +8,6 @@ on: # branches: [next] workflow_dispatch: -defaults: - run: - shell: bash - working-directory: ./packages/webawesome - jobs: ssr_test: runs-on: ubuntu-latest @@ -31,17 +26,17 @@ jobs: cache: 'npm' - name: Install dependencies run: npm ci - # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything. - - name: Lint - run: npm run prettier - name: Build run: npm run build + working-directory: ./packages/webawesome - name: Install Playwright run: npx playwright install --with-deps + working-directory: ./packages/webawesome - name: Run SSR tests # FAIL_FAST to fail on first failing test. run: FAIL_FAST="true" SSR_ONLY="true" npm run test + working-directory: ./packages/webawesome diff --git a/packages/webawesome/docs/_includes/head.njk b/packages/webawesome/docs/_includes/head.njk index 38dc3495d..5c12415c6 100644 --- a/packages/webawesome/docs/_includes/head.njk +++ b/packages/webawesome/docs/_includes/head.njk @@ -32,12 +32,11 @@ {# Fallback loading when using the free repo #} - - `; - -async function render() { - await customElements.whenDefined('wa-checkbox'); - - // Let checkboxes update their "state" - await Promise.allSettled( - Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => { - return checkbox.updateComplete; - }), - ); - - let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)')); - let slotsHTML = slots - .map(slot => { - let name = slot.getAttribute('value'); - let description = slot.getAttribute('data-description'); - - let tag = 'div'; - if (name.endsWith('header')) { - tag = 'header'; - } - if (name.endsWith('footer')) { - tag = 'footer'; - } - - return `<${tag} class="slot-content" slot="${name}"> - ${name || 'main (default)'} -

${description}

- `; - }) - .join('\n'); - let page = iframe.contentDocument?.querySelector('wa-page'); - - if (page) { - page.innerHTML = slotsHTML; - } else { - iframe.srcdoc = `${includes}${slotsHTML}`; - } -} -await render(); -fieldset?.addEventListener('input', render); diff --git a/packages/webawesome/docs/docs/components/viewport-demo.md b/packages/webawesome/docs/docs/components/viewport-demo.md deleted file mode 100644 index 9d652e554..000000000 --- a/packages/webawesome/docs/docs/components/viewport-demo.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Viewport Demo -description: Viewport demos can be used to display an iframe as a resizable, zoomable preview. -tags: component -isPro: true -unpublished: true ---- - -```html {.example} - - - -``` - -:::warning -A lot of the functionality of this component will not work on cross-origin iframes. -::: - -## Examples - -### Arbitrary HTML content - -You can render arbitrary HTML content in the iframe by using the `srcdoc` attribute: - -```html {.example} - - - -``` - -### Viewport Emulation - -You can also provide a width value to emulate and it will be scaled accordingly: - -```html {.example} - - - -``` - -By default, the viewport will be rendered to an initial 16:9 aspect ratio, -which can be changed via resizing. -You can customize this via the `--viewport-initial-aspect-ratio` property. -Or, you could add a height value: - -```html {.example} - - - -``` - -## Roadmap - -This component is a work in progress. -Some of the things that are not yet implemented are listed below. -It goes without saying that this list is a rough plan and subject to change. - -- Non-linear zoom scale -- Extend to general content, not just iframes -- Styles for mobile and tablet frames and an attribute to switch between them -- Automatic iframe height \ No newline at end of file