Rework of the website

[Olyno]

The rework of the Skript's website will contain these issues:

• 💡 Tutorials Needed skript-docs#12
• [suggestion] search on doc site #1253
• Proposal : Logo for the project and new website design #1429
• docs #1598
• Documentation Stylesheet #1184
• Required command arguments disappear in the doc examples #2425

Please post your suggestions or ideas about this rework here.

(This issue is a improvement and continuity of #2506)

[noftaly]

idk if this is valid, but: SkriptLang/skript-docs#14

[Olyno]

idk if this is valid, but: SkriptLang/skript-docs#14

I don't really know if it's possible so I will add it if we can do it

[Olyno]

Website available here: https://olyno.github.io/skript-website/

[bensku]

Looks great! Aside that, there are a few issues you could look at:

1. PageSpeed Insights reports a rather low score on mobile, and can't reach 100 even on desktop. Since better mobile support was one of goals of this change, I feel this is quite important. Current website scores 100 on both mobile and desktop, and is currently usable (but ugly) on mobile (except Safari).
2. Core functionality does not work without Javascript. Core functionality does not include search or other dynamic content.
3. External links to documentation pages do not work (tested on Firefox 70, Linux). This is probably most critical of the issues, and I suspect it is related to issue 2.

[Olyno]

PageSpeed Insights reports a rather low score on mobile, and can't reach 100 even on desktop.

Page speed has been fixed:

• Mobile: 92
• Desktop; 100

I think not I can make a better performance than that because the new website requires images that the old doesn't.

Core functionality does not work without Javascript.

Agree, but it's what I call a modern website. The main issue you have when you don't use these tools (as ReactJs, VueJs or here SvelteJs) is that you must copy paste the same thing everytime you need it. The strength of theses technologies is what we call reusable components. You create a component and can reuse it everywhere you need it. Each components can have values insides when render, and takes only 1 line to add. When you edit 1 component, it edits everywhere you use it (so a big gain of time).
That's the reason why I will not remove Javascript here because it will be stupid. You require a lot of time Javascript (as documentation pages) in this website.

External links to documentation pages do not work

Hmmm I will have a look in. It's probably javascript as you said. I will add a polyfill to make it compatible everywhere.

[bluelhf]

@Olyno Maybe use the latest github release and parse the redirect url to get the version to show in the "Download latest" button instead of manually setting it?

(Use https://github.com/SkriptLang/Skript/releases/latest/, wait for it to redirect, then split the url by / and get the last element)

Oh, and replace Bukkit platform with Spigot and Paper platforms in the description of Skript on the main page

[Olyno]

@Olyno Maybe use the latest github release and parse the redirect url to get the version to show in the "Download latest" button instead of manually setting it?

(Use https://github.com/SkriptLang/Skript/releases/latest/, wait for it to redirect, then split the url by / and get the last element)

Oh, and replace Bukkit platform with Spigot and Paper platforms in the description of Skript on the main page

I will have a look in, thanks for your suggestion!

[bensku]

@Olyno My suggestion would have been to use server side rendering. It seems you did exactly that, because the site now works without Javascript. It also loads much faster and external links to it appear to be working.

All in all, I think the website is ready. We can start figuring out how we'll be replacing the current site with it. Thanks for great work!

[APickledWalrus]

A few things I noticed:

• The main description should be updated, especially now that the website includes tutorials (description says it does not).
• The text on the color picker is not completely within the white box (it is a little below) and some text is moved it seems (see below)
• The color picker seems to be cut off by the scrollbar.

[Olyno]

The text on the color picker is not completely within the white box (it is a little below) and some text is moved it seems (see below)

Unlucky for me, the color picker is a component that I didn't create, so I can't edit it

The other things will be fix soon!