From 31ca015ff23c6b589d97aeeabc07b1f12ebbd6e5 Mon Sep 17 00:00:00 2001 From: nbilyk Date: Fri, 5 Dec 2025 13:48:42 -0800 Subject: [PATCH 1/3] docs: add plain js example --- .gitignore | 1 - buildSrc/build.ts | 27 ------ buildSrc/util/copyFiles.ts | 27 ------ package.json | 3 +- packages/example/src/index.ts | 3 +- resources/example.html | 8 -- www/codepen-helper.js | 69 ++++++++++++++++ www/example.html | 146 +++++++++++++++++++++++++++++++++ {resources => www}/favicon.svg | 0 {resources => www}/index.html | 4 +- 10 files changed, 219 insertions(+), 69 deletions(-) delete mode 100644 buildSrc/build.ts delete mode 100644 buildSrc/util/copyFiles.ts delete mode 100644 resources/example.html create mode 100644 www/codepen-helper.js create mode 100644 www/example.html rename {resources => www}/favicon.svg (100%) rename {resources => www}/index.html (74%) diff --git a/.gitignore b/.gitignore index 83da964..6592097 100644 --- a/.gitignore +++ b/.gitignore @@ -56,7 +56,6 @@ node_modules/ .env dist/ -/www/ /generated-types/ /jsdocs/ /act/ diff --git a/buildSrc/build.ts b/buildSrc/build.ts deleted file mode 100644 index 5a2511d..0000000 --- a/buildSrc/build.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { copyFiles } from './util/copyFiles' - -const watch = process.argv.includes('-w') - -copyFiles({ - src: 'resources', - dest: 'www', - options: { - watch, - copyOptions: { - overwrite: true, - }, - }, -}) - -for (const pckg of ['example']) { - copyFiles({ - src: `packages/${pckg}/dist`, - dest: `www/${pckg}`, - options: { - watch, - copyOptions: { - overwrite: true, - }, - }, - }) -} diff --git a/buildSrc/util/copyFiles.ts b/buildSrc/util/copyFiles.ts deleted file mode 100644 index 6960bb6..0000000 --- a/buildSrc/util/copyFiles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import fs, { CopyOptions } from 'fs-extra' - -export function copyFiles({ - src, - dest, - options, -}: { - src: string - dest: string - options: { readonly watch: boolean; readonly copyOptions?: CopyOptions } -}): void { - const copy = async () => { - await fs.copy(src, dest, options.copyOptions).catch((error) => { - console.error(`copy ${src} failed:`, error) - throw error - }) - console.log(`${src} copied to: ${dest}`) - } - copy().catch(() => { - if (!options.watch) { - process.exit(-1) - } - }) - if (options.watch) { - fs.watch(src, { recursive: true }, () => copy().catch(() => {})) - } -} diff --git a/package.json b/package.json index 83bebba..3a93090 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,9 @@ "build": "lerna run build", "watch": "lerna run watch --parallel", "prewww": "lerna run build", - "www": "tsx ./buildSrc/build.ts", "test": "lerna run test", "validate": "lerna run build && lerna run lint && lerna run test", - "serve": "npm run www && http-server www" + "serve": "http-server www" }, "repository": { "type": "git", diff --git a/packages/example/src/index.ts b/packages/example/src/index.ts index faa343e..4437010 100644 --- a/packages/example/src/index.ts +++ b/packages/example/src/index.ts @@ -28,8 +28,6 @@ const scene = new Scene() scene.background = new Color(0x111111) scene.fog = new Fog(0x111111, 1, 10) -const clock = new Clock() - const grid = new GridHelper(20, 20, 0x000000, 0xffffff) grid.material.opacity = 0.2 grid.material.transparent = true @@ -96,6 +94,7 @@ loader }) .catch(console.error) +const clock = new Clock() function render() { const dT = Math.min(clock.getDelta(), 0.1) controls.update() diff --git a/resources/example.html b/resources/example.html deleted file mode 100644 index 32818cb..0000000 --- a/resources/example.html +++ /dev/null @@ -1,8 +0,0 @@ - - - - - Title - - - diff --git a/www/codepen-helper.js b/www/codepen-helper.js new file mode 100644 index 0000000..a76faff --- /dev/null +++ b/www/codepen-helper.js @@ -0,0 +1,69 @@ +(function () { + const btn = document.createElement('a'); + btn.id = 'editButton'; + btn.href = '#'; + btn.textContent = 'Edit on CodePen'; + Object.assign(btn.style, { + position: 'absolute', + top: '10px', + right: '10px', + padding: '10px 20px', + background: '#333', + color: 'white', + textDecoration: 'none', + fontFamily: 'sans-serif', + borderRadius: '5px', + zIndex: '1000', + fontSize: '14px', + opacity: '0.8', + }); + document.body.appendChild(btn); + + btn.addEventListener('click', (e) => { + e.preventDefault(); + const form = document.createElement('form'); + form.action = 'https://codepen.io/pen/define'; + form.method = 'POST'; + form.target = '_blank'; + + const input = document.createElement('input'); + input.type = 'hidden'; + input.name = 'data'; + + // Clone to remove button and script before serializing + const clone = document.documentElement.cloneNode(true); + + // Remove the edit button from the clone + const clonedBtn = clone.querySelector('#editButton'); + if (clonedBtn) clonedBtn.remove(); + + // Remove the script that includes this logic + const scripts = clone.querySelectorAll('script'); + scripts.forEach((s) => { + if (s.src && s.src.includes('codepen-helper.js')) { + s.remove(); + } + }); + + // Clean up the canvas attributes added by Three.js + const canvas = clone.querySelector('#mainCanvas'); + if (canvas) { + canvas.removeAttribute('data-engine'); + canvas.removeAttribute('width'); + canvas.removeAttribute('height'); + canvas.removeAttribute('style'); + } + + const data = { + title: 'Three Particles Example', + html: '\n' + clone.outerHTML, + editors: '100', // HTML open + }; + + input.value = JSON.stringify(data); + form.appendChild(input); + document.body.appendChild(form); + form.submit(); + document.body.removeChild(form); + }); +})(); diff --git a/www/example.html b/www/example.html new file mode 100644 index 0000000..7ba73c8 --- /dev/null +++ b/www/example.html @@ -0,0 +1,146 @@ + + + + + Three Particles Example + + + + + + + + + diff --git a/resources/favicon.svg b/www/favicon.svg similarity index 100% rename from resources/favicon.svg rename to www/favicon.svg diff --git a/resources/index.html b/www/index.html similarity index 74% rename from resources/index.html rename to www/index.html index adeaa18..667292d 100644 --- a/resources/index.html +++ b/www/index.html @@ -7,11 +7,11 @@ name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> - + Coming soon™ -

Example

+

Example

From c8b07511bfaa88fd5a5a779e5c83427f9bb3bd2a Mon Sep 17 00:00:00 2001 From: nbilyk Date: Fri, 5 Dec 2025 14:37:59 -0800 Subject: [PATCH 2/3] ci: remove missing run www script removed in favor of static files --- .github/workflows/release.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f27aaf6..adc4560 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -40,9 +40,6 @@ jobs: env: GH_TOKEN: ${{ secrets.GH_PAT }} - - name: Build - run: npm run www - - name: Publish to NPMJS uses: JS-DevTools/npm-publish@v3 with: From c1dc464e99842db32fd2f2b3f36edab949572963 Mon Sep 17 00:00:00 2001 From: nbilyk Date: Fri, 5 Dec 2025 15:06:58 -0800 Subject: [PATCH 3/3] docs: lift head and body elements for codepen source --- www/codepen-helper.js | 88 ++++++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 38 deletions(-) diff --git a/www/codepen-helper.js b/www/codepen-helper.js index a76faff..30242ea 100644 --- a/www/codepen-helper.js +++ b/www/codepen-helper.js @@ -1,8 +1,8 @@ -(function () { - const btn = document.createElement('a'); - btn.id = 'editButton'; - btn.href = '#'; - btn.textContent = 'Edit on CodePen'; +;(function () { + const btn = document.createElement('a') + btn.id = 'editButton' + btn.href = '#' + btn.textContent = 'Edit on CodePen' Object.assign(btn.style, { position: 'absolute', top: '10px', @@ -16,54 +16,66 @@ zIndex: '1000', fontSize: '14px', opacity: '0.8', - }); - document.body.appendChild(btn); + }) + document.body.appendChild(btn) btn.addEventListener('click', (e) => { - e.preventDefault(); - const form = document.createElement('form'); - form.action = 'https://codepen.io/pen/define'; - form.method = 'POST'; - form.target = '_blank'; + e.preventDefault() - const input = document.createElement('input'); - input.type = 'hidden'; - input.name = 'data'; + // Clone the document to perform cleanup without affecting the live page + const clone = document.documentElement.cloneNode(true) - // Clone to remove button and script before serializing - const clone = document.documentElement.cloneNode(true); - // Remove the edit button from the clone - const clonedBtn = clone.querySelector('#editButton'); - if (clonedBtn) clonedBtn.remove(); + const clonedBtn = clone.querySelector('#editButton') + if (clonedBtn) clonedBtn.remove() - // Remove the script that includes this logic - const scripts = clone.querySelectorAll('script'); + // Remove the helper script from the clone + const scripts = clone.querySelectorAll('script') scripts.forEach((s) => { if (s.src && s.src.includes('codepen-helper.js')) { - s.remove(); + s.remove() } - }); + }) // Clean up the canvas attributes added by Three.js - const canvas = clone.querySelector('#mainCanvas'); + const canvas = clone.querySelector('#mainCanvas') if (canvas) { - canvas.removeAttribute('data-engine'); - canvas.removeAttribute('width'); - canvas.removeAttribute('height'); - canvas.removeAttribute('style'); + canvas.removeAttribute('data-engine') + canvas.removeAttribute('width') + canvas.removeAttribute('height') + canvas.removeAttribute('style') } + const head = clone.querySelector('head') + const body = clone.querySelector('body') + + // Extract style and script tags from head and trim 8 spaces of indentation + const headContent = head + ? Array.from(head.querySelectorAll('style, script')) + .map((el) => el.outerHTML) + .join('\n') + .replace(/\n {8}/g, '\n') + : '' + const data = { title: 'Three Particles Example', - html: '\n' + clone.outerHTML, + html: headContent + '\n' + (body ? body.innerHTML : ''), editors: '100', // HTML open - }; + } + + const form = document.createElement('form') + form.action = 'https://codepen.io/pen/define' + form.method = 'POST' + form.target = '_blank' + + const input = document.createElement('input') + input.type = 'hidden' + input.name = 'data' + input.value = JSON.stringify(data) - input.value = JSON.stringify(data); - form.appendChild(input); - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - }); -})(); + form.appendChild(input) + document.body.appendChild(form) + form.submit() + document.body.removeChild(form) + }) +})()