Feature Request: use relative urls

[jeffalo]

trafficstars

looking through the source code, there are so many places where stuff points to theforumhelpers.github.io. this makes development tedious. why not just use relative urls like

fetch("/forumhelpers/"+dataSet+".json")

instead of

fetch("https://theforumhelpers.github.io/forumhelpers/"+dataSet+".json")

another example of this was in #152 where some obscure <base> element was used when it could have just been as simple as adding a slash before the paths. like <link rel="stylesheet" type="text/css" href="/resources/stylesheet.css"> instead of <link rel="stylesheet" type="text/css" href="resources/stylesheet.css">

is there a specific development reason not to? this will allow development to be so much easier.

[gosoccerboy5]

I tried to fix that, but Firefox denied the CORS request because "it was not https". 😕 Idk why your own filesystem would be blocked from using fetch, but oh well.

[jeffalo]

I tried to fix that, but Firefox denied the CORS request because "it was not https". 😕 Idk why your own filesystem would be blocked from using fetch.

are you running stuff as a file url (aka double clicking a html file)? there are security reasons browsers do this to prevent html files from being malicious.

[gosoccerboy5]

I tried to fix that, but Firefox denied the CORS request because "it was not https". 😕 Idk why your own filesystem would be blocked from using fetch.

are you running stuff as a file url (aka double clicking a html file)? there are security reasons browsers do this to prevent html files from being malicious.

Yea, just opening it from vscode with the "open in browser" extension. Why, is there some way I can work around the fetch being blocked?

[jeffalo]

Yea, just opening it from vscode with the "open in browser" extension. Why, is there some way I can work around the fetch being blocked?

theres probably some browser option for it.. but why not run in a proper localhost development server? heres mine it tries to simulate github pages.

[Accio1]

looking through the source code, there are so many places where stuff points to theforumhelpers.github.io. this makes development tedious. why not just use relative urls like

fetch("/forumhelpers/"+dataSet+".json")

instead of

fetch("https://theforumhelpers.github.io/forumhelpers/"+dataSet+".json")

This is because fetch requests cannot be performed to a local file. Therefore, there would be no way to test the page locally without adding some hard coded data for it to display. Therefore, it is better that it pulls the current live data so that the page actually displays with people on it.

another example of this was in #152 where some obscure <base> element was used when it could have just been as simple as adding a slash before the paths. like <link rel="stylesheet" type="text/css" href="/resources/stylesheet.css"> instead of <link rel="stylesheet" type="text/css" href="resources/stylesheet.css">

is there a specific development reason not to? this will allow development to be so much easier.

This is because adding a slash would work on the site, but not locally. For example, on Windows, using a slash would redirect to C:/

Both of these changes are actually designed to make development easier, not more difficult. If you have any suggestions about how this could be worked around while still using relative URLS, feel free to share them!

[leahcimto]

This is because adding a slash would work on the site, but not locally. For example, on Windows, using a slash would redirect to C:/

@Accio1 @jeffalo You know for the links and the whole C:/ or file:// thing you could simply replace the code in the header with this:

function reference(link) {
	const headerContent = `
	<a href="./" target="_parent">
		<img src="./resources/icon.png" width="64px" height="64px" class="nav_homeicon">
	</a>
	<h1 class="nav_title">The Forum Helpers</h1>
	<a href="./forumhelpers/index.html" class="nav_button" target="_parent">List Of Forum Helpers</a>
	<a href="https://scratch.mit.edu/studios/3688309/" class="nav_button" target="_blank">Our Scratch Studio</a>
	<a href="https://theforumhelpers.github.io/QuickReply/" class="nav_button" target="_parent">QuickReply</a>

	<div class="expandableDropdown">
		<a class="expandableLink" href="${link}forumhelpers">List Of Forum Helpers</a>
		<a class="expandableLink" href="https://scratch.mit.edu/studios/3688309/">Our Scratch Studio</a>
		<a class="expandableLink" href="https://theforumhelpers.github.io/QuickReply/">QuickReply</a>
	</div>
	document.getElementById("header").innerHTML = headerContent;

	const footerContent = 
	<div class="footer_content">
			<a href="./contributors/index.html" class="FHULink" target="_parent">Contributors</a>
			<br>
			<a href="https://github.com/theforumhelpers/theforumhelpers.github.io" class="FHULink" target="_parent">Github Repository</a>
			<br>
			Be moist <img src="https://cdn.scratch.mit.edu/scratchr2/static/__4f1f321e080ee4987f163566ecc0dd26__/djangobb_forum/img/smilies/cool.png">
	</div>
	document.getElementById("footer").innerHTML = footerContent;
}

(Changes all links to ./folder/index.html)

The <base> wouldn't be necessary.

[Accio1]

This is because adding a slash would work on the site, but not locally. For example, on Windows, using a slash would redirect to C:/

@Accio1 @jeffalo You know for the links and the whole C:/ or file:// thing you could simply replace the code in the header with this:

function reference(link) {
	const headerContent = `
	<a href="./" target="_parent">
		<img src="./resources/icon.png" width="64px" height="64px" class="nav_homeicon">
	</a>
	<h1 class="nav_title">The Forum Helpers</h1>
	<a href="./forumhelpers/index.html" class="nav_button" target="_parent">List Of Forum Helpers</a>
	<a href="https://scratch.mit.edu/studios/3688309/" class="nav_button" target="_blank">Our Scratch Studio</a>
	<a href="https://theforumhelpers.github.io/QuickReply/" class="nav_button" target="_parent">QuickReply</a>

	<div class="expandableDropdown">
		<a class="expandableLink" href="${link}forumhelpers">List Of Forum Helpers</a>
		<a class="expandableLink" href="https://scratch.mit.edu/studios/3688309/">Our Scratch Studio</a>
		<a class="expandableLink" href="https://theforumhelpers.github.io/QuickReply/">QuickReply</a>
	</div>
	document.getElementById("header").innerHTML = headerContent;

	const footerContent = 
	<div class="footer_content">
			<a href="./contributors/index.html" class="FHULink" target="_parent">Contributors</a>
			<br>
			<a href="https://github.com/theforumhelpers/theforumhelpers.github.io" class="FHULink" target="_parent">Github Repository</a>
			<br>
			Be moist <img src="https://cdn.scratch.mit.edu/scratchr2/static/__4f1f321e080ee4987f163566ecc0dd26__/djangobb_forum/img/smilies/cool.png">
	</div>
	document.getElementById("footer").innerHTML = footerContent;
}

(Changes all links to ./folder/index.html)

The wouldn't be necessary.

@leahcimto feel free to submit a fix for this!

[leahcimto]

@Accio1 Working on it now

[leahcimto]

Sorry for the delay, I hope to have it done soon.

[Accio1]

Sorry for the delay, I hope to have it done soon.

All good! No rush

[leahcimto]

I'm going to un-assign me since I'm a bit busy at the moment and don't want to hold this up. I also am having some trouble with it.

[Shluffy]

@Accio1 can i pls be assigned

[Accio1]

@Shluffy how would you plan to implement this?

[Shluffy]

@Shluffy how would you plan to implement this?

use / rather then the github things in certain cases. I could make a mock-up

[Accio1]

@Shluffy how would you plan to implement this?

use / rather then the github things in certain cases. I could make a mock-up

Using / won't work. That means anyone developing locally will have the relative URLS link to the root of their filesystem. Any changes made have to work both locally and on the actual site.

[BarelySmooth]

@Accio1 Is there a known easy way to do this?

(I think I know how to do it albeit not in a straightforward way)

[gosoccerboy5]

@Accio1 Is there a known easy way to do this?

(I think I know how to do it albeit not in a straightforward way)

Not that I can think of

[BarelySmooth]

@Accio1 Is there a known easy way to do this? (I think I know how to do it albeit not in a straightforward way)

Not that I can think of

If no such solution exists, then @Accio1, can I try reloving it?

[Accio1]

@Accio1 Is there a known easy way to do this? (I think I know how to do it albeit not in a straightforward way)

Not that I can think of

If no such solution exists, then @Accio1, can I try reloving it?

@BarelySmooth what solution do you have in mind?

[BarelySmooth]

@Accio1 Use Javascript to add the “href” attribute to the tag. We can use javascript code to determine what should go in there.

[BarelySmooth]

@Accio1 bump? (so that you get notified...)

[Accio1]

@BarelySmooth feel free to submit a PR. I am interested to see how you implement your solution.

[jeffalo]

i'm not sure why you want to make sure the basic HTML files will continue to work. it seems like too much inconvinence for very little reward.

https://stackoverflow.com/questions/40204913/difference-between-localhost-and-opening-html-file

they explain that it's best to match your production environment (github pages). there's so many static file server plugins for many editors, it doesn't make sense to continue supporting opening the file in a web browser unless for some reason notepad is the best code editor people have.

if it's that a local development server is too complicated for new contributers, you could add something to the readme on how to use something like repl.it to edit the site.

i'd say that all the hacks you have to come up with for the files to work in a browser make it much harder to develop, not easier.

[FunctionalMetatable]

I'll like to note that filesystems shouldn't support 404.html files. Also, can I be assigned?

[Accio1]

@FunctionalMetatable I've assigned you. Feel free to build off @BarelySmooth's code in #260

[CST1229]

there's so many static file server plugins for many editors

There's also some static file servers that don't depend on a code editor, like http-server for node.js. All you need is 2 commands (plus an extra install if you don't have node.js already, minus one command if you have http-server installed already) to get a server up and running.

[FunctionalMetatable]

Oops, i dont know much about this 404.html relative files so i probably shouldnt do this (Sorry @accio1)