Liquid tool for translating FrontMater into script
HTML tags
- β¬οΈ Top of Document
- ποΈ Requirements
- β‘ Quick Start
- π Notes
- π Contributing
- π Attribution
- βοΈ Licensing
This repository depends upon Jekyll which is supported by GitHub Pages, further details about setup can be found from documentation published by the Jekyll maintainers regarding GitHub Pages.
This repository encourages the use of Git Submodules to track dependencies
Bash Variables
_module_name='includes-scripts'
_module_https_url="https://github.com/liquid-utilities/includes-scripts.git"
_module_base_dir='_includes/modules'
_module_path="${_module_base_dir}/${_module_name}"
Bash Submodule Commands
cd "<your-git-project-path>"
git checkout gh-pages
mkdir -vp "${_module_base_dir}"
git submodule add\
-b main --name "${_module_name}"\
"${_module_https_url}" "${_module_path}"
Suggested additions for your ReadMe.md
file so everyone has a good time
with submodules
Clone with the following to avoid incomplete downloads
git clone --recurse-submodules <url-for-your-project>
Update/upgrade submodules via
git submodule update --init --merge --recursive
Add an include statement,
{% include modules/includes-scripts/includes-scripts.html %}
,
within the chosen Layout file, for example if utilizing the
minima/jekyll
theme modifications may be
similar to...
_includes/head.html
{% comment %}
---
authors: [ Jekyll ]
version: 2.5.1
license: MIT
url: https://github.com/jekyll/minima/
---
{% endcomment %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
{%- feed_meta -%}
{%- include custom-head.html -%}
{%- include modules/includes-scripts/includes-scripts.html -%}
</head>
git add .gitmodules
git add "${_module_path}"
## Add any changed files too
git commit -F- <<'EOF'
:heavy_plus_sign: Adds `liquid-utilities/includes-scripts#1` submodule
**Additions**
- `.gitmodules`, tracks submodules AKA Git within Git _fanciness_
- `README.md`, updates installation and updating guidance
- `_modules_/includes-scripts`, Liquid tool for translating FrontMater into `script` HTML tags
EOF
git push origin gh-pages
π Excellent π your project is now ready to begin unitizing code from this repository!
Example post
---
title: Post title
description: Something about some thing
scripts:
- src: assets/js/lib/tools.js
defer: true
- src: assets/js/main.js
defer: true
---
... Post content...
Example output
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ... -->
<script src="/project-name/assets/js/lib/tools.js" defer></script>
<script src="/project-name/assets/js/main.js" defer></script>
</head>
This repository may not be feature complete and/or fully functional, Pull Requests that add features or fix bugs are certainly welcomed.
Currently the following key/value configurations may be defined per-page/post;
-
src
relative path or absolute URL to script -
type
defaulttext/javascript
may be MIME type,module
,importmap
, or custom data-block
integrity
list of hashes that client may utilize to verify script integrity
-
fetchpriority
defaultauto
(in most clients), may be explicitly defined tohigh
,low
, orauto
to hint to browser the relative priority to use when fetching an external script -
charset
(deprecated) modern documents should use UTF-8 by default -
language
(deprecated) thetype
attribute should be used instead -
crossorigin
allows/restricts CORS data sharing, suchwindow.onerror
, for externally linked scripts. May be set toanonymous
oruse-credentials
-
referrerpolicy
defines headers to send when fetching script, may beno-referrer
,no-referrer-when-downgrade
,origin
,same-origin
,strict-origin
,strict-origin-when-cross-origin
(default),unsafe-url
-
async
useful when order of download/execution does not need to be deterministic, because it allows browser to download scripts in parallel
defer
useful for downloading scripts in parallel, but executing after document has been parsed and before firingDOMContentLoaded
event. Similar toasync
, as far as download behavior, but execution order is determined by order defined within document.
Example of all FrontMater definable attributes
scripts:
- src: assets/js/main.js
type: text/javascript
blocking:
- render
integrity:
- sha256-9b8090de7cb40209b9819469e2a90a1f3966cd6035ec5969de81c97dbb068d36
- sha512-9397574ef73b0d2f46f210400c5120cc0bc61b3b9d2bcab6ef1906828b83a0722cd6d2e2f8b4c8c71e304845df29d154bbdc4ce813459487eb875766f6109d9a
fetchpriority: high
charset: UTF-8
language: text/javascript
crossorigin: anonymous
referrerpolicy: no-referrer
defer: true
async: false
Options for contributing to includes-scripts and liquid-utilities
Start making a Fork of this repository to an account that you have write permissions for.
- Add remote for fork URL. The URL syntax is
[email protected]:<NAME>/<REPO>.git
...
cd ~/git/hub/liquid-utilities/includes-scripts
git remote add fork [email protected]:<NAME>/includes-scripts.git
- Commit your changes and push to your fork, eg. to fix an issue...
cd ~/git/hub/liquid-utilities/includes-scripts
git commit -F- <<'EOF'
:bug: Fixes #42 Issue
**Edits**
- `<SCRIPT-NAME>` script, fixes some bug reported in issue
EOF
git push fork main
Note, the
-u
option may be used to setfork
as the default remote, eg.git push -u fork main
however, this will also default thefork
remote for pulling from too! Meaning that pulling updates fromorigin
must be done explicitly, eg.git pull origin main
- Then on GitHub submit a Pull Request through the Web-UI, the URL syntax is
https://github.com/<NAME>/<REPO>/pull/new/<BRANCH>
Note; to decrease the chances of your Pull Request needing modifications before being accepted, please check the dot-github repository for detailed contributing guidelines.
Thanks for even considering it!
Via Liberapay you may
on a
repeating basis.
Regardless of if you're able to financially support projects such as includes-scripts that liquid-utilities maintains, please consider sharing projects that are useful with others, because one of the goals of maintaining Open Source repositories is to provide value to the community.
Liquid tool for translating FrontMater into `script` HTML tags
Copyright (C) 2023 S0AndS0
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3 of the License.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For further details review full length version of AGPL-3.0 License.