{"id":20224845,"url":"https://github.com/xhyabunny/wloader","last_synced_at":"2026-01-31T10:02:45.772Z","repository":{"id":174837756,"uuid":"652793529","full_name":"xhyabunny/wloader","owner":"xhyabunny","description":"WLoader is a working and reusable script that builds a simpler HTML using JSON and JS.","archived":false,"fork":false,"pushed_at":"2024-04-12T04:56:45.000Z","size":79,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T08:45:43.447Z","etag":null,"topics":["html5","javascript","javascript-library","json","website"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xhyabunny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"bonndubz","ko_fi":"xhyabunny","custom":"https://paypal.me/xhyabunny"}},"created_at":"2023-06-12T20:10:17.000Z","updated_at":"2024-09-23T22:36:18.000Z","dependencies_parsed_at":"2025-02-14T01:41:19.973Z","dependency_job_id":"1e2fa9cc-ee82-46ea-af96-639025dbe09d","html_url":"https://github.com/xhyabunny/wloader","commit_stats":null,"previous_names":["xhyabunny/wloader"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/xhyabunny/wloader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xhyabunny%2Fwloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xhyabunny%2Fwloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xhyabunny%2Fwloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xhyabunny%2Fwloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xhyabunny","download_url":"https://codeload.github.com/xhyabunny/wloader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xhyabunny%2Fwloader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28937815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T08:53:31.997Z","status":"ssl_error","status_checked_at":"2026-01-31T08:51:38.521Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5","javascript","javascript-library","json","website"],"created_at":"2024-11-14T07:09:25.922Z","updated_at":"2026-01-31T10:02:45.753Z","avatar_url":"https://github.com/xhyabunny.png","language":null,"funding_links":["https://patreon.com/bonndubz","https://ko-fi.com/xhyabunny","https://paypal.me/xhyabunny"],"categories":[],"sub_categories":[],"readme":"  \n​🇼​​🇱​​🇴​​🇦​​🇩​​🇪​​🇷​ ​🇮​​🇸​ ​🇦​ ​🇼​​🇴​​🇷​​🇰​​🇮​​🇳​​🇬​ ​🇧​​🇺​​🇮​​🇱​​🇩​​🇪​​🇷​ ​🇫​​🇴​​🇷​ ​🇭​​🇹​​🇲​​🇱​ ​🇺​​🇸​​🇮​​🇳​​🇬​ ​🇯​​🇸​​🇴​​🇳​ ​🇦​​🇳​​🇩​ ​🇯​​🇸​. \n\n![wloaderbanner](https://github.com/xhyabunny/wloader/assets/106491722/1eb9d4d4-086e-47f5-972e-df25340524e7)\n\n\u003ch1\u003eIndex\u003c/h1\u003e \n\n- [Instructions](https://github.com/xhyabunny/wloader/tree/main#instructions)\n\n- [Using the JSON file](https://github.com/xhyabunny/wloader/tree/main#using-the-json-file) \u003e [Main indexes](https://github.com/xhyabunny/wloader/tree/main#main-indexes) \u003e [Head \u0026 Meta elements](https://github.com/xhyabunny/wloader/tree/main#head--meta-elements) \u003e [The modifiers](https://github.com/xhyabunny/wloader/tree/main#the-modifiers) \u003e [OnLoad animations](https://github.com/xhyabunny/wloader/tree/main#onload-animations)\n- [Credits](https://github.com/xhyabunny/wloader/tree/main#credits)\n\n\u003ch1\u003eInstructions\u003c/h1\u003e \u003cimg style=\"\n  height: 40px;width: 40px;\" src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/106491722/245261475-f581fca3-0ed6-4f8e-9385-1af112c3d46b.png\"\n  /\u003e\n\nThis package will come with 2 scripts. \n\n``wloader.js``\n``wloader.json``\n ᵁˢᵘᵃˡˡʸ ʸᵒᵘ ʲᵘˢᵗ ᵘˢᵉ ᵗʰᵉ ᴶˢᴼᴺ\n\n🔹 You can implement them on your code just drag \u0026 dropping these two into your project:\n\n\u003cimg style=\"\n  height: 170px;width: 270px;\" src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/106491722/245296091-62f1f928-582e-4541-abda-a0b30dca8eb9.png\"\n  /\u003e\n \n🔹 And then accessing the JS script through HTML using the ``\u003cscript\u003e`` tag in any part of your code:\n\n```html\n\u003cscript src=\"./path/to/wloader.js\"\u003e\u003c/script\u003e\n```\n\n✔ *You can also recycle this script globally in another HTML file just calling the script with its respective tag like shown above!*\n\n✔ *If you're willing to modify anything to your likings on the JS script, you are welcomed to do so, as long as you know what you're doing.\nYou could even create an issue and suggest things to be added!*\n\n## Using the JSON file\n\nThe first thing to see when you open the JSON file, is probably going to look very odd or messy, tabulation was made specifically for it to be as organized as possible\nfor your mind to be able to read it properly, so lets check out a few things about this JSON file.\n\n\u003ch3\u003eMain indexes\u003c/h3\u003e\n\nThe first thing you will realize when you check this json file, are both the ``html`` and ``css`` indexes:\n\n```json\n\"html\": \"./index.html\",\n\"css\": \"./index.css\",\n```\n\n❕ Those are to be replaced with the actual paths to both your *main css index* and your *main html index*\n\n⚠ *It's VERY IMPORTANT that you add the two main indexes, if you ever need to add another CSS file, you can add these on each respective array, we'll get to that soon.*\n\n\u003ch3\u003eHead \u0026 Meta elements\u003c/h3\u003e\n\nThe head and meta values on your JSON file by default will will look like this:\n\n```json\n    \"head\": \n    {\n        \"title\": \"wloader\",\n        \"icon\": \"https://github-production-user-asset-6210df.s3.amazonaws.com/106491722/245261475-f581fca3-0ed6-4f8e-9385-1af112c3d46b.png\",\n        \"meta\": [\n                \"og:title \\\\ test\"\n        ]\n    },\n```\n\nThis part of the JSON file contains the info about the Webpage icon and title.\n\nNotice the separation of each string with ``\\\\`` character, which marks the relative key ``(left side)`` and value ``(right side)`` of each string as if it was a normal json variable.\n\nYou wanna change the value of each key with the information you want, as long as your inserted value is correct and according to each meta link and you respect the assigned order given to you (``\"key\\\\value\"``).\n  \n\u003ch3\u003eThe modifiers\u003c/h3\u003e\n\nModifiers look something like this:\n\n```json\n\"sample\": \"modifier1\\\\modifier2\\\\content\"\n```\n\nThey are ordered and we'll call them:\n\n```json\n\"KEY\": \"TYPE_MODIFIER\\\\ATTRIBUTE_MODIFIER\\\\TARGET_VALUE\"\n```\n\nAgain notice how its separated by ``\\\\``\n\nThey are used to implement several features on each element of the HTML, for example, if we wanted a script to have the ``type`` modifier\nwe could just do it like this:\n\n```json\n\"scripts\": [\n  \"type_name\\\\null\\\\.path/to/script.js\"\n]\n```\n\nIf you don't need to use these modifiers you can just tag them out with ``null``.\n\nAnd then for crossorigin attributes we can add them like this:\n\n```json\n\"scripts\": [\n  \"type_name\\\\crossorigin\\\\.path/to/script.js\"\n]\n```\n\nAs for defer attributes, *these aren't avaiable yet*, those may be added on the HTML file manually until further updates.\n\nNow your script will load as a typed script, and with its crossorigin attribute.\n\n⚠ *REMEMBER: MODIFIERS GO IN ORDER, YOU CAN'T PUT TYPE MODIFIERS INSIDE ATTRIBUTE MODIFIERS AND/OR THE OTHER WAY AROUND*\n\nThis also happens with links, but to resume it; \n\nThe first modifier changes the ``rel`` of the link you are implementing, this link appends to the ``\u003chead\u003e`` element of your document, for example:\n- ``stylesheet``\n- ``preconnect``\n- ``etc``\n\nThe next modifier is attributes, same logic as scripts, for example:\n- ``crossorigin``\n\nThe target value would be the ``content`` tag of this link, which is up to you.\n\n\u003ch3\u003eOnLoad animations\u003c/h3\u003e\n\nThese are animations that progressively transition the opacity of your whole page from 0 to 1.\n\nYou can change them here:\n\n```json\n\"animationType\": \"fast\",\n```\n\nIt is set to ``fast`` by default, but you have many options:\n- ``none`` (animation is disabled)\n- ``faster``\n- ``fast``\n- ``smooth``\n- ``smoother``\n\nAll of them define a faster or slower entering transition.\n\n## Credits\n\n- xhyabunny\n- sanicbtw (recycled idea)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxhyabunny%2Fwloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxhyabunny%2Fwloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxhyabunny%2Fwloader/lists"}