Skip to content

liquid-utilities/includes-hcard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

7 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Includes Hcard

Liquid utility that builds HCard compatible HTML

Byte size of Includes Hcard Open Issues Open Pull Requests Latest commits includes-hcard Demos

main


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-hcard'
_module_https_url="https://github.com/liquid-utilities/includes-hcard.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}"

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

Your Layout File

Add an include statement, {% include modules/includes-hcard/hcard.html %}, within the chosen Layout file, for example if utilizing the minima/jekyll theme modifications may be similar to...

_layouts/default.html

---
layout: default
license: MIT
source: https://raw.githubusercontent.com/jekyll/minima/v2.0.0/_layouts/default.html
---
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {% include head.html %}

  <body>

    {% include header.html %}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}

        {% if page.hcard %}
          <div class="contacts">
            {% include modules/includes-hcard/hcard.html %}
          </div>
        {% endif %}
      </div>
    </main>

    {% include footer.html %}

  </body>

</html>

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-hcard#1` submodule



**Adds**


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

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

- `_modules_/includes-hcard`, Liquid utility that builds HCard compatible HTML

- `_layouts/default.html`, modified default layout from `jekyll/minima` theme
EOF


git push origin gh-pages

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


Usage

First option, utilize FrontMatter configurations for the selected layout...

_posts/2020-07-05-frontmatter-hcard

---
layout: post
date: 2020-07-05 10:44:25 -0700
title: FrontMatter HCard
excerpt: Example of using FrontMatter to define HCard content

hcard:
  organization: Distribution
  name: Jayne Cobb

  # email_type: office
  # email_address: name@example.com
  emails:
    - type: office
      address: name@example.com

  # phone_type: cell
  # phone_number: 555-123-4567
  phone_numbers:
    - type: cell
      number: 555-123-4567

    - type: office
      number: 555-987-6543

  address:
    street: 418 Code St.
    extended: Suite 503       ## AKA suite, apartment, etc.
    country_code: USA
    country_name: United States of America
    locality: Server Request  ## AKA city
    region: ZZ                ## AKA state
    postal_code: 12345        ## AKA zip

  # link_label: 'example'
  # link_url: https://example.com
  links:
    - label: 'example one'
      url: https://example.com

    - label: 'example two'
      url: https://example.com

    - label: 'example three'
      url: https://example.com
---



... Post content...

Above commented FrontMatter configurations are able to be used instead of list/object like blocks. A live example of output from using FrontMatter to define HCard content is available thanks to GitHub Pages.

Either name or organization configurations are required, all other FrontMatter configurations are optional.


Second option, include the hcard.html file within an individual post or page using include named parameters instead of FrontMatter...

_posts/2020-07-05-includes-hcard.md

---
layout: post
date: 2020-07-05 10:44:25 -0700
title: Includes HCard
excerpt: Example of using `include` keyword to define HCard content
---



... Post content...



{% include modules/includes-hcard/hcard.html name='Jayne Cobb'
                                             organization='Distribution'
                                             phone_type='cell'
                                             phone_number='555-123-4567'
                                             email_type='office'
                                             email_address='name@example.com'
                                             address_street='418 Code St.'
                                             address_extended='Suite 503'
                                             address_locality='Server Request'
                                             address_postal_code='12345'
                                             address_region='ZZ'
                                             address_country_code='USA'
                                             address_country_name='United States of America'
                                             link_label='Web Site'
                                             link_url='https://example.com' %}

Notice, new-lines between parameters in above example are for readability and may need to be replaced with spaces. A live example of output from using include keyword to define HCard content is available thanks to GitHub Pages.

Example Output (snip)

<div id="hcard-jayne-cobb" class="h-card vcard">
  <div class="p-org org">Distribution</div>
  <div class="p-name fn">Jayne Cobb</div>

  <div class="p-tel tel">
    <span class="type">cell</span>: <a class="value">555-123-4567</a>
  </div>

  <div class="u-email email">
    <span class="type">office</span>: <a class="value" href="mailto:name@example.com">name@example.com</a>
  </div>

  <div class="p-adr adr">
    <span class="p-street-address street-address">418 Code St.</span>
    <span class="p-extended-address extended-address">Suite 503</span>
    <span class="p-locality locality">Server Request</span>
    <span class="p-region region">ZZ</span>
    <span class="p-postal-code postal-code">12345</span>
    <span class="p-country-name usa" title="United States of America">USA</span>
  </div>

  <div>
    <a class="url fn org" href="https://example.com">Web Site</a>: <small>https://example.com</small>
  </div>
</div>

Notes

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

  • Fork 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-hcard

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


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 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.


Attribution


License

Liquid utility that builds HCard compatible HTML
Copyright (C) 2020 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.