pixiebrix / playground Goto Github PK

View Code? Open in Web Editor NEW

0.0 5.0 0.0 19.2 MB

Playground for testing web extensions and web customization

Home Page: https://pbx.vercel.app

License: GNU Affero General Public License v3.0

HTML 80.98% CSS 3.16% JavaScript 14.17% Shell 1.69%

extensions browsers

playground's Introduction

playground

Playground for testing extensions and web customization.

https://pbx.vercel.app/

Contribute

Each folder is its own standalone project so we never have dependency conflicts.

Some projects might be used for testing, it's often better to create a new project.

Adding a static project

Create a folder in static/
Add at least an index.html file (like static/my-demo/index.html)
Access it at https://pbx.vercel.app/my-demo/

Adding a project with a build

Create a folder in source/ with the source files, like source/my-demo/
- Treat this folder as a self-contained project with its own package.json file
Add the install and build steps in its own build.sh file (like source/my-demo/build.sh)
- it should include the exact header as other build.sh scripts
- it should output files in public/
Run build.sh on your computer, like bash source/my-demo/build.sh
Commit both source and public folders
If your project is a single-page APP (i.e. all paths point to index.html), you'll have to edit vercel.json too
Access it at https://pbx.vercel.app/my-demo/
- If you send a PR, you can access a temporary deployment at a custom URL like pbx-temp-pr.vercel.app/my-demo/

playground's People

Contributors

Watchers

playground's Issues

vue-element-admin route cleanup

Context

See: #26 (comment)

Implementation Sketch

Remove unused entry from vercel.json

`advanced-fields` issues

TinyMCE 6: readonly due to missing api key

playground/static/advanced-fields/index.html

Line 115 in 08fa0bf

Add vue admin example

Context

https://github.com/PanJiaChen/vue-element-admin is a project that's an admin panel showcase that doesn't require a backend
It looks like out of the box we don't need a backend for it since all of its network requests are mocked
Instead of copying the code to our repository, let's clone a release from their repository?

Implementation Sketch

Create a folder vue-element-admin
Add project with a build: https://github.com/pixiebrix/playground#adding-a-project-with-a-build
In the directory, add a build script with the steps:
- Clone the repository
- Apply a patch (if needed) using git apply
- https://github.com/PanJiaChen/vue-element-admin#getting-started
- Do a production build: https://github.com/PanJiaChen/vue-element-admin#build
Submit a PR, and verify the application is working in the PR demo deploy

Considerations

When cloning the repository during the build, do a shallow clone so the clone is fast

Error: "You are loading Turbolinks from a <script> element inside the <body> element"

The turbolinks example doesn't seem to work correctly, you can see the whole page reloading (these events log entries are only shown on full navigation):

Screen.Recording.1.mov

And Turbolinks itself is printing this error in the console:

Add infinite scroll example

Context

Infinite scroll requires an extension point to continuous look for new elements to attach elements (e.g., menu items to)

Implementation Sketch

Create a directory called infinite scroll
Create a page with this library: https://infinite-scroll.com/

Use subdomain like playground.pixiebrix.com?

We can configure GitHub Pages to be available on a custom address, we just need a to point a subdomain GitHub and configure it in this repo’s settings tab.

Before

https://pixiebrix.github.io/playground/example/

After

https://playground.pixiebrix.com/example

Rethink deployment strategy

We're only 6 projects in and the build is already taking 20 minutes 😰 https://vercel.com/pixiebrix/playground/G3rW9PbY9Y3ihbBrcGBgxAt2VjYJ

We should probably fix this before Vercel just stops building (and because 20 minutes is already a long time to find out whether something worked).

I don't know how to fix this yet, but I think it should only build a project if it was changed.

Possible solutions:

https://turborepo.org/docs/getting-started (Vercel just bought this)
Build on GitHub Actions (easier to skip parts of a build, needs some work to get PR preview builds)
Ensure that Vercel’s build cache is working

Thoughts? We could also just use a regular host/S3/EC2, but preview builds and lack of server maintenance are a big plus for Vercel.

I sent a message to Vercel hoping for suggestions.

Platform limits:

https://vercel.com/docs/concepts/deployments/build-step#technical-details

Add react admin example

Context

react-admin is a project that uses redux, react, and material-ui
They have a demo with mocked responses, etc.

Implementation Sketch

Same steps as #16
The directory should be called react-admin
But for this react-admin demo: https://github.com/marmelab/react-admin/tree/master/examples/demo

Move replit React sandbox to a folder in the playground

Context

We have a repl, but it would be nice to statically host so we can use as part of CI. (Currently we have to boot up the repl before we use it)
https://replit.com/@PixieBrixTodd/ReactSandbox

Add BPM style pages (e.g., forms)

Context

A common use case is to use PixieBrix to enhance a BPM data entry screen
Find an open source template that that mimics common BPM screens
Part of pixiebrix/pixiebrix-extension#1721

Add ngx-admin example

Context:

It looks like their demo is on the "demo" branch: https://github.com/akveo/ngx-admin/tree/demo
See their Github workflow for build steps: https://github.com/akveo/ngx-admin/blob/master/.github/workflows/demoDeploy.yml#L24
I checked the demo and it doesn't look like it makes backend requests

Implementation Sketch

Follow same steps as for #16
Call the directory ngx-admin

Add AngularJS example

Context: AngularJS is the legacy version of Angular (the new version is called Angular or Angular 2)
https://github.com/akveo/blur-admin

Add turbolinks example

Context

In Turbolinks (e.g., Github), navigation event occurs before page content changes
This can be modeled with multiple static pages. We don't need to have a backend
We might need/want to add a delay to the page load in order to make reproducing the effect more consistent

Implementation Sketch

Create a new "turbolinks" folder
Add a few files HTML files that include the following packages via CDN
- Turbolinks: https://www.jsdelivr.com/package/npm/turbolinks
- Bootstrap 5
Page Structure:
- Navbar: persisted across page loads: https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads
- Body with some example content on each page: 1) Landing Page, 2) Form, 3) Dashboard. You can use the example content from here: https://getbootstrap.com/docs/5.0/examples/

Other Notes

For local development you might need to serve the side via a HTTP server (for example with Python: python3 -m http.server 8001) for Turbolinks loading to work correctly. (JS/Node also probably has support for serving files in a directory)

Add advanced fields playground

For

Current:

input fields https://pbx.vercel.app/bootstrap-5/
textarea/contenteditable: https://ghosttext.fregante.com/test/
DraftJS https://draftjs.org/
TinyMCE https://www.tiny.cloud/docs/demo/basic-example/
CKEditor https://ckeditor.com/ckeditor-5/demo/feature-rich/

Add index.html for project root

Now that we've switched over to a Github actions based CI/CD the README.md file isn't picked up as the index for the https://pixiebrix.github.io/playground/ directory

Options:

Write an index html file
In the Github action, pass the README.md file through a markdown converter to generate an index.html (preferred for now)

Sites with hotkeys often attach a document listener that capture key events on the bubble
They perform event filtering to determine whether or not to trigger the hotkey (e.g., they won't trigger a hotkey if the user is editing something).
Currently we can't do anything about this b/c we run our content script on idle. The approach we've taken instead is to embed out content in iframes so the host page doesn't get an event

Add CRM style pages

Context

A common use case is to use PixieBrix to enhance a CRM
Find an open source admin template that for React that mimics common CRM screens
Part of pixiebrix/pixiebrix-extension#1721

Add complex pages from real websites, even if completely static

For issues/testing like this one: pixiebrix/pixiebrix-extension#1887

I think we could grab some of these pages and host them locally. Here's the proposed procedure:

Visit one of these pages
Save the page including the assets
Pass the HTML through the Sanitizer to drop all Javascript
Drop site logo and add banner to highlight "This is not SITE XYZ, it's a testing page"

Worth it?

pixiebrix / playground Goto Github PK

playground's Introduction

playground

Contribute

Adding a static project

Adding a project with a build

playground's People

Contributors

Watchers

playground's Issues

Before

After

Recommend Projects

Recommend Topics

Recommend Org