search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.35k stars 1.3k forks source link

Loading Multiple HTML pages and CSS #1486

Open Wildernesss opened 4 years ago

Wildernesss commented 4 years ago

Hi everybody,

I've used the p5.js online editor with my students for remote teaching during the covid19 period. And it's really a great tool that simplify programming learning! Thanks a lot all its developpers!

Teaching not only programming but also HTML/CSS, p5js editor is also very nice to create a first HTML/CSS page, to test it and publish it online. After having learned how to make an HTML page formatted with a .css file, we then create other HTML pages and a small website. So we've got a p5.js sketch into online editor with multiple web pages, all of them applying the same 'styles.css' styles :

https://editor.p5js.org/bardyl/present/J4ZS_c853

Nature of issue?

Details about the bug:

We have two problems:

  1. when we click in the first html loaded page on a link to another web page of this mini website, the other HTML page loads in the browser BUT the 'styles.css' files is not applied to this second HTML page (even if apparently the browser loads it correctly). The problem is the same for all the other web page of the site/sketch. Chrome warns this problem in its console: "Resource interpreted as Stylesheet but transferred with MIME type text/html"

  2. when running the sketch from editor or accessing to the mini website with the shared fullscreen link of the project, it's not the index.html page that is loaded (it's another HTML page, always the same one, but not the default

It would be great if we could use editor.p5js.org to also learn a little bit of HTML/CSS and make small sample mini website in order to learn these topics. That means, making little project with multiples HTML pages and css file applying to all of them.

Any idea? Thanks a lot for your precious input! :smiley:

Laurent

catarak commented 4 years ago

Hi @Wildernesss! Thanks for opening an issue.

The web editor wasn't designed with multiple HTML pages in mind, so handling your use case is a little tricky. This has come up in the past (see #145) and I'm not really sure how to handle it!

That being said, I think that (1) could be fixed, recently #1218 was fixed but it seems like it's not working right.

Wildernesss commented 4 years ago

Hi @catarak! Thanks a lot for your insight! It would be great if the (1) issue could be fixed with a correct mime type into header for CSS file ! And thanks again for all the work of the Editor team: really a great and motivating tool to introduce programming and web to highschool students!

xpendragonx commented 3 years ago

I was able to create a workaround by copying and pasting the contents of my css file into a style tag at the bottom of my body , as opposed to linking my css file. I did this on my 3 separate .html files and it seemed to work, but it's a little slow to load.