Skip to content

liquid-utilities/includes-font

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Includes Font

Builds link elements for loading fonts in a respectful fashion

Byte size of Includes Font Open Issues Open Pull Requests Latest commits



Requirements

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.


Quick Start

This repository encourages the use of Git Submodules to track dependencies

Bash Variables

_module_name='includes-font'
_module_https_url="https://github.com/liquid-utilities/includes-font.git"
_module_base_dir='_layouts/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}"

Your ReadMe File

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

Commit and Push

git add .gitmodules
git add "${_module_path}"


## Add any changed files too


git commit -F- <<'EOF'
:heavy_plus_sign: Adds `liquid-utilities/includes-font#1` submodule



**Additions**


- `.gitmodules`, tracks submodules AKA Git within Git _fanciness_

- `README.md`, updates installation and updating guidance

- `_modules_/includes-font`, Builds link elements for loading fonts in a respectful fashion
EOF


git push origin gh-pages

πŸŽ‰ Excellent πŸŽ‰ your project is now ready to begin unitizing code from this repository!


Usage

How to utilize this repository


Example YAML/FrontMatter

fonts_list:
  - href: assets/fonts/custom-font.css
    preconnect: /
    filter: relative_url

  - href: https://fonts.googleapis.com/css2?family=Merriweather&display=swap
    preconnect: https://fonts.gstatic.com

Example Layout

page.html (snip)

<!DOCTYPE html>
<html lang="en">
  <head>
    {% assign fonts_list = page.fonts_list
                         | default: site.fonts_list
                         | default: layout.fonts_list %}

    {%- for font in fonts_list -%}
      {% include _includes/modules/include-font/font.html
                 href=font.href
                 preconnect=font.preconnect
                 filter=font.filter %}
    {%- endfor -%}
  </head>
</html>

Example Output

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect"
          href="/project-name"/>

    <link rel="preload"
          as="style"
          href="/project-name/assets/fonts/custom-font.css"/>

    <link rel="stylesheet"
          href="/project-name/assets/fonts/custom-font.css"
          media="print"
          onload="this.media='all'"/>

    <noscript>
      <link rel="stylesheet"
            href="/project-name/assets/fonts/custom-font.css"/>
    </noscript>


    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin/>

    <link rel="preload"
          as="style"
          href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"/>

    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"
          media="print"
          onload="this.media='all'"/>

    <noscript>
      <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"/>
    </noscript>
  </head>
</html>

API

Documentation for classes, methods, parameters, and custom types/data-structures


include.href

Required, path or URL to font CSS configurations

Remote Example

https://fonts.googleapis.com/css2?family=Merriweather&display=swap

Self Hosted Example

/project-name/assets/fonts/custom-font.css

include.preconnect

Recommend, domain or root path of site hosting CSS font configurations

Remote Example

https://fonts.googleapis.com/

Self Hosted Example

/project-name/

include.filter

Optional, may be absolute_url or relative_url, useful for self hosted CSS font configurations.

Note, when not defined crossorigin is inserted within link using preconnect


Notes

This repository may not be feature complete and/or fully functional, Pull Requests that add features or fix bugs are certainly welcomed.


Contributing

Options for contributing to includes-font and liquid-utilities


Forking

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 git@github.com:<NAME>/<REPO>.git...
cd ~/git/hub/liquid-utilities/includes-font

git remote add fork git@github.com:<NAME>/includes-font.git
  • Commit your changes and push to your fork, eg. to fix an issue...
cd ~/git/hub/liquid-utilities/includes-font


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 set fork as the default remote, eg. git push -u fork main however, this will also default the fork remote for pulling from too! Meaning that pulling updates from origin 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.


Sponsor

Thanks for even considering it!

Via Liberapay you may sponsor__shields_io__liberapay on a repeating basis.

Regardless of if you're able to financially support projects such as includes-font 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.


Attribution


License

Builds link elements for loading fonts in a respectful fashion
Copyright (C) 2021 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.