Restyle Docs Site #3935

AyhamAl-Ali · 2021-04-29T21:52:12Z

Description

Completely new styling to SkriptLang official documentation website.
Fixed some docs contains missing entries returning empty in the website instead of returning the default return.
Added favicon to the website.
Added Tutorials page (Will have a PR for it soon)
Merged Fix hex codes documentation #3889 PR with this PR.
Added quick made logos in the Assets folder in case someone needed it.
Added idScroll.js to automatically highlight current element in the side-navigation
Added copyrights section to the home page.
Added Github page to the menu.
Added code blocks syntax highlighting
Added Advanced Live Search Bar
Improved homepage, download links and contributors
Fixed HTML tags not working in the patterns of /classes/
Many issues fixed (check the related issues section)
Fixed some old Skript github links.

TODO:
✔️ ~~- Fix some patterns have HTML codes but due to cleanPattern method they are not parsed.~~

LIVE VIEW: https://opg4mers.com/skdocs

How it looks (not updated)

Target Minecraft Versions: Any
Requirements: None
Related Issues: #3889 (Merged PR) (#1598 CSS and overall styling improvements) (#611 Related to tutorial and later will have a PR for that as well) (#4072 #4011 Fixed patterns) (#1184 fix a wrong example) (CSS and responsivity improvements) #2705 (#1338 Adding more description as requested in the comment) #2425 #1253

- Completely new styling to SkriptLang official documentation website. - Fixed some docs contains missing entries returning empty in the website instead of returning the default return. - Added favicon to the website. - Added Tutorials page (Will have a PR for it soon) - Merged SkriptLang#3889 PR with this PR. - Added quick made logos in the Assets folder in case someone needed it. - Added idScroll.js to automatically highlight current element in the side-navigation - Added copyrights section to the home page. - Added Github page to the menu. Fixed some old Skript github links. **TODO:** - Fix some patterns have HTML codes but due to cleanPattern method they are not parsed.

Added Active Tab JS code to make current page tabs highlighted Fixed some pages should have no-left-panel Fixed some pages have some clipped content such as Text page the copyrights at the end was clipped Fixed images in assets folder were corrupted due being copied as String in the Java Code Fixed multiple styling Fixed responsiveness Added Skript Version to nav-bar Fixed a typo Github -> GitHub Packed all JS codes into main.js

…into feature/docs-site-styling

TPGamesNL

I very much like this new design, but I do have some comments.

If anyone wants to preview it, extract this zip and open index.html: docs.zip (it doesn't have any region or economy related stuff, but it's good enough for a preview)

src/main/java/ch/njol/skript/doc/HTMLGenerator.java

docs/text.html

docs/tutorials.html

docs/index.html

…into feature/docs-site-styling

AyhamAl-Ali · 2021-07-02T00:12:40Z

SkriptDocs2.6.zip
This is the docs file after update

src/main/java/ch/njol/skript/doc/HTMLGenerator.java

docs/text.html

TPGamesNL

(if anyone wants to see this online: https://tpgames.tk/docs/index.html)
I did notice that going to https://tpgames.tk/docs/, instead of https://tpgames.tk/docs/index.html will cause some issues:

(grey line appears and Home is no longer selected)
Correct version:

(btw, sorry: GitHub messed up the review a bit and split it up into two parts)

docs/index.html

- Fix indentation using spaces not tabs (Caused some elements to looks like it has padding) - Replaced `fit-content` with `max-content` for Firefox compatibility. - Fix active tab in default home page when not having `index.html` in the link - Fix left-panel scrollbar appearing in default home page.

- Fix indentation using spaces not tabs (Caused some elements to look like it has padding) - Replaced `fit-content` with `max-content` for Firefox compatibility. - Fix active tab in default home page when not having `index.html` in the link - Fix left-panel scrollbar appearing in default home page.

…into feature/docs-site-styling

AyhamAl-Ali · 2021-07-03T16:32:08Z

Editing the commit message due to a typo caused the commits to duplicate, sorry.
Live test here: http://opg4mers.com/skdocs/

FranKusmiruk · 2021-07-03T16:52:59Z

it is probably because I am using a small screen but in the home page the documentation block gets out of place:

AyhamAl-Ali · 2021-07-03T21:45:20Z

it is probably because I am using a small screen but in the home page the documentation block gets out of place:

True, the website is still not perfect with responsivity but I will try to improve it with time.
I will push a quick fix for this to be like this in smaller screens

After that the block will disappear as it used to be

AyhamAl-Ali · 2021-07-28T10:12:22Z

Second commit message is wrong. This is the correct issue related #2705

BaeFell

Just a minor change that I don't think was needed. Everything else looks ok.

src/main/java/ch/njol/skript/events/SimpleEvents.java

TPGamesNL · 2021-07-31T09:37:52Z

@AyhamAl-Ali Can you edit the PR message to include all related issues?

AyhamAl-Ali · 2021-07-31T09:54:35Z

@AyhamAl-Ali Can you edit the PR message to include all related issues?

Done 👍

TPGamesNL · 2021-07-31T10:28:29Z

Can you modify docs/README.md to tell how to generate docs?

TPGamesNL · 2021-07-31T10:56:08Z

Part of the bottom of the screen doesn't contain content:

Also, I'm not marking #4072 as completed / PR available when there's the scenario of |) remaining. I'll take a look at fixing that in cleanPatterns later.

The link icon looks weird in size/position now:

I think it'd be a good idea to make clicking the icon copy the link.

AyhamAl-Ali · 2021-07-31T11:52:26Z

Part of the bottom of the screen doesn't contain content:

Also, I'm not marking #4072 as completed / PR available when there's the scenario of |) remaining. I'll take a look at fixing that in cleanPatterns later.

The link icon looks weird in size/position now:

I think it'd be a good idea to make clicking the icon copy the link.

Okay, I will look into this as soon as I can and regarding the cleanPattern yes there is still a remaining scenario as you said so it is not fully fixed yet.

@TPGamesNL

- Fixed `cleanPattern` method not fully handling optional brackets (Thanks to @TPGamesNL for helping me with this) - Fixed `classes (types)` having unneeded <code> tags in the patterns - Fixed `classes (types)` patterns not parsing HTML well - Fixed `classes (types)` patterns not parsing links - Improved `HTMLGenerator.class` to use StringBuilder in some cases - Fixed `CommandSender` type example

AyhamAl-Ali · 2021-08-04T15:33:57Z

Few things left for this PR and it will be ready to merge

Fixing a bug with command arguments being deleted by the HTML filter
Improving the homepage

AyhamAl-Ali · 2021-08-05T08:34:27Z

Due to this commit this issue can be marked as PR Available #4072

AyhamAl-Ali · 2021-08-07T13:48:41Z

Keeping up.. Big update is coming :)

- I introduce to you "The Search Bar" which will search the patterns and the syntax name for matches + it has a filter for versions (v:X.Y[.Z][+] - Ex. v: 2.5.3 will filter searches that only match the current search value and the version 2.5.3) (if '+' is added to the end it will also match all versions above the requested version Ex. v:2.5.3+ will match 2.6 and up as well) + added auto focus to the search bar for quicker search. - HighlightJs - This is a nice little addition to the website that will make all the codes look much nicer with colors (even tho not made for Skript but later I will have an update for Skript Syntax highlighting using my own Sk-VSC extension) This has 1 issue though, it made the docs pages take 1-2 seconds to load because it will highlight all the code blocks in the page which are so many. - Improved the homepage + Added a quick overview code to the homepage as a quick Skript example for the users to have an idea what Skript code looks like + download links and contributors size - Improved some styling and changed some old colors + fixed some responsivity - Added jQuery, HighlightJS to the libraries - Fixed DocumentationID annotation, field and method not being used at all in docs generation. - Fixed duplicated IDs - This was due to [wrong]? registration of syntaxes by registering the same class for multiple patterns which caused the docs to have multiple elements with the same ID which broke the search-bar but it has been fixed. - Fixed some typos. - Added multiple placeholders to the docs such as: ${latest-version} ${contributors-size} ${{skript.build.date}. - Fixed code example that uses html list were not working

AyhamAl-Ali · 2021-08-08T04:13:37Z

Adding to the latest commit..

Fixed [on] not being added to events that begin with On as it should be.

Also, this update contains syntax highlighting for the code blocks which is very nice and cool but it has 1 little issue about loading the doc pages (will take about 1-2 seconds to load the page) which if it is very annoying for most of the users I can enable it only in the homepage which doesn't take long time but other pages will not have any syntax highlighting so I would like to hear your opinion here or on discord AyhamAlali#0001

- Keep in mind that any syntax documentation annotation support HTML codes so if you are using any character that might be treated as HTML tag must be escaped. - Add open-graph meta tags

AyhamAl-Ali · 2021-08-10T20:00:48Z

✅ This PR is now ready to be merged.

Moderocky

LGTM.

As per our discussion, you can make a follow-up PR with any speed + SH improvements. :)

- Added a quick fix for the newlines being removed due to minifyHtml which fixes the code example syntax highlighting.

AzonFR · 2021-08-30T22:17:40Z

The new design is perfect
Proposal: it would be cool to have a "recent" category that shows the latest additions

APickledWalrus · 2021-08-30T22:55:13Z

The new design is perfect

Proposal: it would be cool to have a "recent" category that shows the latest additions

I like this idea. Could probably do something with the since tag to make this possible.

AyhamAl-Ali · 2021-08-30T22:56:57Z

The new design is perfect
Proposal: it would be cool to have a "recent" category that shows the latest additions

I like this idea. Could probably do something with the since tag to make this possible.

Indeed. The base of this feature has already been implemented in the search feature, feature already in process + ability to choose new stuff in specific versions :)

AyhamAl-Ali added 2 commits April 30, 2021 00:45

Merge branch 'master' into feature/docs-site-styling

c882def

TPGamesNL added 2.6 documentation Related to Skript's official documentation. enhancement Feature request, an issue about something that could be improved, or a PR improving something. labels Apr 30, 2021

AyhamAl-Ali added 4 commits April 30, 2021 18:01

Merge remote-tracking branch 'AyhamAl-Ali/feature/docs-site-styling' …

be72cb7

…into feature/docs-site-styling

Copyrights link fix

153bf55

Merge branch 'master' into feature/docs-site-styling

be8ceaf

TPGamesNL requested changes Jul 1, 2021

View reviewed changes

AyhamAl-Ali mentioned this pull request Jul 1, 2021

Fix hex codes documentation #3889

Closed

AyhamAl-Ali added 2 commits July 2, 2021 03:05

Changes as requested

3eaee4b

Merge remote-tracking branch 'AyhamAl-Ali/feature/docs-site-styling' …

c92851c

…into feature/docs-site-styling

Formatting

cef7eb3

AyhamAl-Ali force-pushed the feature/docs-site-styling branch from a9201b4 to cef7eb3 Compare July 2, 2021 00:21

TPGamesNL reviewed Jul 2, 2021

View reviewed changes

src/main/java/ch/njol/skript/doc/HTMLGenerator.java Outdated Show resolved Hide resolved

docs/text.html Outdated Show resolved Hide resolved

docs/text.html Outdated Show resolved Hide resolved

TPGamesNL requested changes Jul 2, 2021

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

Romitou reviewed Jul 2, 2021

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

AyhamAl-Ali added 7 commits July 3, 2021 19:24

Typo

77985b2

Forgot this

67d0d2a

Typo

a1cd16e

Forgot this

a9f105a

Merge remote-tracking branch 'AyhamAl-Ali/feature/docs-site-styling' …

e63235d

…into feature/docs-site-styling

Fix title responsivity for smaller screens

7c2eb85

AyhamAl-Ali force-pushed the feature/docs-site-styling branch from b041db4 to 5a1a8be Compare July 28, 2021 10:44

BaeFell reviewed Jul 29, 2021

View reviewed changes

src/main/java/ch/njol/skript/events/SimpleEvents.java Show resolved Hide resolved

AyhamAl-Ali force-pushed the feature/docs-site-styling branch from d75b1e8 to 25e442d Compare August 3, 2021 00:30

AyhamAl-Ali added 2 commits August 3, 2021 03:33

Add anchor click link copy + Notification

996941a

Fix Usable in events links

43f0ea4

Fixed command arguments not escaped

a950c12

- Keep in mind that any syntax documentation annotation support HTML codes so if you are using any character that might be treated as HTML tag must be escaped. - Add open-graph meta tags

Moderocky approved these changes Aug 11, 2021

View reviewed changes

As requested (New example & HLJS license)

73c63bc

- Added a quick fix for the newlines being removed due to minifyHtml which fixes the code example syntax highlighting.

TPGamesNL approved these changes Aug 13, 2021

View reviewed changes

Merge branch 'master' into feature/docs-site-styling

1be24d8

TPGamesNL merged commit 7a1929a into SkriptLang:master Aug 15, 2021

APickledWalrus mentioned this pull request Aug 30, 2021

Update Docs Website #4310

Merged

APickledWalrus mentioned this pull request Aug 30, 2021

[suggestion] search on doc site #1253

Closed

AyhamAl-Ali mentioned this pull request Sep 4, 2021

🚀 Docs Site Improvements #4319

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Restyle Docs Site #3935

Restyle Docs Site #3935

AyhamAl-Ali commented Apr 29, 2021 •

edited

Loading

TPGamesNL left a comment

AyhamAl-Ali commented Jul 2, 2021

TPGamesNL left a comment •

edited

Loading

AyhamAl-Ali commented Jul 3, 2021

FranKusmiruk commented Jul 3, 2021

AyhamAl-Ali commented Jul 3, 2021 •

edited

Loading

AyhamAl-Ali commented Jul 28, 2021

BaeFell left a comment

TPGamesNL commented Jul 31, 2021

AyhamAl-Ali commented Jul 31, 2021

TPGamesNL commented Jul 31, 2021

TPGamesNL commented Jul 31, 2021

AyhamAl-Ali commented Jul 31, 2021

AyhamAl-Ali commented Aug 4, 2021

AyhamAl-Ali commented Aug 5, 2021 •

edited

Loading

AyhamAl-Ali commented Aug 7, 2021

AyhamAl-Ali commented Aug 8, 2021

AyhamAl-Ali commented Aug 10, 2021

Moderocky left a comment

AzonFR commented Aug 30, 2021

APickledWalrus commented Aug 30, 2021

AyhamAl-Ali commented Aug 30, 2021

Restyle Docs Site #3935

Restyle Docs Site #3935

Conversation

AyhamAl-Ali commented Apr 29, 2021 • edited Loading

Description

TPGamesNL left a comment

Choose a reason for hiding this comment

AyhamAl-Ali commented Jul 2, 2021

TPGamesNL left a comment • edited Loading

Choose a reason for hiding this comment

AyhamAl-Ali commented Jul 3, 2021

FranKusmiruk commented Jul 3, 2021

AyhamAl-Ali commented Jul 3, 2021 • edited Loading

AyhamAl-Ali commented Jul 28, 2021

BaeFell left a comment

Choose a reason for hiding this comment

TPGamesNL commented Jul 31, 2021

AyhamAl-Ali commented Jul 31, 2021

TPGamesNL commented Jul 31, 2021

TPGamesNL commented Jul 31, 2021

AyhamAl-Ali commented Jul 31, 2021

AyhamAl-Ali commented Aug 4, 2021

AyhamAl-Ali commented Aug 5, 2021 • edited Loading

AyhamAl-Ali commented Aug 7, 2021

AyhamAl-Ali commented Aug 8, 2021

AyhamAl-Ali commented Aug 10, 2021

Moderocky left a comment

Choose a reason for hiding this comment

AzonFR commented Aug 30, 2021

APickledWalrus commented Aug 30, 2021

AyhamAl-Ali commented Aug 30, 2021

AyhamAl-Ali commented Apr 29, 2021 •

edited

Loading

TPGamesNL left a comment •

edited

Loading

AyhamAl-Ali commented Jul 3, 2021 •

edited

Loading

AyhamAl-Ali commented Aug 5, 2021 •

edited

Loading