Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xhyabunny/wloader
WLoader is a working and reusable script that builds a simpler HTML using JSON and JS.
https://github.com/xhyabunny/wloader
html5 javascript javascript-library json website
Last synced: about 19 hours ago
JSON representation
WLoader is a working and reusable script that builds a simpler HTML using JSON and JS.
- Host: GitHub
- URL: https://github.com/xhyabunny/wloader
- Owner: xhyabunny
- Created: 2023-06-12T20:10:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-12T04:56:45.000Z (7 months ago)
- Last Synced: 2024-04-12T12:20:53.960Z (7 months ago)
- Topics: html5, javascript, javascript-library, json, website
- Homepage: https://xhyabunny.org/wloader
- Size: 77.1 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
โ๐ผโโ๐ฑโโ๐ดโโ๐ฆโโ๐ฉโโ๐ชโโ๐ทโ โ๐ฎโโ๐ธโ โ๐ฆโ โ๐ผโโ๐ดโโ๐ทโโ๐ฐโโ๐ฎโโ๐ณโโ๐ฌโ โ๐งโโ๐บโโ๐ฎโโ๐ฑโโ๐ฉโโ๐ชโโ๐ทโ โ๐ซโโ๐ดโโ๐ทโ โ๐ญโโ๐นโโ๐ฒโโ๐ฑโ โ๐บโโ๐ธโโ๐ฎโโ๐ณโโ๐ฌโ โ๐ฏโโ๐ธโโ๐ดโโ๐ณโ โ๐ฆโโ๐ณโโ๐ฉโ โ๐ฏโโ๐ธโ.
Index
- [Instructions](https://github.com/xhyabunny/wloader/tree/main#instructions)
- [Using the JSON file](https://github.com/xhyabunny/wloader/tree/main#using-the-json-file) > [Main indexes](https://github.com/xhyabunny/wloader/tree/main#main-indexes) > [Head & Meta elements](https://github.com/xhyabunny/wloader/tree/main#head--meta-elements) > [The modifiers](https://github.com/xhyabunny/wloader/tree/main#the-modifiers) > [OnLoad animations](https://github.com/xhyabunny/wloader/tree/main#onload-animations)
- [Credits](https://github.com/xhyabunny/wloader/tree/main#credits)
Instructions
This package will come with 2 scripts.
``wloader.js``
``wloader.json``
แตหขแตแตหกหกสธ สธแตแต สฒแตหขแต แตหขแต แตสฐแต แดถหขแดผแดบ
๐น You can implement them on your code just drag & dropping these two into your project:
๐น And then accessing the JS script through HTML using the ```` tag in any part of your code:
```html
<script src="./path/to/wloader.js">
```
โ *You can also recycle this script globally in another HTML file just calling the script with its respective tag like shown above!*
โ *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.
You could even create an issue and suggest things to be added!*
## Using the JSON file
The 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
for your mind to be able to read it properly, so lets check out a few things about this JSON file.
Main indexes
The first thing you will realize when you check this json file, are both the ``html`` and ``css`` indexes:
```json
"html": "./index.html",
"css": "./index.css",
```
โ Those are to be replaced with the actual paths to both your *main css index* and your *main html index*
โ *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.*
Head & Meta elements
The head and meta values on your JSON file by default will will look like this:
```json
"head":
{
"title": "wloader",
"icon": "https://github-production-user-asset-6210df.s3.amazonaws.com/106491722/245261475-f581fca3-0ed6-4f8e-9385-1af112c3d46b.png",
"meta": [
"og:title \\ test"
]
},
```
This part of the JSON file contains the info about the Webpage icon and title.
Notice 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.
You 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"``).
The modifiers
Modifiers look something like this:
```json
"sample": "modifier1\\modifier2\\content"
```
They are ordered and we'll call them:
```json
"KEY": "TYPE_MODIFIER\\ATTRIBUTE_MODIFIER\\TARGET_VALUE"
```
Again notice how its separated by ``\\``
They are used to implement several features on each element of the HTML, for example, if we wanted a script to have the ``type`` modifier
we could just do it like this:
```json
"scripts": [
"type_name\\null\\.path/to/script.js"
]
```
If you don't need to use these modifiers you can just tag them out with ``null``.
And then for crossorigin attributes we can add them like this:
```json
"scripts": [
"type_name\\crossorigin\\.path/to/script.js"
]
```
As for defer attributes, *these aren't avaiable yet*, those may be added on the HTML file manually until further updates.
Now your script will load as a typed script, and with its crossorigin attribute.
โ *REMEMBER: MODIFIERS GO IN ORDER, YOU CAN'T PUT TYPE MODIFIERS INSIDE ATTRIBUTE MODIFIERS AND/OR THE OTHER WAY AROUND*
This also happens with links, but to resume it;
The first modifier changes the ``rel`` of the link you are implementing, this link appends to the ```` element of your document, for example:
- ``stylesheet``
- ``preconnect``
- ``etc``
The next modifier is attributes, same logic as scripts, for example:
- ``crossorigin``
The target value would be the ``content`` tag of this link, which is up to you.
OnLoad animations
These are animations that progressively transition the opacity of your whole page from 0 to 1.
You can change them here:
```json
"animationType": "fast",
```
It is set to ``fast`` by default, but you have many options:
- ``none`` (animation is disabled)
- ``faster``
- ``fast``
- ``smooth``
- ``smoother``
All of them define a faster or slower entering transition.
## Credits
- xhyabunny
- sanicbtw (recycled idea)